1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
דער אַרטיקל איז געווען איבערגעזעצט מיט די שטיצן פון EDISON ווייכווארג, וואָס און .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- באָנוס: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
באַמערקונג: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- באָנוס: Если вам интересно, я недавно написал на криптовалюту с React Native.
באַמערקונג: דאָ .
Подборка проектов из предыдущих публикаций.
שיכטע
Layer — это сообщество, где каждый может нарисовать пиксель на общей «доске». Оригинальная идея родилась на Reddit. Сообщество r/Layer — это метафора совместного творчества, что каждый может быть творцом и вносить вклад в общее дело.
Чему вы научитесь создавай свой проект Layer:
- Как работают JavaScript canvas, умение оперировать canvas — критически важный навык во многих приложениях.
- Как координировать user permissions (пользовательские разрешения). Каждый пользователь может рисовать один пиксель раз в 15 минут и при этом не надо логиниться.
- Создавать cookie sessions.
סקוואָאָש
Squoosh — это приложение по сжатию изображений с множеством продвинутых опций.
Гифка на 20 мб
Создавая свою версию Squoosh вы научитесь:
- Как работать с размерами изображений
- Освоите основы Drag‘n’Drop API
- Разберетесь как работают API и еvent listeners
- Как загружать и экспортировать файлы
באַמערקונג: компрессор изображений локален. Не обязательно отсылать дополнительные данные на сервер. Можно иметь компрессор у себя, а можно на сервер, на ваш выбор.
קאַלקולאַטאָר
Да ладно? Серьезно? Калькулятор? Да, именно, калькулятор. Понимать основы математических операций и как они работают совместно — критически важный навык для упрощения ваших приложений. Рано или поздно вам придется разбираться с числами и чем раньше, тем лучше.
Создавая свой калькулятор вы научитесь:
- Работать с числами и мат операциями
- Попрактикуетесь с event listeners API
- Как располагать элементы, разберетесь со стилями
Crawler (Поисковый движок)
Каждый пользовался поисковиком, так почему бы не создать собственный? Краулеры нужны чтобы искать информацию. Ими пользуются все каждый день и спрос со времменм на эту технологию и специалистов будет только расти.
Поисковик Гугла
Чему научитесь, создавая свой поисковик:
- Как работают краулеры
- Как индексировать сайты и как их ранжировать по рейтингу и репутации
- Как хранить индексированные сайты в базе данных и как работать с базой данных
Музыкальный плеер (Spotify, Apple Music)
Все слушают музыку — это просто неотьемлимая часть нашей жизни. Давайте создадим музыкальный плеер, чтобы лучше понять, как работает базовая механика современной платформы потоковой передачи музыки.
ספּאָטיפי
Чему научитесь, создавая свою музыкальную стриминговую платформу:
- Как работать с API. использовать API от Spotify или Apple Music
- Как проигрывать, останавливать или перематывать на следующию/предыдущую композицию
- Как менять громкость
- Как управлять маршрутизацией пользователей и историей браузера
פֿילם זוך אַפּ ניצן רעאַקט (מיט כוקס)
דער ערשטער זאַך איר קען אָנהייבן מיט איז צו שאַפֿן אַ פֿילם זוכן אַפּ ניצן React. ונטער איז אַ בילד פון ווי די לעצט אַפּלאַקיישאַן וועט קוקן ווי:
וואָס איר וועט לערנען
דורך בויען דעם אַפּ, איר וועט פֿאַרבעסערן דיין רעאַקט סקילז דורך ניצן די לעפיערעך נייַ Hooks API. דער ביישפּיל פּרויעקט ניצט רעאַקט קאַמפּאָונאַנץ, אַ פּלאַץ פון כוקס, אַ פונדרויסנדיק אַפּי, און דאָך עטלעכע CSS סטילינג.
טעק סטאַקס און פֿעיִקייטן
- רעאַגירן מיט כוקס
- שאַפֿן-רעאַגירן-אַפּ
- JSX
- קסס
אָן ניצן קיין קלאסן, די פּראַדזשעקס געבן איר די שליימעסדיק אַרייַנגאַנג צו פאַנגקשאַנאַל רעאַקט און וועט באשטימט העלפֿן איר אין 2020. איר קענען געפֿינען . גיי די ינסטראַקשאַנז אָדער מאַכן עס דיין אייגענע.
שמועסן אַפּ מיט Vue
אן אנדער גרויס פּרויעקט פֿאַר איר איז צו שאַפֿן אַ שמועס אַפּ מיט מיין באַליבסטע דזשאַוואַסקריפּט ביבליאָטעק: VueJS. די אַפּלאַקיישאַן וועט קוקן עפּעס ווי דאָס:
וואָס איר וועט לערנען
אין דעם טוטאָריאַל, איר וועט לערנען ווי צו מאַכן אַ Vue אַפּ פֿון קראַצן - קריייטינג קאַמפּאָונאַנץ, האַנדלינג שטאַט, קריייטינג רוץ, קאַנעקטינג צו דריט-פּאַרטיי באַדינונגס און אפילו האַנדלינג אָטענטאַקיישאַן.
טעק סטאַקס און פֿעיִקייטן
- Vue
- vuex
- וויו ראַוטער
- Vue CLI
- פּושער
- קסס
דאָס איז אַ טאַקע גרויס פּרויעקט צו אָנהייבן מיט Vue אָדער פֿאַרבעסערן דיין יגזיסטינג סקילז צו באַקומען אין אַנטוויקלונג אין 2020. איר קענען געפֿינען .
שיין וועטער אַפּ מיט אַנגולאַר 8
דער ביישפּיל וועט העלפֿן איר שאַפֿן אַ שיין וועטער אַפּ מיט אַנגולאַר 8:
וואָס איר וועט לערנען
דער פּרויעקט וועט לערנען איר ווערטפול סקילז אין בויען אַפּלאַקיישאַנז פֿון קראַצן - פֿון פּלאַן דורך אַנטוויקלונג, ביז אַ אַפּלאַקיישאַן גרייט פֿאַר דיפּלוימאַנט.
טעק סטאַקס און פֿעיִקייטן
- ווינקלדיק 8
- פירעבאַסע
- סערווירער זייַט רענדערינג
- CSS מיט גריד און פלעקסבאָקס
- רירעוודיק פרייַנדלעך און אַדאַפּטאַבילאַטי
- טונקל מאָדע
- שיין צובינד
וואָס איך טאַקע ליב וועגן דעם אַלע-ענקאַמפּאַסינג פּרויעקט איז אַז איר טאָן ניט לערנען זאכן אין אפגעזונדערטקייט. אַנשטאָט, איר לערנען די גאנצע אַנטוויקלונג פּראָצעס, פון פּלאַן צו לעצט דיפּלוימאַנט.
צו-טאָן אַפּלאַקיישאַן ניצן Svelte
סוועלטע איז ווי די נייַע קינד אויף די קאָמפּאָנענט-באזירט צוגאַנג - אין מינדסטער ענלעך צו React, Vue און Angular. און דאָס איז איינער פון די האָטטעסט נייַע פּראָדוקטן פֿאַר 2020.
צו-טאָן אַפּפּס זענען נישט דאַווקע די האָטטעסט טעמע, אָבער זיי וועלן טאַקע העלפֿן איר האָנע דיין סוועלטע סקילז. עס וועט קוקן ווי דאָס:
וואָס איר וועט לערנען
דער טוטאָריאַל וועט ווייַזן איר ווי צו שאַפֿן אַ אַפּלאַקיישאַן ניצן Svelte 3, פֿון אָנהייב צו ענדיקן. איר וועט נוצן קאַמפּאָונאַנץ, סטילינג און געשעעניש האַנדלערס
טעק סטאַקס און פֿעיִקייטן
- סוועלטע 3
- קאַמפּאָונאַנץ
- סטילינג מיט CSS
- ES 6 סינטאַקס
עס זענען נישט פילע גוט סוועלטע סטאַרטער פּראַדזשעקס, אַזוי איך געפֿונען .
E- האַנדל אַפּ ניצן Next.js
Next.js איז די מערסט פאָלקס פריימווערק פֿאַר בנין רעאַקט אַפּלאַקיישאַנז וואָס שטיצן סערווער זייַט רענדערינג אויס פון די קעסטל.
דער פּרויעקט וועט ווייַזן איר ווי צו שאַפֿן אַן E- האַנדל אַפּלאַקיישאַן אַז קוקט ווי דאָס:
וואָס איר וועט לערנען
אין דעם פּרויעקט, איר וועט לערנען ווי צו אַנטוויקלען מיט Next.js - שאַפֿן נייַע בלעטער און קאַמפּאָונאַנץ, עקסטראַקט דאַטן און סטיל און צעוויקלען אַ Next אַפּלאַקיישאַן.
טעק סטאַקס און פֿעיִקייטן
- Next.js
- קאַמפּאָונאַנץ און בלעטער
- דאַטאַ מוסטערונג
- סטיליזאַטיאָן
- פּראָיעקט דיפּלוימאַנט
- ססר און ספּאַ
עס איז שטענדיק גרויס צו האָבן אַ פאַקטיש-וועלט ביישפּיל ווי אַן E- האַנדל אַפּ צו לערנען עפּעס נייַ. דו קענסט .
פול-פלעדזשד מאַלטיילינגוואַל בלאָג מיט Nuxt.js
Nuxt.js איז פֿאַר Vue, וואָס Next.js איז פֿאַר רעאַקט: אַ גרויס פריימווערק פֿאַר קאַמביינינג די מאַכט פון סערווער-זייַט רענדערינג און איין-בלאַט אַפּלאַקיישאַנז
די לעצט אַפּלאַקיישאַן איר קענען מאַכן וועט קוקן ווי דאָס:
וואָס איר וועט לערנען
אין דעם מוסטער פּרויעקט, איר וועט לערנען ווי צו שאַפֿן אַ גאַנץ וועבזייטל ניצן Nuxt.js, פֿון ערשט סעטאַפּ צו לעצט דיפּלוימאַנט.
עס ניצט פילע פון די קיל פֿעיִקייטן וואָס Nuxt האט צו פאָרשלאָגן, אַזאַ ווי בלעטער און קאַמפּאָונאַנץ און סטילינג מיט SCSS.
טעק סטאַקס און פֿעיִקייטן
- Nuxt.js
- קאַמפּאָונאַנץ און בלעטער
- סטאָריבלאָקק מאָדולע
- האגפיש
- Vuex פֿאַר שטאַט פאַרוואַלטונג
- SCSS פֿאַר סטילינג
- נוקסט מיטלוואַרעס
, וואָס כולל פילע גרויס Nuxt.js פֿעיִקייטן. איך פּערסנאַלי ליב צו אַרבעטן מיט Nuxt, אַזוי איר זאָל פּרובירן עס, ווייַל עס וועט אויך מאַכן איר אַ גרויס Vue דעוועלאָפּער.
בלאָג מיט Gatsby
Gatsby איז אַ ויסגעצייכנט סטאַטיק פּלאַץ גענעראַטאָר מיט React און GraphQL. דאָס איז דער רעזולטאַט פון דעם פּרויעקט:
וואָס איר וועט לערנען
אין דעם טוטאָריאַל, איר וועט לערנען ווי צו נוצן Gatsby צו שאַפֿן אַ בלאָג וואָס איר וועט נוצן צו שרייַבן דיין אייגענע אַרטיקלען מיט React און GraphQL.
טעק סטאַקס און פֿעיִקייטן
- גאַצבי
- React
- GraphQL
- פּלוגינס און טעמעס
- MDX/Markdown
- Bootstrap CSS
- פּאַטערנז
אויב איר האָט אלץ געוואלט צו אָנהייבן אַ בלאָג, ווי צו מאַכן עס מיט React און GraphQL.
איך זאג נישט וואָרדפּרעסס איז אַ שלעכט ברירה, אָבער מיט Gatsby איר קענען בויען הויך-פאָרשטעלונג וועבסיטעס ניצן רעאַקט - וואָס איז אַן אַמייזינג קאָמבינאַציע.
בלאָג מיט Gridsome
גרידסאָמע פֿאַר Vue ... אָוקיי, מיר שוין געהאט דעם מיט Next / Nuxt.
אָבער דאָס זעלבע איז אמת פֿאַר Gridsome און Gatsby. ביידע נוצן GraphQL ווי זייער דאַטן שיכטע, אָבער Gridsome ניצט VueJS. דאָס איז אויך אַן אַמייזינג סטאַטיק פּלאַץ גענעראַטאָר וואָס וועט העלפֿן איר שאַפֿן גרויס בלאָגס:
וואָס איר וועט לערנען
דער פּרויעקט וועט לערנען איר ווי צו שאַפֿן אַ פּשוט בלאָג צו אָנהייבן מיט Gridsome, GraphQL און Markdown. עס אויך קאָווערס ווי צו צעוויקלען אַ אַפּלאַקיישאַן דורך Netlify.
טעק סטאַקס און פֿעיִקייטן
- גרידסאַם
- Vue
- GraphQL
- מאַרקדאָוון
- Netlify
דאָס איז אַוואַדע נישט די מערסט פולשטענדיק טוטאָריאַל, אָבער עס קאָווערס די יקערדיק קאַנסעפּס פון Gridsome און .
סאָונדקלאָוד-ווי אַודיאָ שפּילער ניצן קוואַסאַר
קוואַסאַר איז אן אנדער Vue פריימווערק וואָס קענען זיין געוויינט צו שאַפֿן רירעוודיק אַפּלאַקיישאַנז. אין דעם פּרויעקט איר וועט מאַכן אַן אַודיאָ שפּילער אַפּלאַקיישאַן, למשל:
וואָס איר וועט לערנען
בשעת אנדערע פראיעקטן פאָקוס דער הויפּט אויף וועב אַפּלאַקיישאַנז, דעם איינער וועט ווייַזן איר ווי צו שאַפֿן אַ רירעוודיק אַפּלאַקיישאַן ניצן Vue און די קוואַסאַר פריימווערק.
איר זאָל שוין האָבן קאָרדאָוואַ פליסנדיק מיט אַנדרויד סטודיאָ / קסקאָדע קאַנפיגיערד. אויב ניט, די מאַנואַל האט אַ לינק צו די קוואַסאַר וועבזייטל, ווו זיי ווייַזן איר ווי צו שטעלן אַלץ.
טעק סטאַקס און פֿעיִקייטן
- קוואַסאַר
- Vue
- Cordova
- WaveSurfer
- UI קאַמפּאָונאַנץ
, דעמאַנסטרייטינג קוואַסאַר ס קייפּאַבילאַטיז פֿאַר קריייטינג רירעוודיק אַפּלאַקיישאַנז.
Форма кредитной карты
א קיל קרעדיט קאָרט פאָרעם מיט גלאַט און ענדזשויאַבאַל מיקראָ-ינטעראַקשאַנז. כולל נומער פאָרמאַטטינג, וועראַפאַקיישאַן און אָטאַמאַטיק קאָרט טיפּ דיטעקשאַן. עס איז געבויט אויף Vue.js און איז אויך גאָר אָפּרופיק. (דו קענסט זען .)
וואָס איר וועט לערנען:
- פּראָצעס און וואַלאַדייט פארמען
- שעפּן געשעענישן (למשל, ווען פעלדער טוישן)
- פֿאַרשטיין ווי צו ווייַזן און שטעלן עלעמענטן אויף דעם בלאַט, ספּעציעל די קרעדיט קאַרטל אינפֿאָרמאַציע וואָס איז ארויס אויף שפּיץ פון די פאָרעם
באַר טשאַרט
א היסטאָגראַם איז אַ טשאַרט אָדער גראַפיק וואָס רעפּראַזענץ קאַטאַגאָריקאַל דאַטן מיט רעקטאַנגגיאַלער באַרס מיט כייץ אָדער לענג פּראַפּאָרשאַנאַל צו די וואַלועס זיי פאָרשטעלן.
זיי קענען זיין געווענדט ווערטיקלי אָדער כאָריזאַנטאַלי. א ווערטיקאַל באַר טשאַרט איז מאל גערופן אַ שורה טשאַרט.
וואָס איר וועט לערנען:
- ווייַז דאַטן אין אַ סטראַקטשערד און פאַרשטיייק וועג
- אַדדיטיאָנאַללי: לערנען ווי צו נוצן דעם עלעמענט
canvasאון ווי צו ציען עלעמענטן מיט אים
איר קענען געפֿינען וועלט באַפעלקערונג דאַטן. זיי זענען אויסגעשטעלט לויט יאָר.
Анимация сердечка Twitter
צוריק אין 2016, Twitter באַקענענ דעם אַמייזינג אַנאַמיישאַן פֿאַר זיין טוועעץ. זינט 2019, עס נאָך קוקט דער טייל, אַזוי פארוואס נישט מאַכן איינער זיך?
וואָס איר וועט לערנען:
- אַרבעט מיט CSS אַטריביוט
keyframes - מאַניפּולירן און ופלעבן HTML עלעמענטן
- פאַרבינדן דזשאַוואַסקריפּט, HTML און CSS
Репозитории GitHub с функцией поиска
עס איז גאָרנישט פאַנטאַזיע דאָ - GitHub ריפּאַז זענען נאָר אַ געלויבט רשימה.
דער ציל איז צו ווייַזן די ריפּאַזאַטאָריז און לאָזן די באַניצער צו פילטער זיי. ניצן צו באַקומען ריפּאַזאַטאָריז פֿאַר יעדער באַניצער.
GitHub פּראָפיל בלאַט -
וואָס איר וועט לערנען:
- באַקומען דאַטן פֿון API
- ווייַז דאַטן פֿון API
- פילטער און ווייַזן באַטייַטיק דאַטן פֿאַר יעדער זוכן
- אָפּטיאָנאַל: אויב איר זענט אַ אַרויסרופן, נוצן , געבויט מיט GraphQL. .
Чаты в стиле Reddit
טשאַץ זענען אַ פאָלקס וועג פון קאָמוניקאַציע רעכט צו זייער פּאַשטעס און יז פון נוצן. אבער וואָס טאַקע פיואַלז מאָדערן שמועסן רומז? וועבסאָקקעץ!
וואָס איר וועט לערנען:
- ניצן וועבסאָקקעץ, פאַקטיש-צייט קאָמוניקאַציע און דאַטן דערהייַנטיקונגען
- אַרבעט מיט באַניצער אַקסעס לעוועלס (למשל, די באַזיצער פון אַ שמועס קאַנאַל האט די ראָלע
admin, און אנדערע אין די צימער -user) - פּראָצעס און וואַלאַדייט פארמען - געדענקען, די שמועס פֿענצטער פֿאַר שיקן אַ אָנזאָג איז
input - שאַפֿן און פאַרבינדן פאַרשידענע טשאַץ
- אַרבעט מיט פּערזענלעך אַרטיקלען. יוזערז קענען שמועסן מיט אנדערע יוזערז פּריוואַט. יסענשאַלי, איר וועט פאַרלייגן אַ WebSocket פֿאַרבינדונג צווישן צוויי יוזערז.
Навигация в стиле Stripe
וואָס מאכט דעם נאַוויגאַציע יינציק איז אַז דער פּאָפּאָווער קאַנטיינער איז טראַנספערד צו די אינהאַלט. עס איז אַן עלאַגאַנס צו דעם יבערגאַנג קאַמפּערד מיט די טראדיציאנעלן נאַטור פון עפן און קלאָוזינג אַ נייַ פּאָפּאָווער.
וואָס איר וועט לערנען:
- קאַמביין CSS אַנאַמיישאַנז מיט טראַנזישאַנז
- דיק אינהאַלט און צולייגן אַקטיוו קלאַס צו פלאָוטיד עלעמענט
פּאַקמאַן
שאַפֿן דיין אייגענע ווערסיע פון Pacman. דאָס איז אַ גרויס וועג צו באַקומען אַ געדאַנק פון ווי שפּילערייַ זענען דעוועלאָפּעד און פֿאַרשטיין די באַסיקס. ניצן אַ דזשאַוואַסקריפּט פריימווערק, React אָדער Vue.
איר וועט לערנען:
- ווי עלעמענטן מאַך
- ווי צו באַשליסן וואָס שליסלען צו דריקן
- ווי צו באַשטימען דעם מאָמענט פון צונויפשטויס
- איר קענען גיין ווייַטער און לייגן גייַסט באַוועגונג קאָנטראָלס
איר וועט געפֿינען אַ בייַשפּיל פון דעם פּרויעקט גיטהוב
באַניצער פאַרוואַלטונג
פּרויעקט גיטהוב
שאַפֿן אַ CRUD טיפּ אַפּלאַקיישאַן פֿאַר באַניצער אַדמיניסטראַציע וועט לערנען איר די באַסיקס פון אַנטוויקלונג. דאָס איז ספּעציעל נוציק פֿאַר נייַע דעוועלאָפּערס.
איר וועט לערנען:
- וואָס איז רוטינג
- ווי צו שעפּן דאַטן פּאָזיציע פארמען און קאָנטראָלירן וואָס דער באַניצער איז אריין
- ווי צו אַרבעטן מיט די דאַטאַבייס - שאַפֿן, לייענען, דערהייַנטיקן און ויסמעקן אַקשאַנז
Проверка погоды в вашем местоположении
פּרויעקט גיטהוב
אויב איר ווילן צו שאַפֿן אַפּפּס, אָנהייבן מיט אַ וועטער אַפּ. דעם פּרויעקט קענען זיין געענדיקט מיט סוויפט.
אין אַדישאַן צו באַקומען דערפאַרונג אין בויען אַ אַפּלאַקיישאַן, איר וועט לערנען:
- ווי צו אַרבעטן מיט די API
- ווי צו נוצן געאָלאָקאַטיאָן
- מאַכן דיין אַפּלאַקיישאַן מער דינאַמיש דורך אַדינג טעקסט אַרייַנשרייַב. אין עס, יוזערז קענען אַרייַן זייער אָרט צו קאָנטראָלירן די וועטער אין אַ ספּעציפיש אָרט.
איר וועט דאַרפֿן אַ API. צו באַקומען וועטער דאַטן, נוצן די OpenWeather API. מער אינפֿאָרמאַציע וועגן די OpenWeather API.
Окно чата
מייַן שמועס פֿענצטער אין קאַמף, עפענען אין צוויי בלעטערער טאַבס
שאפן אַ שמועס פֿענצטער איז די שליימעסדיק וועג צו אָנהייבן מיט סאַקאַץ. די ברירה פון טעק סטאַקס איז ריזיק. Node.js, פֿאַר בייַשפּיל, איז גאנץ.
איר וועט לערנען ווי סאַקאַץ אַרבעט און ווי צו ינסטרומענט זיי. דאָס איז דער הויפּט מייַלע פון דעם פּרויעקט.
אויב איר זענט אַ לאַראַוועל דעוועלאָפּער וואָס וויל צו אַרבעטן מיט סאַקאַץ, לייענען מיין
גיטלאַב סי
אויב איר זענט נייַ מיט קעסיידערדיק ינאַגריישאַן (CI), שפּיל מיט GitLab CI. שטעלן אַרויף אַ ביסל ינווייראַנמאַנץ און פּרובירן צו לויפן אַ פּאָר פון טעסץ. עס איז נישט אַ זייער שווער פּרויעקט, אָבער איך בין זיכער איר וועט לערנען אַ פּלאַץ פון אים. פילע אַנטוויקלונג טימז זענען איצט ניצן סי. וויסן ווי צו נוצן עס איז נוציק.
איר וועט לערנען:
- וואָס איז GitLab CI
- ווי צו קאַנפיגיער
.gitlab-ci.ymlוואָס דערציילט די GitLab באַניצער וואָס צו טאָן - ווי צו ווענדן צו אנדערע ינווייראַנמאַנץ
Анализатор сайтов
מאַכן אַ סקרייפּער וואָס אַנאַליזעס די סעמאַנטיקס פון וועבסיטעס און קריייץ זייער ראַנג. פֿאַר בייַשפּיל, איר קענען קאָנטראָלירן פֿאַר פעלנדיק אַלט טאַגס אין בילדער. אָדער טשעק אויב דער בלאַט האט SEO מעטאַ טאַגס. א סקרייפּער קענען זיין באשאפן אָן אַ באַניצער צובינד.
איר וועט לערנען:
- ווי אַזוי אַרבעט סקרייפּער?
- ווי צו שאַפֿן DOM סעלעקטאָרס
- ווי צו שרייַבן אַ אַלגערידאַם
- אויב איר טאָן נישט וועלן צו האַלטן דאָרט, שאַפֿן אַ באַניצער צובינד. איר קענט אויך שאַפֿן אַ באַריכט אויף יעדער וועבזייטל איר טשעק.
Определение настроений в социальных сетях
סענטימענט דיטעקשאַן אויף געזעלשאַפטלעך מידיאַ איז אַ גרויס וועג צו באַקומען באַקענענ צו מאַשין לערנען.
איר קענען אָנהייבן מיט אַנאַלייזינג בלויז איין געזעלשאַפטלעך נעץ. אַלעמען יוזשאַוואַלי סטאַרץ מיט טוויטטער.
אויב איר האָט שוין דערפאַרונג מיט מאַשין לערנען, פּרוּווט קאַלעקטינג דאַטן פון פאַרשידענע געזעלשאַפטלעך נעטוואָרקס און קאַמביינינג זיי.
איר וועט לערנען:
- וואָס איז מאַשין לערנען
Клон Trello
וואָס איר וועט לערנען:
- אָרגאַניזאַציע פון בעטן פּראַסעסינג רוץ (רוטינג).
- שלעפּן און פאַלן.
- ווי צו שאַפֿן נייַע אַבדזשעקץ (באָרדז, רשימות, קאַרדס).
- פּראַסעסינג און קאָנטראָלירונג אַרייַנשרייַב דאַטן.
- פֿון דער קליענט זייַט: ווי צו נוצן היגע סטאָרידזש, ווי צו ראַטעווען דאַטן אין היגע סטאָרידזש, ווי צו לייענען דאַטן פֿון היגע סטאָרידזש.
- פֿון די סערווער זייַט: ווי צו נוצן דאַטאַבייסיז, ווי צו ראַטעווען דאַטן אין די דאַטאַבייס, ווי צו לייענען דאַטן פֿון די דאַטאַבייס.
, געמאכט אין רעאַקט + רעדוקס.
Панель админа
א פּשוט CRUD אַפּלאַקיישאַן, ידעאַל פֿאַר לערנען די באַסיקס. לאמיר לערנען:
- שאַפֿן ניצערס, פירן ניצערס.
- ינטעראַקט מיט די דאַטאַבייס - שאַפֿן, לייענען, רעדאַגירן, ויסמעקן ניצערס.
- וואַלאַדייטינג אַרייַנשרייַב און אַרבעט מיט פארמען.
Трекер криптовалют (нативное мобильное приложение)
עפּעס: סוויפט, אָביעקטיוו-C, רעאַקט נאַטיווע, דזשאַוואַ, קאָטלין.
לאמיר לערנען:
- ווי געבוירן אַפּלאַקיישאַנז אַרבעט.
- ווי צו צוריקקריגן דאַטן פֿון די API.
- ווי געבוירן בלאַט לייאַוץ אַרבעט.
- ווי צו אַרבעטן מיט רירעוודיק סימיאַלייטערז.
. אויב איר געפֿינען עפּעס בעסער, שרייַבן אין די באַמערקונגען.
אויב איר זענט אינטערעסירט, דאָ עס איז .
Настроить собственный конфиг webpack с нуля
טעקניקלי, דאָס איז נישט אַן אַפּלאַקיישאַן, אָבער עס איז אַ זייער נוציק אַרבעט צו פֿאַרשטיין ווי וועבפּאַק אַרבעט פֿון אינעווייניק. איצט עס וועט נישט זיין אַ "שוואַרץ קעסטל", אָבער אַ פאַרשטיייק געצייַג.
רעקווירעמענץ:
- צונויפנעמען es7 צו es5 (באַסיקס).
- צונויפנעמען jsx צו js - אָדער - .vue צו .js (איר וועט האָבן צו לערנען לאָודערז)
- שטעלן אַרויף וועבפּאַק דעוו סערווער און הייס מאָדולע רילאָודינג. (vue-cli און create-react-app נוצן ביידע)
- ניצן Heroku, now.sh אָדער Github, לערנען ווי צו צעוויקלען וועבפּאַק פּראַדזשעקס.
- שטעלן דיין באַליבסטע פּרעפּראָסעססאָר צו צונויפנעמען css - scss, less, stylus.
- לערנען ווי צו נוצן בילדער און סווגס מיט וועבפּאַקק.
Клон Hackernews
יעדער דזשעדי איז פארלאנגט צו מאַכן זיין אייגענע העקערנעווס.
וואָס איר וועט לערנען אויף דעם וועג:
- ווי צו ינטעראַקט מיט Hackernews API.
- ווי צו שאַפֿן אַ איין בלאַט אַפּלאַקיישאַן.
- ווי צו ינסטרומענט פֿעיִקייטן אַזאַ ווי וויוינג באַמערקונגען, יחיד באַמערקונגען, פּראָופיילז.
- אָרגאַניזאַציע פון בעטן פּראַסעסינג רוץ (רוטינג).
Тудушечка
עמעס? טודושקא? עס זענען טויזנטער פון זיי. אבער גלויבן מיר, עס איז אַ סיבה פֿאַר דעם פּאָפּולאַריטעט.
די Tudu אַפּ איז אַ גרויס וועג צו מאַכן זיכער איר פֿאַרשטיין די באַסיקס. פּרוּווט שרייבן איין אַפּלאַקיישאַן אין וואַניל דזשאַוואַסקריפּט און איינער אין דיין באַליבסטע פריימווערק.
לערנען:
- שאַפֿן נייַע טאַסקס.
- קוק אַז די פעלדער זענען אָנגעפילט.
- פילטער טאַסקס (געענדיקט, אַקטיוו, אַלע). ניצן
filterиreduce. - פֿאַרשטיין די באַסיקס פון דזשאַוואַסקריפּט.
Сортируемый drag and drop список
זייער נוציק צו פֿאַרשטיין .
לאמיר לערנען:
- שלעפּן און פאַלן אַפּי
- שאַפֿן רייַך UI
Клон мессенджера (нативное приложение)
איר וועט פֿאַרשטיין ווי ביידע וועב אַפּלאַקיישאַנז און געבוירן אַפּלאַקיישאַנז אַרבעט, וואָס וועט באַזונדער איר פון די גרוי מאַסע.
וואָס מיר וועלן לערנען:
- וועב סאַקאַץ (רעגע אַרטיקלען)
- ווי געבוירן אַפּלאַקיישאַנז אַרבעט.
- ווי טעמפּלאַטעס אַרבעט אין געבוירן אַפּלאַקיישאַנז.
- אָרגאַנייזינג בעטן פּראַסעסינג רוץ אין געבוירן אַפּלאַקיישאַנז.
טעקסט רעדאַקטאָר
Цель текстового редактора — уменьшить усилия пользователей, пытающихся преобразовать их форматирование как валидную разметку HTML. Хороший текстовый редактор позволяет пользователям форматировать текст по-разному.
В какой-то момент каждый использовал текстовый редактор. Так почему бы не ?
Клон Reddit
— это агрегация социальных новостей, рейтинг веб-контента и сайт для обсуждений.
Reddit — занимает большую часть моего времени, но я продолжаю зависать на нем. Создание клона Reddit — это эффективный способ изучения программирования (при одновременном просмотре Reddit).
Reddit предоставляет вам очень богатый. Не упускайте какие-либо функции и не делайте как попало. В реальном мире с клиентами и покупателями, вы не сможете работать как попало, или вы быстро потеряете работу.
Умные клиенты сразу же догадаются, что работа выполняется плохо, и найдут кого-то другого.
Публикация пакета NPM с открытым исходным кодом
Если вы пишите код на Javascript, скорее всего, вы используете менеджер пакетов. Менеджер пакетов позволяет повторно использовать существующий код, который написали и опубликовали другие люди.
Понимание полного цикла разработки пакета даст очень хороший опыт. Есть много вещей, которые вам нужно знать при публикации кода. Вам нужно подумать о безопасности, семантическом управлении версиями, масштабируемости, соглашениях об именах и обслуживании.
Пакет может быть любым. Если у вас нет идеи, создайте свой собственный Lodash и опубликуйте его.
Lodash:
Наличие чего-то, что вы сделали в Интернете, ставит вас на 10% выше других. об открытых источниках и пакетах.
Учебный план freeCodeCamp
freeCodecamp собрал очень .
freeCodeCamp — это некоммерческая организация. Она состоит из интерактивной обучающей веб-платформы, онлайн-форума сообщества, чатов, публикаций Medium и местных организаций, которые намереваются сделать доступным для всех изучение веб-разработки.
Вы будете более чем квалифицированы для своей первой работы, если вам удастся завершить весь курс.
Создайте HTTP-сервер с нуля
Протокол HTTP является одним из основных протоколов, по которым контент попадает в Интернете. HTTP-серверы используются для обслуживания статического контента, такого как HTML, CSS и JS.
Возможность реализовать протокол HTTP с нуля расширит ваши знания о том, как все взаимодействует.
Например, если вы используете NodeJs, то вы знаете что Express предоставляет HTTP-сервер.
Для справки, посмотрите, сможете ли вы:
- Настроить сервер без использования каких-либо библиотек
- Сервер должен обслуживать содержимое HTML, CSS и JS.
- Внедрение маршрутизатора с нуля
- Следить за изменениями и обновлять сервер
Если вы не знаете с чего, воспользуйтесь и попытайтесь создать HTTP-сервер с нуля.
Десктопное приложение для заметок
Мы все делаем заметки, не так ли?
Давайте создадим приложение для заметок. Приложению необходимо сохранять заметки и синхронизировать их с базой данных. Создайте нативное приложение с помощью Electron, Swift или чего-то еще, что вам нравится, и что подходит для вашей системы.
Не стесняйтесь сочетать это с первым челленджом(текстовый редактор).
В качестве бонуса попробуйте синхронизировать десктопную версию с веб-версией.
Подкасты (клон Overcast)
Кто не слушает подкасты?
Создайте веб-приложение со следующими функциями:
- Завести аккаунт
- Поиск подкастов
- Оценивать и подписываться на подкасты
- Остановка и воспроизведение, изменение скорости, функции вперед и назад на 30 секунд.
В качестве отправной точки попробуйте использовать iTunes API. Если вы знаете какие-либо другие ресурсы, напишите в комментариях.
סקרין כאַפּן
Привет! Я снимаю свой экран прямо сейчас!
Создайте десктопное или веб-приложение, которое позволит вам захватить ваш экран и сохранить клип как .gif
דאָ , как добиться этого.
קוואלן
מקור: www.habr.com