Dojo eo anoloana: tetik'asa hampiofanana ny fahaizan'ny mpamorona (5 vaovao + 43 taona)

1. Клон Notion

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

www.notion.so

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

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

Nadika tamin'ny fanohanan'ny EDISON Software ny lahatsoratra, izay разрабатывает приложения и сайты, ary koa mampiasa vola amin'ny fanombohana.

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МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonus: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Fanamarihana: eto GitHub example repository.

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

Layer

www.reddit.com/r/layer

Layer — это сообщество, где каждый может нарисовать пиксель на общей «доске». Оригинальная идея родилась на Reddit. Сообщество r/Layer — это метафора совместного творчества, что каждый может быть творцом и вносить вклад в общее дело.

Чему вы научитесь создавай свой проект Layer:

• Как работают JavaScript canvas, умение оперировать canvas — критически важный навык во многих приложениях.
• Как координировать user permissions (пользовательские разрешения). Каждый пользователь может рисовать один пиксель раз в 15 минут и при этом не надо логиниться.
• Создавать cookie sessions.

Squoosh

squoosh.app

Squoosh — это приложение по сжатию изображений с множеством продвинутых опций.

Гифка на 20 мб

Создавая свою версию Squoosh вы научитесь:

• Как работать с размерами изображений
• Освоите основы Drag‘n’Drop API
• Разберетесь как работают API и еvent listeners
• Как загружать и экспортировать файлы

Fanamarihana: компрессор изображений локален. Не обязательно отсылать дополнительные данные на сервер. Можно иметь компрессор у себя, а можно на сервер, на ваш выбор.

fanaovana kajy

Да ладно? Серьезно? Калькулятор? Да, именно, калькулятор. Понимать основы математических операций и как они работают совместно — критически важный навык для упрощения ваших приложений. Рано или поздно вам придется разбираться с числами и чем раньше, тем лучше.

jarodburchill.github.io/CalculatorReactApp

Создавая свой калькулятор вы научитесь:

• Работать с числами и мат операциями
• Попрактикуетесь с event listeners API
• Как располагать элементы, разберетесь со стилями

Crawler (Поисковый движок)

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

Поисковик Гугла

Чему научитесь, создавая свой поисковик:

• Как работают краулеры
• Как индексировать сайты и как их ранжировать по рейтингу и репутации
• Как хранить индексированные сайты в базе данных и как работать с базой данных

Музыкальный плеер (Spotify, Apple Music)

Все слушают музыку — это просто неотьемлимая часть нашей жизни. Давайте создадим музыкальный плеер, чтобы лучше понять, как работает базовая механика современной платформы потоковой передачи музыки.

Spotify

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

• Как работать с API. использовать API от Spotify или Apple Music
• Как проигрывать, останавливать или перематывать на следующию/предыдущую композицию
• Как менять громкость
• Как управлять маршрутизацией пользователей и историей браузера

Fampiharana fikarohana sarimihetsika mampiasa React (miaraka amin'ny hooks)

Ny zavatra voalohany azonao atomboka dia ny mamorona rindranasa fikarohana sarimihetsika mampiasa React. Ity ambany ity ny sarin'ny ho endriky ny fampiharana farany:

Inona no hianaranao
Amin'ny fananganana ity fampiharana ity dia hanatsara ny fahaizanao React ianao amin'ny fampiasana ny API Hooks vaovao. Ny tetik'asa ohatra dia mampiasa singa React, hooks maro, API ivelany, ary mazava ho azy fa misy styling CSS.

Tech stack sy endri-javatra

• Mihetsika amin'ny farango
• mamorona-Maneho Hevitra Momba-fampiharana
• JSX
• CSS

Raha tsy mampiasa kilasy, ireo tetikasa ireo dia manome anao ny fidirana tonga lafatra amin'ny React miasa ary tena hanampy anao amin'ny 2020. afaka mahita ianao ohatra projet eto. Araho ny toromarika na ataovy ho anao manokana.

Chat App miaraka amin'ny Vue

Tetikasa lehibe iray hafa azonao atao ny mamorona rindranasa chat amin'ny fampiasana ny tranomboky JavaScript tiako indrindra: VueJS. Ny fampiharana dia hiseho toy izao:

Inona no hianaranao
Amin'ity lesona ity dia hianatra ny fomba fanaovana fampiharana Vue hatrany am-boalohany ianao - famoronana singa, fitantanana fanjakana, famoronana lalana, fifandraisana amin'ny serivisy an'ny antoko fahatelo, ary na dia ny fitantanana ny fanamarinana aza.

Tech stack sy endri-javatra

• Vue
• vuex
• Vue router
• Vidin'ny CLI
• Mpanosika
• CSS

Tetikasa tena tsara hanombohana amin'ny Vue na hanatsarana ny fahaizanao efa misy mba hidirana amin'ny fampandrosoana amin'ny taona 2020. afaka mahita ianao lesona eto.

Fampiharana toetr'andro tsara tarehy miaraka amin'ny Angular 8

Ity ohatra ity dia hanampy anao hamorona fampiharana toetr'andro tsara tarehy amin'ny fampiasana Angular 8:

Inona no hianaranao
Ity tetikasa ity dia hampianatra anao fahaiza-manao sarobidy amin'ny fananganana rindranasa hatrany am-boalohany - manomboka amin'ny famolavolana ka hatramin'ny fampandrosoana, hatrany amin'ny fampiharana efa vonona.

Tech stack sy endri-javatra

• Angular 8
• Firebase
• Famerenana amin'ny lafiny server
• CSS miaraka amin'ny Grid sy Flexbox
• Mobile friendly sy adaptability
• Maody maizina
• Interface tsara tarehy

Ny tena tiako amin'ity tetikasa ity dia ny tsy fandalinanao zavatra irery. Fa kosa, mianatra ny dingana fampandrosoana manontolo ianao, manomboka amin'ny famolavolana ka hatramin'ny fametrahana farany.

To-Do fampiharana mampiasa Svelte

Svelte dia toy ny zaza vaovao amin'ny fomba fiasa mifototra amin'ny singa - farafaharatsiny mitovy amin'ny React, Vue ary Angular. Ary ity dia iray amin'ireo vokatra vaovao mafana indrindra amin'ny taona 2020.

Ny fampiharana To-Do dia tsy voatery ho lohahevitra mafana indrindra, fa tena hanampy anao hanatsara ny fahaizanao Svelte. Ho toy izao izany:

Inona no hianaranao
Ity lesona ity dia hampiseho anao ny fomba hamoronana fampiharana mampiasa Svelte 3, manomboka amin'ny voalohany ka hatramin'ny farany. Hampiasa singa, styling, ary mpitantana hetsika ianao

Tech stack sy endri-javatra

• Svelte 3
• singa
• Styling miaraka amin'ny CSS
• ES 6 syntax

Tsy dia betsaka ny tetikasa fanombohana Svelte tsara, ka hitako safidy tsara hanombohana izany.

Fampiharana e-varotra mampiasa Next.js

Next.js no rafitra malaza indrindra amin'ny fananganana rindranasa React izay manohana ny famandrihana amin'ny lafiny mpizara ivelan'ny boaty.

Ity tetikasa ity dia hampiseho aminao ny fomba hamoronana rindranasa e-varotra tahaka izao:

Inona no hianaranao
Amin'ity tetikasa ity dia hianatra ny fomba mivelatra miaraka amin'ny Next.js ianao—mamorona pejy sy singa vaovao, maka angona ary fomba ary mametraka fampiharana Manaraka.

Tech stack sy endri-javatra

• Manaraka.js
• Ireo singa sy pejy
• Data sampling
• stylization
• Fametrahana tetikasa
• SSR sy SPA

Mahafinaritra foana ny manana ohatra tena izy toy ny fampiharana e-varotra hianarana zava-baovao. Ianao dia afaka jereo eto ny fampianarana.

Bilaogy feno fiteny amin'ny fiteny maro miaraka amin'ny Nuxt.js

Nuxt.js dia ho an'ny Vue, inona ny Next.js ho an'ny React: rafitra lehibe ahafahana manambatra ny herin'ny famandrihana amin'ny lafiny server sy ny fampiharana pejy tokana
Ny fampiharana farany azonao atao dia ho toy izao:

Inona no hianaranao

Amin'ity tetikasa santionany ity dia hianatra ny fomba hamoronana tranokala feno amin'ny fampiasana Nuxt.js ianao, manomboka amin'ny fananganana voalohany ka hatramin'ny fametrahana farany.

Manararaotra ny maro amin'ireo endri-javatra mahafinaritra atolotry ny Nuxt, toy ny pejy sy ny singa, ary ny fanaingoana amin'ny SCSS.

Tech stack sy endri-javatra

• Nuxt.js
• Ireo singa sy pejy
• Storyblock module
• Hagfish
• Vuex ho an'ny fitantanana fanjakana
• SCSS ho an'ny styling
• Nuxt middlewares

Tetikasa tena mahafinaritra tokoa ity, izay ahitana endri-javatra Nuxt.js lehibe maro. Izaho manokana dia tia miara-miasa amin'ny Nuxt ka tokony andramana ianao fa hahatonga anao ho mpamorona Vue lehibe ihany koa.

Bilaogy miaraka amin'i Gatsby

Gatsby dia mpamorona tranokala static tena tsara mampiasa React sy GraphQL. Izao no vokatry ny tetikasa:

Inona no hianaranao

Amin'ity lesona ity dia hianatra ny fomba fampiasana Gatsby ianao hamorona bilaogy izay hampiasainao hanoratana ny lahatsoratrao manokana amin'ny fampiasana React sy GraphQL.

Tech stack sy endri-javatra

• gatsby
• Maneho Hevitra Momba
• GraphQL
• Plugins sy lohahevitra
• MDX/Markdown
• Bootstrap CSS
• Templates

Raha efa te hanomboka bilaogy ianao, ohatra tsara izany momba ny fomba hanaovana izany amin'ny fampiasana React sy GraphQL.

Tsy milaza aho fa safidy ratsy ny WordPress, fa miaraka amin'i Gatsby dia afaka manangana tranokala avo lenta ianao amin'ny fampiasana React - izay fitambarana mahavariana.

Bilaogy miaraka amin'i Gridsome

Gridsome ho an'ny Vue... Eny, efa nanana an'ity izahay miaraka amin'ny Next/Nuxt.
Fa toy izany koa ny Gridsome sy Gatsby. Samy mampiasa GraphQL ho toy ny soson'ny angonany izy roa, fa ny Gridsome kosa dia mampiasa VueJS. Ity koa dia mpamorona tranokala static mahavariana izay hanampy anao hamorona bilaogy mahafinaritra:

Inona no hianaranao

Ity tetikasa ity dia hampianatra anao ny fomba hamoronana bilaogy tsotra hanombohana amin'ny Gridsome, GraphQL ary Markdown. Izy io koa dia mirakitra ny fomba fametrahana fampiharana amin'ny Netlify.

Tech stack sy endri-javatra

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

Ity dia azo antoka fa tsy ny fampianarana feno indrindra, fa mirakitra ny foto-kevitra fototra momba ny Gridsome sy Mety ho fanombohana tsara ny Markdown.

Mpilalao feo mitovy amin'ny SoundCloud mampiasa Quasar

Quasar dia rafitra Vue hafa azo ampiasaina hamoronana rindranasa finday. Amin'ity tetikasa ity dia hamorona fampiharana mpilalao audio ianao, ohatra:

Inona no hianaranao

Raha mifantoka indrindra amin'ny rindranasa an-tranonkala ny tetikasa hafa, ity iray ity dia hampiseho aminao ny fomba hamoronana rindranasa finday mampiasa Vue sy ny rafitra Quasar.
Tokony efa manana Cordova mihazakazaka miaraka amin'ny Android Studio/Xcode ianao. Raha tsy izany, ny boky dia manana rohy mankany amin'ny tranokalan'ny Quasar izay atorony anao ny fomba fametrahana ny zava-drehetra.

Tech stack sy endri-javatra

• quasar
• Vue
• Cordova
• WaveSurfer
• UI Components

Tetikasa kely, mampiseho ny fahaizan'i Quasar amin'ny famoronana fampiharana finday.

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

Karazana carte de crédit mangatsiatsiaka miaraka amin'ny fifampikasohana bitika malefaka sy mahafinaritra. Ahitana fandrafetana isa, fanamarinana ary fitadiavana karazana karatra mandeha ho azy. Izy io dia miorina amin'ny Vue.js ary mamaly tanteraka ihany koa. (Hitanareo eto.)

carte de crédit-form

Inona no hianaranao:

• Manaova sy manamarina ny endrika
• Mitantana hetsika (ohatra, rehefa miova ny saha)
• Fantaro ny fomba fanehoana sy fametrahana singa eo amin'ny pejy, indrindra fa ny fampahalalana momba ny carte de crédit izay miseho eo an-tampon'ny endrika

graph bar

Ny histograma dia tabilao na grafika izay maneho angon-drakitra voasokajy miaraka amin'ny bara mahitsizoro miaraka amin'ny haavony na ny halavany mifanaraka amin'ny soatoavina asehony.

Izy ireo dia azo ampiharina mitsangana na mitsivalana. Ny tabilao mitsangana dia antsoina indraindray hoe tabilao tsipika.

Inona no hianaranao:

• Asehoy amin'ny fomba mirindra sy azo takarina ny angona
• Fanampin'izany: Ianaro ny fomba fampiasana ilay singa canvas sy ny fomba fanaovana sary singa miaraka aminy

izany afaka mahita angon-drakitra momba ny mponina eran-tany ianao. Alahatra araka ny taona izy ireo.

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

Niverina tamin'ny taona 2016, nampidirin'ny Twitter ity sary mihetsika mahagaga ity ho an'ny bitsikany. Hatramin'ny taona 2019, mbola mijery ny ampahany ihany izy io, koa maninona raha mamorona iray ny tenanao?

Inona no hianaranao:

• Miasa miaraka amin'ny toetra CSS keyframes
• Manipulate sy mamelona singa HTML
• Atambatra JavaScript, HTML ary CSS

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

Tsy misy zavatra mahafinaritra eto - lisitra feno voninahitra fotsiny ny fitahirizana GitHub.
Ny tanjona dia ny hampiseho ireo tahiry ary mamela ny mpampiasa hanivana azy ireo. Ampiasao GitHub API ofisialy mba hahazoana tahiry ho an'ny mpampiasa tsirairay.

Pejy piraofilina GitHub - github.com/indreklasn

Inona no hianaranao:

• Mandraisa angona avy amin'ny API
• Asehoy ny angona avy amin'ny API
• Sivana ary asehoy ny angona mifandraika amin'ny fikarohana tsirairay
• Azo atao: Raha toa ianao ka miatrika fanamby, ampiasao API v4, namboarina tamin'ny GraphQL. Raha te hianatra GraphQL ianao dia mandehana amin'ny iray amin'ireo lahatsoratra teo aloha.

Чаты в стиле Reddit

Ny chat dia fomba fifandraisana malaza noho ny fahatsorany sy ny fampiasana azy. Inona anefa no tena mahatonga ny chat room maoderina? WebSockets!

Inona no hianaranao:

• Mampiasà WebSockets, fifandraisana amin'ny fotoana tena izy ary fanavaozana data
• Miaraha miasa amin'ny haavon'ny fidirana amin'ny mpampiasa (ohatra, ny tompon'ny fantsona chat dia manana ny anjara asany admin, sy ny hafa ao amin'ny efitrano - user)
• Manaova sy manamarina ny endrika - tadidio fa ny varavarankelin'ny chat handefasana hafatra dia input
• Mamorona ary midira amin'ny chat samihafa
• Miasa amin'ny hafatra manokana. Afaka mifampiresaka manokana amin'ny mpampiasa hafa ny mpampiasa. Amin'ny ankapobeny dia hanangana fifandraisana WebSocket eo amin'ny mpampiasa roa ianao.

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

Ny mampiavaka ity fitetezana ity dia ny fiovan'ny kaontenera popover hifanaraka amin'ny atiny. Misy ny hakantony amin'ity tetezamita ity raha oharina amin'ny fihetsika mahazatra amin'ny fanokafana sy fanakatonana popover vaovao.

Inona no hianaranao:

• Manambatra ny sary mihetsika CSS miaraka amin'ny fifindrana
• Aforeto ny atiny ary ampiharo ny kilasy mavitrika amin'ny singa mitsingevana

Pacman

Mamorona ny kinova Pacman anao manokana. Ity dia fomba tsara hahazoana hevitra momba ny fivoaran'ny lalao sy ny fahazoana ny fototra. Mampiasà framework JavaScript, React na Vue.

Hianaranao:

• Ahoana ny fihetsiky ny singa
• Ahoana no hamaritana izay fanalahidy hotsindriana
• Ahoana no hamaritana ny fotoana fifandonana
• Afaka mandroso bebe kokoa ianao ary manampy fanaraha-maso hetsika matoatoa

Hahita ohatra amin'ity tetikasa ity ianao ao amin'ny repository GitHub

fitantanana mpampiasa

Ny tetikasa ao amin'ny repository GitHub

Ny famoronana rindranasa karazana CRUD ho an'ny fitantanana mpampiasa dia hampianatra anao ny fototry ny fampandrosoana. Tena ilaina izany ho an'ny mpamorona vaovao.

Hianaranao:

• Inona no atao hoe routing
• Ahoana ny fomba fitantanana ireo endrika fampidirana angon-drakitra ary manamarina izay nampidirin'ny mpampiasa
• Ahoana ny fomba fiasa miaraka amin'ny angon-drakitra - mamorona, mamaky, manavao ary mamafa hetsika

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

Ny tetikasa ao amin'ny repository GitHub

Raha te hamorona fampiharana ianao dia manomboka amin'ny fampiharana toetr'andro. Ity tetikasa ity dia azo atao amin'ny fampiasana Swift.

Ho fanampin'ny fahazoana traikefa amin'ny fananganana fampiharana dia hianatra ianao:

• Ahoana ny fomba fiasa miaraka amin'ny API
• Ahoana ny fampiasana geolocation
• Ataovy mavitrika kokoa ny fampiharanao amin'ny fampidirana lahatsoratra. Ao anatin'izany, ireo mpampiasa dia afaka miditra amin'ny toerana misy azy mba hijery ny toetr'andro amin'ny toerana voafaritra.

Mila API ianao. Mba hahazoana angona momba ny toetrandro, ampiasao ny OpenWeather API. Fanazavana bebe kokoa momba ny OpenWeather API eto.

Окно чата

Miasa ny varavarankelin'ny chat-ko, misokatra amin'ny tabilao navigateur roa

Ny famoronana varavarankelin'ny chat no fomba tsara hanombohana amin'ny sockets. Ny safidy ny stack teknolojia dia lehibe. Node.js, ohatra, dia tonga lafatra.

Hianatra ny fomba fiasan'ny socket sy ny fampiharana azy ireo ianao. Izany no tombony lehibe amin'ity tetikasa ity.

Raha mpamorona Laravel ianao izay te hiasa amin'ny sockets, vakio ny my lahatsoratra

GitLab CI

loharano

Raha vaovao amin'ny fampidirana mitohy (CI) ianao, milalao miaraka amin'ny GitLab CI. Manangàna tontolo vitsivitsy ary manandrama manao fitsapana roa. Tsy dia tetik'asa sarotra loatra izany, fa azoko antoka fa hiana-javatra betsaka avy amin'izany ianao. Ekipa fampandrosoana maro izao no mampiasa CI. Mahasoa ny mahafantatra ny fomba fampiasana azy.

Hianaranao:

• Inona no atao hoe GitLab CI
• Ahoana ny fametrahana .gitlab-ci.ymlizay milaza amin'ny mpampiasa GitLab ny tokony hatao
• Ahoana ny fametrahana amin'ny tontolo hafa

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

Manaova scraper izay manadihady ny semantika amin'ny tranokala ary mamorona ny naoty. Ohatra, azonao atao ny manamarina raha misy marika alt tsy hita ao amin'ny sary. Na jereo raha manana tag meta SEO ny pejy. Ny scraper dia azo noforonina tsy misy mpampiasa interface.

Hianaranao:

• Ahoana no fiasan'ny scraper?
• Ahoana ny famoronana DOM selectors
• Ahoana ny fanoratana algorithm
• Raha tsy te hijanona eo ianao dia mamorona interface tsara. Azonao atao ihany koa ny mamorona tatitra amin'ny tranokala tsirairay hojerenao.

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

loharano

Ny fitadiavana fihetseham-po amin'ny media sosialy dia fomba tsara hampahafantarana ny fianarana milina.

Afaka manomboka amin'ny famakafakana tambajotra sosialy iray monja ianao. Matetika ny olona rehetra dia manomboka amin'ny Twitter.

Raha efa manana traikefa amin'ny fianarana milina ianao dia andramo manangona angona avy amin'ny tambajotra sosialy samihafa ary manambatra azy ireo.

Hianaranao:

• Inona no atao hoe fianarana milina

Клон Trello

Trello clone avy amin'i Indrek Lasn.

Inona no hianaranao:

• Fandaminana ny lalana fanodinana fangatahana (Routing).
• Tariho ary ampidino.
• Ahoana ny famoronana zavatra vaovao (birao, lisitra, karatra).
• Fanodinana sy fanamarinana ny angona fidirana.
• Avy amin'ny lafiny mpanjifa: ny fomba fampiasana fitehirizana eo an-toerana, ny fomba fitahirizana angon-drakitra amin'ny fitahirizana eo an-toerana, ny famakiana ny angona avy amin'ny fitahirizana eo an-toerana.
• Avy amin'ny lafin'ny mpizara: ny fomba fampiasana angona, ny fomba fitahirizana angon-drakitra ao amin'ny tahiry, ny famakiana ny angona avy amin'ny tahiry.

Ity misy ohatra iray amin'ny repository, natao tao amin'ny React+Redux.

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

Github Repository.

Fampiharana CRUD tsotra, mety amin'ny fianarana ny fototra. Andao hianatra:

• Mamorona mpampiasa, mitantana mpampiasa.
• Mifandraisa amin'ny angon-drakitra - mamorona, mamaky, manova, mamafa mpampiasa.
• Manamarina ny fidirana sy miasa amin'ny endrika.

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

Github repository.

Na inona na inona: Swift, Objective-C, React Native, Java, Kotlin.

Andao hianatra:

• Ahoana ny fiasan'ny fampiharana teratany.
• Ahoana ny fomba fakana data avy amin'ny API.
• Ny fomba fiasan'ny fandrafetana pejy teratany.
• Ahoana ny fiasana amin'ny simulator finday.

Andramo ity API ity. Raha mahita zavatra tsara kokoa ianao dia manorata ao amin'ny fanehoan-kevitra.

Raha liana ianao dia ity ity misy fampianarana.

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

Ara-teknika, tsy fampiharana ity, fa asa tena ilaina ny mahatakatra ny fomba fiasan'ny webpack avy ao anatiny. Ankehitriny dia tsy ho "boaty mainty", fa fitaovana azo takarina.

fepetra takiana:

• Manangona es7 ka hatramin'ny es5 (fototra).
• Angony ny jsx amin'ny js - na - .vue mankany amin'ny .js (tsy maintsy mianatra loader ianao)
• Amboary ny mpizara webpack dev sy ny famerenana ny maody mafana. (vue-cli sy create-react-app dia mampiasa azy roa)
• Ampiasao ny Heroku, now.sh na Github, ianaro ny fomba fametrahana tetikasa webpack.
• Amboary ny preprocessor tianao indrindra hanangonana css - scss, less, stylus.
• Ianaro ny fampiasana sary sy svg amin'ny webpack.

Loharano mahagaga ho an'ireo vao manomboka tanteraka izany.

Клон Hackernews

Ny Jedi tsirairay dia takiana hanao ny hackernews azy manokana.

Inona no hianaranao eny an-dalana:

• Ahoana ny fifandraisana amin'ny hackernews API.
• Ahoana ny fomba hamoronana fampiharana pejy tokana.
• Ahoana ny fampiharana ireo endri-javatra toy ny fijerena fanehoan-kevitra, fanehoan-kevitra manokana, mombamomba.
• Fandaminana ny lalana fanodinana fangatahana (Routing).

Тудушечка

TodoMVC.

tena matotra? Tudushka? An'arivony izy ireo. Fa minoa ahy, misy antony izany laza.
Ny fampiharana Tudu dia fomba tsara hahazoana antoka fa azonao ny fototra. Andramo manoratra fampiharana iray amin'ny Javascript lavanila ary iray amin'ny rafitra tianao indrindra.

Mianara:

• Mamorona asa vaovao.
• Hamarino fa feno ny saha.
• Sivana ny asa (vita, mavitrika, rehetra). Ampiasao filter и reduce.
• Fantaro ny fototry ny Javascript.

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

Github repository.

Tena manampy hahatakatra drag and drop api.

Andao hianatra:

• Tariho ary ampidino ny API
• Mamorona UI manankarena

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

Ho azonao ny fomba fiasan'ny rindranasa an-tranonkala sy ny fampiharana teratany, izay hampiavaka anao amin'ny faobe volondavenona.

Inona no hianarantsika:

• Web sockets (hafatra avy hatrany)
• Ahoana ny fiasan'ny fampiharana teratany.
• Ahoana ny fiasan'ny môdely amin'ny fampiharana teratany.
• Fandaminana lalana fanodinana fangatahana amin'ny fampiharana teratany.

Mpanonta lahatsoratra

Ny tanjon'ny tonian-dahatsoratra dia ny hampihenana ny ezaky ny mpampiasa manandrana manova ny formatany ho marika HTML manan-kery. Ny tonian-dahatsoratra tsara dia ahafahan'ny mpampiasa mamolavola lahatsoratra amin'ny fomba samihafa.

Tamin'ny fotoana iray dia nampiasa mpamoaka lahatsoratra ny tsirairay. Ka maninona no tsy mamorona azy ny tenanao?

Клон Reddit

Reddit dia fanangonana vaovao ara-tsosialy, naoty votoaty amin'ny Internet ary tranokala fifanakalozan-kevitra.

Mandany ny ankamaroan'ny fotoanako i Reddit, saingy manohy mihantona amin'izany aho. Ny famoronana clone Reddit dia fomba mahomby hianarana fandaharana (raha mijery ny Reddit amin'ny fotoana iray ihany).

Reddit dia manome anao harena be API. Aza miala amin'ny endri-javatra na manao zavatra tsy misy dikany. Ao amin'ny tontolo tena misy mpanjifa sy mpanjifa, tsy afaka miasa kisendrasendra ianao, na ho very asa haingana.

Ny mpanjifa manan-tsaina dia hahatsapa avy hatrany fa ny asa dia tsy vita ary hahita olon-kafa.

Reddit API

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

Raha manoratra kaody Javascript ianao, dia mety hampiasa mpitantana fonosana ianao. Ny mpitantana fonosana dia ahafahanao mampiasa indray ny code efa misy izay nosoratan'ny olon-kafa sy navoaka.

Ny fahatakarana ny tsingerin'ny fivoaran'ny fonosana iray dia hanome traikefa tena tsara. Betsaka ny zavatra tokony ho fantatrao rehefa mamoaka kaody. Mila mieritreritra momba ny fiarovana ianao, ny dikan-teny semantika, ny scalability, ny fifanarahana anarana ary ny fikojakojana.

Ny fonosana dia mety ho na inona na inona. Raha tsy manana hevitra ianao dia mamorona Lodash anao manokana ary avoaka.

Lodash: lodash.com

Ny fananana zavatra nataonao an-tserasera dia mametraka anao 10% ambony noho ny hafa. Ireto misy loharano mahasoa momba ny loharano misokatra sy fonosana.

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

FCC curriculum

freeCodecamp dia nanangona betsaka fampianarana fandaharana feno.

freeCodeCamp dia fikambanana tsy mitady tombony. Izy io dia ahitana sehatra fianarana mifototra amin'ny Internet, sehatra fifanakalozan-dresaka an-tserasera, efitrano firesahana, famoahana Mediam-bahoaka, ary fikambanana eo an-toerana izay mikasa ny hanao ny fampandrosoana ny tranonkala fianarana ho azon'ny rehetra.

Ho mendrika kokoa amin'ny asanao voalohany ianao raha mahavita ny fianarana manontolo.

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

Ny protocol HTTP dia iray amin'ireo protocole lehibe indrindra amin'ny fandehanana votoaty amin'ny Internet. Ny lohamilina HTTP dia ampiasaina hanompoana votoaty static toy ny HTML, CSS, ary JS.

Ny fahafahana mampihatra ny protocol HTTP hatrany am-boalohany dia hanitatra ny fahalalanao momba ny fifandraisan'ny zavatra.

Ohatra, raha mampiasa NodeJs ianao, dia fantatrao fa ny Express dia manome mpizara HTTP.

Jereo raha azonao atao:

• Manangana mpizara nefa tsy mampiasa tranomboky
• Ny mpizara dia tsy maintsy manolotra votoaty HTML, CSS ary JS.
• Fametrahana ny router avy amin'ny scratch
• Manara-maso ny fanovana ary manavao ny mpizara

Raha tsy fantatrao ny antony dia ampiasao Go lang ary manandrana mamorona mpizara HTTP Caddy hatrany am-boalohany.

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

Samy mandray an-tsoratra isika, sa tsy izany?

Andao hamorona app naoty. Ny fampiharana dia mila mitahiry naoty ary mampifanaraka azy ireo amin'ny angon-drakitra. Mamorona fampiharana teratany mampiasa Electron, Swift, na izay tianao ary izay mety amin'ny rafitrao.

Aza misalasala manambatra an'io amin'ny fanamby voalohany (tonian-dahatsoratra).

Amin'ny maha-bonus azy, andramo amboary ny kinova desktop-nao amin'ny dikan-tranonkala.

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

Iza no tsy mihaino podcasts?

Mamorona fampiharana amin'ny Internet miaraka amin'ireto fiasa manaraka ireto:

• Hamorona kaonty
• Hikaroka Podcast
• Manome naoty ary misoratra anarana amin'ny podcasts
• Mijanòna ary milalao, manova ny hafainganam-pandeha, mandroso sy miverina mandritra ny 30 segondra.

Andramo ny fampiasana ny iTunes API ho fanombohana. Raha mahafantatra loharano hafa ianao dia alefaso ao amin'ny fanehoan-kevitra.

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

Fakan-tsary

Salama! Maka sary an-tsary aho izao!

Mamorona fampiharana desktop na tranonkala ahafahanao maka sary ny efijery ary mitahiry ny clip ho .gif

eto toro-hevitra vitsivitsyny fomba hahatratrarana izany.

loharanom-baovao

• Tetik'asa fanofanana sahisahy 5 hafa ho an'ny mpamorona (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• 9 проектов для оттачивания Front-End мастерства
• Asa enina ho an'ny mpamorona Front-End
• Fanazaran-tena fialamboly ho an'ny developer
• Tetikasa fanabeazana 8
• Lisitry ny tetikasa hafa hampiharana

Source: www.habr.com