1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable alan.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Makale EDISON Yazılımının desteğiyle çevrilmiştir. Ve .
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.
- Как работают оптимизация и обработка изображений.
Not: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Not: Burada .
Подборка проектов из предыдущих публикаций.
tabaka
Katman, herkesin paylaşılan bir "tahtaya" piksel çizebileceği bir topluluktur. Orijinal fikir Reddit'te doğdu. r/Layer topluluğu, herkesin yaratıcı olabileceği ve ortak bir amaca katkıda bulunabileceği ortak yaratıcılığın bir metaforudur.
Kendi Katman projenizi oluştururken neler öğreneceksiniz:
- JavaScript tuvali nasıl çalışır? Bir tuvalin nasıl çalıştırılacağını bilmek birçok uygulamada kritik bir beceridir.
- Kullanıcı izinleri nasıl koordine edilir? Her kullanıcı, giriş yapmasına gerek kalmadan her 15 dakikada bir piksel çizebilir.
- Çerez oturumları oluşturun.
Squoosh
Squoosh, birçok gelişmiş seçeneğe sahip bir görüntü sıkıştırma uygulamasıdır.
GIF 20 MB
Kendi Squoosh versiyonunuzu yaratarak şunları öğreneceksiniz:
- Resim boyutlarıyla nasıl çalışılır
- Sürükle ve Bırak API'sinin temellerini öğrenin
- API'nin ve olay dinleyicilerinin nasıl çalıştığını anlayın
- Dosyalar nasıl yüklenir ve dışa aktarılır
Not: Görüntü sıkıştırıcı yereldir. Sunucuya ek veri göndermeye gerek yoktur. Kompresörü evinizde bulundurabilir veya tercihinize göre bir sunucuda kullanabilirsiniz.
Hesap makinesi
Hadi? Cidden? Hesap makinesi? Evet, kesinlikle bir hesap makinesi. Matematik işlemlerinin temellerini ve bunların birlikte nasıl çalıştığını anlamak, uygulamalarınızı basitleştirmek için kritik bir beceridir. Er ya da geç sayılarla uğraşmak zorunda kalacaksınız ve ne kadar erken olursa o kadar iyi.
Kendi hesap makinenizi oluşturarak şunları öğreneceksiniz:
- Sayılarla ve matematik işlemleriyle çalışma
- Olay dinleyicileri API'si ile pratik yapın
- Öğeler nasıl düzenlenir, stiller nasıl anlaşılır?
Tarayıcı (Arama motoru)
Herkes bir arama motoru kullandı, öyleyse neden kendinizinkini yaratmıyorsunuz? Bilgi aramak için tarayıcılara ihtiyaç vardır. Herkes bunları her gün kullanıyor ve bu teknolojiye ve uzmanlara olan talep zamanla artacak.
Google arama motoru
Kendi arama motorunuzu oluşturarak neler öğreneceksiniz:
- Tarayıcılar nasıl çalışır?
- Siteler nasıl indekslenir ve derecelendirme ve itibara göre nasıl sıralanır?
- Dizine eklenen siteler veritabanında nasıl saklanır ve veritabanıyla nasıl çalışılır
Müzik çalar (Spotify, Apple Müzik)
Herkes müzik dinler; bu hayatımızın ayrılmaz bir parçasıdır. Modern bir müzik akışı platformunun temel mekanizmalarının nasıl çalıştığını daha iyi anlamak için bir müzik çalar oluşturalım.
Spotify
Kendi müzik akışı platformunuzu oluşturarak neler öğreneceksiniz:
- API ile nasıl çalışılır? Spotify veya Apple Music'ten API kullanın
- Sonraki/önceki parça nasıl çalınır, duraklatılır veya geri sarılır
- Ses düzeyi nasıl değiştirilir
- Kullanıcı yönlendirme ve tarayıcı geçmişi nasıl yönetilir?
React kullanan film arama uygulaması (kancalı)
Başlayabileceğiniz ilk şey React'ı kullanarak bir film arama uygulaması oluşturmaktır. Aşağıda son başvurunun nasıl görüneceğine dair bir resim bulunmaktadır:
Ne öğreneceksin
Bu uygulamayı oluşturarak nispeten yeni Hooks API'sini kullanarak React becerilerinizi geliştireceksiniz. Örnek projede React bileşenleri, çok sayıda kanca, harici bir API ve elbette bazı CSS stilleri kullanılıyor.
Teknoloji yığını ve özellikler
- Kancalarla tepki verin
- oluşturmak-tepki-Uygulama
- JSX
- CSS
Herhangi bir sınıf kullanmadan bu projeler size işlevsel React'e mükemmel bir giriş noktası sağlar ve 2020'de size kesinlikle yardımcı olacaktır. Bulabilirsin . Talimatları izleyin veya kendiniz yapın.
Vue ile Sohbet Uygulaması
Yapabileceğiniz bir diğer harika proje ise favori JavaScript kitaplığım olan VueJS'yi kullanarak bir sohbet uygulaması oluşturmaktır. Uygulama şöyle görünecek:
Ne öğreneceksin
Bu eğitimde sıfırdan bir Vue uygulamasının nasıl oluşturulacağını öğreneceksiniz - bileşenler oluşturma, durumu yönetme, rota oluşturma, üçüncü taraf hizmetlere bağlanma ve hatta kimlik doğrulamayı yönetme.
Teknoloji yığını ve özellikler
- Görünüm
- vuex
- Vue Yönlendirici
- Vue CLI'si
- Itici
- CSS
Bu, Vue'yu kullanmaya başlamak veya 2020'de geliştirmeye başlamak için mevcut becerilerinizi geliştirmek için gerçekten harika bir proje. Bulabilirsin .
Angular 8 ile güzel hava durumu uygulaması
Bu örnek, Angular 8'i kullanarak güzel bir hava durumu uygulaması oluşturmanıza yardımcı olacaktır:
Ne öğreneceksin
Bu proje size, tasarımdan geliştirmeye ve dağıtıma hazır bir uygulamaya kadar sıfırdan uygulama oluşturma konusunda değerli beceriler öğretecektir.
Teknoloji yığını ve özellikler
- Açısal 8
- Firebase
- Sunucu tarafı oluşturma
- Izgara ve Flexbox ile CSS
- Mobil uyumluluk ve uyumluluk
- Karanlık mod
- Güzel arayüz
Bu her şeyi kapsayan projede gerçekten sevdiğim şey, bazı şeyleri tek başına çalışmamanızdır. Bunun yerine tasarımdan son dağıtıma kadar tüm geliştirme sürecini öğrenirsiniz.
Svelte kullanarak Yapılacaklar uygulaması
Svelte, bileşen tabanlı yaklaşımın yeni çocuğu gibidir; en azından React, Vue ve Angular'a benzer. Ve bu 2020'nin en yeni ürünlerinden biri.
Yapılacaklar uygulamaları her zaman en güncel konu olmayabilir ancak Svelte becerilerinizi geliştirmenize gerçekten yardımcı olacaktır. Bunun gibi görünecek:
Ne öğreneceksin
Bu eğitim size baştan sona Svelte 3 kullanarak nasıl uygulama oluşturulacağını gösterecektir. Bileşenleri, stili ve olay işleyicilerini kullanacaksınız
Teknoloji yığını ve özellikler
- İnce 3
- Bileşenleri
- CSS ile stillendirme
- ES 6 sözdizimi
Çok fazla iyi Svelte başlangıç projesi yok, bu yüzden buldum .
Next.js'yi kullanan e-ticaret uygulaması
Next.js, sunucu tarafı oluşturmayı anında destekleyen React uygulamaları oluşturmak için en popüler çerçevedir.
Bu proje size şuna benzeyen bir e-ticaret uygulamasının nasıl oluşturulacağını gösterecektir:
Ne öğreneceksin
Bu projede Next.js ile nasıl geliştirme yapacağınızı, yeni sayfalar ve bileşenler oluşturmayı, verileri ayıklamayı ve bir Next uygulamasını biçimlendirip dağıtmayı öğreneceksiniz.
Teknoloji yığını ve özellikler
- Next.js
- Bileşenler ve Sayfalar
- Veri örnekleme
- stilizasyon
- Proje Dağıtımı
- SSR ve SPA
Yeni bir şeyler öğrenmek için e-ticaret uygulaması gibi gerçek dünyadan bir örneğe sahip olmak her zaman harikadır. Yapabilirsiniz .
Nuxt.js ile tam teşekküllü çok dilli blog
Nuxt.js, Vue için, Next.js ise React için odur: sunucu tarafı işlemenin ve tek sayfalı uygulamaların gücünü birleştirmek için harika bir çerçeve
Oluşturabileceğiniz son uygulama şu şekilde görünecektir:
Ne öğreneceksin
Bu örnek projede, ilk kurulumdan son dağıtıma kadar Nuxt.js kullanarak eksiksiz bir web sitesinin nasıl oluşturulacağını öğreneceksiniz.
Sayfalar ve bileşenler ve SCSS ile stil oluşturma gibi Nuxt'un sunduğu harika özelliklerin çoğundan yararlanır.
Teknoloji yığını ve özellikler
- Nuxt.js
- Bileşenler ve Sayfalar
- Hikaye bloğu modülü
- Hagfish
- Durum yönetimi için Vuex
- Stil için SCSS
- Nuxt ara yazılımları
, birçok harika Nuxt.js özelliğini içerir. Kişisel olarak Nuxt ile çalışmayı seviyorum, bu yüzden denemelisiniz çünkü bu sizi aynı zamanda harika bir Vue geliştiricisi yapacaktır.
Gatsby ile Blog
Gatsby, React ve GraphQL kullanan mükemmel bir statik site oluşturucudur. Bu projenin sonucudur:
Ne öğreneceksin
Bu eğitimde, React ve GraphQL kullanarak kendi makalelerinizi yazmak için kullanacağınız bir blog oluşturmak için Gatsby'yi nasıl kullanacağınızı öğreneceksiniz.
Teknoloji yığını ve özellikler
- Gatsby
- React
- GraphQL
- Eklentiler ve temalar
- MDX/Markdown
- Önyükleme CSS'si
- Şablonları
Eğer bir blog başlatmak istediyseniz, React ve GraphQL kullanarak nasıl yapılacağı hakkında.
WordPress'in kötü bir seçim olduğunu söylemiyorum ama Gatsby ile React'ı kullanarak yüksek performanslı web siteleri oluşturabilirsiniz; bu harika bir kombinasyondur.
Gridsome'la Blog
Vue için Gridsome... Tamam, bunu Next/Nuxt'ta zaten yapmıştık.
Ancak aynı şey Gridsome ve Gatsby için de geçerli. Her ikisi de veri katmanı olarak GraphQL kullanıyor ancak Gridsome VueJS kullanıyor. Bu aynı zamanda harika bloglar oluşturmanıza yardımcı olacak muhteşem bir statik site oluşturucudur:
Ne öğreneceksin
Bu proje size Gridsome, GraphQL ve Markdown'a başlamak için basit bir blogun nasıl oluşturulacağını öğretecek. Ayrıca bir uygulamanın Netlify aracılığıyla nasıl dağıtılacağını da kapsar.
Teknoloji yığını ve özellikler
- Izgara
- Görünüm
- GraphQL
- Markdown
- netleştir
Bu kesinlikle en kapsamlı eğitim değildir ancak Gridsome'ın temel kavramlarını kapsar ve .
Quasar kullanan SoundCloud benzeri ses oynatıcısı
Quasar, mobil uygulamalar oluşturmak için kullanılabilecek başka bir Vue çerçevesidir. Bu projede bir ses oynatıcı uygulaması oluşturacaksınız, örneğin:
Ne öğreneceksin
Diğer projeler ağırlıklı olarak web uygulamalarına odaklanırken, bu size Vue ve Quasar çerçevesini kullanarak nasıl mobil uygulama oluşturulacağını gösterecek.
Cordova'nın halihazırda Android Studio/Xcode yapılandırılmış olarak çalışıyor olması gerekir. Değilse, kılavuzda size her şeyin nasıl ayarlanacağını gösteren Quasar web sitesine bir bağlantı bulunur.
Teknoloji yığını ve özellikler
- Quasar İstanbul
- Görünüm
- Cordova
- dalga sörfçü
- Kullanıcı Arayüzü Bileşenleri
Quasar'ın mobil uygulamalar oluşturma yeteneklerini gösteriyor.
Форма кредитной карты
Sorunsuz ve keyifli mikro etkileşimlere sahip harika bir kredi kartı şekli. Numara biçimlendirme, doğrulama ve otomatik kart türü algılamayı içerir. Vue.js üzerine inşa edilmiştir ve aynı zamanda tamamen duyarlıdır. (Görebilirsin .)
Ne öğreneceksiniz:
- Formları işleme ve doğrulama
- Olayları işleme (örneğin alanlar değiştiğinde)
- Sayfadaki öğelerin, özellikle de formun üstünde görünen kredi kartı bilgilerinin nasıl görüntüleneceğini ve yerleştirileceğini öğrenin
çubuk grafik
Histogram, kategorik verileri, temsil ettikleri değerlerle orantılı yükseklik veya uzunluklara sahip dikdörtgen çubuklarla temsil eden bir grafik veya grafiktir.
Dikey veya yatay olarak uygulanabilirler. Dikey çubuk grafiğe bazen çizgi grafik de denir.
Ne öğreneceksiniz:
- Verileri yapılandırılmış ve anlaşılır bir şekilde görüntüleyin
- Ek olarak: Öğenin nasıl kullanılacağını öğrenin
canvasve onunla elementlerin nasıl çizileceği
dünya nüfusu verilerini bulabilirsiniz. Yıllara göre sıralanırlar.
Анимация сердечка Twitter
2016 yılında Twitter, tweetleri için bu muhteşem animasyonu tanıttı. 2019 itibariyle hala işe yarayacak gibi görünüyor, öyleyse neden kendiniz bir tane yaratmıyorsunuz?
Ne öğreneceksiniz:
- CSS özelliğiyle çalışma
keyframes - HTML öğelerini değiştirin ve canlandırın
- JavaScript, HTML ve CSS'yi birleştirin
Репозитории GitHub с функцией поиска
Burada süslü bir şey yok; GitHub depoları yalnızca yüceltilmiş bir listedir.
Amaç, depoları görüntülemek ve kullanıcının bunları filtrelemesine izin vermektir. Kullanmak her kullanıcı için depolar almak için.
GitHub profil sayfası -
Ne öğreneceksiniz:
- API'den veri al
- API'den verileri görüntüle
- Her arama için alakalı verileri filtreleyin ve gösterin
- İsteğe bağlı: Eğer bir meydan okumaya hazırsanız, şunu kullanın: GraphQL kullanılarak oluşturuldu. .
Чаты в стиле Reddit
Sohbetler basitliği ve kullanım kolaylığı nedeniyle popüler bir iletişim yoludur. Peki modern sohbet odalarını gerçekten besleyen şey nedir? WebSocket'ler!
Ne öğreneceksiniz:
- WebSockets'i, gerçek zamanlı iletişimi ve veri güncellemelerini kullanın
- Kullanıcı erişim düzeyleriyle çalışın (örneğin, bir sohbet kanalının sahibi şu role sahiptir:
adminve odadaki diğerleri -user) - Formları işleyin ve doğrulayın - unutmayın, mesaj göndermek için kullanılan sohbet penceresi
input - Farklı sohbetler oluşturun ve katılın
- Kişisel mesajlarla çalışın. Kullanıcılar diğer kullanıcılarla özel olarak sohbet edebilir. Temel olarak iki kullanıcı arasında bir WebSocket bağlantısı kuracaksınız.
Навигация в стиле Stripe
Bu gezinmeyi benzersiz kılan şey, açılır kapsayıcının içeriğe uyacak şekilde dönüşmesidir. Yeni bir açılır pencereyi açıp kapamanın geleneksel davranışıyla karşılaştırıldığında bu geçişte bir zarafet var.
Ne öğreneceksiniz:
- CSS animasyonlarını geçişlerle birleştirin
- İçeriği karartın ve kayan öğeye aktif sınıfı uygulayın
Pacman
Kendi Pacman versiyonunu yarat. Bu, oyunların nasıl geliştirildiğine dair fikir edinmenin ve temelleri anlamanın harika bir yoludur. Bir JavaScript çerçevesi kullanın, React veya Vue.
Öğreneceksiniz:
- Öğeler nasıl hareket eder?
- Hangi tuşlara basılacağı nasıl belirlenir
- Çarpışma anı nasıl belirlenir
- Daha da ileri giderek hayalet hareket kontrolleri ekleyebilirsiniz.
Bu projenin bir örneğini bulacaksınız GitHub
Kullanıcı yönetimi
Proje GitHub
Kullanıcı yönetimi için CRUD tipi bir uygulama oluşturmak size geliştirmenin temellerini öğretecektir. Bu özellikle yeni geliştiriciler için faydalıdır.
Öğreneceksiniz:
- Yönlendirme nedir
- Veri giriş formları nasıl işlenir ve kullanıcının ne girdiği kontrol edilir
- Veritabanıyla nasıl çalışılır - eylemler oluşturma, okuma, güncelleme ve silme
Проверка погоды в вашем местоположении
Proje GitHub
Uygulama oluşturmak istiyorsanız bir hava durumu uygulamasıyla başlayın. Bu proje Swift kullanılarak tamamlanabilir.
Bir uygulama oluşturma deneyimi kazanmanın yanı sıra şunları öğreneceksiniz:
- API ile nasıl çalışılır
- Coğrafi konum nasıl kullanılır?
- Metin girişi ekleyerek uygulamanızı daha dinamik hale getirin. İçinde kullanıcılar belirli bir yerdeki hava durumunu kontrol etmek için konumlarını girebilecekler.
Bir API'ye ihtiyacınız olacak. Hava durumu verilerini almak için OpenWeather API'sini kullanın. OpenWeather API'si hakkında daha fazla bilgi.
Окно чата
Sohbet pencerem çalışıyor, iki tarayıcı sekmesinde açılıyor
Sohbet penceresi oluşturmak, soketleri kullanmaya başlamanın mükemmel yoludur. Teknoloji yığınının seçimi çok büyük. Örneğin Node.js mükemmeldir.
Soketlerin nasıl çalıştığını ve nasıl uygulanacağını öğreneceksiniz. Bu, bu projenin ana avantajıdır.
Soketlerle çalışmak isteyen bir Laravel geliştiricisiyseniz, makalemi okuyun.
GitLab CI
Sürekli entegrasyon (CI) konusunda yeniyseniz GitLab CI ile denemeler yapın. Birkaç ortam kurun ve birkaç test çalıştırmayı deneyin. Çok zor bir proje değil ama eminim ki ondan çok şey öğreneceksiniz. Birçok geliştirme ekibi artık CI kullanıyor. Nasıl kullanılacağını bilmek faydalıdır.
Öğreneceksiniz:
- GitLab CI nedir?
- Nasıl yapılandırılır
.gitlab-ci.ymlGitLab kullanıcısına ne yapması gerektiğini söyleyen - Diğer ortamlara nasıl dağıtılır
Анализатор сайтов
Web sitelerinin anlamlarını analiz eden ve derecelendirmelerini oluşturan bir kazıyıcı yapın. Örneğin görsellerdeki eksik alt etiketlerini kontrol edebilirsiniz. Veya sayfanın SEO meta etiketleri olup olmadığını kontrol edin. Kullanıcı arayüzü olmadan bir kazıyıcı oluşturulabilir.
Öğreneceksiniz:
- Kazıyıcı nasıl çalışır?
- DOM seçicileri nasıl oluşturulur?
- Algoritma nasıl yazılır?
- Burada durmak istemiyorsanız bir kullanıcı arayüzü oluşturun. Ayrıca kontrol ettiğiniz her web sitesi için bir rapor oluşturabilirsiniz.
Определение настроений в социальных сетях
Sosyal medyada duygu tespiti, makine öğrenimiyle tanışmanın harika bir yoludur.
Yalnızca bir sosyal ağı analiz ederek başlayabilirsiniz. Herkes genellikle Twitter ile başlar.
Makine öğrenimi konusunda zaten deneyiminiz varsa farklı sosyal ağlardan veri toplamayı ve bunları birleştirmeyi deneyin.
Öğreneceksiniz:
- Makine öğrenimi nedir
Клон Trello
Ne öğreneceksin:
- İstek işleme yollarının organizasyonu (Yönlendirme).
- Sürükle ve bırak.
- Yeni nesneler nasıl oluşturulur (panolar, listeler, kartlar).
- Giriş verilerinin işlenmesi ve kontrol edilmesi.
- İstemci tarafından: yerel depolamanın nasıl kullanılacağı, verilerin yerel depolamaya nasıl kaydedileceği, yerel depolamadan verilerin nasıl okunacağı.
- Sunucu tarafından: veritabanları nasıl kullanılır, veri tabanına veri nasıl kaydedilir, veri tabanından veri nasıl okunur.
, React+Redux'da yapılmıştır.
Панель админа
Temel bilgileri öğrenmek için ideal, basit bir CRUD uygulaması. Hadi öğrenelim:
- Kullanıcı oluşturun, kullanıcıları yönetin.
- Veritabanıyla etkileşim kurun - kullanıcıları oluşturun, okuyun, düzenleyin, silin.
- Girişi doğrulama ve formlarla çalışma.
Трекер криптовалют (нативное мобильное приложение)
Herhangi bir şey: Swift, Objective-C, React Native, Java, Kotlin.
Çalışırız:
- Yerel uygulamalar nasıl çalışır?
- API'den veri nasıl alınır?
- Yerel sayfa düzenleri nasıl çalışır?
- Mobil simülatörlerle nasıl çalışılır.
. Daha iyi bir şey bulursanız yorumlara yazın.
Eğer ilgileniyorsanız, işte burada .
Настроить собственный конфиг webpack с нуля
Teknik olarak bu bir uygulama değil ancak webpack'in içeriden nasıl çalıştığını anlamak çok faydalı bir görev. Artık bir “kara kutu” değil, anlaşılır bir araç olacak.
Gereksinimler:
- Es7'yi es5'e (temel bilgiler) derleyin.
- Jsx'i js'ye - veya - .vue'yu .js'ye derleyin (yükleyicileri öğrenmeniz gerekir)
- Webpack dev sunucusunu ve etkin modülün yeniden yüklenmesini ayarlayın. (vue-cli ve create-react-app her ikisini de kullanır)
- Heroku, now.sh veya Github'ı kullanarak web paketi projelerinin nasıl dağıtılacağını öğrenin.
- CSS - scss, less, stylus'u derlemek için favori ön işlemcinizi kurun.
- Webpack ile görselleri ve svgs'yi nasıl kullanacağınızı öğrenin.
Клон Hackernews
Her Jedi'ın kendi Hacker haberini yapması gerekir.
Yol boyunca neler öğreneceksiniz:
- Hackernews API'si ile nasıl etkileşim kurulur?
- Tek sayfalık bir uygulama nasıl oluşturulur?
- Yorumları görüntüleme, bireysel yorumları, profilleri görüntüleme gibi özellikler nasıl uygulanır?
- İstek işleme yollarının organizasyonu (Yönlendirme).
Тудушечка
Cidden? Tudushka mı? Binlercesi var. Ama inanın bu popülerliğin bir nedeni var.
Tudu uygulaması, temel bilgileri anladığınızdan emin olmanın harika bir yoludur. Bir uygulamayı vanilya Javascript'te ve bir uygulamayı da favori çerçevenizde yazmayı deneyin.
Öğrenmek:
- Yeni görevler oluşturun.
- Alanların doldurulduğunu kontrol edin.
- Görevleri filtreleyin (tamamlandı, etkin, tümü). Kullanmak
filterиreduce. - Javascript'in temellerini anlayın.
Сортируемый drag and drop список
Anlamak çok yararlı .
Hadi öğrenelim:
- API'yi sürükleyip bırakın
- Zengin kullanıcı arayüzleri oluşturun
Клон мессенджера (нативное приложение)
Hem web uygulamalarının hem de native uygulamaların nasıl çalıştığını anlayacaksınız ve bu da sizi gri kütleden ayıracak.
Neyi inceleyeceğiz:
- Web yuvaları (anlık mesajlar)
- Yerel uygulamalar nasıl çalışır?
- Yerel uygulamalarda şablonlar nasıl çalışır?
- Yerel uygulamalarda istek işleme rotalarının düzenlenmesi.
Metin düzeltici
Bir metin düzenleyicinin amacı, kullanıcıların kendi biçimlendirmelerini geçerli HTML işaretlemesine dönüştürme çabalarını azaltmaktır. İyi bir metin düzenleyici, kullanıcıların metni farklı şekillerde biçimlendirmesine olanak tanır.
Bir noktada herkes bir metin düzenleyici kullanmıştır. Yani neden olmasın ?
Клон Reddit
bir sosyal haber toplama, web içeriği derecelendirme ve tartışma sitesidir.
Reddit zamanımın çoğunu alıyor ama yine de onunla takılmaya devam ediyorum. Reddit klonu oluşturmak, programlamayı öğrenmenin etkili bir yoludur (aynı anda Reddit'e göz atarken).
Reddit size çok zengin bir içerik sunuyor. Hiçbir özelliği atlamayın veya işleri gelişigüzel yapmayın. Müşterilerin ve müşterilerin olduğu gerçek dünyada gelişigüzel çalışamazsınız, aksi takdirde işinizi hızla kaybedersiniz.
Akıllı müşteriler işin kötü yapıldığını hemen anlayacak ve başkasını bulacaktır.
Публикация пакета NPM с открытым исходным кодом
Javascript kodu yazarsanız büyük olasılıkla bir paket yöneticisi kullanıyorsunuzdur. Paket yöneticisi, diğer kişilerin yazdığı ve yayınladığı mevcut kodu yeniden kullanmanıza olanak tanır.
Bir paketin geliştirme döngüsünün tamamını anlamak çok iyi bir deneyim sağlayacaktır. Kod yayınlarken bilmeniz gereken birçok şey var. Güvenlik, anlamsal sürüm oluşturma, ölçeklenebilirlik, adlandırma kuralları ve bakım konularını düşünmeniz gerekir.
Paket herhangi bir şey olabilir. Eğer bir fikriniz yoksa kendi Lodash'ınızı yaratın ve yayınlayın.
Lodaş:
Çevrimiçi yaptığınız bir şeye sahip olmak sizi diğerlerinden %10 üstün kılar. açık kaynaklar ve paketler hakkında.
Учебный план freeCodeCamp
freeCodecamp çok şey topladı .
freeCodeCamp kar amacı gütmeyen bir kuruluştur. Etkileşimli bir web tabanlı öğrenme platformu, çevrimiçi bir topluluk forumu, sohbet odaları, Medium yayınları ve öğrenme web geliştirmeyi herkes için erişilebilir kılmayı amaçlayan yerel kuruluşlardan oluşur.
Kursun tamamını tamamlamayı başarırsanız, ilk işiniz için fazlasıyla nitelikli olacaksınız.
Создайте HTTP-сервер с нуля
HTTP protokolü, içeriğin internette dolaşmasını sağlayan ana protokollerden biridir. HTTP sunucuları HTML, CSS ve JS gibi statik içerikleri sunmak için kullanılır.
HTTP protokolünü sıfırdan uygulayabilmek, şeylerin nasıl etkileşime girdiğine dair bilginizi genişletecektir.
Örneğin, NodeJ kullanıyorsanız Express'in bir HTTP sunucusu sağladığını bilirsiniz.
Referans olarak şunları yapıp yapamayacağınıza bakın:
- Herhangi bir kütüphane kullanmadan sunucu kurma
- Sunucunun HTML, CSS ve JS içeriğini sunması gerekir.
- Bir yönlendiriciyi sıfırdan uygulama
- Değişiklikleri izleyin ve sunucuyu güncelleyin
Nedenini bilmiyorsanız kullanın ve bir HTTP sunucusu oluşturmayı deneyin sıfırdan.
Десктопное приложение для заметок
Hepimiz not alıyoruz değil mi?
Bir not uygulaması oluşturalım. Uygulamanın notları kaydetmesi ve bunları veritabanıyla senkronize etmesi gerekiyor. Electron, Swift veya beğendiğiniz ve sisteminiz için neyin işe yaradığını kullanarak yerel bir uygulama oluşturun.
Bunu ilk zorlukla (metin editörü) birleştirmekten çekinmeyin.
Bonus olarak, masaüstü sürümünüzü web sürümüyle senkronize etmeyi deneyin.
Подкасты (клон Overcast)
Kim podcast dinlemiyor?
Aşağıdaki işlevlere sahip bir web uygulaması oluşturun:
- Bir hesap oluşturun
- Podcast'lerde Ara
- Podcast'leri derecelendirin ve abone olun
- 30 saniye boyunca durdur ve oynat, hızı değiştir, ileri ve geri fonksiyonları.
iTunes API'sini başlangıç noktası olarak kullanmayı deneyin. Başka kaynaklar biliyorsanız, lütfen yorumlara yazın.
Ekran görüntüsü
Merhaba! Şu anda ekranımı filme alıyorum!
Ekranınızı yakalamanıza ve klibi farklı kaydetmenize olanak tanıyan bir masaüstü veya web uygulaması oluşturun. .gif
Burada buna nasıl ulaşılır.
kaynaklar
Kaynak: habr.com