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

1. שיבוט מושג

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

www.notion.so

מה תלמד על ידי יצירת שיבוט של Notion:

• HTML גרור ושחרר API. המשתמש יכול "לתפוס עם העכבר" ניתן לגרירה אלמנט ומניחים אותו טפטוף אֵזוֹר.
• כיצד לסנכרן נתונים בזמן אמת בין המחשב לסמארטפון.
• אנו מאפשרים למשתמשים ליצור, לקרוא, לעדכן ולמחוק רשומות, ובכך להכשיר מיומנויות CRUD.

המאמר תורגם בתמיכת EDISON Software, אשר מפתחת אפליקציות ואתרי אינטרנטו - משקיע בסטארטאפים.

2. שיבוט Repl.it

Repl.it הוא כלי לעריכת קוד שיתופי בזמן אמת. ניתן לבחור מספר שפות: JavaScript, Python, Go ולהפעיל את הקוד ישירות בדפדפן. שימושי מאוד להדגמות מהירות וראיונות קוד.

repl.it

מה תלמד על ידי יצירת שיבוט Repl.it:

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

3. שיבוט Google Photos

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

www.google.com/photos/about

מה תלמד על ידי יצירת שיבוט של תמונות Google:

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

4. שיבוט גיפסקי

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

gif.ski

מה תלמד על ידי יצירת שיבוט Gifski:

• כיצד להמיר קבצי וידאו (.mp4 ל-.gif).
• כיצד להשתמש ב-Drag and Drop HTML API.
• כיצד פועלים אופטימיזציה ועיבוד תמונה.

הערה: Gifsky הוא פרויקט קוד פתוח והוא נמצא ב-GitHub!

5. ניטור שערי מטבעות קריפטוגרפיים

React Native מעקב אחר מטבעות קריפטוגרפיים

מה תלמד על ידי יצירת מעקב אחר שער מטבעות:

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

הערה: כאן מאגר לדוגמה של GitHub.

מבחר פרויקטים מפרסומים קודמים.

שִׁכבָה

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 ואיך לצייר איתו אלמנטים

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

אנימציית לב של טוויטר

עוד בשנת 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 בין שני משתמשים.

ניווט בסגנון פס

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

מה תלמד:

• שלב אנימציות 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
• איך כותבים אלגוריתם
• אם אתה לא רוצה לעצור שם, צור ממשק משתמש. אתה יכול גם ליצור דוח על כל אתר שאתה בודק.

זיהוי סנטימנטים ברשתות חברתיות

מקור

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

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

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

אתה תלמד:

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

שיבוט טרלו

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

מה תלמדו:

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

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

פאנל הניהול

מאגר Github.

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

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

מעקב אחר מטבעות קריפטו (אפליקציה מקורית לנייד)

מאגר Github.

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

בוא נלמד:

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

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

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

הגדר את תצורת חבילת הרשת שלך מאפס

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

דרישות:

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

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

שיבוט האקרניוז

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

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

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

טודושצ'קה

TodoMVC.

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

לִלמוֹד:

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

רשימת גרירה ושחרור ניתנת למיין

מאגר 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, או כל מה שתרצה ומה שעובד עבור המערכת שלך.

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

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

פודקאסטים (שיבוט מכוסה עננים)

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

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

• צור חשבון
• חפש פודקאסטים
• דרג והירשם לפודקאסטים
• עצור ושחק, שנה מהירות, פונקציות קדימה ואחורה למשך 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