フロントエンド道場: 開発者のスキルを訓練するプロジェクト (新規 5 件 + 旧来 43 件)

1. 概念のクローン

Notion アプリケーションは多くの人に愛されており、ワークフローの最適化、ドキュメントの操作、タスクのスケジュール設定、デバイス間でのデータの同期が可能です。

www.notion.so

Notion クローンを作成することで学べること:

• HTML ドラッグ アンド ドロップ API。 ユーザーは「マウスで掴む」ことができます ドラッグ可能 要素を選択して配置します ドロップ可能な ゾーン。
• パソコンとスマートフォンの間でリアルタイムにデータを同期する方法。
• ユーザーがレコードを作成、読み取り、更新、削除できるようにすることで、CRUD スキルをトレーニングします。

この記事は EDISON Software のサポートを受けて翻訳されました。 アプリケーションやウェブサイトを開発しますと スタートアップに投資します.

2. Repl.it クローン

Repl.it は、リアルタイムで共同コード編集を行うためのツールです。 JavaScript、Python、Go などの複数の言語を選択し、ブラウザーでコードを直接実行できます。 簡単なデモやコードのインタビューに非常に役立ちます。

繰り返します

Repl.it クローンを作成することで学べること:

• ブラウザー (クライアント側) でコード (サーバー側) を実行および実行する方法。
• 入力データ（ソースコード）を読み込み、実行結果を表示します。
• Web 上にファイルとフォルダーを作成し、結果を保存する方法。
• コード構文を強調表示する方法。

3. Google フォトのクローン

Google フォトは、写真を保存および共有するためのサービスです。
最新の写真アプリケーションはどれも、アップロードやトリミングなどの基本的な機能を実行できます。人々は自分のアバターを作成して猫の写真を共有したいと考えているため、画像を操作できる必要があります。

www.google.com/photos/about

Google フォトのクローンを作成するとわかること:

• 携帯電話、タブレット、ラップトップ、さらには巨大なテレビ画面上でレスポンシブな画像を作成する方法。
• 画像のアップロード、特に大きな画像 (>1MB) や一括アップロードを処理する方法。
• 画像ファイルを処理し、サムネイル用またはギャラリーを開くときに写真をトリミングおよびサイズ変更します。
• ボーナス： 画像をクラウドまたはローカル データベースに保存する方法。

4.Gifskyクローン

ギフスキー 関数を使用してビデオをGIFに変換しますpng量子 効率的なクロスフレームパレットと時間的アンチエイリアスを実現します。 結果は、フレームごとに数千の花が含まれる GIF になります。

gif.スキー

Gifski クローンを作成することで学べること:

• ビデオ ファイル (.mp4 から .gif) を変換する方法。
• ドラッグ アンド ドロップ HTML API の使用方法。
• 画像の最適化と処理の仕組み。

注意： Gifsky はオープンソース プロジェクトです そしてGitHub上にあります！

5. 暗号通貨レートの監視

React Native 暗号通貨トラッカー

通貨レートトラッカーを作成することで学べること:

• API を操作し、API からリモートでデータを受信する方法。
• データを一覧で表示する方法です。
• ボーナス： 興味があれば最近書きました 価格トラッカーの作成に関するチュートリアル React Native を使用した暗号通貨の場合。

注意： ここで GitHub サンプル リポジトリ.

過去の出版物から厳選したプロジェクト。

層

www.reddit.com/r/layer

Layer は、誰もが共有の「ボード」上にピクセルを描くことができるコミュニティです。 元のアイデアは Reddit で生まれました。 r/Layer コミュニティは、共有された創造性の比喩であり、誰もがクリエイターになって共通の目的に貢献できるということです。

独自のレイヤー プロジェクトを作成するときに学ぶこと:

• JavaScript キャンバスの仕組み キャンバスの操作方法を知ることは、多くのアプリケーションにとって重要なスキルです。
• ユーザー権限を調整する方法。 各ユーザーはログインせずに 15 分ごとに XNUMX ピクセルを描画できます。
• Cookie セッションを作成します。

スクワッシュ

squoosh.app

Squoosh は、多くの高度なオプションを備えた画像圧縮アプリケーションです。

GIF 20MB

独自のバージョンの Squoosh を作成することで、次のことを学びます。

• 画像サイズの操作方法
• Drag'n'Drop API の基本を学ぶ
• API とイベント リスナーがどのように機能するかを理解する
• ファイルをアップロードおよびエクスポートする方法

注意： 画像圧縮プログラムはローカルにあります。 追加のデータをサーバーに送信する必要はありません。 コンプレッサーは自宅に置くことも、サーバーで使用することもできます。

電卓

来て？ 真剣に？ 電卓？ そう、まさに電卓です。 数学演算の基本とそれらがどのように連携するかを理解することは、アプリケーションを簡素化するために重要なスキルです。 遅かれ早かれ数字に対処しなければならなくなるので、早ければ早いほど良いのです。

jarodburchill.github.io/CalculatorReactApp

独自の計算機を作成することで、次のことを学びます。

• 数値と数学演算を扱う
• イベントリスナーAPIを使って練習する
• 要素を配置する方法、スタイルを理解する方法

クローラー（検索エンジン）

誰もが検索エンジンを使用したことがありますが、独自の検索エンジンを作成してみてはいかがでしょうか。 情報を検索するにはクローラーが必要です。 誰もが毎日それらを使用しており、このテクノロジーと専門家に対する需要は時間の経過とともに高まる一方です。

Google検索エンジン

独自の検索エンジンを作成することで学べること:

• クローラーの仕組み
• サイトにインデックスを付ける方法、および評価と評判によってサイトをランク付けする方法
• インデックス付きサイトをデータベースに保存する方法とデータベースを操作する方法

音楽プレーヤー（Spotify、Apple Music）

誰もが音楽を聴きます。それはまさに私たちの生活の不可欠な部分です。 最新の音楽ストリーミング プラットフォームの基本的な仕組みをより深く理解するために、音楽プレーヤーを作成してみましょう。

Spotifyは

独自の音楽ストリーミング プラットフォームを作成することで学べること:

• API を使用する方法。 Spotify または Apple Music の API を使用する
• 次/前のトラックを再生、一時停止、巻き戻しする方法
• 音量を変更する方法
• ユーザールーティングとブラウザ履歴を管理する方法

Reactを使った動画検索アプリ（フック付き）

まず始められるのは、React を使用して映画検索アプリを作成することです。 以下は、最終的なアプリケーションがどのようになるかを示すイメージです。

何を学びますか
このアプリを構築すると、比較的新しい Hooks API を使用して React スキルを向上させることができます。 サンプル プロジェクトでは、React コンポーネント、多数のフック、外部 API、そしてもちろんいくつかの CSS スタイルを使用します。

技術スタックと機能

• フックに反応する
• 作成-反応-アプリ
• Jsx
• CSS

これらのプロジェクトは、クラスを使用せずに、機能的な React への完璧なエントリ ポイントを提供し、2020 年に間違いなく役立ちます。 発見できる サンプルプロジェクトはこちら。 指示に従うか、独自に作成してください。

Vue を使用したチャット アプリ

あなたができるもう XNUMX つの素晴らしいプロジェクトは、私のお気に入りの JavaScript ライブラリである VueJS を使用してチャット アプリを作成することです。 アプリケーションは次のようになります。

何を学びますか
このチュートリアルでは、コンポーネントの作成、状態の処理、ルートの作成、サードパーティのサービスへの接続、さらには認証の処理など、Vue アプリを最初から作成する方法を学びます。

技術スタックと機能

• ヴュー
• ヴエックス
• Vueルーター
• CLIビュー
• プッシャー
• CSS

これは、Vue を使い始めたり、2020 年に開発に取り組むために既存のスキルを向上させるのに最適なプロジェクトです。 発見できる チュートリアルはこちら.

Angular 8 を使用した美しい天気アプリ

この例は、Angular 8 を使用して美しい天気アプリを作成するのに役立ちます。

何を学びますか
このプロジェクトでは、設計から開発、すぐに展開できるアプリケーションに至るまで、アプリケーションをゼロから構築するための貴重なスキルを学びます。

技術スタックと機能

• 角度のある8
• ファイアベース
• サーバーサイドレンダリング
• グリッドとフレックスボックスを使用した CSS
• モバイルフレンドリーと適応性
• Темныйрежим
• 美しいインターフェース

この包括的なプロジェクトで私が本当に気に入っているのは、物事を孤立して研究しないことです。 代わりに、設計から最終展開までの開発プロセス全体を学びます。

Svelte を使用した ToDo アプリケーション

Svelte はコンポーネントベースのアプローチの新参者のようなもので、少なくとも React、Vue、Angular に似ています。 そして、これは2020年に最も注目されている新製品のXNUMXつです。

To Do アプリは必ずしも最もホットなトピックではありませんが、Svelte スキルを磨くのに非常に役立ちます。 次のようになります。

何を学びますか
このチュートリアルでは、Svelte 3 を使用してアプリケーションを作成する方法を最初から最後まで説明します。 コンポーネント、スタイル設定、イベント ハンドラーを使用します。

技術スタックと機能

• スヴェルト 3
• コンポーネント
• CSS を使用したスタイル設定
• ES6構文

優れた Svelte スターター プロジェクトはあまりないので、 これは始めるのに良い選択肢です.

Next.js を使用した E コマース アプリ

Next.js は、すぐに使用できるサーバー側レンダリングをサポートする React アプリケーションを構築するための最も人気のあるフレームワークです。

このプロジェクトでは、次のような e コマース アプリケーションを作成する方法を示します。

何を学びますか
このプロジェクトでは、Next.js を使用して開発する方法、つまり新しいページとコンポーネントを作成し、データを抽出し、スタイルを設定して Next アプリケーションをデプロイする方法を学びます。

技術スタックと機能

• Next.js
• コンポーネントとページ
• データサンプリング
• スタイリング
• プロジェクトの展開
• SSRとSPA

新しいことを学ぶために、e コマース アプリのような実世界の例があることは常に素晴らしいことです。 あなたはできる ここでチュートリアルを見つけてください.

Nuxt.jsを使用した本格的な多言語ブログ

Nuxt.js は Vue 用であり、Next.js は React 用です。サーバーサイド レンダリングとシングル ページ アプリケーションの機能を組み合わせる優れたフレームワークです。
作成できる最終的なアプリケーションは次のようになります。

何を学びますか

このサンプル プロジェクトでは、初期セットアップから最終展開まで、Nuxt.js を使用して完全な Web サイトを作成する方法を学びます。

ページやコンポーネント、SCSS によるスタイル設定など、Nuxt が提供する優れた機能の多くを利用しています。

技術スタックと機能

• Nuxt.js
• コンポーネントとページ
• ストーリーブロックモジュール
• ヌタウナギ
• 状態管理のための Vuex
• スタイリング用SCSS
• Nuxt ミドルウェア

これは本当に素晴らしいプロジェクトです、これには多くの優れた Nuxt.js 機能が含まれています。 私は個人的に Nuxt での作業が大好きなので、優れた Vue 開発者にもなれるので、ぜひ試してみてください。

ギャツビーのブログ

Gatsby は、React と GraphQL を使用した優れた静的サイト ジェネレーターです。 これがプロジェクトの結果です:

何を学びますか

このチュートリアルでは、Gatsby を使用して、React と GraphQL を使用して独自の記事を書くために使用するブログを作成する方法を学びます。

技術スタックと機能

• ギャツビー
• 反応する
• GraphQL
• プラグインとテーマ
• MDX/マークダウン
• ブートストラップCSS
• テンプレート

ブログを始めたいと思ったことがあるなら、 これは素晴らしい例です ReactとGraphQLを使った作り方について。

WordPress が悪い選択だと言っているわけではありませんが、Gatsby を使用すると、React を使用して高性能の Web サイトを構築できます。これは素晴らしい組み合わせです。

Gridsome のブログ

Gridsome for Vue... さて、これはすでに Next/Nuxt で実現しました。
しかし、それはグリッドサムとギャツビーにも当てはまります。 どちらもデータ層として GraphQL を使用しますが、Gridsome は VueJS を使用します。 これは、素晴らしいブログの作成に役立つ素晴らしい静的サイト ジェネレーターでもあります。

何を学びますか

このプロジェクトでは、Gridsome、GraphQL、Markdown を使い始めるための簡単なブログを作成する方法を説明します。 Netlify を介してアプリケーションをデプロイする方法についても説明します。

技術スタックと機能

• グリッドサム
• ヴュー
• GraphQL
• 値下げ
• Netlify

これは確かに最も包括的なチュートリアルではありませんが、Gridsome の基本概念と Markdown は良い出発点かもしれません.

Quasarを使用したSoundCloud風のオーディオプレーヤー

Quasar は、モバイル アプリケーションの作成に使用できるもう XNUMX つの Vue フレームワークです。 このプロジェクトでは、次のようなオーディオ プレーヤー アプリケーションを作成します。

何を学びますか

他のプロジェクトは主に Web アプリケーションに焦点を当てていますが、このプロジェクトでは、Vue と Quasar フレームワークを使用してモバイル アプリケーションを作成する方法を示します。
Android Studio/Xcode が設定された状態で Cordova がすでに実行されているはずです。 そうでない場合は、マニュアルには Quasar Web サイトへのリンクがあり、すべてのセットアップ方法が説明されています。

技術スタックと機能

• クエーサー
• ヴュー
• コー​​ドバ
• ウェーブサーファー
• UIコンポーネント

小規模プロジェクト、モバイル アプリケーションを作成するための Quasar の機能を示します。

クレジットカードフォーム

スムーズで楽しいマイクロインタラクションを備えたクールなクレジット カードの形状。 番号のフォーマット、検証、カード タイプの自動検出が含まれます。 Vue.js 上に構築されており、完全に応答性も優れています。 (ご覧のとおり ここで.)

クレジットカードフォーム

学べる内容:

• フォームの処理と検証
• イベントの処理 (フィールド変更時など)
• ページ上の要素、特にフォームの上部に表示されるクレジット カード情報を表示および配置する方法を理解する

棒グラフ

ヒストグラムは、表す値に比例した高さまたは長さの長方形の棒でカテゴリデータを表すチャートまたはグラフです。

垂直方向または水平方向に適用できます。 縦棒グラフは折れ線グラフと呼ばれることもあります。

学べる内容:

• 構造化されたわかりやすい方法でデータを表示する
• さらに: 要素の使用方法を学習します。 canvas そしてそれを使って要素を描画する方法

それは 世界の人口データを見つけることができます。 年ごとに並べてあります。

Twitterハートアニメーション

2016 年に、Twitter はこの素晴らしいアニメーションをツイートに導入しました。 2019年現在でもこのパーツは残っているので、自分で作ってみてはいかがでしょうか？

学べる内容:

• CSS 属性を操作する keyframes
• HTML要素の操作とアニメーション化
• JavaScript、HTML、CSSを組み合わせる

検索可能な GitHub リポジトリ

ここには特別なことは何もありません。GitHub リポジトリは単なる美化されたリストです。
目的は、リポジトリを表示し、ユーザーがリポジトリをフィルタリングできるようにすることです。 使用 公式GitHub API 各ユーザーのリポジトリを取得します。

GitHub プロフィール ページ - github.com/indreklasn

学べる内容:

• APIからデータを受け取る
• APIから取得したデータを表示します
• 検索ごとに関連データをフィルタリングして表示する
• オプション: 挑戦する気持ちがある場合は、次を使用します。 API v4、GraphQLを使用して構築されました。 GraphQL を学びたい場合は、以前の記事を参照してください。.

Reddit スタイルのチャット

チャットは、そのシンプルさと使いやすさにより、人気のあるコミュニケーション方法です。 しかし、現代のチャット ルームを本当に活性化しているものは何でしょうか? ウェブソケット！

学べる内容:

• WebSocket、リアルタイム通信、データ更新の使用
• ユーザーのアクセス レベルを操作します (たとえば、チャット チャネルの所有者には次の役割があります) admin、そして部屋にいる他の人たち - user)
• フォームを処理して検証します - メッセージを送信するためのチャット ウィンドウは input
• さまざまなチャットを作成して参加する
• 個人的なメッセージを扱います。 ユーザーは他のユーザーとプライベートにチャットできます。 基本的に、XNUMX 人のユーザー間に WebSocket 接続を確立します。

ストライプスタイルのナビゲーション

このナビゲーションのユニークな点は、ポップオーバー コンテナがコンテンツに合わせて変形することです。 新しいポップオーバーを開いたり閉じたりする従来の動作と比較すると、この移行には優雅さがあります。

学べる内容:

• CSSアニメーションとトランジションを組み合わせる
• コンテンツを暗くし、アクティブなクラスをフローティング要素に適用します

パックマン

独自のバージョンのパックマンを作成します。 これは、ゲームがどのように開発されるのかを理解し、基本を理解するのに最適な方法です。 JavaScript フレームワーク、React または Vue を使用します。

次のことを学びます:

• 要素の動き方
• どのキーを押すかを決める方法
• 衝突の瞬間を判断する方法
• さらに進んで、ゴーストの動きの制御を追加することもできます

このプロジェクトの例が見つかります リポジトリ内で GitHubの

ユーザー管理

プロジェクト リポジトリ内で GitHubの

ユーザー管理用の CRUD タイプのアプリケーションを作成すると、開発の基礎が学べます。 これは、新しい開発者にとって特に便利です。

次のことを学びます:

• ルーティングとは
• データ入力フォームを処理し、ユーザーが入力した内容を確認する方法
• データベースの操作方法 - アクションの作成、読み取り、更新、削除

現在地の天気を確認する

プロジェクト リポジトリ内で GitHubの

アプリを作成したい場合は、天気アプリから始めます。 このプロジェクトは Swift を使用して完了できます。

アプリケーションの構築経験を積むことに加えて、次のことを学びます。

• API の使用方法
• 地理位置情報の使用方法
• テキスト入力を追加して、アプリケーションをより動的にします。 その中で、ユーザーは自分の位置を入力して特定の場所の天気を確認できるようになります。

API が必要になります。 気象データを取得するには、OpenWeather API を使用します。 OpenWeather API の詳細情報 ここで.

チャットウィンドウ

XNUMX つのブラウザ タブで開く、動作中のチャット ウィンドウ

チャット ウィンドウの作成は、ソケットを使い始めるのに最適な方法です。 技術スタックの選択肢は膨大です。 たとえば、Node.js は完璧です。

ソケットの仕組みと実装方法を学びます。 これがこのプロジェクトの主な利点です。

あなたがソケットを扱いたいと考えている Laravel 開発者であれば、私の記事を読んでください。 статью

GitLab CI

ソース

継続的インテグレーション (CI) を初めて使用する場合は、GitLab CI を試してみてください。 いくつかの環境をセットアップし、いくつかのテストを実行してみてください。 それほど難しいプロジェクトではありませんが、そこから多くのことを学べると確信しています。 現在、多くの開発チームが CI を使用しています。 使い方を知っておくと便利です。

次のことを学びます:

• GitLab CIとは何ですか
• 設定方法 .gitlab-ci.ymlこれは GitLab ユーザーに何をすべきかを指示します
• 他の環境にデプロイする方法

ウェブサイトアナライザー

Web サイトのセマンティクスを分析し、評価を作成するスクレイパーを作成します。 たとえば、画像内の alt タグが欠落していないかを確認できます。 または、ページに SEO メタタグがあるかどうかを確認します。 スクレイパーはユーザー インターフェイスなしで作成できます。

次のことを学びます:

• スクレーパーはどのように機能しますか?
• DOM セレクターの作成方法
• アルゴリズムの書き方
• そこで終わりたくない場合は、ユーザー インターフェイスを作成してください。 チェックした各 Web サイトに関するレポートを作成することもできます。

ソーシャルネットワーク上の感情検出

ソース

ソーシャル メディアでの感情検出は、機械学習を始めるのに最適な方法です。

XNUMX つのソーシャル ネットワークだけを分析することから始めることができます。 誰もが通常、Twitter から始めます。

すでに機械学習の経験がある場合は、さまざまなソーシャル ネットワークからデータを収集し、それらを組み合わせてみてください。

次のことを学びます:

• 機械学習とは

Trello クローン

Indrek Lasn の Trello クローン。

学ぶ内容:

• リクエスト処理ルートの編成 (ルーティング)。
• ドラッグアンドドロップ
• 新しいオブジェクト (ボード、リスト、カード) を作成する方法。
• 入力データの処理とチェック。
• クライアント側から: ローカル ストレージの使用方法、ローカル ストレージにデータを保存する方法、ローカル ストレージからデータを読み取る方法。
• サーバー側から: データベースの使用方法、データベースにデータを保存する方法、データベースからデータを読み取る方法。

リポジトリの例は次のとおりです, React+Reduxで作られています。

管理パネル

Github リポジトリ。

シンプルな CRUD アプリケーションで、基本を学ぶのに最適です。 学びましょう：

• ユーザーを作成し、ユーザーを管理します。
• データベースと対話します - ユーザーの作成、読み取り、編集、削除。
• 入力を検証し、フォームを操作します。

暗号通貨トラッカー (ネイティブモバイルアプリ)

Githubリポジトリ。

何でも: Swift、Objective-C、React Native、Java、Kotlin。

勉強しましょう：

• ネイティブ アプリケーションの仕組み。
• API からデータを取得する方法。
• ネイティブ ページ レイアウトの仕組み。
• モバイル シミュレーターの操作方法。

この API を試してみる。 もっと良いものを見つけたら、コメントに書いてください。

ご興味がございましたら、こちらからどうぞ ここにチュートリアルがあります.

独自の Webpack 構成を最初からセットアップする

技術的には、これはアプリケーションではありませんが、Webpack が内部からどのように動作するかを理解するのに非常に役立つ作業です。 これからは「ブラックボックス」ではなく、わかりやすいツールになるでしょう。

要件：

• es7 から es5 をコンパイルします (基本)。
• jsx を js にコンパイルするか、.vue を .js にコンパイルします (ローダーを学習する必要があります)
• Webpack dev サーバーとホット モジュールのリロードをセットアップします。 (vue-cli と create-react-app は両方を使用します)
• Heroku、now.sh、または Github を使用して、Webpack プロジェクトをデプロイする方法を学びます。
• CSS をコンパイルするためのお気に入りのプリプロセッサ (scss、less、stylus) を設定します。
• Webpack で画像と SVGS を使用する方法を学びます。

これは完全な初心者にとって素晴らしいリソースです。

ハッカーニュースのクローン

すべてのジェダイは、自分自身のハッカーニュースを作成する必要があります。

その過程で学ぶこと:

• ハッカーニュース API と対話する方法。
• シングルページアプリケーションの作成方法。
• コメントの表示、個別のコメント、プロフィールなどの機能を実装する方法。
• リクエスト処理ルートの編成 (ルーティング)。

トゥドゥシェチカ

TodoMVC。

真剣に？ トゥドゥシュカ？ それらは何千もあります。 しかし、信じてください、この人気には理由があります。
Tudu アプリは、基本を確実に理解するのに最適な方法です。 XNUMX つのアプリケーションをバニラ Javascript で作成し、もう XNUMX つをお気に入りのフレームワークで作成してみてください。

学ぶ：

• 新しいタスクを作成します。
• フィールドが入力されていることを確認してください。
• タスクをフィルタリングします (完了、アクティブ、すべて)。 使用 filter и reduce.
• JavaScript の基本を理解します。

並べ替え可能なドラッグ アンド ドロップ リスト

Githubリポジトリ。

理解するのに非常に役立ちます APIをドラッグアンドドロップ.

学びましょう：

• ドラッグアンドドロップAPI
• リッチな UI を作成する

メッセンジャー クローン (ネイティブ アプリ)

Web アプリケーションとネイティブ アプリケーションの両方がどのように動作するかを理解できるようになり、灰色の部分から区別できるようになります。

私たちが勉強する内容:

• Web ソケット (インスタント メッセージ)
• ネイティブ アプリケーションの仕組み。
• ネイティブ アプリケーションでのテンプレートの動作。
• ネイティブ アプリケーションでのリクエスト処理ルートの整理。

テキストエディタ

テキスト エディタの目的は、ユーザーが書式設定を有効な HTML マークアップに変換する労力を軽減することです。 優れたテキスト エディタを使用すると、ユーザーはさまざまな方法でテキストの書式を設定できます。

誰もが一度はテキストエディタを使ったことがあるでしょう。 では、なぜそうではないのか 自分で作成する?

レディットのクローン

Reddit は、ソーシャル ニュースの集約、Web コンテンツの評価、およびディスカッション サイトです。

Reddit が私の時間のほとんどを占めていますが、引き続き利用しています。 Reddit クローンを作成することは、(同時に Reddit を閲覧しながら) プログラミングを学習する効果的な方法です。

Reddit は非常に豊富な情報を提供します API。 機能を省略したり、無計画に作業したりしないでください。 クライアントや顧客がいる現実の世界では、いい加減に仕事をすることはできません。そうしないと、すぐに仕事を失ってしまいます。

賢いクライアントは、仕事のやり方がまずいとすぐに気づき、他の人を見つけるでしょう。

レディットAPI

オープンソース NPM パッケージの公開

Javascript コードを作成する場合は、パッケージ マネージャーを使用する可能性があります。 パッケージ マネージャーを使用すると、他の人が作成して公開した既存のコードを再利用できます。

パッケージの開発サイクル全体を理解すると、非常に良い経験が得られます。 コードを公開するときに知っておくべきことがたくさんあります。 セキュリティ、セマンティック バージョニング、スケーラビリティ、命名規則、メンテナンスについて考える必要があります。

パッケージは何でも構いません。 アイデアがない場合は、独自の Lodash を作成して公開してください。

Lodash： lodash.com

オンラインで何かをやったことで、他の人より 10% 優位に立つことができます。 役立つリソースをいくつか紹介します オープンソースとパッケージについて。

freeCodeCamp カリキュラム

FCCカリキュラム

freeCodecamp がたくさん集めました 総合プログラミングコース.

freeCodeCamp は非営利団体です。 これは、インタラクティブな Web ベースの学習プラットフォーム、オンライン コミュニティ フォーラム、チャット ルーム、Medium 出版物、および Web 開発の学習を誰でもアクセスできるようにすることを目的とした地域組織で構成されています。

コースをすべて完了できれば、最初の仕事に就く資格は十分にあります。

HTTP サーバーを最初から作成する

HTTP プロトコルは、コンテンツがインターネット上を移動する際に経由する主要なプロトコルの XNUMX つです。 HTTP サーバーは、HTML、CSS、JS などの静的コンテンツを提供するために使用されます。

HTTP プロトコルを最初から実装できると、物事がどのように相互作用するかについての知識が広がります。

たとえば、NodeJs を使用している場合は、Express が HTTP サーバーを提供していることがわかります。

参考までに、次のことができるかどうかを確認してください。

• ライブラリを使用せずにサーバーをセットアップする
• サーバーは HTML、CSS、および JS コンテンツを提供する必要があります。
• ルーターを最初から実装する
• 変更を監視し、サーバーを更新する

理由がわからない場合は、使用してください ゴーラング HTTPサーバーを作成してみます キャディー ゼロから。

メモ用のデスクトップアプリ

みんなメモを取りますよね。

メモアプリを作ってみましょう。 アプリケーションはメモを保存し、データベースと同期する必要があります。 Electron、Swift、またはお好みのシステムに適したものを使用して、ネイティブ アプリを構築します。

これを最初の課題 (テキスト エディター) と自由に組み合わせてください。

おまけとして、デスクトップ バージョンと Web バージョンを同期してみてください。

ポッドキャスト (Overcast クローン)

ポッドキャストを聞かない人はいないでしょうか？

次の機能を備えた Web アプリケーションを作成します。

• アカウントを作成する
• ポッドキャストを検索
• ポッドキャストを評価して購読する
• 30 秒間の停止と再生、速度変更、送りと戻しの機能。

開始点として iTunes API を使用してみてください。 他のリソースをご存知の場合は、コメントに投稿してください。

アフィリエイト.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

画面キャプチャ

こんにちは！ 今画面を撮影中です！

画面をキャプチャしてクリップを保存できるデスクトップまたは Web アプリを作成します。 .gif

ここで いくつかのヒントこれを達成する方法。

ソース

• 開発者向けのさらに 5 つの大胆なトレーニング プロジェクト (レイヤー、Squoosh、電卓、ウェブサイト クローラー、音楽プレーヤー)
• フロントエンドのスキルを磨くための 9 つのプロジェクト
• フロントエンド開発者のための XNUMX つのタスク
• 開発者のための楽しい練習
• 8つの教育プロジェクト
• 練習するプロジェクトの別のリスト

出所： habr.com