1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
It artikel waard oerset mei de stipe fan EDISON Software, dy't , lykas ek .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Bonus: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Tink derom: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Tink derom: hjir .
Подборка проектов из предыдущих публикаций.
Laach
Layer — это сообщество, где каждый может нарисовать пиксель на общей «доске». Оригинальная идея родилась на Reddit. Сообщество r/Layer — это метафора совместного творчества, что каждый может быть творцом и вносить вклад в общее дело.
Чему вы научитесь создавай свой проект Layer:
- Как работают JavaScript canvas, умение оперировать canvas — критически важный навык во многих приложениях.
- Как координировать user permissions (пользовательские разрешения). Каждый пользователь может рисовать один пиксель раз в 15 минут и при этом не надо логиниться.
- Создавать cookie sessions.
Squoosh
Squoosh — это приложение по сжатию изображений с множеством продвинутых опций.
Гифка на 20 мб
Создавая свою версию Squoosh вы научитесь:
- Как работать с размерами изображений
- Освоите основы Drag‘n’Drop API
- Разберетесь как работают API и еvent listeners
- Как загружать и экспортировать файлы
Tink derom: компрессор изображений локален. Не обязательно отсылать дополнительные данные на сервер. Можно иметь компрессор у себя, а можно на сервер, на ваш выбор.
Rekkenmasine
Да ладно? Серьезно? Калькулятор? Да, именно, калькулятор. Понимать основы математических операций и как они работают совместно — критически важный навык для упрощения ваших приложений. Рано или поздно вам придется разбираться с числами и чем раньше, тем лучше.
Создавая свой калькулятор вы научитесь:
- Работать с числами и мат операциями
- Попрактикуетесь с event listeners API
- Как располагать элементы, разберетесь со стилями
Crawler (Поисковый движок)
Каждый пользовался поисковиком, так почему бы не создать собственный? Краулеры нужны чтобы искать информацию. Ими пользуются все каждый день и спрос со времменм на эту технологию и специалистов будет только расти.
Поисковик Гугла
Чему научитесь, создавая свой поисковик:
- Как работают краулеры
- Как индексировать сайты и как их ранжировать по рейтингу и репутации
- Как хранить индексированные сайты в базе данных и как работать с базой данных
Музыкальный плеер (Spotify, Apple Music)
Все слушают музыку — это просто неотьемлимая часть нашей жизни. Давайте создадим музыкальный плеер, чтобы лучше понять, как работает базовая механика современной платформы потоковой передачи музыки.
Spotify
Чему научитесь, создавая свою музыкальную стриминговую платформу:
- Как работать с API. использовать API от Spotify или Apple Music
- Как проигрывать, останавливать или перематывать на следующию/предыдущую композицию
- Как менять громкость
- Как управлять маршрутизацией пользователей и историей браузера
Filmsykapplikaasje mei React (mei haken)
It earste ding wêrmei jo kinne begjinne is om in filmsykapplikaasje te meitsjen mei React. Hjirûnder is in ôfbylding fan hoe't de definitive applikaasje der útsjen sil:
Wat sille jo leare
Troch dizze app te bouwen, sille jo jo React-feardigens ferbetterje troch de relatyf nije Hooks API te brûken. It foarbyldprojekt brûkt React-komponinten, in protte haken, in eksterne API, en fansels wat CSS-styling.
Tech stack en funksjes
- Reagearje mei heakken
- oanmeitsje-reagearje-app
- jsx
- CSS
Sûnder klassen te brûken, jouwe dizze projekten jo it perfekte yngongspunt yn funksjoneel React en sille jo grif helpe yn 2020. Do kinst fine . Folgje de ynstruksjes of meitsje it jo eigen.
Chat App mei Vue
In oar geweldich projekt foar jo om te dwaan is in petearapp te meitsjen mei myn favorite JavaScript-bibleteek: VueJS. De applikaasje sil der sa útsjen:
Wat sille jo leare
Yn dizze tutorial sille jo leare hoe't jo in Vue-app fanôf it begjin meitsje kinne - komponinten oanmeitsje, steat behannelje, rûtes oanmeitsje, ferbine mei tsjinsten fan tredden, en sels ferifikaasje behannelje.
Tech stack en funksjes
- vue
- vuex
- sjen router
- Sjoch CLI
- Pusher
- CSS
Dit is in echt geweldich projekt om mei Vue te begjinnen of jo besteande feardigens te ferbetterjen om yn 2020 yn ûntwikkeling te kommen. Do kinst fine .
Moaie waar-app mei Angular 8
Dit foarbyld sil jo helpe om in prachtige waarapplikaasje te meitsjen mei Angular 8:
Wat sille jo leare
Dit projekt sil jo weardefolle feardigens leare yn it bouwen fan applikaasjes fanôf it begjin - fan ûntwerp oant ûntwikkeling, oant in ynset-klear applikaasje.
Tech stack en funksjes
- Hoeke 8
- Firebase
- Server side rendering
- CSS mei Grid en Flexbox
- Mobile freonlik en oanpassingsfermogen
- Donkere modus
- Moaie ynterface
Wat ik echt hâld fan dit alles omfiemjende projekt is dat jo dingen net yn isolemint studearje. Ynstee learje jo it heule ûntwikkelingsproses, fan ûntwerp oant definitive ynset.
To-Do-applikaasje mei Svelte
Svelte is as it nije bern op 'e komponint-basearre oanpak - teminsten fergelykber mei React, Vue en Angular. En dit is ien fan 'e waarmste nije produkten foar 2020.
To-Do-apps binne net needsaaklik it heulste ûnderwerp, mar se sille jo wirklik helpe om jo Svelte-feardigens te ferbetterjen. It sil der sa útsjen:
Wat sille jo leare
Dit tutorial sil jo sjen litte hoe't jo in applikaasje meitsje mei Svelte 3, fan begjin oant ein. Jo sille komponinten, styling en hannelers foar eveneminten brûke
Tech stack en funksjes
- Swol 3
- Komponinten
- Styling mei CSS
- ES 6 syntaksis
D'r binne net folle goede Svelte startersprojekten, sa fûn ik .
E-commerce app mei Next.js
Next.js is it populêrste ramt foar it meitsjen fan React-applikaasjes dy't rendering fan serverside stypje bûten it fak.
Dit projekt sil jo sjen litte hoe't jo in e-commerce-applikaasje kinne oanmeitsje dy't der sa útsjocht:
Wat sille jo leare
Yn dit projekt sille jo leare hoe't jo kinne ûntwikkelje mei Next.js - nije siden en komponinten oanmeitsje, gegevens ekstrahearje en stylje en in Next-applikaasje ynsette.
Tech stack en funksjes
- Next.js
- Komponinten en siden
- Data sampling
- Styling
- Project Deployment
- SSR en SPA
It is altyd geweldich om in echte foarbyld te hawwen lykas in e-commerce-app om wat nijs te learen. Do kinst .
Folslein meartalich blog mei Nuxt.js
Nuxt.js is foar Vue, wat Next.js is foar React: in geweldich ramt foar it kombinearjen fan de krêft fan serverside-rendering en applikaasjes op ien side
De lêste applikaasje dy't jo kinne oanmeitsje sil der sa útsjen:
Wat sille jo leare
Yn dit foarbyldprojekt sille jo leare hoe't jo in folsleine webside meitsje kinne mei Nuxt.js, fan inisjele opset oant definitive ynset.
It profiteart fan in protte fan 'e koele funksjes dy't Nuxt te bieden hat, lykas siden en komponinten, en styling mei SCSS.
Tech stack en funksjes
- Nuxt.js
- Komponinten en siden
- Ferhaalblok module
- Hagfish
- Vuex foar steat behear
- SCSS foar styling
- Nuxt middlewares
, dy't in protte geweldige Nuxt.js-funksjes omfettet. Ik persoanlik hâld fan wurkjen mei Nuxt, dus jo moatte it besykje, om't it jo ek in geweldige Vue-ûntwikkelder sil meitsje.
Blog mei Gatsby
Gatsby is in poerbêste statyske sidegenerator mei React en GraphQL. Dit is it resultaat fan it projekt:
Wat sille jo leare
Yn dizze tutorial sille jo leare hoe't jo Gatsby brûke om in blog te meitsjen dat jo sille brûke om jo eigen artikels te skriuwen mei React en GraphQL.
Tech stack en funksjes
- gatsby
- Reagearje
- GraphQL
- Plugins en tema's
- MDX/Markdown
- Bootstrap CSS
- Templates
As jo oait in blog wolle begjinne, oer hoe't jo it kinne meitsje mei React en GraphQL.
Ik sis net dat WordPress in minne kar is, mar mei Gatsby kinne jo websiden mei hege prestaasjes bouwe mei React - wat in geweldige kombinaasje is.
Blog mei Gridsome
Gridsome foar Vue ... Okee, wy hiene dit al mei Next/Nuxt.
Mar itselde jildt foar Gridsome en Gatsby. Beide brûke GraphQL as har gegevenslaach, mar Gridsome brûkt VueJS. Dit is ek in geweldige statyske sidegenerator dy't jo sil helpe geweldige blogs te meitsjen:
Wat sille jo leare
Dit projekt sil jo leare hoe't jo in ienfâldich blog meitsje kinne om te begjinnen mei Gridsome, GraphQL en Markdown. It behannelt ek hoe't jo in applikaasje kinne ynsette fia Netlify.
Tech stack en funksjes
- Gridsome
- vue
- GraphQL
- Markdown
- Netify
Dit is wis net de meast wiidweidige tutorial, mar it beslacht de basisbegripen fan Gridsome en .
SoundCloud-like audiospieler mei Quasar
Quasar is in oar Vue-ramt dat kin wurde brûkt om mobile applikaasjes te meitsjen. Yn dit projekt sille jo in audiospielerapplikaasje oanmeitsje, bygelyks:
Wat sille jo leare
Wylst oare projekten benammen rjochtsje op webapplikaasjes, sil dizze jo sjen litte hoe't jo in mobile applikaasje kinne meitsje mei Vue en it Quasar-ramt.
Jo moatte Cordova al hawwe mei Android Studio / Xcode konfigureare. As net, hat de hantlieding in keppeling nei de Quasar-webside wêr't se jo sjen litte hoe't jo alles ynstelle.
Tech stack en funksjes
- quasar
- vue
- Cordova
- wavesurfer
- UI-komponinten
, demonstrearje Quasar's mooglikheden foar it meitsjen fan mobile applikaasjes.
Форма кредитной карты
In koele kredytkaartfoarm mei glêde en noflike mikro-ynteraksjes. Omfettet nûmeropmaak, ferifikaasje en automatyske deteksje fan kaarttype. It is boud op Vue.js en is ek folslein responsyf. (Do kinst sjen .)
Wat jo leare:
- Formulier ferwurkje en falidearje
- Behannelje eveneminten (bygelyks as fjilden feroarje)
- Begryp hoe't jo eleminten op 'e side werjaan en pleatse, benammen de kredytkaartynformaasje dy't boppe op it formulier ferskynt
staafgrafyk
In histogram is in diagram of grafyk dy't kategoriale gegevens fertsjintwurdiget mei rjochthoekige balken mei hichten of lingten evenredich mei de wearden dy't se fertsjintwurdigje.
Se kinne fertikaal of horizontaal tapast wurde. In fertikale staafdiagram wurdt soms in linediagram neamd.
Wat jo leare:
- Toan gegevens op in strukturearre en begryplike manier
- Derneist: Learje hoe't jo it elemint brûke
canvasen hoe te tekenjen eleminten mei it
Jo kinne gegevens oer de wrâldbefolking fine. Se wurde sortearre op jier.
Анимация сердечка Twitter
Werom yn 2016 yntrodusearre Twitter dizze geweldige animaasje foar har tweets. Fanôf 2019 liket it noch altyd it diel, dus wêrom net sels ien meitsje?
Wat jo leare:
- Wurkje mei CSS-attribút
keyframes - Manipulearje en animearje HTML-eleminten
- Kombinearje JavaScript, HTML en CSS
Репозитории GitHub с функцией поиска
D'r is hjir neat fancy - GitHub-repositories binne gewoan in ferhearlike list.
It doel is om de repositories wer te jaan en de brûker se te filterjen. Brûke om repositories foar elke brûker te krijen.
GitHub profyl side -
Wat jo leare:
- Untfang gegevens fan API
- Toan gegevens fan API
- Filter en lit relevante gegevens sjen foar elke sykopdracht
- Opsjoneel: as jo foar in útdaging binne, brûk dan , boud mei GraphQL. .
Чаты в стиле Reddit
Chats binne in populêre manier fan kommunikaasje fanwegen har ienfâld en gemak fan gebrûk. Mar wat echt brânstof moderne petearkeamers? WebSockets!
Wat jo leare:
- Brûk WebSockets, real-time kommunikaasje en gegevens updates
- Wurkje mei brûkerstagongsnivo's (bygelyks hat de eigner fan in petearkanaal de rol
admin, en oaren yn 'e keamer -user) - Formulier ferwurkje en falidearje - tink derom, it petearfinster foar it ferstjoeren fan in berjocht is
input - Meitsje en doch mei oan ferskate petearen
- Wurkje mei persoanlike berjochten. Brûkers kinne privee petearje mei oare brûkers. Yn essinsje sille jo in WebSocket-ferbining meitsje tusken twa brûkers.
Навигация в стиле Stripe
Wat dizze navigaasje unyk makket, is dat de popover-container transformeart om by de ynhâld te passen. D'r is in elegânsje oan dizze oergong yn ferliking mei it tradisjonele gedrach fan it iepenjen en sluten fan in nije popover.
Wat jo leare:
- Kombinearje CSS-animaasjes mei transysjes
- Dim ynhâld en tapasse aktive klasse op driuwend elemint
Pacman
Meitsje jo eigen ferzje fan Pacman. Dit is in geweldige manier om in idee te krijen fan hoe't spultsjes wurde ûntwikkele en de basis te begripen. Brûk in JavaScript-ramt, React of Vue.
Do silst leare:
- Hoe eleminten bewege
- Hoe om te bepalen hokker toetsen te drukken
- Hoe te bepalen it momint fan botsing
- Jo kinne fierder gean en spoekbewegingskontrôles tafoegje
Jo sille in foarbyld fan dit projekt fine GitHub
brûker behear
It projekt GitHub
It meitsjen fan in CRUD-type applikaasje foar brûkersadministraasje sil jo de basis fan ûntwikkeling leare. Dit is benammen nuttich foar nije ûntwikkelders.
Do silst leare:
- Wat is routing
- Hoe kinne jo formulieren foar gegevensynfier behannelje en kontrolearje wat de brûker hat ynfierd
- Hoe kinne jo wurkje mei de databank - aksjes oanmeitsje, lêze, bywurkje en wiskje
Проверка погоды в вашем местоположении
It projekt GitHub
As jo apps wolle oanmeitsje, begjin dan mei in waarapp. Dit projekt kin foltôge wurde mei Swift.
Neist it opheljen fan ûnderfining mei it bouwen fan in applikaasje, sille jo leare:
- Hoe wurkje mei de API
- Hoe geolokaasje te brûken
- Meitsje jo applikaasje dynamysker troch tekstynfier ta te foegjen. Dêryn kinne brûkers har lokaasje ynfiere om it waar op in spesifike lokaasje te kontrolearjen.
Jo sille in API nedich wêze. Om waargegevens te krijen, brûk de OpenWeather API. Mear ynformaasje oer de OpenWeather API.
Окно чата
Myn petearfinster yn aksje, iepen yn twa browserljeppers
In petearfinster oanmeitsje is de perfekte manier om te begjinnen mei sockets. De kar fan tech stack is enoarm. Node.js, bygelyks, is perfekt.
Jo sille leare hoe't sockets wurkje en hoe't jo se implementearje. Dit is it wichtichste foardiel fan dit projekt.
As jo in Laravel-ûntwikkelder binne dy't mei sockets wolle wurkje, lês dan myn
GitLab CI
As jo nij binne foar trochgeande yntegraasje (CI), spielje dan mei GitLab CI. Stel in pear omjouwings yn en besykje in pear tests út te fieren. It is net in hiel dreech projekt, mar ik bin der wis fan dat jo der in protte fan leare. In protte ûntwikkelingsteams brûke no CI. It is nuttich om te witten hoe't jo it brûke.
Do silst leare:
- Wat is GitLab CI
- Hoe te konfigurearjen
.gitlab-ci.ymldy't de GitLab-brûker fertelt wat te dwaan - Hoe ynsette nei oare omjouwings
Анализатор сайтов
Meitsje in skraper dy't de semantyk fan websiden analysearret en har beoardieling makket. Jo kinne bygelyks kontrolearje op ûntbrekkende alt-tags yn ôfbyldings. Of kontrolearje oft de side SEO-metatags hat. In skraper kin makke wurde sûnder in brûkersynterface.
Do silst leare:
- Hoe wurket skraper?
- Hoe meitsje DOM-selektors
- Hoe skriuw ik in algoritme?
- As jo dêr net wolle stopje, meitsje dan in brûkersynterface. Jo kinne ek in rapport meitsje op elke webside dy't jo kontrolearje.
Определение настроений в социальных сетях
Sentimintdeteksje op sosjale media is in geweldige manier om yntrodusearre te wurden yn masine learen.
Jo kinne begjinne mei it analysearjen fan mar ien sosjaal netwurk. Elkenien begjint normaal mei Twitter.
As jo al ûnderfining hawwe mei masine learen, besykje dan gegevens te sammeljen fan ferskate sosjale netwurken en se te kombinearjen.
Do silst leare:
- Wat is masine learen
Клон Trello
Wat jo sille leare:
- Organisaasje fan fersykferwurkingsrûtes (Routing).
- Sleepe en los litte.
- Hoe kinne jo nije objekten meitsje (boerden, listen, kaarten).
- It ferwurkjen en kontrolearjen fan ynfiergegevens.
- Fan 'e kant fan' e kliïnt: hoe't jo lokale opslach brûke, hoe't jo gegevens opslaan nei lokale opslach, hoe't jo gegevens lêze fan lokale opslach.
- Fan 'e serverkant: hoe't jo databases brûke, hoe't jo gegevens yn 'e database bewarje, hoe't jo gegevens fan 'e database lêze.
, makke yn React+Redux.
Панель админа
In ienfâldige CRUD-applikaasje, ideaal foar it learen fan de basis. Litte wy leare:
- Meitsje brûkers, beheare brûkers.
- Ynteraksje mei de databank - brûkers meitsje, lêze, bewurkje, wiskje.
- Validearje ynput en wurkje mei formulieren.
Трекер криптовалют (нативное мобильное приложение)
Alles: Swift, Objective-C, React Native, Java, Kotlin.
Litte wy studearje:
- Hoe native applikaasjes wurkje.
- Hoe kinne jo gegevens fan 'e API ophelje.
- Hoe native side-layouts wurkje.
- Hoe kinne jo wurkje mei mobile simulators.
. As jo wat better fine, skriuw dan yn 'e kommentaren.
As jo ynteressearre binne, hjir is it .
Настроить собственный конфиг webpack с нуля
Technysk is dit gjin applikaasje, mar it is in heul nuttige taak om te begripen hoe't webpack fan binnen wurket. No sil it gjin "swarte doaze" wêze, mar in begryplik ark.
Easken:
- Kompile es7 nei es5 (basis).
- Kompilearje jsx nei js - of - .vue nei .js (jo moatte loaders leare)
- Ynstelle webpack dev tsjinner en hot module reloading. (vue-cli en create-react-app brûke beide)
- Brûk Heroku, now.sh of Github, learje hoe't jo webpack-projekten kinne ynsette.
- Stel jo favorite preprocessor yn om css te kompilearjen - scss, less, stylus.
- Learje hoe't jo ôfbyldings en svgs kinne brûke mei webpack.
Клон Hackernews
Elke Jedi is ferplichte om syn eigen Hackernews te meitsjen.
Wat jo ûnderweis sille leare:
- Hoe kinne jo ynteraksje mei hackernews API.
- Hoe kinne jo in applikaasje op ien side oanmeitsje.
- Hoe kinne jo funksjes ymplementearje lykas besjen fan opmerkingen, yndividuele opmerkings, profilen.
- Organisaasje fan fersykferwurkingsrûtes (Routing).
Тудушечка
Serieus? Tudushka? Der binne tûzenen fan harren. Mar leau my, d'r is in reden foar dizze populariteit.
De Tudu-app is in geweldige manier om te soargjen dat jo de basis begripe. Besykje ien applikaasje te skriuwen yn vanilla Javascript en ien yn jo favorite ramt.
Leare:
- Meitsje nije taken.
- Kontrolearje dat de fjilden ynfolle binne.
- Filtertaken (foltôge, aktyf, allegear). Brûke
filterиreduce. - Begryp de basis fan Javascript.
Сортируемый drag and drop список
Hiel behelpsum om te begripen .
Litte wy leare:
- Sleep en drop API
- Meitsje rike UI's
Клон мессенджера (нативное приложение)
Jo sille begripe hoe't sawol webapplikaasjes as native applikaasjes wurkje, wat jo sil ûnderskiede fan 'e grize massa.
Wat wy sille studearje:
- Web sockets (direkte berjochten)
- Hoe native applikaasjes wurkje.
- Hoe sjabloanen wurkje yn native applikaasjes.
- Organisearje rûtes foar ferwurkjen fan fersyk yn native applikaasjes.
Tekstbewurker
Цель текстового редактора — уменьшить усилия пользователей, пытающихся преобразовать их форматирование как валидную разметку 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-сервер út it neat wei.
Десктопное приложение для заметок
Мы все делаем заметки, не так ли?
Давайте создадим приложение для заметок. Приложению необходимо сохранять заметки и синхронизировать их с базой данных. Создайте нативное приложение с помощью Electron, Swift или чего-то еще, что вам нравится, и что подходит для вашей системы.
Не стесняйтесь сочетать это с первым челленджом(текстовый редактор).
В качестве бонуса попробуйте синхронизировать десктопную версию с веб-версией.
Подкасты (клон Overcast)
Кто не слушает подкасты?
Создайте веб-приложение со следующими функциями:
- Meitsje in akkount
- Поиск подкастов
- Оценивать и подписываться на подкасты
- Остановка и воспроизведение, изменение скорости, функции вперед и назад на 30 секунд.
В качестве отправной точки попробуйте использовать iTunes API. Если вы знаете какие-либо другие ресурсы, напишите в комментариях.
Skermopname
Привет! Я снимаю свой экран прямо сейчас!
Создайте десктопное или веб-приложение, которое позволит вам захватить ваш экран и сохранить клип как .gif
hjir , как добиться этого.
Boarnen
Boarne: www.habr.com