1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable strefa.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Artykuł został przetłumaczony przy wsparciu firmy EDISON Software, która a także .
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.
- Как работают оптимизация и обработка изображений.
Uwaga: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Uwaga: tutaj jest .
Подборка проектов из предыдущих публикаций.
Warstwa
Layer to społeczność, w której każdy może narysować piksel na wspólnej „tablicy”. Oryginalny pomysł zrodził się na Reddicie. Społeczność r/Layer jest metaforą wspólnej kreatywności, zgodnie z którą każdy może być twórcą i przyczyniać się do wspólnej sprawy.
Czego dowiesz się tworząc własny projekt Layer:
- Jak działa kanwa JavaScript Znajomość obsługi kanwy jest kluczową umiejętnością w wielu aplikacjach.
- Jak koordynować uprawnienia użytkowników. Każdy użytkownik może narysować jeden piksel co 15 minut bez konieczności logowania się.
- Utwórz sesje plików cookie.
Squoosh
Squoosh to aplikacja do kompresji obrazu z wieloma zaawansowanymi opcjami.
GIF-y 20MB
Tworząc własną wersję Squoosha dowiesz się:
- Jak pracować z rozmiarami obrazów
- Poznaj podstawy interfejsu API typu „przeciągnij i upuść”.
- Zrozum, jak działają interfejsy API i detektory zdarzeń
- Jak przesyłać i eksportować pliki
Uwaga: Kompresor obrazu jest lokalny. Nie ma konieczności przesyłania dodatkowych danych na serwer. Możesz mieć kompresor w domu lub możesz go używać na serwerze, według własnego wyboru.
Kalkulator
Pospiesz się? Poważnie? Kalkulator? Tak, dokładnie kalkulator. Zrozumienie podstaw operacji matematycznych i sposobu ich współdziałania jest kluczową umiejętnością pozwalającą na uproszczenie aplikacji. Prędzej czy później będziesz musiał uporać się z liczbami, a im szybciej, tym lepiej.
Tworząc własny kalkulator dowiesz się:
- Pracuj z liczbami i operacjami matematycznymi
- Poćwicz korzystanie z interfejsu API detektorów zdarzeń
- Jak rozmieścić elementy, zrozumieć style
Robot indeksujący (wyszukiwarka)
Każdy korzystał z wyszukiwarki, więc dlaczego nie stworzyć własnej? Roboty indeksujące są potrzebne do wyszukiwania informacji. Każdy korzysta z nich na co dzień, a zapotrzebowanie na tę technologię i specjalistów będzie z biegiem czasu tylko rosło.
Wyszukiwarka Google
Czego dowiesz się tworząc własną wyszukiwarkę:
- Jak działają roboty
- Jak indeksować witryny i oceniać je według oceny i reputacji
- Jak przechowywać zaindeksowane strony w bazie danych i jak pracować z bazą danych
Odtwarzacz muzyki (Spotify, Apple Music)
Muzyki słucha każdy – jest ona po prostu integralną częścią naszego życia. Stwórzmy odtwarzacz muzyki, aby lepiej zrozumieć, jak działa podstawowa mechanika nowoczesnej platformy do strumieniowego przesyłania muzyki.
Spotify
Czego dowiesz się tworząc własną platformę do strumieniowego przesyłania muzyki:
- Jak pracować z API. użyj API ze Spotify lub Apple Music
- Jak odtwarzać, wstrzymywać lub przewijać do następnego/poprzedniego utworu
- Jak zmienić głośność
- Jak zarządzać routingiem użytkowników i historią przeglądarki
Aplikacja do wyszukiwania filmów za pomocą React (z hakami)
Pierwszą rzeczą, od której możesz zacząć, jest utworzenie aplikacji do wyszukiwania filmów za pomocą React. Poniżej znajduje się obraz tego, jak będzie wyglądać ostateczna aplikacja:
Czego się nauczysz
Budując tę aplikację, udoskonalisz swoje umiejętności Reagowania, korzystając ze stosunkowo nowego API Hooks. Przykładowy projekt wykorzystuje komponenty React, mnóstwo hooków, zewnętrzne API i oczywiście trochę stylizacji CSS.
Stos technologii i funkcje
- Reaguj hakami
- Utwórz aplikację reagującą
- JSX
- CSS
Bez użycia żadnych klas, projekty te stanowią doskonały punkt wejścia do funkcjonalnego Reacta i na pewno pomogą Ci w 2020 roku. możesz znaleźć . Postępuj zgodnie z instrukcjami lub stwórz własny.
Aplikacja do czatowania z Vue
Kolejnym świetnym projektem, który możesz wykonać, jest stworzenie aplikacji do czatowania przy użyciu mojej ulubionej biblioteki JavaScript: VueJS. Aplikacja będzie wyglądać mniej więcej tak:
Czego się nauczysz
W tym samouczku dowiesz się, jak stworzyć aplikację Vue od podstaw – tworzyć komponenty, obsługiwać stan, tworzyć trasy, łączyć się z usługami stron trzecich, a nawet obsługiwać uwierzytelnianie.
Stos technologii i funkcje
- Vue
- vuex
- Vue router
- Widok CLI
- Popychacz
- CSS
To naprawdę świetny projekt, aby rozpocząć pracę z Vue lub udoskonalić swoje istniejące umiejętności, aby rozpocząć programowanie w 2020 roku. możesz znaleźć .
Piękna aplikacja pogodowa z Angular 8
Ten przykład pomoże Ci stworzyć piękną aplikację pogodową przy użyciu Angular 8:
Czego się nauczysz
Ten projekt nauczy Cię cennych umiejętności tworzenia aplikacji od podstaw - od projektu, przez rozwój, aż do aplikacji gotowej do wdrożenia.
Stos technologii i funkcje
- Kątowy 8
- Ognisko
- Renderowanie po stronie serwera
- CSS z Gridem i Flexboxem
- Przyjazny dla urządzeń mobilnych i możliwości dostosowania
- Tryb ciemny
- Piękny interfejs
To, co naprawdę podoba mi się w tym wszechstronnym projekcie, to to, że nie studiuje się rzeczy w izolacji. Zamiast tego uczysz się całego procesu programowania, od projektu po końcowe wdrożenie.
Aplikacja To-Do wykorzystująca Svelte
Svelte jest nowym dzieckiem w podejściu komponentowym - przynajmniej podobnym do React, Vue i Angular. A to jedna z najgorętszych nowości na rok 2020.
Aplikacje To-Do niekoniecznie są najgorętszym tematem, ale naprawdę pomogą Ci udoskonalić umiejętności Svelte. Będzie to wyglądać tak:
Czego się nauczysz
Ten samouczek pokaże Ci, jak od początku do końca stworzyć aplikację przy użyciu Svelte 3. Będziesz używać komponentów, stylów i procedur obsługi zdarzeń
Stos technologii i funkcje
- Smukły 3
- Components
- Stylizacja za pomocą CSS
- Składnia ES 6
Nie ma zbyt wielu dobrych projektów startowych Svelte, więc znalazłem .
Aplikacja e-commerce korzystająca z Next.js
Next.js to najpopularniejszy framework do tworzenia aplikacji React, które od razu obsługują renderowanie po stronie serwera.
W tym projekcie dowiesz się, jak stworzyć aplikację e-commerce wyglądającą tak:
Czego się nauczysz
W tym projekcie dowiesz się, jak programować za pomocą Next.js — tworzyć nowe strony i komponenty, wyodrębniać dane oraz stylizować i wdrażać aplikację Next.
Stos technologii i funkcje
- Next.js
- Komponenty i strony
- Próbkowanie danych
- Stylizacja
- Wdrożenie projektu
- SSR i SPA
Zawsze wspaniale jest mieć przykład z prawdziwego świata, np. aplikację e-commerce, aby nauczyć się czegoś nowego. Możesz .
Pełnoprawny wielojęzyczny blog z Nuxt.js
Nuxt.js jest dla Vue, tym czym Next.js jest dla React: świetna platforma do łączenia mocy renderowania po stronie serwera i aplikacji jednostronicowych
Ostateczna aplikacja, którą możesz utworzyć, będzie wyglądać następująco:
Czego się nauczysz
W tym przykładowym projekcie dowiesz się, jak utworzyć kompletną witrynę internetową przy użyciu Nuxt.js, od początkowej konfiguracji do końcowego wdrożenia.
Korzysta z wielu fajnych funkcji, które ma do zaoferowania Nuxt, takich jak strony i komponenty oraz stylizacja za pomocą SCSS.
Stos technologii i funkcje
- Nuxt.js
- Komponenty i strony
- Moduł Storyblock
- Śluzica
- Vuex dla zarządzania państwem
- SCSS do stylizacji
- Oprogramowanie pośrednie Nuxt
, który zawiera wiele wspaniałych funkcji Nuxt.js. Osobiście uwielbiam pracować z Nuxtem, więc powinieneś spróbować, ponieważ dzięki temu staniesz się także świetnym programistą Vue.
Bloguj z Gatsbym
Gatsby to doskonały generator stron statycznych wykorzystujący React i GraphQL. Oto efekt projektu:
Czego się nauczysz
W tym samouczku dowiesz się, jak używać Gatsby'ego do tworzenia bloga, którego będziesz używać do pisania własnych artykułów przy użyciu React i GraphQL.
Stos technologii i funkcje
- Gatsby
- React
- GraphQL
- Wtyczki i motywy
- MDX/przecena
- Bootstrap CSS
- Szablony
Jeśli kiedykolwiek chciałeś założyć bloga, o tym, jak to zrobić za pomocą React i GraphQL.
Nie twierdzę, że WordPress to zły wybór, ale dzięki Gatsby’emu możesz budować wydajne strony internetowe za pomocą React – co jest niesamowitą kombinacją.
Bloguj z Gridsome
Gridsome dla Vue... OK, już to mieliśmy z Next/Nuxt.
Ale to samo dotyczy Gridsome'a i Gatsby'ego. Obydwa używają GraphQL jako warstwy danych, ale Gridsome używa VueJS. Jest to także niesamowity generator stron statycznych, który pomoże Ci tworzyć świetne blogi:
Czego się nauczysz
W ramach tego projektu dowiesz się, jak stworzyć prosty blog, aby rozpocząć pracę z Gridsome, GraphQL i Markdown. Omówiono także sposób wdrażania aplikacji poprzez Netlify.
Stos technologii i funkcje
- Porażający
- Vue
- GraphQL
- Obniżka cen
- Netlifikuj
Z pewnością nie jest to najbardziej kompleksowy samouczek, ale obejmuje podstawowe pojęcia dotyczące Gridsome i .
Odtwarzacz audio podobny do SoundCloud wykorzystujący Quasar
Quasar to kolejny framework Vue, który można wykorzystać do tworzenia aplikacji mobilnych. W tym projekcie utworzysz aplikację odtwarzacza audio, na przykład:
Czego się nauczysz
Podczas gdy inne projekty skupiają się głównie na aplikacjach internetowych, ten pokaże Ci, jak stworzyć aplikację mobilną przy użyciu Vue i frameworku Quasar.
Powinieneś już mieć Cordovę działającą ze skonfigurowanym Androidem Studio/Xcode. Jeśli nie, w instrukcji znajduje się łącze do strony internetowej Quasar, gdzie pokazano, jak wszystko skonfigurować.
Stos technologii i funkcje
- Quasar
- Vue
- Cordova
- FalaSurfer
- Komponenty interfejsu użytkownika
, demonstrując możliwości Quasara w zakresie tworzenia aplikacji mobilnych.
Форма кредитной карты
Fajny kształt karty kredytowej z płynnymi i przyjemnymi mikrointerakcjami. Obejmuje formatowanie numerów, weryfikację i automatyczne wykrywanie typu karty. Jest zbudowany na Vue.js i jest w pełni responsywny. (Możesz zobaczyć .)
Czego się dowiesz:
- Przetwarzaj i sprawdzaj formularze
- Obsługa zdarzeń (na przykład zmiana pól)
- Dowiedz się, jak wyświetlać i umieszczać elementy na stronie, zwłaszcza informacje o karcie kredytowej, które pojawiają się na górze formularza
wykres słupkowy
Histogram to wykres lub diagram przedstawiający dane kategoryczne za pomocą prostokątnych słupków o wysokości lub długości proporcjonalnej do reprezentowanych przez nie wartości.
Można je nakładać pionowo lub poziomo. Pionowy wykres słupkowy jest czasami nazywany wykresem liniowym.
Czego się dowiesz:
- Wyświetlaj dane w uporządkowany i zrozumiały sposób
- Dodatkowo: Dowiedz się, jak korzystać z elementu
canvasi jak rysować za jego pomocą elementy
możesz znaleźć dane dotyczące światowej populacji. Są posortowane według roku.
Анимация сердечка Twitter
W 2016 roku Twitter wprowadził tę niesamowitą animację do swoich tweetów. Od 2019 r. nadal wygląda dobrze, więc dlaczego nie stworzyć go samodzielnie?
Czego się dowiesz:
- Pracuj z atrybutem CSS
keyframes - Manipuluj i animuj elementy HTML
- Połącz JavaScript, HTML i CSS
Репозитории GitHub с функцией поиска
Nie ma tu nic nadzwyczajnego — repozytoria GitHub to tylko chwalebna lista.
Celem jest wyświetlenie repozytoriów i umożliwienie użytkownikowi ich filtrowania. Używać aby uzyskać repozytoria dla każdego użytkownika.
Strona profilu GitHub —
Czego się dowiesz:
- Odbierz dane z API
- Wyświetl dane z API
- Filtruj i wyświetlaj odpowiednie dane dla każdego wyszukiwania
- Opcjonalnie: Jeśli masz ochotę na wyzwanie, użyj , zbudowany przy użyciu GraphQL. .
Чаты в стиле Reddit
Czaty są popularnym sposobem komunikacji ze względu na ich prostotę i łatwość obsługi. Ale co tak naprawdę napędza nowoczesne pokoje rozmów? WebSockety!
Czego się dowiesz:
- Korzystaj z WebSockets, komunikacji w czasie rzeczywistym i aktualizacji danych
- Pracuj z poziomami dostępu użytkowników (na przykład rolę pełni właściciel kanału czatu
admini inni w pokoju -user) - Przetwarzaj i zatwierdzaj formularze - pamiętaj, że okno czatu służące do wysyłania wiadomości to okno czatu
input - Twórz i dołączaj do różnych czatów
- Pracuj z wiadomościami osobistymi. Użytkownicy mogą rozmawiać prywatnie z innymi użytkownikami. Zasadniczo będziesz ustanawiać połączenie WebSocket między dwoma użytkownikami.
Навигация в стиле Stripe
To, co czyni tę nawigację wyjątkową, to fakt, że kontener wyskakujący zmienia się w celu dopasowania do zawartości. To przejście ma w sobie pewną elegancję w porównaniu z tradycyjnym zachowaniem otwierania i zamykania nowego wyskakującego okienka.
Czego się dowiesz:
- Połącz animacje CSS z przejściami
- Przyciemnij zawartość i zastosuj aktywną klasę do elementu pływającego
Pacman
Stwórz własną wersję Pacmana. To świetny sposób, aby dowiedzieć się, jak powstają gry i zrozumieć podstawy. Użyj frameworka JavaScript, React lub Vue.
Nauczysz się:
- Jak poruszają się elementy
- Jak określić, które klawisze należy nacisnąć
- Jak określić moment zderzenia
- Możesz pójść dalej i dodać kontrolę ruchu ducha
Znajdziesz przykład tego projektu GitHub
Zarządzanie użytkownikami
Projekt GitHub
Stworzenie aplikacji typu CRUD do administrowania użytkownikami nauczy Cię podstaw programowania. Jest to szczególnie przydatne dla nowych programistów.
Nauczysz się:
- Co to jest routing
- Jak obsługiwać formularze wprowadzania danych i sprawdzać, co wpisał użytkownik
- Jak pracować z bazą danych - tworzyć, czytać, aktualizować i usuwać akcje
Проверка погоды в вашем местоположении
Projekt GitHub
Jeśli chcesz tworzyć aplikacje, zacznij od aplikacji pogodowej. Ten projekt można ukończyć za pomocą Swift.
Oprócz zdobycia doświadczenia w budowaniu aplikacji dowiesz się:
- Jak pracować z API
- Jak korzystać z geolokalizacji
- Zwiększ dynamikę swojej aplikacji, dodając wprowadzanie tekstu. W nim użytkownicy będą mogli wpisać swoją lokalizację, aby sprawdzić pogodę w konkretnej lokalizacji.
Będziesz potrzebować API. Aby uzyskać dane pogodowe, użyj interfejsu API OpenWeather. Więcej informacji o API OpenWeather.
Окно чата
Moje okno czatu w akcji, otwarte w dwóch zakładkach przeglądarki
Utworzenie okna czatu to doskonały sposób na rozpoczęcie pracy z gniazdami. Wybór stosu technologicznego jest ogromny. Na przykład Node.js jest doskonały.
Dowiesz się jak działają gniazda i jak je wdrożyć. To główna zaleta tego projektu.
Jeśli jesteś programistą Laravel i chcesz pracować z gniazdami, przeczytaj mój
GitLab CI
Jeśli nie masz doświadczenia w ciągłej integracji (CI), pobaw się z GitLab CI. Skonfiguruj kilka środowisk i spróbuj uruchomić kilka testów. Nie jest to bardzo trudny projekt, ale jestem pewien, że wiele się z niego nauczysz. Wiele zespołów programistycznych korzysta obecnie z CI. Przydaje się wiedza, jak z niego korzystać.
Nauczysz się:
- Czym jest GitLab CI
- Jak skonfigurować
.gitlab-ci.ymlktóry mówi użytkownikowi GitLab, co ma robić - Jak wdrożyć w innych środowiskach
Анализатор сайтов
Zrób skrobak, który analizuje semantykę stron internetowych i tworzy ich ocenę. Możesz na przykład sprawdzić, czy w obrazach nie brakuje tagów alt. Lub sprawdź, czy strona ma metatagi SEO. Skrobak można utworzyć bez interfejsu użytkownika.
Nauczysz się:
- Jak działa skrobak?
- Jak utworzyć selektory DOM
- Jak napisać algorytm
- Jeśli nie chcesz na tym poprzestać, utwórz interfejs użytkownika. Możesz także utworzyć raport na temat każdej sprawdzanej witryny.
Определение настроений в социальных сетях
Wykrywanie nastrojów w mediach społecznościowych to świetny sposób na zapoznanie się z uczeniem maszynowym.
Możesz zacząć od analizy tylko jednej sieci społecznościowej. Każdy zwykle zaczyna od Twittera.
Jeśli masz już doświadczenie z uczeniem maszynowym, spróbuj zebrać dane z różnych sieci społecznościowych i połączyć je.
Nauczysz się:
- Co to jest uczenie maszynowe
Клон Trello
Czego się nauczysz:
- Organizacja tras przetwarzania żądań (Routing).
- Przeciągnij i upuść.
- Jak tworzyć nowe obiekty (tablice, listy, karty).
- Przetwarzanie i sprawdzanie danych wejściowych.
- Od strony klienta: jak korzystać z magazynu lokalnego, jak zapisywać dane do magazynu lokalnego, jak odczytywać dane z magazynu lokalnego.
- Od strony serwera: jak korzystać z baz danych, jak zapisywać dane w bazie, jak odczytywać dane z bazy.
, wykonane w React+Redux.
Панель админа
Prosta aplikacja CRUD, idealna do nauki podstaw. Nauczmy się:
- Twórz użytkowników, zarządzaj użytkownikami.
- Interakcja z bazą danych - twórz, czytaj, edytuj, usuwaj użytkowników.
- Sprawdzanie poprawności danych wejściowych i praca z formularzami.
Трекер криптовалют (нативное мобильное приложение)
Wszystko: Swift, Objective-C, React Native, Java, Kotlin.
Pouczmy się:
- Jak działają aplikacje natywne.
- Jak pobrać dane z API.
- Jak działają natywne układy strony.
- Jak pracować z symulatorami mobilnymi.
. Jeśli znajdziesz coś lepszego, napisz w komentarzach.
Jeśli jesteś zainteresowany, tutaj jest .
Настроить собственный конфиг webpack с нуля
Technicznie rzecz biorąc, nie jest to aplikacja, ale bardzo przydatne jest zrozumienie, jak działa webpack od środka. Teraz nie będzie to „czarna skrzynka”, ale zrozumiałe narzędzie.
wymagania:
- Skompiluj es7 do es5 (podstawy).
- Skompiluj jsx do js - lub - .vue do .js (musisz nauczyć się programów ładujących)
- Skonfiguruj serwer deweloperski pakietu internetowego i przeładowanie modułu na gorąco. (vue-cli i create-react-app używają obu)
- Użyj Heroku, now.sh lub Github, dowiedz się, jak wdrażać projekty pakietów internetowych.
- Skonfiguruj swój ulubiony preprocesor do kompilacji css - scss, less, rysik.
- Dowiedz się, jak używać obrazów i plików SVG w pakiecie internetowym.
Клон Hackernews
Każdy Jedi ma obowiązek tworzyć własne Hackernews.
Czego dowiesz się po drodze:
- Jak wchodzić w interakcję z API hackernews.
- Jak utworzyć aplikację jednostronicową.
- Jak wdrożyć funkcje takie jak przeglądanie komentarzy, komentarzy indywidualnych, profili.
- Organizacja tras przetwarzania żądań (Routing).
Тудушечка
Poważnie? Tuduszka? Są ich tysiące. Ale uwierz mi, istnieje powód tej popularności.
Aplikacja Tudu to świetny sposób, aby upewnić się, że rozumiesz podstawy. Spróbuj napisać jedną aplikację w waniliowym JavaScript i jedną w swoim ulubionym frameworku.
Uczyć się:
- Twórz nowe zadania.
- Sprawdź, czy pola są wypełnione.
- Filtruj zadania (ukończone, aktywne, wszystkie). Używać
filterиreduce. - Zrozum podstawy JavaScriptu.
Сортируемый drag and drop список
Bardzo pomocne w zrozumieniu .
Nauczmy się:
- Przeciągnij i upuść interfejs API
- Twórz bogate interfejsy użytkownika
Клон мессенджера (нативное приложение)
Zrozumiesz, jak działają zarówno aplikacje webowe, jak i aplikacje natywne, co wyróżni Cię z szarej masy.
Co będziemy studiować:
- Gniazda internetowe (wiadomości błyskawiczne)
- Jak działają aplikacje natywne.
- Jak szablony działają w aplikacjach natywnych.
- Organizowanie tras przetwarzania żądań w aplikacjach natywnych.
Edytor tekstu
Celem edytora tekstu jest zmniejszenie wysiłku użytkowników próbujących przekonwertować swoje formatowanie na prawidłowe znaczniki HTML. Dobry edytor tekstu pozwala użytkownikom formatować tekst na różne sposoby.
Każdy kiedyś korzystał z edytora tekstu. Więc dlaczego nie ?
Клон Reddit
to agregacja wiadomości społecznościowych, witryna do oceniania treści internetowych i witryna dyskusyjna.
Reddit zajmuje większość mojego czasu, ale nadal na nim spędzam czas. Tworzenie klona Reddita to skuteczny sposób na naukę programowania (jednocześnie przeglądając Reddit).
Reddit zapewnia bardzo bogate. Nie pomijaj żadnych funkcji ani nie rób niczego przypadkowo. W prawdziwym świecie, z klientami i klientami, nie możesz pracować na chybił trafił, bo szybko stracisz pracę.
Inteligentni klienci natychmiast zorientują się, że praca jest wykonywana źle i znajdą kogoś innego.
Публикация пакета NPM с открытым исходным кодом
Jeśli piszesz kod JavaScript, prawdopodobnie używasz menedżera pakietów. Menedżer pakietów umożliwia ponowne wykorzystanie istniejącego kodu napisanego i opublikowanego przez inne osoby.
Zrozumienie pełnego cyklu rozwoju pakietu zapewni bardzo dobre doświadczenia. Publikując kod, musisz wiedzieć wiele rzeczy. Musisz pomyśleć o bezpieczeństwie, wersjonowaniu semantycznym, skalowalności, konwencjach nazewnictwa i utrzymaniu.
Opakowanie może być dowolne. Jeśli nie masz pomysłu, stwórz własny Lodash i opublikuj go.
Lodasz:
Posiadanie czegoś, co zrobiłeś online, stawia cię o 10% nad innymi. o otwartych źródłach i pakietach.
Учебный план freeCodeCamp
freeCodecamp zebrał wiele .
freeCodeCamp jest organizacją non-profit. Składa się z interaktywnej internetowej platformy edukacyjnej, forum społeczności online, czatów, publikacji Medium i lokalnych organizacji, które zamierzają udostępnić każdemu tworzenie stron internetowych do nauki.
Jeśli ukończysz cały kurs, będziesz więcej niż wykwalifikowany do podjęcia pierwszej pracy.
Создайте HTTP-сервер с нуля
Protokół HTTP jest jednym z głównych protokołów, za pośrednictwem których treści przesyłane są w Internecie. Serwery HTTP służą do udostępniania treści statycznych, takich jak HTML, CSS i JS.
Możliwość wdrożenia protokołu HTTP od podstaw poszerzy Twoją wiedzę na temat interakcji.
Na przykład, jeśli używasz NodeJs, wiesz, że Express udostępnia serwer HTTP.
Dla porównania sprawdź, czy możesz:
- Skonfiguruj serwer bez korzystania z żadnych bibliotek
- Serwer musi obsługiwać zawartość HTML, CSS i JS.
- Implementacja routera od podstaw
- Monitoruj zmiany i aktualizuj serwer
Jeśli nie wiesz dlaczego, użyj i spróbuj utworzyć serwer HTTP od zera.
Десктопное приложение для заметок
Wszyscy robimy notatki, prawda?
Stwórzmy aplikację do notatek. Aplikacja musi zapisywać notatki i synchronizować je z bazą danych. Zbuduj aplikację natywną za pomocą Electron, Swift lub czegokolwiek, co lubisz i co działa dla Twojego systemu.
Możesz połączyć to z pierwszym wyzwaniem (edytor tekstu).
Jako bonus spróbuj zsynchronizować wersję komputerową z wersją internetową.
Подкасты (клон Overcast)
Kto nie słucha podcastów?
Utwórz aplikację internetową o następującej funkcjonalności:
- Utwórz konto
- Wyszukaj podcasty
- Oceniaj i subskrybuj podcasty
- Zatrzymaj się i graj, zmieniaj prędkość oraz funkcje do przodu i do tyłu przez 30 sekund.
Spróbuj użyć interfejsu API iTunes jako punktu wyjścia. Jeśli znasz inne źródła, napisz o tym w komentarzach.
Zrzut ekranu
Cześć! Właśnie nagrywam ekran!
Utwórz aplikację komputerową lub internetową, która umożliwia przechwytywanie ekranu i zapisywanie klipu jako .gif
tutaj jest jak to osiągnąć.
Źródła informacji
Źródło: www.habr.com