דוג'ו חזיתי: פרויקטים להכשרת מיומנויות מפתחים (5 חדשים + 43 ישנים)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в טפטוף אֵזוֹר.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

המאמר תורגם בתמיכת EDISON Software, אשר разрабатывает приложения и сайтыו - משקיע בסטארטאפים.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• בונוס: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

גיפסקי конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

הערה: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• בונוס: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

הערה: כאן GitHub example repository.

Подборка проектов из предыдущих публикаций.

שִׁכבָה

www.reddit.com/r/layer

Layer היא קהילה שבה כל אחד יכול לצייר פיקסל על "לוח" משותף. הרעיון המקורי נולד ב- Reddit. קהילת r/Layer היא מטאפורה ליצירתיות משותפת, שכל אחד יכול להיות יוצר ולתרום למטרה משותפת.

מה תלמד בעת יצירת פרויקט שכבה משלך:

• כיצד עובד קנבס JavaScript לדעת כיצד לתפעל בד הוא מיומנות קריטית ביישומים רבים.
• כיצד לתאם הרשאות משתמש. כל משתמש יכול לצייר פיקסל אחד כל 15 דקות מבלי להתחבר.
• צור הפעלות של עוגיות.

סקווש

squoosh.app

Squoosh היא אפליקציית דחיסת תמונה עם אפשרויות מתקדמות רבות.

GIF 20 מגה

על ידי יצירת גרסה משלך של Squoosh תלמד:

• איך לעבוד עם גדלי תמונות
• למד את היסודות של Drag'n'Drop API
• הבן כיצד פועלים ה-API והמאזינים לאירועים
• כיצד להעלות ולייצא קבצים

הערה: מדחס התמונה הוא מקומי. אין צורך לשלוח נתונים נוספים לשרת. אתה יכול להחזיק את המדחס בבית, או שאתה יכול להשתמש בו בשרת, לבחירתך.

מחשבון

בחייך? ברצינות? מַחשְׁבוֹן? כן, בדיוק, מחשבון. הבנת היסודות של פעולות מתמטיקה וכיצד הן פועלות יחד היא מיומנות קריטית לפישוט היישומים שלך. במוקדם או במאוחר תצטרך להתמודד עם מספרים וכמה שיותר מוקדם יותר טוב.

jarodburchill.github.io/CalculatorReactApp

על ידי יצירת מחשבון משלך תלמד:

• עבודה עם מספרים ופעולות מתמטיות
• תרגל עם API של מאזינים לאירועים
• איך לסדר אלמנטים, להבין סגנונות

סורק (מנוע חיפוש)

כולם השתמשו במנוע חיפוש, אז למה לא ליצור משלך? יש צורך בסורקים כדי לחפש מידע. כולם משתמשים בהם כל יום והביקוש לטכנולוגיה זו ולמומחים רק יגדל עם הזמן.

מנוע החיפוש של גוגל

מה תלמד על ידי יצירת מנוע חיפוש משלך:

• כיצד פועלים הסורקים
• כיצד לאינדקס אתרים וכיצד לדרג אותם לפי דירוג ומוניטין
• כיצד לאחסן אתרים באינדקס במסד נתונים וכיצד לעבוד עם מסד הנתונים

נגן מוזיקה (Spotify, Apple Music)

כולם שומעים מוזיקה - זה רק חלק בלתי נפרד מהחיים שלנו. בואו ניצור נגן מוזיקה כדי להבין טוב יותר כיצד פועלת המכניקה הבסיסית של פלטפורמת הזרמת מוזיקה מודרנית.

Spotify

מה תלמד על ידי יצירת פלטפורמת הזרמת מוזיקה משלך:

• כיצד לעבוד עם ה-API. השתמש ב-API מ-Spotify או Apple Music
• כיצד לנגן, להשהות או להריץ אחורה לרצועה הבאה/קודמת
• כיצד לשנות את עוצמת הקול
• כיצד לנהל ניתוב משתמשים והיסטוריית הדפדפן

אפליקציית חיפוש סרטים באמצעות React (עם ווים)

הדבר הראשון שאתה יכול להתחיל איתו הוא ליצור אפליקציית חיפוש סרטים באמצעות React. להלן תמונה של איך ייראה היישום הסופי:

מה תלמד
על ידי בניית אפליקציה זו, תשפר את כישורי ה-React שלך על ידי שימוש ב-Hooks API החדש יחסית. הפרויקט לדוגמה משתמש ברכיבי React, הרבה ווים, API חיצוני וכמובן קצת עיצוב CSS.

ערימה טכנית ותכונות

• להגיב עם ווים
• ליצור-להגיב-אפליקציה
• Jsx
• CSS

מבלי להשתמש בשיעורים כלשהם, הפרויקטים הללו נותנים לך את נקודת הכניסה המושלמת ל-React הפונקציונלי ובהחלט יעזרו לך ב-2020. אתה יכול למצוא פרויקט לדוגמה כאן. עקוב אחר ההוראות או הפוך אותו לשלך.

אפליקציית צ'אט עם Vue

פרויקט נהדר נוסף שעליך לעשות הוא ליצור אפליקציית צ'אט באמצעות ספריית JavaScript האהובה עלי: VueJS. האפליקציה תיראה בערך כך:

מה תלמד
במדריך זה תלמדו כיצד ליצור אפליקציית Vue מאפס - יצירת רכיבים, טיפול במצב, יצירת מסלולים, התחברות לשירותי צד שלישי ואפילו טיפול באימות.

ערימה טכנית ותכונות

• Vue
• ווקס
• נתב Vue
• תצוגת CLI
• סוחר סמים
• CSS

זהו פרויקט נהדר באמת להתחיל עם Vue או לשפר את הכישורים הקיימים שלך כדי להיכנס לפיתוח ב-2020. אתה יכול למצוא הדרכה כאן.

אפליקציית מזג אוויר יפה עם Angular 8

דוגמה זו תעזור לך ליצור אפליקציית מזג אוויר יפהפיה באמצעות Angular 8:

מה תלמד
פרויקט זה ילמד אותך מיומנויות חשובות בבניית יישומים מאפס - מעיצוב דרך פיתוח, כל הדרך ועד לאפליקציה מוכנה לפריסה.

ערימה טכנית ותכונות

• זווית 8
• Firebase
• עיבוד בצד השרת
• CSS עם Grid ו-Flexbox
• ידידותית לנייד ויכולת הסתגלות
• מצב כהה
• ממשק יפה

מה שאני באמת אוהב בפרויקט המקיף הזה הוא שאתה לא לומד דברים בבידוד. במקום זאת, אתה לומד את כל תהליך הפיתוח, מהתכנון ועד לפריסה הסופית.

יישום מטלות באמצעות Svelte

Svelte הוא כמו הילד החדש בגישה מבוססת הרכיבים - לפחות דומה ל-React, Vue ו-Angular. וזה אחד המוצרים החדשים הלוהטים לשנת 2020.

אפליקציות מטלות הן לא בהכרח הנושא החם ביותר, אבל הן באמת יעזרו לך לחדד את כישורי ה-Svelte שלך. זה ייראה כך:

מה תלמד
מדריך זה יראה לך כיצד ליצור יישום באמצעות Svelte 3, מתחילתו ועד סופו. אתה תשתמש ברכיבים, סטיילינג ומטפלי אירועים

ערימה טכנית ותכונות

• Svelte 3
• רכיבים
• סטיילינג עם CSS
• תחביר ES 6

אין הרבה פרויקטים טובים למתחילים של Svelte, אז מצאתי זו אפשרות טובה להתחיל איתה.

אפליקציית מסחר אלקטרוני באמצעות Next.js

Next.js היא המסגרת הפופולרית ביותר לבניית יישומי React התומכים בעיבוד בצד השרת מחוץ לקופסה.

פרויקט זה יראה לך כיצד ליצור יישום מסחר אלקטרוני שנראה כך:

מה תלמד
בפרויקט זה תלמד כיצד לפתח עם Next.js - ליצור דפים ורכיבים חדשים, לחלץ נתונים ולעצב ולפרוס יישום Next.

ערימה טכנית ותכונות

• Next.js
• רכיבים ודפים
• דגימת נתונים
• סטייליזציה
• פריסת פרויקט
• SSR וספא

זה תמיד נהדר לקבל דוגמה מהעולם האמיתי כמו אפליקציית מסחר אלקטרוני כדי ללמוד משהו חדש. אתה יכול מצא את ההדרכה כאן.

בלוג רב לשוני מלא עם Nuxt.js

Nuxt.js הוא עבור Vue, מה ש-Next.js הוא עבור React: מסגרת נהדרת לשילוב הכוח של רינדור בצד השרת ויישומי עמוד בודד
האפליקציה הסופית שתוכל ליצור תיראה כך:

מה תלמד

בפרויקט לדוגמה זה, תלמד כיצד ליצור אתר אינטרנט שלם באמצעות Nuxt.js, מההגדרה הראשונית ועד לפריסה הסופית.

הוא מנצל הרבה מהתכונות המגניבות שיש ל-Nuxt להציע, כמו דפים ורכיבים, וסגנון עם SCSS.

ערימה טכנית ותכונות

• Nuxt.js
• רכיבים ודפים
• מודול Storyblock
• דַבקָן
• Vuex לניהול המדינה
• SCSS לסטיילינג
• תוכנות ביניים של Nuxt

זה פרויקט ממש מגניב, הכולל הרבה תכונות נהדרות של Nuxt.js. אני אישית אוהב לעבוד עם Nuxt אז כדאי לך לנסות את זה כי זה גם יהפוך אותך למפתח Vue מעולה.

בלוג עם גטסבי

גטסבי הוא מחולל אתרים סטטי מצוין באמצעות React ו- GraphQL. זו התוצאה של הפרויקט:

מה תלמד

במדריך זה, תלמד כיצד להשתמש ב-Gatsby כדי ליצור בלוג שבו תשתמש כדי לכתוב מאמרים משלך באמצעות React ו- GraphQL.

ערימה טכנית ותכונות

• גטסבי
• להגיב
• גרפית
• תוספים וערכות נושא
• MDX/Markdown
• Bootstrap CSS
• תבניות

אם אי פעם רצית לפתוח בלוג, זו דוגמה מצוינת כיצד לעשות זאת באמצעות React ו- GraphQL.

אני לא אומר ש-WordPress היא בחירה גרועה, אבל עם Gatsby אתה יכול לבנות אתרים בעלי ביצועים גבוהים באמצעות React - שזה שילוב מדהים.

בלוג עם Gridsome

גרידסום עבור Vue... אוקיי, זה כבר היה לנו עם Next/Nuxt.
אבל זה נכון גם לגבי גרידסום וגטסבי. שניהם משתמשים ב-GraphQL כשכבת הנתונים שלהם, אבל Gridsome משתמש ב-VueJS. זהו גם מחולל אתרים סטטי מדהים שיעזור לך ליצור בלוגים מעולים:

מה תלמד

פרויקט זה ילמד אותך כיצד ליצור בלוג פשוט כדי להתחיל עם Gridsome, GraphQL ו-Markdown. זה גם מכסה כיצד לפרוס יישום דרך Netlify.

ערימה טכנית ותכונות

• מסורבל
• Vue
• גרפית
• Markdown
• נטליפיי

זה בהחלט לא המדריך המקיף ביותר, אבל הוא מכסה את המושגים הבסיסיים של Gridsome ו Markdown עשויה להיות נקודת התחלה טובה.

נגן אודיו דמוי SoundCloud באמצעות Quasar

Quasar היא עוד מסגרת Vue שניתן להשתמש בה ליצירת יישומים ניידים. בפרויקט זה תיצור יישום נגן שמע, לדוגמה:

מה תלמד

בעוד שפרויקטים אחרים מתמקדים בעיקר ביישומי אינטרנט, זה יראה לך כיצד ליצור אפליקציה לנייד באמצעות Vue ומסגרת Quasar.
כבר אמורה להפעיל את Cordova עם Android Studio/Xcode מוגדר. אם לא, במדריך יש קישור לאתר Quasar שבו הם מראים לך איך להגדיר הכל.

ערימה טכנית ותכונות

• Quasar
• Vue
• קורדובה
• WaveSurfer
• רכיבי ממשק משתמש

פרויקט קטן, המדגים את היכולות של Quasar ליצירת יישומים ניידים.

Форма кредитной карты

צורת כרטיס אשראי מגניבה עם מיקרו-אינטראקציות חלקות ומהנות. כולל עיצוב מספרים, אימות וזיהוי אוטומטי של סוג כרטיס. הוא בנוי על Vue.js והוא גם מגיב באופן מלא. (אתה יכול לראות כאן.)

טופס כרטיס אשראי

מה תלמד:

• עיבוד ואימות טפסים
• טיפול באירועים (לדוגמה, כאשר שדות משתנים)
• הבן כיצד להציג ולהציב אלמנטים בדף, במיוחד את פרטי כרטיס האשראי המופיעים על גבי הטופס

היסטוגרמה

היסטוגרמה היא תרשים או גרף המייצגים נתונים קטגוריים עם פסים מלבניים עם גבהים או אורכים פרופורציונליים לערכים שהם מייצגים.

ניתן ליישם אותם אנכית או אופקית. תרשים עמודות אנכי נקרא לפעמים תרשים קווים.

מה תלמד:

• הצגת נתונים בצורה מובנית ומובנת
• בנוסף: למד כיצד להשתמש באלמנט canvas ואיך לצייר איתו אלמנטים

כאן אתה יכול למצוא נתוני אוכלוסיית העולם. הם ממוינים לפי שנה.

Анимация сердечка Twitter

עוד בשנת 2016, טוויטר הציגה את האנימציה המדהימה הזו עבור הציוצים שלה. נכון לשנת 2019, זה עדיין נראה החלק, אז למה שלא תיצור אחד בעצמך?

מה תלמד:

• עבודה עם תכונת CSS keyframes
• מניפולציה והנפשה של רכיבי HTML
• שלב JavaScript, HTML ו-CSS

Репозитории GitHub с функцией поиска

אין כאן שום דבר מפואר - מאגרי GitHub הם רק רשימה מהוללת.
המטרה היא להציג את המאגרים ולאפשר למשתמש לסנן אותם. להשתמש API הרשמי של GitHub כדי לקבל מאגרים עבור כל משתמש.

דף פרופיל GitHub - github.com/indreklasn

מה תלמד:

• קבל נתונים מ-API
• הצג נתונים מ-API
• סנן והצג נתונים רלוונטיים עבור כל חיפוש
• אופציונלי: אם אתה מוכן לאתגר, השתמש API v4, נבנה באמצעות GraphQL. אם אתה רוצה ללמוד GraphQL, עבור לאחד מהמאמרים הקודמים שלי.

Чаты в стиле Reddit

צ'אטים הם דרך פופולרית לתקשורת בשל הפשטות וקלות השימוש שלהם. אבל מה באמת מזין חדרי צ'אט מודרניים? WebSockets!

מה תלמד:

• השתמש ב-WebSockets, תקשורת בזמן אמת ועדכוני נתונים
• עבודה עם רמות גישה של משתמשים (לדוגמה, הבעלים של ערוץ צ'אט הוא בעל התפקיד adminואחרים בחדר - user)
• עיבוד ואימות טפסים - זכרו, חלון הצ'אט לשליחת הודעה הוא input
• צור והצטרף לצ'אטים שונים
• עבודה עם מסרים אישיים. משתמשים יכולים לשוחח בצ'אט עם משתמשים אחרים באופן פרטי. בעיקרו של דבר, אתה תיצור חיבור WebSocket בין שני משתמשים.

Навигация в стиле Stripe

מה שמייחד את הניווט הזה הוא שמיכל הפופ-אובר משתנה כך שיתאים לתוכן. יש אלגנטיות למעבר הזה בהשוואה להתנהגות המסורתית של פתיחה וסגירה של פופ-אובר חדש.

מה תלמד:

• שלב אנימציות CSS עם מעברים
• עמעום תוכן והחל מחלקה פעילה על אלמנט צף

פקמן

צור גרסה משלך של פקמן. זוהי דרך מצוינת לקבל מושג כיצד מפתחים משחקים ולהבין את היסודות. השתמש במסגרת JavaScript, React או Vue.

אתה תלמד:

• איך אלמנטים זזים
• כיצד לקבוע על אילו מקשים ללחוץ
• כיצד לקבוע את רגע ההתנגשות
• אתה יכול ללכת רחוק יותר ולהוסיף פקדי תנועת רפאים

תמצא דוגמה לפרויקט זה במאגר GitHub

ניהול משתמשים

פרויקט במאגר GitHub

יצירת אפליקציה מסוג CRUD לניהול משתמשים תלמד אותך את יסודות הפיתוח. זה שימושי במיוחד עבור מפתחים חדשים.

אתה תלמד:

• מה זה ניתוב
• כיצד לטפל בטפסי הזנת נתונים ולבדוק מה המשתמש הזין
• אופן העבודה עם מסד הנתונים - יצירה, קריאה, עדכון ומחיקה של פעולות

Проверка погоды в вашем местоположении

פרויקט במאגר GitHub

אם אתה רוצה ליצור אפליקציות, התחל עם אפליקציית מזג אוויר. ניתן להשלים פרויקט זה באמצעות Swift.

בנוסף לניסיון בבניית אפליקציה, תלמדו:

• כיצד לעבוד עם ה-API
• כיצד להשתמש במיקום גיאוגרפי
• הפוך את האפליקציה שלך לדינמית יותר על ידי הוספת קלט טקסט. בו, המשתמשים יוכלו להזין את מיקומם כדי לבדוק את מזג האוויר במיקום מסוים.

תצטרך API. כדי לקבל נתוני מזג אוויר, השתמש ב- OpenWeather API. מידע נוסף על ה-API של OpenWeather כאן.

Окно чата

חלון הצ'אט שלי בפעולה, נפתח בשתי לשוניות דפדפן

יצירת חלון צ'אט היא הדרך המושלמת להתחיל עם שקעים. הבחירה בערימת הטכנולוגיה היא עצומה. Node.js, למשל, מושלם.

תלמד כיצד פועלים שקעים וכיצד ליישם אותם. זה היתרון העיקרי של הפרויקט הזה.

אם אתה מפתח Laravel שרוצה לעבוד עם שקעים, קרא את שלי מאמר

GitLab CI

מקור

אם אתה חדש בשילוב רציף (CI), שחק עם GitLab CI. הגדר כמה סביבות ונסה להריץ כמה בדיקות. זה לא פרויקט מאוד קשה, אבל אני בטוח שתלמדו ממנו הרבה. צוותי פיתוח רבים משתמשים כעת ב-CI. לדעת איך להשתמש בו זה שימושי.

אתה תלמד:

• מהו GitLab CI
• כיצד להגדיר .gitlab-ci.ymlמה שאומר למשתמש GitLab מה לעשות
• כיצד לפרוס לסביבות אחרות

Анализатор сайтов

הכינו מגרד שמנתח את הסמנטיקה של אתרים ויוצר את הדירוג שלהם. לדוגמה, אתה יכול לבדוק אם חסרים תגיות alt בתמונות. או בדוק אם לדף יש מטא תגיות SEO. ניתן ליצור מגרד ללא ממשק משתמש.

אתה תלמד:

• איך מגרד עובד?
• כיצד ליצור בוררי DOM
• איך כותבים אלגוריתם
• אם אתה לא רוצה לעצור שם, צור ממשק משתמש. אתה יכול גם ליצור דוח על כל אתר שאתה בודק.

Определение настроений в социальных сетях

מקור

זיהוי סנטימנטים במדיה חברתית הוא דרך מצוינת להתוודע ללמידת מכונה.

אתה יכול להתחיל בניתוח רשת חברתית אחת בלבד. כולם בדרך כלל מתחילים בטוויטר.

אם כבר יש לך ניסיון בלמידת מכונה, נסה לאסוף נתונים מרשתות חברתיות שונות ולשלב ביניהם.

אתה תלמד:

• מהי למידת מכונה

Клон Trello

שיבוט טרלו מ-Indrek Lasn.

מה תלמדו:

• ארגון מסלולי עיבוד בקשות (Routing).
• גרור ושחרר
• כיצד ליצור אובייקטים חדשים (לוחות, רשימות, כרטיסים).
• עיבוד ובדיקת נתוני קלט.
• מצד הלקוח: כיצד להשתמש באחסון מקומי, כיצד לשמור נתונים לאחסון מקומי, כיצד לקרוא נתונים מאחסון מקומי.
• מצד השרת: איך משתמשים בבסיסי נתונים, איך שומרים נתונים במסד הנתונים, איך קוראים נתונים מבסיס הנתונים.

הנה דוגמה למאגר, תוצרת React+Redux.

Панель админа

מאגר Github.

יישום CRUD פשוט, אידיאלי ללימוד היסודות. בוא נלמד:

• צור משתמשים, נהל משתמשים.
• אינטראקציה עם מסד הנתונים - צור, קרא, ערוך, מחק משתמשים.
• אימות קלט ועבודה עם טפסים.

Трекер криптовалют (нативное мобильное приложение)

מאגר Github.

כל דבר: Swift, Objective-C, React Native, Java, Kotlin.

בוא נלמד:

• איך יישומים מקוריים עובדים.
• כיצד לאחזר נתונים מ-API.
• כיצד פועלות פריסות עמוד מקוריות.
• איך לעבוד עם סימולטורים ניידים.

נסה את ה-API הזה. אם אתה מוצא משהו טוב יותר, כתוב בתגובות.

אם אתה מעוניין, הנה זה הנה הדרכה.

Настроить собственный конфиг webpack с нуля

מבחינה טכנית, זו לא אפליקציה, אבל זו משימה שימושית מאוד להבין איך webpack עובד מבפנים. עכשיו זה לא יהיה "קופסה שחורה", אלא כלי מובן.

דרישות:

• קומפילו es7 עד es5 (יסודות).
• קומפלט את jsx ל-js - או - .vue ל-.js (תצטרך ללמוד מעמיסים)
• הגדר את שרת הפיתוח של webpack וטעינה מחדש של מודול חם. (vue-cli ו-create-react-app משתמשים בשניהם)
• השתמש ב-Heroku, now.sh או Github, למד כיצד לפרוס פרויקטים של Webpack.
• הגדר את המעבד המועדף עליך כדי להדר css - scss, less, stylus.
• למד כיצד להשתמש בתמונות וב-svgs עם webpack.

זהו משאב מדהים למתחילים שלמים.

Клон Hackernews

כל ג'דיי נדרש ליצור את האקרניוז שלו.

מה תלמדו בדרך:

• כיצד ליצור אינטראקציה עם ה-API של hackernews.
• כיצד ליצור יישום עמוד בודד.
• כיצד ליישם תכונות כגון צפייה בתגובות, הערות בודדות, פרופילים.
• ארגון מסלולי עיבוד בקשות (Routing).

Тудушечка

TodoMVC.

ברצינות? טודושקה? יש אלפים כאלה. אבל תאמין לי, יש סיבה לפופולריות הזו.
אפליקציית Tudu היא דרך מצוינת לוודא שאתה מבין את היסודות. נסה לכתוב יישום אחד ב-vanilla Javascript ואחד במסגרת המועדפת עליך.

לִלמוֹד:

• צור משימות חדשות.
• בדוק שהשדות ממולאים.
• משימות סינון (הושלמו, פעילות, הכל). להשתמש filter и reduce.
• להבין את היסודות של Javascript.

Сортируемый drag and drop список

מאגר Github.

מאוד עוזר להבין גרור ושחרר API.

בוא נלמד:

• גרור ושחרר ממשק API
• צור ממשק משתמש עשיר

Клон мессенджера (нативное приложение)

אתה תבין איך גם יישומי אינטרנט וגם אפליקציות מקוריות פועלות, מה שיבדל אותך מהמסה האפורה.

מה נלמד:

• שקעי אינטרנט (הודעות מיידיות)
• איך יישומים מקוריים עובדים.
• כיצד פועלות תבניות ביישומים מקוריים.
• ארגון מסלולי עיבוד בקשות באפליקציות מקוריות.

עורך טקסט

המטרה של עורך טקסט היא להפחית את המאמץ של משתמשים המנסים להמיר את העיצוב שלהם לסימון HTML חוקי. עורך טקסט טוב מאפשר למשתמשים לעצב טקסט בדרכים שונות.

בשלב מסוים, כולם השתמשו בעורך טקסט. אז למה לא ליצור אותו בעצמך?

Клон Reddit

reddit הוא אתר צבירת חדשות חברתית, דירוג תוכן אינטרנט ודיונים.

Reddit לוקח את רוב הזמן שלי, אבל אני ממשיך להסתובב בזה. יצירת שיבוט של Reddit היא דרך יעילה ללמוד תכנות (תוך כדי גלישה ב- Reddit בו-זמנית).

Reddit מספק לך עשיר מאוד API. אל תשאיר תכונות כלשהן או תעשה דברים באופן אקראי. בעולם האמיתי עם לקוחות ולקוחות, אתה לא יכול לעבוד בצורה אקראית, אחרת תאבד את העבודה שלך במהירות.

לקוחות חכמים יבינו מיד שהעבודה מתבצעת בצורה גרועה וימצאו מישהו אחר.

ממשק API של Reddit

Публикация пакета NPM с открытым исходным кодом

אם אתה כותב קוד Javascript, רוב הסיכויים שאתה משתמש במנהל חבילות. מנהל חבילות מאפשר לך לעשות שימוש חוזר בקוד קיים שאנשים אחרים כתבו ופרסמו.

הבנת מחזור הפיתוח המלא של חבילה תספק חוויה טובה מאוד. יש הרבה דברים שאתה צריך לדעת בעת פרסום קוד. אתה צריך לחשוב על אבטחה, גירסאות סמנטיות, מדרגיות, מוסכמות שמות ותחזוקה.

החבילה יכולה להיות כל דבר. אם אין לך רעיון, צור את Lodash משלך ופרסם אותו.

לודאש: lodash.com

משהו שעשית באינטרנט מעמיד אותך ב-10% מעל אחרים. הנה כמה משאבים שימושיים על קוד פתוח וחבילות.

Учебный план freeCodeCamp

תוכנית הלימודים של FCC

freeCodecamp אסף הרבה קורס תכנות מקיף.

freeCodeCamp הוא ארגון ללא מטרות רווח. הוא מורכב מפלטפורמת למידה מבוססת אינטרנט אינטראקטיבית, פורום קהילתי מקוון, חדרי צ'אט, פרסומים בינוניים וארגונים מקומיים שמתכוונים להנגיש את פיתוח אתרי הלמידה לכולם.

אתה תהיה יותר ממוכשר לעבודה הראשונה שלך אם תצליח להשלים את הקורס כולו.

Создайте HTTP-сервер с нуля

פרוטוקול HTTP הוא אחד הפרוטוקולים העיקריים שדרכם עובר תוכן באינטרנט. שרתי HTTP משמשים להצגת תוכן סטטי כגון HTML, CSS ו-JS.

היכולת ליישם את פרוטוקול ה-HTTP מאפס תרחיב את הידע שלך על האופן שבו דברים מתקשרים.

לדוגמה, אם אתה משתמש ב-NodeJs, אז אתה יודע ש-Express מספקת שרת HTTP.

לעיון, ראה אם ​​אתה יכול:

• הגדר שרת ללא שימוש בספריות
• השרת חייב להגיש תוכן HTML, CSS ו-JS.
• הטמעת ראוטר מאפס
• עקוב אחר שינויים ועדכן את השרת

אם אתה לא יודע למה, השתמש לך לאנג ונסה ליצור שרת HTTP נושא כלים מאפס.

Десктопное приложение для заметок

כולנו רושמים הערות, לא?

בואו ניצור אפליקציית הערות. האפליקציה צריכה לשמור הערות ולסנכרן אותן עם מסד הנתונים. בנה אפליקציה מקורית באמצעות Electron, Swift, או כל מה שתרצה ומה שעובד עבור המערכת שלך.

אתם מוזמנים לשלב זאת עם האתגר הראשון (עורך טקסט).

כבונוס, נסה לסנכרן את גרסת שולחן העבודה שלך עם גרסת האינטרנט.

Подкасты (клон Overcast)

מי לא שומע פודקאסטים?

צור יישום אינטרנט עם הפונקציונליות הבאה:

• צור חשבון
• חפש פודקאסטים
• דרג והירשם לפודקאסטים
• עצור ושחק, שנה מהירות, פונקציות קדימה ואחורה למשך 30 שניות.

נסה להשתמש ב-iTunes API כנקודת התחלה. אם אתה יודע על משאבים אחרים, אנא פרסם בתגובות.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

לכידת מסך

שלום! אני מצלם את המסך שלי עכשיו!

צור אפליקציית שולחן עבודה או אינטרנט המאפשרת לך לצלם את המסך שלך ולשמור את הקליפ בשם .gif

כאן כמה טיפיםאיך להשיג זאת.

מקורות

• 5 פרויקטי הדרכה נועזים נוספים למפתח (Layer, Squoosh, Calculator, Web Crawler, Player Music)
• 9 פרויקטים לחידוד כישורי Front-End שלך
• שש משימות למפתח Front-End
• תרגול מהנה למפתח
• 8 פרויקטים חינוכיים
• עוד רשימה של פרויקטים להתאמן עליהם

מקור: www.habr.com