本記事は、ShakuroのRita Kind-Envy氏による「UI/UX Design Trends Of 2022 You Need To Catch Up To」（2021年11月15日公開）の和訳を、著者の許可を得て掲載しているものです。 はじめに 2021年は2020年よりも良い年でしたか？UI/UXデザインに限って言えば、そうです。新しい素晴らしいウェブサイトやアプリが生まれ、グラフィックデザイナー向けの新しいソフトウェアがリリースされ、創造性が泉のように湧き出ているようでした。 デザイナーが在宅を余儀なくされると、より多くのものを生み出し、すでに存在するものについて考える時間ができます。退屈はアーティストの最大の敵で、その解消のために努力します。 世界の他の分野では、2021年は非常に困難な年でした。世界最年長の猫は34歳の誕生日を迎えました。うーん、そう、良かったのはそれだ

試した方がいいGoogle Chrome experiments はじめに Chromeデベロッパーツールは、ウェブ開発者間で最も使われているツールの1つです。しかし、ほとんどの開発者が知らない素晴らしい機能があります。 この記事では、すべての開発者が試すべきChromeデベロッパーツールの実験的機能トップ5について説明します。 1. CSS Overview - すべてのスタイルの詳細情報を表示する CSS Overviewは、ウェブページで使われているすべてのスタイルの概要を表示します。 この機能は、色、フォント、メディアクエリ、未使用の宣言に関する詳細情報を含んでいます。UIにCSSの修正を加える時に便利で、カラーピッカーなどのサードパーティツールを使う必要がなくなります。 ChromeデベロッパーツールのCSS Overviewタブ この機能を有効にするには Google Chro

より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変

Pythonで作れる面白いアイディアとプロジェクトのリスト Photo by Andrea Piacquadio from Pexels はじめに 「Pythonをコーディングする喜びは、少しのクリアなコードで沢山のアクションを表現する、短く簡潔で読みやすいクラスを見ることであり、読者を退屈させる、膨大なつまらないコードではない。」Guido van Rossum Pythonは世界で最も使われているプログラミング言語の1つで、その理由は、業界のさまざまな分野に適した汎用性の高さにあると言えます。Pythonを使えば、ウェブだけでなく、デスクトップやコマンドラインでもプログラムを開発できます。Pythonは、学生から中級者、上級者、プロまで、さまざまなスキルレベルのプログラマに適しています。しかし、どんなプログラミング言語も常に学習が必要であり、Pythonも同様です。 もし本当に深い実用

本記事は、Simon Holdorf氏による「9 Popular GitHub Repos For Every Web Developer」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ10選 便利なツール、参考になる例など はじめに GitHubは、最近の（ウェブ）開発に関連するすべてのワンストップショップです。フレームワーク、デモ、あらゆる種類のコレクションなど、GitHubで見つけられないものはないでしょう。しかし、この膨大な量が問題です。あまりにも多くのレポジトリがあるので、おそらく聞いたことのないクールなものがあります。 そこで今回も、知っておくべき最も人気のGitHubリポジトリを紹介することにします。各リポジトリには少なくとも30,000個の星が付いています。 1. Realwor

機械学習のためのすごいPythonライブラリ Image by Free-Photos from Pixabay はじめに Pythonは機械学習に不可欠な要素で、ライブラリは作業をより単純にしてくれます。最近、MLのプロジェクトに取り組んでいる時に、素晴らしいライブラリを6つ見つけました。ここでは、それを紹介します。 1. clean-text clean-textは本当に素晴らしいライブラリで、スクレイピングやソーシャルメディアデータを処理する時にまず使うべきものです。最も素晴らしい点は、データをクリーンアップするために長く凝ったコードや正規表現を必要としないことです。 いくつかの例を見てみましょう。 インストール #Importing the clean text library from cleantext import clean # Sample text text = """

Photo by Jexo on Unsplash はじめに Pythonは、主にそのシンプルさと習得のしやすさから、最近では非常に人気があります。 データサイエンスや機械学習、ウェブ開発、スクリプト記述、自動化など、幅広い分野で利用することができます。 この記事はかなり長いので、すぐ始めましょう。 1. forループのelse条件 今までにPythonのあらゆるコードを見てきたとしても、次のfor-elseは見逃している可能性があります。私も数週間前に初めて見ました。 これはリストを繰り返すfor-elseメソッドで、リストを反復処理しているにもかかわらずelse条件もあるという、非常に珍しいものです。これは、JavaやRuby、JavaScriptなどの他のプログラミング言語では見られません。 実際にどのようなものか、例を見てみましょう。例えば、リストに奇数がないか調べているとします。

Photo by Jexo on Unsplash はじめに Pythonは、主にそのシンプルさと習得のしやすさから、最近では非常に人気があります。 データサイエンスや機械学習、ウェブ開発、スクリプト記述、自動化など、幅広い分野で利用することができます。 この記事はかなり長いので、すぐ始めましょう。 50. filter()は新しいオブジェクトを返す my_list = [1, 2, 3, 4] odd = filter(lambda x: x % 2 == 1, my_list) print(list(odd)) # [1, 3] print(my_list) # [1, 2, 3, 4]

完璧なフォントを探すのはこれで終わり。セリフ系、サンセリフ系などを厳選しました！ はじめに 毎年春になると、私は自分のツールセットとリソースを整理します。使わなかったり必要なかったりするフォントやアイコン、プラグインをすべて断捨離します。とても爽快なので、皆さんにもぜひやって欲しいです！ 何年もお気に入りのものを使ってきましたが、同時に、新しいものを試すのもいいものです。特にフォントは！好きな書体があっても、時々新しいものを使ってみるのも好きです。 完璧なフォントを探すのは疲れるでしょうし、選択肢もたくさんありますよね？最近、徹底的に調査したので、厳選したリストとしてまとめることにしました。このリストがあれば、フォント探しが少しは速くなると思いますよ。 2つのことを明確にしましょう。 デザイナーとして何十種類ものフォントが必要ですか？🤔 いいえ！90％は、3つの書体しか使いません。プロジ

素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試

最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ

本記事は、Simon Holdorf氏による「10 Extraordinary GitHub Repos for All Developers」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ9選 面接のリソース、build your own X、優れたパブリックAPIのリストなど Photo by Vishnu R Nair on Unsplash はじめに GitHubは、あらゆる種類の技術、フレームワーク、ライブラリ、コレクションなどを共有するためのNo.1プラットフォームです。しかし、その巨大さゆえに、最も有用なリポジトリを探すのが難しいという問題もあります。そこで私は、すべてのソフトウェアエンジニアに大きな価値のある、素晴らしいリポジトリ10選を作ることにしました。すべてに多くのGitH

より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが無料です。 新しいツールやより簡単な方法が見つかり、面倒で複雑なタスクを実行できれば、誰にとっても、特に開発者には嬉しいことです。 でも、より良く賢い方法があり、予想外の方法で時間を節約できることを知らない場合もあります。 この2年間で見つけたGitHubの素晴らしいリソースは、私をかなり助けてくれました。これらのうちいくつかは、その必要性さえ知りませんでした。 そこで、あなたもおそらく必要になるGitHubリポジトリのリストを作りました。 1. 33 JS concepts ソース 私はプログラミングをJavaで始め、その後

開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で

本記事は、Simon Holdorf氏による「10 Inspiring Ideas for Your Next Front-End Project」（2021年1月5日公開）の和訳を、著者の許可を得て掲載しているものです。 ご好評いただいている記事「2020年にフロントエンド開発者が作りたい9つのプロジェクト」と、その2021年改訂版「ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）」の続編です。 Photo by NeONBRAND on Unsplash はじめに ウェブ技術と創造性を組み合わせることで、驚くべきものが作れます。この記事で紹介するものはすべて、JavaScript、HTML、CSSだけで作成されています。Photoshopなどのツールは一切使用しておらず、ブラウザ上ですべて完璧に動作します。 ここで紹介するものを調べて試すだけでも楽しいですが、す

私が愛用するオンライン開発ツール インターネット上には、フロントエンド開発者の生活を楽にしてくれる素晴らしいツールが沢山あります。この記事では、私が開発の仕事で頻繁に使っている11のツールについて簡単に説明します。 1. CanIUse Web APIが特定のブラウザで互換性があるのか、モバイルブラウザで使用できるのか、分からないことはありませんか？このオンラインツールを使えば、ブラウザの互換性についてWeb APIを簡単にテストできます。 Can I use―HTML5、CSS3などの対応表。 「Can I use」は、デスクトップとモバイルにおけるフロントエンドWebテクノロジーを支援する、最新のブラウザ対応表を提供します。 caniuse.com Web Share APIのnavigator.share(...)に対応しているブラウザとバージョンを知りたいとします。 結果を見てくだ

こちらの記事は、Daniel Miessler 氏により2020年03月に公開された『 Learn vim For the Last Time: A Tutorial and Primer 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 Vim を学ぶ上での問題は、それが難しいということではなく、ずっとやり続けなければならないということです。このガイドでは、そのサイクルを断ち切り、今度こそ完璧にVim学習を完了できることをゴールにしています。 Vim 学習のリファレンスはオンラインで何十件もありますが、ほとんどのものは、すぐに超絶技巧を要求するか、あるいは基本的なことだけ触れてあまり深く踏み込まないかのどちらかです。 このチュートリアルは、まずvim の思想を理解すること（これは永遠に皆さんの心の中に残ります）から始まり、現在お使いのエディタのスキルを超越して、VI

こちらの記事は、Indrek Lasn 氏により2019年 11月に公開された『 Here Are 11 Console Commands Every Developer Should Know 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 コマンドラインをうまく使えば、いくつかのありふれたタスクを自動化し、よりスムーズに処理を実行することが可能になり、日々の生産活動をより効率化できます。GUI上でクリック操作する代わりに、いくつかのコマンドを実行するだけでジョブを完了させることが可能です。 Unix shell はUnixライクなOS向けにコマンドラインユーザーインターフェースを提供する、コマンドラインインタプリター、またはshellです。shellはインタラクティブなコマンド言語かつスクリプト言語でもあり、OSがshellスクリプトを用いてシステムの実行を制御

こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク

こちらの記事は、Indrek Lasn 氏により2019年 7月に公開された『 9 Useful Browser Extensions for Developers — 2020 edition 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek Web開発者として、私達はブラウザの拡張機能を存分に利用することができます。ブラウザの拡張機能は、作業環境とコーディングの生産性の向上にとても役立ちます。 2020年に近づき、数多くの新しい拡張機能が登場しました。そこでWeb開発者にとって最も便利な拡張機能を紹介します。 「私がかなたを見渡せたのだとしたら、それは巨人の肩の上に乗っていたからです。」 アイザック・ニュートン Refined GitHub Refined GitHubはGitHub