1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
A tumọ nkan naa pẹlu atilẹyin EDISON Software, eyiti Ati .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Ajeseku: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
akiyesi: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Ajeseku: Если вам интересно, я недавно написал на криптовалюту с React Native.
akiyesi: Nibi .
Подборка проектов из предыдущих публикаций.
Layer
Layer jẹ agbegbe nibiti gbogbo eniyan le fa ẹbun kan lori “ọkọ” ti a pin. Awọn atilẹba agutan a bi lori Reddit. Agbegbe r/Layer jẹ apẹrẹ fun ẹda ti o pin, pe gbogbo eniyan le jẹ ẹlẹda ati ki o ṣe alabapin si idi ti o wọpọ.
Ohun ti iwọ yoo kọ nigbati o ṣẹda iṣẹ akanṣe Layer tirẹ:
- Bawo ni kanfasi JavaScript ṣe n ṣiṣẹ Mọ bi o ṣe le ṣiṣẹ kanfasi jẹ ọgbọn pataki ni ọpọlọpọ awọn ohun elo.
- Bii o ṣe le ṣajọpọ awọn igbanilaaye olumulo. Olumulo kọọkan le fa ẹbun kan ni gbogbo iṣẹju 15 laisi nini lati wọle.
- Ṣẹda awọn akoko kuki.
Squoosh
Squoosh jẹ ohun elo funmorawon aworan pẹlu ọpọlọpọ awọn aṣayan ilọsiwaju.
GIF 20 MB
Nipa ṣiṣẹda ẹya tirẹ ti Squoosh iwọ yoo kọ ẹkọ:
- Bii o ṣe le ṣiṣẹ pẹlu awọn iwọn aworan
- Kọ ẹkọ awọn ipilẹ ti Drag'n'Drop API
- Loye bii API ati awọn olutẹtisi iṣẹlẹ ṣiṣẹ
- Bawo ni lati po si ati ki o okeere awọn faili
akiyesi: Awọn konpireso aworan jẹ agbegbe. Ko ṣe pataki lati fi data afikun ranṣẹ si olupin naa. O le ni konpireso ni ile, tabi o le lo o lori olupin, o fẹ.
Ẹrọ iṣiro
Kọja siwaju? Ni pataki? Ẹrọ iṣiro? Bẹẹni, gangan, ẹrọ iṣiro kan. Loye awọn ipilẹ ti awọn iṣẹ ṣiṣe iṣiro ati bii wọn ṣe n ṣiṣẹ papọ jẹ ọgbọn pataki fun sisọ awọn ohun elo rẹ dirọ. Pẹ tabi ya o yoo ni lati wo pẹlu awọn nọmba ati awọn Gere ti awọn dara.
Nipa ṣiṣẹda ẹrọ iṣiro tirẹ iwọ yoo kọ ẹkọ:
- Ṣiṣẹ pẹlu awọn nọmba ati awọn iṣẹ iṣiro
- Ṣiṣe pẹlu API awọn olutẹtisi iṣẹlẹ
- Bii o ṣe le ṣeto awọn eroja, loye awọn aza
Crawler (Ẹnjini wiwa)
Gbogbo eniyan ti lo ẹrọ wiwa, nitorina kilode ti o ko ṣẹda tirẹ? A nilo awọn crawlers lati wa alaye. Gbogbo eniyan lo wọn lojoojumọ ati ibeere fun imọ-ẹrọ yii ati awọn alamọja yoo dagba nikan ni akoko pupọ.
Google search engine
Ohun ti iwọ yoo kọ nipa ṣiṣẹda ẹrọ wiwa tirẹ:
- Bawo ni crawlers ṣiṣẹ
- Bii o ṣe le ṣe atọka awọn aaye ati bii o ṣe le ṣe ipo wọn nipasẹ iwọn ati orukọ rere
- Bii o ṣe le ṣafipamọ awọn aaye itọka sinu ibi ipamọ data ati bii o ṣe le ṣiṣẹ pẹlu data data
Ẹrọ orin (Spotify, Orin Apple)
Gbogbo eniyan ngbọ orin - o kan jẹ apakan pataki ti igbesi aye wa. Jẹ ki a ṣẹda ẹrọ orin kan lati ni oye daradara bi awọn ẹrọ ipilẹ ti pẹpẹ ṣiṣanwọle orin ode oni ṣe n ṣiṣẹ.
Spotify
Ohun ti iwọ yoo kọ nipa ṣiṣẹda Syeed ṣiṣan orin tirẹ:
- Bii o ṣe le ṣiṣẹ pẹlu API. lo API lati Spotify tabi Orin Apple
- Bii o ṣe le ṣere, sinmi tabi dapada sẹhin si orin atẹle/ti tẹlẹ
- Bii o ṣe le yi iwọn didun pada
- Bii o ṣe le ṣakoso ipa-ọna olumulo ati itan aṣawakiri
Приложение для поиска фильмов с помощью React (с хуками)
Первое, с чего вы могли бы начать, — это создать приложение для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть финальное приложение:
Kini iwọ yoo kọ
Создавая это приложение, вы улучшите свои навыки React, используя сравнительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стили CSS.
Технический стек и фичи
- React с hook’ами
- ṣẹda-fesi-app
- JSX
- CSS
Без использования каких-либо классов, эти проекты дают вам идеальную точку входа в функциональный React и определенно помогут вам в 2020 году. Вы можете найти . Следуйте инструкциям или сделайте все на собственный вкус.
Приложение чата с помощью Vue
Еще один отличный проект для вас — создать приложение чата, используя мою любимую библиотеку JavaScript: VueJS. Приложение будет выглядеть примерно так:
Kini iwọ yoo kọ
Из этого руководства вы узнаете, как сделать приложение Vue с нуля — создавать компоненты, обрабатывать состояния, создавать маршруты, подключаться к сторонним сервисам и даже обрабатывать аутентификацию.
Технический стек и фичи
- Wo
- vuex
- Vue olulana
- Vue CLI
- Titari
- CSS
Это действительно отличный проект, чтобы начать работать с Vue или улучшить свои существующие навыки, чтобы заняться разработкой в 2020 году. Вы можете найти .
Красивое приложение для просмотра погоды с Angular 8
Этот пример поможет вам создать красивое приложение для просмотра погоды с помощью Angular 8:
Kini iwọ yoo kọ
Этот проект научит вас ценным навыкам при создании приложений с нуля — начиная с проектирования и заканчивая разработкой, вплоть до готового к развертыванию приложения.
Технический стек и фичи
- Agbo 8
- Firebase
- Рендеринг на стороне сервера
- CSS с сеткой и Flexbox
- Mobile friendly и адаптивность
- Ipo okunkun
- Красивый интерфейс
Что мне действительно очень нравится в этом всеобъемлющем проекте, так это то, что вы не изучаете вещи изолированно. Вместо этого вы изучаете весь процесс разработки — от проектирования до окончательного развертывания.
To-Do приложение с помощью Svelte
Svelte это как новый ребенок в компонентном подходе — по крайней мере, похожий на React, Vue и Angular. И это одна из самых горячих новинок на 2020 год.
To-Do приложения не обязательно являются самой горячей темой, но это действительно поможет вам оттачивать свои навыки Svelte. Это будет выглядеть так:
Kini iwọ yoo kọ
Из этого туториала вы узнаете, как создать приложение с помощью Svelte 3, от начала до конца. Вы будете использовать компоненты, стилизацию и обработчики событий
Технический стек и фичи
- Svelte 3
- Awọn ohun elo
- Стилизация с помощью CSS
- Синтаксис ES 6
Существует не так много хороших стартовых проектов по Svelte, поэтому я нашел .
Приложение для электронной коммерции с помощью Next.js
Next.js является самым популярным фреймворком для создания приложений React, которые поддерживают рендеринг на стороне сервера из коробки.
Этот проект покажет вам, как создать приложение для электронной коммерции, которая выглядит следующим образом:
Kini iwọ yoo kọ
В этом проекте вы узнаете, как разрабатывать с помощью Next.js — создавать новые страницы и компоненты, извлекать данные, а также стилизовать и развертывать приложение Next.
Технический стек и фичи
- Nigbamii.js
- Компоненты и страницы
- Ayẹwo data
- Стилизация
- Развертывание проекта
- SSR и SPA
Всегда здорово иметь реальный пример, такой как приложение для электронной коммерции, чтобы узнать что-то новое. Вы можете .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js для Vue, тоже что и Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений
Последнее приложение, которое вы можете создать, будет выглядеть так:
Kini iwọ yoo kọ
В этом примере проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js — от начальной настройки до окончательного развертывания.
Он использует множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.
Технический стек и фичи
- Nuxt.js
- Компоненты и страницы
- Storyblock модуль
- Миксины
- Vuex для управления состоянием
- SCSS для стилизации
- Nuxt middlewares
, который включает в себя множество замечательных возможностей Nuxt.js. Я лично люблю работать с Nuxt, так что вам стоит попробовать его, так как это также сделает вас отличным разработчиком Vue.
Блог с Gatsby
Gatsby — отличный генератор статических сайтов, использующий React и GraphQL. Это результат проекта:
Kini iwọ yoo kọ
В этом руководстве вы узнаете, как использовать Gatsby для создания блога, который вы будете использовать для написания своих собственных статей, используя React и GraphQL.
Технический стек и фичи
- Gatsby
- Idahun
- Àwòrán QL
- Плагины и темы
- MDX/Markdown
- Bootstrap CSS
- Awọn awoṣe
Если вы когда-нибудь хотели завести блог, того, как сделать его, используя React и GraphQL.
Я не говорю, что WordPress является плохим выбором, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React — что является удивительной комбинацией.
Блог с Gridsome
Gridsome для Vue… Хорошо, у нас уже было это с Next/Nuxt.
Но то же самое верно для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:
Kini iwọ yoo kọ
Этот проект научит вас, как создать простой блог, чтобы начать работу с Gridsome, GraphQL и Markdown. В нем также рассказывается, как развернуть приложение через Netlify.
Технический стек и фичи
- Gridsome
- Wo
- Àwòrán QL
- Samisi
- Netlify
Это, конечно, не самый полный туториал, но он охватывает основные понятия Gridsome и .
Аудио плеер, похожий на SoundCloud, с помощью Quasar
Quasar — это еще один фреймворк Vue, который можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудио-плеера, например:
Kini iwọ yoo kọ
В то время как другие проекты сосредоточены в основном на веб-приложениях, этот покажет вам, как создать мобильное приложение с использованием Vue и фреймворка Quasar.
У вас уже должна быть работающая Cordova с настроенной Android Studio/Xcode. Если нет, то в руководстве есть ссылка на веб-сайт Quasar, где они показывают, как все настроить.
Технический стек и фичи
- quasar
- Wo
- Cordova
- WaveSurfer
- UI Компоненты
, демонстрирующий возможности Quasar для создания мобильных приложений.
Форма кредитной карты
Apẹrẹ kaadi kirẹditi ti o tutu pẹlu didan ati awọn ibaraẹnisọrọ bulọọgi-igbadun. Pẹlu kika nọmba, ijerisi ati wiwa iru kaadi laifọwọyi. O ti wa ni itumọ ti lori Vue.js ati ki o jẹ tun ni kikun idahun. (O le rii .)
Ohun ti o yoo kọ:
- Ilana ati sooto awọn fọọmu
- Mu awọn iṣẹlẹ mu (fun apẹẹrẹ, nigbati awọn aaye ba yipada)
- Loye bi o ṣe le ṣafihan ati gbe awọn eroja si oju-iwe naa, paapaa alaye kaadi kirẹditi ti o han ni oke fọọmu naa
igi awonya
Histogram jẹ aworan apẹrẹ tabi aworan ti o duro fun data isori pẹlu awọn ọpa onigun pẹlu awọn giga tabi gigun ni ibamu si awọn iye ti wọn ṣe aṣoju.
Wọn le lo ni inaro tabi petele. Aworan igi inaro ni a npe ni aworan ila nigba miiran.
Ohun ti o yoo kọ:
- Ṣe afihan data ni ọna ti a ṣeto ati oye
- Ni afikun: Kọ ẹkọ bi o ṣe le lo nkan naa
canvasati bi o ṣe le fa awọn eroja pẹlu rẹ
o le wa data olugbe agbaye. Wọn ti wa ni lẹsẹsẹ nipasẹ odun.
Анимация сердечка Twitter
Pada ni ọdun 2016, Twitter ṣafihan iwara iyalẹnu yii fun awọn tweets rẹ. Ni ọdun 2019, o tun dabi apakan, nitorina kilode ti o ko ṣẹda ọkan funrararẹ?
Ohun ti o yoo kọ:
- Ṣiṣẹ pẹlu awọn abuda CSS
keyframes - Ṣe afọwọyi ati ki o ṣe ere awọn eroja HTML
- Darapọ JavaScript, HTML ati CSS
Репозитории GitHub с функцией поиска
Ko si ohun ti o wuyi nibi — awọn ibi ipamọ GitHub jẹ atokọ ologo nikan.
Ibi-afẹde ni lati ṣafihan awọn ibi ipamọ ati gba olumulo laaye lati ṣe àlẹmọ wọn. Lo lati gba awọn ibi ipamọ fun olumulo kọọkan.
Oju-iwe profaili GitHub -
Ohun ti o yoo kọ:
- Gba data lati API
- Ṣe afihan data lati API
- Ṣe àlẹmọ ati ṣafihan data ti o yẹ fun wiwa kọọkan
- Yiyan: Ti o ba wa soke fun a ipenija, lo , ti a ṣe nipa lilo GraphQL. .
Чаты в стиле Reddit
Awọn iwiregbe jẹ ọna ibaraẹnisọrọ ti o gbajumọ nitori irọrun wọn ati irọrun ti lilo. Àmọ́ kí ló máa ń mú kí ilé ìfọ̀rọ̀wérọ̀ orí Íńtánẹ́ẹ̀tì túbọ̀ jóná lóde òní? WebSockets!
Ohun ti o yoo kọ:
- Lo WebSockets, ibaraẹnisọrọ akoko gidi ati awọn imudojuiwọn data
- Ṣiṣẹ pẹlu awọn ipele wiwọle olumulo (fun apẹẹrẹ, oniwun ikanni iwiregbe ni ipa naa
admin, ati awọn miiran ninu yara -user) - Ilana ati awọn fọọmu fọwọsi - ranti, window iwiregbe fun fifiranṣẹ ifiranṣẹ jẹ
input - Ṣẹda ati darapọ mọ awọn ibaraẹnisọrọ oriṣiriṣi
- Ṣiṣẹ pẹlu awọn ifiranṣẹ ti ara ẹni. Awọn olumulo le iwiregbe pẹlu awọn olumulo miiran ni ikọkọ. Ni pataki, iwọ yoo ṣe agbekalẹ asopọ WebSocket kan laarin awọn olumulo meji.
Навигация в стиле Stripe
Ohun ti o jẹ ki lilọ kiri yii jẹ alailẹgbẹ ni pe eiyan popover yipada lati baamu akoonu naa. Idaraya wa si iyipada yii ni akawe si ihuwasi aṣa ti ṣiṣi ati pipade popover tuntun kan.
Ohun ti o yoo kọ:
- Darapọ awọn ohun idanilaraya CSS pẹlu awọn iyipada
- Baìbai akoonu ati ki o waye lọwọ kilasi to leefofo ano
Pacman
Ṣẹda ti ara rẹ version of Pacman. Eyi jẹ ọna nla lati ni imọran bi awọn ere ṣe dagbasoke ati loye awọn ipilẹ. Lo ilana JavaScript, Fesi tabi Vue.
Iwọ yoo kọ ẹkọ:
- Bawo ni eroja gbe
- Bii o ṣe le pinnu iru awọn bọtini lati tẹ
- Bii o ṣe le pinnu akoko ijamba
- O le lọ siwaju ki o ṣafikun awọn idari gbigbe iwin
Iwọ yoo wa apẹẹrẹ ti iṣẹ akanṣe yii GitHub
olumulo isakoso
Ise agbese na GitHub
Ṣiṣẹda ohun elo iru CRUD fun iṣakoso olumulo yoo kọ ọ ni awọn ipilẹ idagbasoke. Eleyi jẹ paapa wulo fun titun Difelopa.
Iwọ yoo kọ ẹkọ:
- Kini ipa ọna
- Bii o ṣe le mu awọn fọọmu titẹsi data ati ṣayẹwo kini olumulo ti tẹ
- Bii o ṣe le ṣiṣẹ pẹlu ibi ipamọ data - ṣẹda, ka, imudojuiwọn ati paarẹ awọn iṣe
Проверка погоды в вашем местоположении
Ise agbese na GitHub
Ti o ba fẹ ṣẹda awọn ohun elo, bẹrẹ pẹlu ohun elo oju ojo kan. Ise agbese yii le pari ni lilo Swift.
Ni afikun si nini iriri kikọ ohun elo kan, iwọ yoo kọ ẹkọ:
- Bii o ṣe le ṣiṣẹ pẹlu API
- Bawo ni lati lo geolocation
- Jẹ ki ohun elo rẹ ni agbara diẹ sii nipa fifi titẹ ọrọ kun. Ninu rẹ, awọn olumulo yoo ni anfani lati tẹ ipo wọn sii lati ṣayẹwo oju ojo ni ipo kan pato.
Iwọ yoo nilo API kan. Lati gba data oju ojo, lo OpenWeather API. Alaye diẹ sii nipa OpenWeather API.
Окно чата
Ferese iwiregbe mi ni iṣe, ṣii ni awọn taabu aṣawakiri meji
Ṣiṣẹda ferese iwiregbe jẹ ọna pipe lati bẹrẹ pẹlu awọn iho. Yiyan akopọ imọ-ẹrọ jẹ tobi. Node.js, fun apẹẹrẹ, jẹ pipe.
Iwọ yoo kọ ẹkọ bii awọn iho ṣiṣẹ ati bii o ṣe le ṣe imuse wọn. Eyi ni anfani akọkọ ti iṣẹ akanṣe yii.
Ti o ba jẹ olupilẹṣẹ Laravel ti o fẹ ṣiṣẹ pẹlu awọn iho, ka mi
GitLab CI
Ti o ba jẹ tuntun si isọpọ igbagbogbo (CI), ṣiṣẹ ni ayika pẹlu GitLab CI. Ṣeto awọn agbegbe diẹ ki o gbiyanju ṣiṣe awọn idanwo meji kan. Kii ṣe iṣẹ akanṣe ti o nira pupọ, ṣugbọn Mo ni idaniloju pe iwọ yoo kọ ẹkọ pupọ lati ọdọ rẹ. Ọpọlọpọ awọn ẹgbẹ idagbasoke ti nlo CI bayi. Mọ bi o ṣe le lo o wulo.
Iwọ yoo kọ ẹkọ:
- Kini GitLab CI
- Bawo ni lati tunto
.gitlab-ci.ymleyiti o sọ fun olumulo GitLab kini lati ṣe - Bii o ṣe le ran lọ si awọn agbegbe miiran
Анализатор сайтов
Ṣe scraper ti o ṣe itupalẹ awọn atunmọ ti awọn oju opo wẹẹbu ati ṣẹda idiyele wọn. Fun apẹẹrẹ, o le ṣayẹwo fun sonu alt afi ni awọn aworan. Tabi ṣayẹwo ti oju-iwe naa ba ni awọn afi meta meta. A le ṣẹda scraper laisi wiwo olumulo.
Iwọ yoo kọ ẹkọ:
- Bawo ni scraper ṣiṣẹ?
- Bii o ṣe le ṣẹda awọn yiyan DOM
- Bii o ṣe le kọ algorithm kan
- Ti o ko ba fẹ da duro nibẹ, ṣẹda wiwo olumulo kan. O tun le ṣẹda ijabọ lori oju opo wẹẹbu kọọkan ti o ṣayẹwo.
Определение настроений в социальных сетях
Wiwa ero inu lori media awujọ jẹ ọna ti o dara julọ lati ṣe afihan si ikẹkọ ẹrọ.
O le bẹrẹ nipa ṣiṣayẹwo nikan ni nẹtiwọọki awujọ kan. Gbogbo eniyan nigbagbogbo bẹrẹ pẹlu Twitter.
Ti o ba ti ni iriri tẹlẹ pẹlu ẹkọ ẹrọ, gbiyanju gbigba data lati oriṣiriṣi awọn nẹtiwọọki awujọ ati apapọ wọn.
Iwọ yoo kọ ẹkọ:
- Kini ẹkọ ẹrọ
Клон Trello
Ohun ti o yoo kọ:
- Eto ti awọn ipa ọna ṣiṣe ibeere (Ipa-ọna).
- Fa ati ju silẹ.
- Bii o ṣe le ṣẹda awọn nkan tuntun (awọn igbimọ, awọn atokọ, awọn kaadi).
- Ṣiṣẹda ati ṣayẹwo data titẹ sii.
- Lati ẹgbẹ alabara: bii o ṣe le lo ibi ipamọ agbegbe, bii o ṣe le fi data pamọ si ibi ipamọ agbegbe, bii o ṣe le ka data lati ibi ipamọ agbegbe.
- Lati ẹgbẹ olupin: bawo ni a ṣe le lo awọn apoti isura infomesonu, bii o ṣe le fi data pamọ sinu ibi ipamọ data, bawo ni a ṣe le ka data lati ibi ipamọ data.
, ṣe ni React + Redux.
Панель админа
Ohun elo CRUD ti o rọrun, apẹrẹ fun kikọ ẹkọ awọn ipilẹ. Jẹ ki a kọ ẹkọ:
- Ṣẹda awọn olumulo, ṣakoso awọn olumulo.
- Ṣe ajọṣepọ pẹlu ibi ipamọ data - ṣẹda, ka, ṣatunkọ, paarẹ awọn olumulo.
- Ifọwọsi titẹ sii ati ṣiṣẹ pẹlu awọn fọọmu.
Трекер криптовалют (нативное мобильное приложение)
Ohunkohun: Swift, Objective-C, React Native, Java, Kotlin.
Jẹ ki a ṣe iwadi:
- Bawo ni awọn ohun elo abinibi ṣiṣẹ.
- Bii o ṣe le gba data lati API.
- Bawo ni awọn ipilẹ oju-iwe abinibi ṣe n ṣiṣẹ.
- Bii o ṣe le ṣiṣẹ pẹlu awọn simulators alagbeka.
. Ti o ba ri nkan ti o dara julọ, kọ sinu awọn asọye.
Ti o ba nife, o wa nibi .
Настроить собственный конфиг webpack с нуля
Ni imọ-ẹrọ, eyi kii ṣe ohun elo kan, ṣugbọn o jẹ iṣẹ ti o wulo pupọ lati ni oye bii apo-iwe wẹẹbu ṣe n ṣiṣẹ lati inu. Bayi kii yoo jẹ “apoti dudu”, ṣugbọn irinṣẹ oye.
Awọn ibeere:
- Ṣe akopọ es7 si es5 (awọn ipilẹ).
- Ṣajọ jsx si js - tabi - .vue si .js (iwọ yoo ni lati kọ awọn agberu)
- Ṣeto soke webpack dev server ati ki o gbona module reloading. (vue-cli ati ṣẹda-react-app lo awọn mejeeji)
- Lo Heroku, now.sh tabi Github, kọ ẹkọ bi o ṣe le ran awọn iṣẹ akanṣe webpack ṣiṣẹ.
- Ṣeto olupilẹṣẹ ayanfẹ rẹ lati ṣajọ css - scss, kere, stylus.
- Kọ ẹkọ bi o ṣe le lo awọn aworan ati svgs pẹlu apo wẹẹbu.
Клон Hackernews
Gbogbo Jedi ni a nilo lati ṣe Hackernews tirẹ.
Kini iwọ yoo kọ ni ọna:
- Bii o ṣe le ṣe ajọṣepọ pẹlu awọn hackernews API.
- Bii o ṣe le ṣẹda ohun elo oju-iwe kan.
- Bii o ṣe le ṣe awọn ẹya bii wiwo awọn asọye, awọn asọye kọọkan, awọn profaili.
- Eto ti awọn ipa ọna ṣiṣe ibeere (Ipa-ọna).
Тудушечка
Ni pataki? Tudushka? Ẹgbẹẹgbẹrun wọn lo wa. Ṣugbọn gbagbọ mi, idi kan wa fun olokiki yii.
Ohun elo Tudu jẹ ọna nla lati rii daju pe o loye awọn ipilẹ. Gbiyanju kikọ ohun elo kan ni fanila Javascript ati ọkan ninu ilana ayanfẹ rẹ.
Kọ ẹkọ:
- Ṣẹda titun awọn iṣẹ-ṣiṣe.
- Ṣayẹwo pe awọn aaye ti kun ni.
- Awọn iṣẹ-ṣiṣe àlẹmọ (ti pari, ṣiṣẹ, gbogbo). Lo
filterиreduce. - Loye awọn ipilẹ ti Javascript.
Сортируемый drag and drop список
Iranlọwọ pupọ lati ni oye .
Jẹ ki a kọ ẹkọ:
- Fa ati ju silẹ API
- Ṣẹda ọlọrọ UI
Клон мессенджера (нативное приложение)
Iwọ yoo loye bii awọn ohun elo wẹẹbu mejeeji ati awọn ohun elo abinibi ṣe n ṣiṣẹ, eyiti yoo ṣeto ọ yatọ si ibi-awọ grẹy.
Ohun ti a yoo kọ:
- Awọn iho wẹẹbu (awọn ifiranṣẹ lẹsẹkẹsẹ)
- Bawo ni awọn ohun elo abinibi ṣiṣẹ.
- Bawo ni awọn awoṣe ṣiṣẹ ni awọn ohun elo abinibi.
- Ṣiṣeto awọn ipa ọna ṣiṣe ibeere ni awọn ohun elo abinibi.
Olootu ọrọ
Idi ti olootu ọrọ ni lati dinku igbiyanju awọn olumulo ti n gbiyanju lati yi ọna kika wọn pada si isamisi HTML ti o wulo. Olootu ọrọ ti o dara gba awọn olumulo laaye lati ṣe ọna kika ọrọ ni awọn ọna oriṣiriṣi.
Ni aaye kan, gbogbo eniyan ti lo olootu ọrọ. Nítorí náà, idi ti ko ?
Клон Reddit
jẹ akopọ awọn iroyin awujọ, iwọn akoonu wẹẹbu ati aaye ijiroro.
Reddit gba to julọ ti mi akoko, sugbon mo tesiwaju a idorikodo jade lori o. Ṣiṣẹda oniye Reddit jẹ ọna ti o munadoko lati kọ ẹkọ siseto (lakoko lilọ kiri lori Reddit ni akoko kanna).
Reddit fun ọ ni ọlọrọ pupọ. Maṣe fi awọn ẹya eyikeyi silẹ tabi ṣe awọn nkan lainidi. Ni aye gidi pẹlu awọn onibara ati awọn onibara, o ko le ṣiṣẹ lainidi, tabi iwọ yoo padanu iṣẹ rẹ ni kiakia.
Smart ibara yoo lẹsẹkẹsẹ mọ pe awọn ise ti wa ni a ṣe ibi ati ki o yoo ri elomiran.
Публикация пакета NPM с открытым исходным кодом
Ti o ba kọ koodu Javascript, o ṣeeṣe ni o lo oluṣakoso package. Oluṣakoso package gba ọ laaye lati tun lo koodu to wa tẹlẹ ti awọn eniyan miiran ti kọ ati ṣe atẹjade.
Loye iwọn idagbasoke kikun ti package yoo pese iriri ti o dara pupọ. Ọpọlọpọ awọn nkan lo wa ti o nilo lati mọ nigbati o ba n tẹ koodu. O nilo lati ronu nipa aabo, ti ikede atunmọ, iwọn, awọn apejọ lorukọ ati itọju.
Awọn package le jẹ ohunkohun. Ti o ko ba ni imọran, ṣẹda Lodash tirẹ ki o ṣe atẹjade.
Lodash:
Nini nkan ti o ti ṣe lori ayelujara fi ọ 10% ju awọn miiran lọ. nipa awọn orisun ṣiṣi ati awọn idii.
Учебный план freeCodeCamp
freeCodecamp ti gba ọpọlọpọ .
freeCodeCamp jẹ ajọ ti ko ni ere. O ni pẹpẹ ti o da lori oju opo wẹẹbu ibaraenisepo, apejọ agbegbe lori ayelujara, awọn yara iwiregbe, awọn atẹjade alabọde, ati awọn ajọ agbegbe ti o pinnu lati jẹ ki idagbasoke wẹẹbu kikọ ni iraye si gbogbo eniyan.
Iwọ yoo jẹ diẹ sii ju oṣiṣẹ fun iṣẹ akọkọ rẹ ti o ba ṣakoso lati pari gbogbo iṣẹ ikẹkọ naa.
Создайте HTTP-сервер с нуля
Ilana HTTP jẹ ọkan ninu awọn ilana akọkọ nipasẹ eyiti akoonu nrin lori Intanẹẹti. Awọn olupin HTTP jẹ lilo lati ṣe iranṣẹ akoonu aimi gẹgẹbi HTML, CSS, ati JS.
Ni anfani lati ṣe ilana Ilana HTTP lati ibere yoo faagun imọ rẹ ti bii awọn nkan ṣe nlo.
Fun apẹẹrẹ, ti o ba lo NodeJs, lẹhinna o mọ pe Express n pese olupin HTTP kan.
Fun itọkasi, wo boya o le:
- Ṣeto olupin laisi lilo eyikeyi awọn ile-ikawe
- Olupin naa gbọdọ sin HTML, CSS ati akoonu JS.
- Nmu olulana lati ibere
- Bojuto awọn ayipada ati imudojuiwọn olupin naa
Ti o ko ba mọ idi, lo ati gbiyanju lati ṣẹda olupin HTTP kan lati ibere pepe.
Десктопное приложение для заметок
Gbogbo wa ni a ṣe akọsilẹ, abi?
Jẹ ki a ṣẹda ohun elo akọsilẹ. Ohun elo naa nilo lati ṣafipamọ awọn akọsilẹ ki o mu wọn ṣiṣẹpọ pẹlu aaye data. Kọ ohun elo abinibi kan nipa lilo Electron, Swift, tabi ohunkohun ti o fẹ ati ohun ti o ṣiṣẹ fun eto rẹ.
Lero ọfẹ lati darapo eyi pẹlu ipenija akọkọ (olootu ọrọ).
Gẹgẹbi ẹbun, gbiyanju mimuuṣiṣẹpọ ẹya tabili tabili rẹ pẹlu ẹya wẹẹbu.
Подкасты (клон Overcast)
Tani ko gbo adarọ-ese?
Ṣẹda ohun elo wẹẹbu kan pẹlu iṣẹ ṣiṣe atẹle:
- Ṣẹda akọọlẹ kan
- Wa Adarọ-ese
- Oṣuwọn ati ṣe alabapin si awọn adarọ-ese
- Duro ati mu ṣiṣẹ, yi iyara pada, siwaju ati sẹhin fun ọgbọn-aaya 30.
Gbiyanju lilo iTunes API bi aaye ibẹrẹ. Ti o ba mọ eyikeyi awọn orisun miiran, jọwọ firanṣẹ ni awọn asọye.
Yaworan iboju
Pẹlẹ o! Mo n yiya iboju mi ni bayi!
Ṣẹda tabili tabili tabi ohun elo wẹẹbu ti o fun ọ laaye lati ya iboju rẹ ki o fi agekuru naa pamọ bi .gif
Nibi bi o lati se aseyori yi.
Awọn orisun
orisun: www.habr.com