1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable vùng.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Bài viết được dịch với sự hỗ trợ của EDISON Software, công ty và .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- tiền thưởng: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Lưu ý: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- tiền thưởng: Если вам интересно, я недавно написал на криптовалюту с React Native.
Lưu ý: Đây .
Подборка проектов из предыдущих публикаций.
lớp
Lớp là một cộng đồng nơi mọi người có thể vẽ một pixel trên một “bảng” chung. Ý tưởng ban đầu được sinh ra trên Reddit. Cộng đồng r/Layer là một phép ẩn dụ cho sự sáng tạo được chia sẻ, trong đó mọi người đều có thể là người sáng tạo và đóng góp cho mục đích chung.
Bạn sẽ học được gì khi tạo dự án Layer của riêng mình:
- Cách hoạt động của canvas JavaScript Biết cách vận hành canvas là một kỹ năng quan trọng trong nhiều ứng dụng.
- Cách phối hợp quyền của người dùng. Mỗi người dùng có thể vẽ một pixel cứ sau 15 phút mà không cần phải đăng nhập.
- Tạo phiên cookie.
Squoosh
Squoosh là ứng dụng nén ảnh với nhiều tùy chọn nâng cao.
GIF 20 MB
Bằng cách tạo phiên bản Squoosh của riêng bạn, bạn sẽ học được:
- Cách làm việc với kích thước hình ảnh
- Tìm hiểu kiến thức cơ bản về API Drag'n'Drop
- Hiểu cách hoạt động của API và trình xử lý sự kiện
- Cách tải lên và xuất tập tin
Lưu ý: Máy nén hình ảnh là cục bộ. Không cần thiết phải gửi dữ liệu bổ sung đến máy chủ. Bạn có thể có máy nén ở nhà hoặc bạn có thể sử dụng nó trên máy chủ, tùy theo lựa chọn của bạn.
Máy tính
Cố lên? Nghiêm túc? Máy tính? Vâng, chính xác là một chiếc máy tính. Hiểu các khái niệm cơ bản về các phép toán và cách chúng phối hợp với nhau là một kỹ năng quan trọng để đơn giản hóa các ứng dụng của bạn. Sớm hay muộn bạn sẽ phải đối mặt với những con số và càng sớm càng tốt.
Bằng cách tạo máy tính của riêng bạn, bạn sẽ học được:
- Làm việc với các con số và các phép toán
- Thực hành với API trình xử lý sự kiện
- Cách sắp xếp các phần tử, hiểu phong cách
Trình thu thập thông tin (Công cụ tìm kiếm)
Mọi người đều đã sử dụng công cụ tìm kiếm, vậy tại sao bạn không tạo công cụ tìm kiếm của riêng mình? Trình thu thập thông tin là cần thiết để tìm kiếm thông tin. Mọi người đều sử dụng chúng hàng ngày và nhu cầu về công nghệ này cũng như các chuyên gia sẽ chỉ tăng lên theo thời gian.
Công cụ tìm kiếm Google
Bạn sẽ học được gì khi tạo công cụ tìm kiếm của riêng mình:
- Cách trình thu thập thông tin hoạt động
- Cách lập chỉ mục các trang web và cách xếp hạng chúng theo xếp hạng và danh tiếng
- Cách lưu trữ các trang web được lập chỉ mục trong cơ sở dữ liệu và cách làm việc với cơ sở dữ liệu
Trình phát nhạc (Spotify, Apple Music)
Mọi người đều nghe nhạc - đó chỉ là một phần không thể thiếu trong cuộc sống của chúng ta. Hãy tạo một trình phát nhạc để hiểu rõ hơn cách hoạt động của cơ chế cơ bản của nền tảng phát nhạc hiện đại.
Spotify
Bạn sẽ học được gì khi tạo nền tảng phát nhạc trực tuyến của riêng mình:
- Cách làm việc với API. sử dụng API từ Spotify hoặc Apple Music
- Cách phát, tạm dừng hoặc tua lại bản nhạc tiếp theo/trước đó
- Cách thay đổi âm lượng
- Cách quản lý định tuyến người dùng và lịch sử trình duyệt
Приложение для поиска фильмов с помощью React (с хуками)
Первое, с чего вы могли бы начать, — это создать приложение для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть финальное приложение:
Bạn sẽ học cái gì
Создавая это приложение, вы улучшите свои навыки React, используя сравнительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стили CSS.
Технический стек и фичи
- React с hook’ами
- tạo-phản ứng-ứng dụng
- Mã hóa
- CSS
Без использования каких-либо классов, эти проекты дают вам идеальную точку входа в функциональный React и определенно помогут вам в 2020 году. Вы можете найти . Следуйте инструкциям или сделайте все на собственный вкус.
Приложение чата с помощью Vue
Еще один отличный проект для вас — создать приложение чата, используя мою любимую библиотеку JavaScript: VueJS. Приложение будет выглядеть примерно так:
Bạn sẽ học cái gì
Из этого руководства вы узнаете, как сделать приложение Vue с нуля — создавать компоненты, обрабатывать состояния, создавать маршруты, подключаться к сторонним сервисам и даже обрабатывать аутентификацию.
Технический стек и фичи
- quang cảnh
- Vũex
- Bộ định tuyến Vue
- Xem CLI
- Pusher
- CSS
Это действительно отличный проект, чтобы начать работать с Vue или улучшить свои существующие навыки, чтобы заняться разработкой в 2020 году. Вы можете найти .
Красивое приложение для просмотра погоды с Angular 8
Этот пример поможет вам создать красивое приложение для просмотра погоды с помощью Angular 8:
Bạn sẽ học cái gì
Этот проект научит вас ценным навыкам при создании приложений с нуля — начиная с проектирования и заканчивая разработкой, вплоть до готового к развертыванию приложения.
Технический стек и фичи
- Góc 8
- Tường lửa
- Рендеринг на стороне сервера
- CSS с сеткой и Flexbox
- Mobile friendly и адаптивность
- Chế độ tối
- Красивый интерфейс
Что мне действительно очень нравится в этом всеобъемлющем проекте, так это то, что вы не изучаете вещи изолированно. Вместо этого вы изучаете весь процесс разработки — от проектирования до окончательного развертывания.
To-Do приложение с помощью Svelte
Svelte это как новый ребенок в компонентном подходе — по крайней мере, похожий на React, Vue и Angular. И это одна из самых горячих новинок на 2020 год.
To-Do приложения не обязательно являются самой горячей темой, но это действительно поможет вам оттачивать свои навыки Svelte. Это будет выглядеть так:
Bạn sẽ học cái gì
Из этого туториала вы узнаете, как создать приложение с помощью Svelte 3, от начала до конца. Вы будете использовать компоненты, стилизацию и обработчики событий
Технический стек и фичи
- Svelte 3
- Thành phần
- Стилизация с помощью CSS
- Синтаксис ES 6
Существует не так много хороших стартовых проектов по Svelte, поэтому я нашел .
Приложение для электронной коммерции с помощью Next.js
Next.js является самым популярным фреймворком для создания приложений React, которые поддерживают рендеринг на стороне сервера из коробки.
Этот проект покажет вам, как создать приложение для электронной коммерции, которая выглядит следующим образом:
Bạn sẽ học cái gì
В этом проекте вы узнаете, как разрабатывать с помощью Next.js — создавать новые страницы и компоненты, извлекать данные, а также стилизовать и развертывать приложение Next.
Технический стек и фичи
- Tiếp theo.js
- Компоненты и страницы
- Lấy mẫu dữ liệu
- Cách điệu
- Развертывание проекта
- SSR и SPA
Всегда здорово иметь реальный пример, такой как приложение для электронной коммерции, чтобы узнать что-то новое. Вы можете .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js для Vue, тоже что и Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений
Последнее приложение, которое вы можете создать, будет выглядеть так:
Bạn sẽ học cái gì
В этом примере проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js — от начальной настройки до окончательного развертывания.
Он использует множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.
Технический стек и фичи
- Nuxt.js
- Компоненты и страницы
- Storyblock модуль
- Миксины
- Vuex для управления состоянием
- SCSS для стилизации
- Nuxt middlewares
, который включает в себя множество замечательных возможностей Nuxt.js. Я лично люблю работать с Nuxt, так что вам стоит попробовать его, так как это также сделает вас отличным разработчиком Vue.
Блог с Gatsby
Gatsby — отличный генератор статических сайтов, использующий React и GraphQL. Это результат проекта:
Bạn sẽ học cái gì
В этом руководстве вы узнаете, как использовать Gatsby для создания блога, который вы будете использовать для написания своих собственных статей, используя React и GraphQL.
Технический стек и фичи
- Gatsby
- Phản ứng
- GraphQL
- Плагины и темы
- MDX/Markdown
- CSS khởi động
- Templates
Если вы когда-нибудь хотели завести блог, того, как сделать его, используя React и GraphQL.
Я не говорю, что WordPress является плохим выбором, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React — что является удивительной комбинацией.
Блог с Gridsome
Gridsome для Vue… Хорошо, у нас уже было это с Next/Nuxt.
Но то же самое верно для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:
Bạn sẽ học cái gì
Этот проект научит вас, как создать простой блог, чтобы начать работу с Gridsome, GraphQL и Markdown. В нем также рассказывается, как развернуть приложение через Netlify.
Технический стек и фичи
- đẹp trai
- quang cảnh
- GraphQL
- Markdown
- netlify
Это, конечно, не самый полный туториал, но он охватывает основные понятия Gridsome и .
Аудио плеер, похожий на SoundCloud, с помощью Quasar
Quasar — это еще один фреймворк Vue, который можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудио-плеера, например:
Bạn sẽ học cái gì
В то время как другие проекты сосредоточены в основном на веб-приложениях, этот покажет вам, как создать мобильное приложение с использованием Vue и фреймворка Quasar.
У вас уже должна быть работающая Cordova с настроенной Android Studio/Xcode. Если нет, то в руководстве есть ссылка на веб-сайт Quasar, где они показывают, как все настроить.
Технический стек и фичи
- quasar
- quang cảnh
- Cordova
- người lướt sóng
- UI Компоненты
, демонстрирующий возможности Quasar для создания мобильных приложений.
Форма кредитной карты
Hình dạng thẻ tín dụng thú vị với các tương tác vi mô mượt mà và thú vị. Bao gồm định dạng số, xác minh và phát hiện loại thẻ tự động. Nó được xây dựng trên Vue.js và cũng hoàn toàn đáp ứng. (Bạn có thể thấy .)
Bạn sẽ học được gì:
- Xử lý và xác nhận biểu mẫu
- Xử lý các sự kiện (ví dụ: khi các trường thay đổi)
- Hiểu cách hiển thị và đặt các thành phần trên trang, đặc biệt là thông tin thẻ tín dụng xuất hiện ở đầu biểu mẫu
thanh biểu đồ
Biểu đồ là một biểu đồ hoặc đồ thị biểu thị dữ liệu phân loại bằng các thanh hình chữ nhật có chiều cao hoặc chiều dài tỷ lệ thuận với các giá trị mà chúng biểu thị.
Chúng có thể được áp dụng theo chiều dọc hoặc chiều ngang. Biểu đồ thanh dọc đôi khi được gọi là biểu đồ đường.
Bạn sẽ học được gì:
- Hiển thị dữ liệu theo cách có cấu trúc và dễ hiểu
- Ngoài ra: Tìm hiểu cách sử dụng phần tử
canvasvà cách vẽ các phần tử với nó
bạn có thể tìm thấy dữ liệu dân số thế giới. Chúng được sắp xếp theo năm.
Анимация сердечка Twitter
Trở lại năm 2016, Twitter đã giới thiệu hoạt ảnh tuyệt vời này cho các dòng tweet của mình. Kể từ năm 2019, nó vẫn có vẻ là một phần, vậy tại sao bạn không tự tạo một cái?
Bạn sẽ học được gì:
- Làm việc với thuộc tính CSS
keyframes - Thao tác và tạo hoạt ảnh cho các phần tử HTML
- Kết hợp JavaScript, HTML và CSS
Репозитории GitHub с функцией поиска
Không có gì lạ mắt ở đây—kho GitHub chỉ là một danh sách được tôn vinh.
Mục tiêu là hiển thị các kho lưu trữ và cho phép người dùng lọc chúng. Sử dụng để có được kho lưu trữ cho mỗi người dùng.
Trang hồ sơ GitHub -
Bạn sẽ học được gì:
- Nhận dữ liệu từ API
- Hiển thị dữ liệu từ API
- Lọc và hiển thị dữ liệu liên quan cho mỗi tìm kiếm
- Tùy chọn: Nếu bạn muốn thử thách, hãy sử dụng , được xây dựng bằng GraphQL. .
Чаты в стиле Reddit
Trò chuyện là một cách giao tiếp phổ biến do tính đơn giản và dễ sử dụng của chúng. Nhưng điều gì thực sự thúc đẩy các phòng chat hiện đại? WebSockets!
Bạn sẽ học được gì:
- Sử dụng WebSockets, giao tiếp và cập nhật dữ liệu theo thời gian thực
- Làm việc với các cấp độ truy cập của người dùng (ví dụ: chủ sở hữu kênh trò chuyện có vai trò
admin, và những người khác trong phòng -user) - Xử lý và xác thực biểu mẫu - hãy nhớ rằng cửa sổ trò chuyện để gửi tin nhắn là
input - Tạo và tham gia các cuộc trò chuyện khác nhau
- Làm việc với tin nhắn cá nhân. Người dùng có thể trò chuyện riêng tư với những người dùng khác. Về cơ bản, bạn sẽ thiết lập kết nối WebSocket giữa hai người dùng.
Навигация в стиле Stripe
Điều làm cho điều hướng này trở nên độc đáo là vùng chứa cửa sổ bật lên biến đổi để phù hợp với nội dung. Quá trình chuyển đổi này có vẻ sang trọng hơn so với hành vi truyền thống là mở và đóng một cửa sổ bật lên mới.
Bạn sẽ học được gì:
- Kết hợp hoạt ảnh CSS với hiệu ứng chuyển tiếp
- Làm mờ nội dung và áp dụng lớp hoạt động cho phần tử nổi
Pacman
Tạo phiên bản Pacman của riêng bạn. Đây là một cách tuyệt vời để có ý tưởng về cách trò chơi được phát triển và hiểu những điều cơ bản. Sử dụng khung JavaScript, React hoặc Vue.
Bạn sẽ học:
- Cách các phần tử di chuyển
- Cách xác định phím nào cần nhấn
- Cách xác định thời điểm va chạm
- Bạn có thể đi xa hơn và thêm các điều khiển chuyển động ma quái
Bạn sẽ tìm thấy một ví dụ về dự án này GitHub
quản lý người dùng
Dự án GitHub
Tạo một ứng dụng loại CRUD để quản trị người dùng sẽ dạy cho bạn những kiến thức cơ bản về phát triển. Điều này đặc biệt hữu ích cho các nhà phát triển mới.
Bạn sẽ học:
- Định tuyến là gì
- Cách xử lý các form nhập dữ liệu và kiểm tra những gì người dùng đã nhập
- Cách làm việc với cơ sở dữ liệu - các thao tác tạo, đọc, cập nhật và xóa
Проверка погоды в вашем местоположении
Dự án GitHub
Nếu bạn muốn tạo ứng dụng, hãy bắt đầu với ứng dụng thời tiết. Dự án này có thể được hoàn thành bằng Swift.
Ngoài việc tích lũy kinh nghiệm xây dựng một ứng dụng, bạn sẽ học được:
- Cách làm việc với API
- Cách sử dụng vị trí địa lý
- Làm cho ứng dụng của bạn năng động hơn bằng cách thêm kiểu nhập văn bản. Trong đó, người dùng sẽ có thể nhập vị trí của họ để kiểm tra thời tiết ở một địa điểm cụ thể.
Bạn sẽ cần một API. Để lấy dữ liệu thời tiết, hãy sử dụng API OpenWeather. Thông tin thêm về API OpenWeather.
Окно чата
Cửa sổ trò chuyện của tôi đang hoạt động, mở trong hai tab trình duyệt
Tạo cửa sổ trò chuyện là cách hoàn hảo để bắt đầu với ổ cắm. Sự lựa chọn của ngăn xếp công nghệ là rất lớn. Ví dụ, Node.js là hoàn hảo.
Bạn sẽ tìm hiểu cách hoạt động của socket và cách triển khai chúng. Đây là lợi thế chính của dự án này.
Nếu bạn là nhà phát triển Laravel muốn làm việc với socket, hãy đọc bài viết của tôi
CI GitLab
Nếu bạn chưa quen với việc tích hợp liên tục (CI), hãy thử sử dụng GitLab CI. Thiết lập một vài môi trường và thử chạy một vài thử nghiệm. Đây không phải là một dự án quá khó khăn nhưng tôi chắc chắn bạn sẽ học được nhiều điều từ nó. Nhiều nhóm phát triển hiện đang sử dụng CI. Biết cách sử dụng nó là hữu ích.
Bạn sẽ học:
- GitLab CI là gì
- Cách cấu hình
.gitlab-ci.ymlthông báo cho người dùng GitLab phải làm gì - Cách triển khai sang các môi trường khác
Анализатор сайтов
Tạo một công cụ quét để phân tích ngữ nghĩa của các trang web và tạo xếp hạng cho chúng. Ví dụ: bạn có thể kiểm tra thẻ alt bị thiếu trong hình ảnh. Hoặc kiểm tra xem trang có thẻ meta SEO hay không. Một cạp có thể được tạo mà không cần giao diện người dùng.
Bạn sẽ học:
- Máy cạo hoạt động như thế nào?
- Cách tạo bộ chọn DOM
- Cách viết một thuật toán
- Nếu bạn không muốn dừng lại ở đó, hãy tạo giao diện người dùng. Bạn cũng có thể tạo báo cáo trên mỗi trang web bạn kiểm tra.
Определение настроений в социальных сетях
Phát hiện tình cảm trên mạng xã hội là một cách tuyệt vời để làm quen với học máy.
Bạn có thể bắt đầu bằng cách phân tích chỉ một mạng xã hội. Mọi người thường bắt đầu với Twitter.
Nếu bạn đã có kinh nghiệm về học máy, hãy thử thu thập dữ liệu từ các mạng xã hội khác nhau và kết hợp chúng.
Bạn sẽ học:
- Học máy là gì
Клон Trello
Bạn sẽ học được gì:
- Tổ chức các tuyến xử lý yêu cầu (Routing).
- Kéo và thả
- Cách tạo đối tượng mới (bảng, danh sách, thẻ).
- Xử lý và kiểm tra dữ liệu đầu vào.
- Từ phía khách hàng: cách sử dụng bộ nhớ cục bộ, cách lưu dữ liệu vào bộ nhớ cục bộ, cách đọc dữ liệu từ bộ nhớ cục bộ.
- Từ phía máy chủ: cách sử dụng cơ sở dữ liệu, cách lưu dữ liệu vào cơ sở dữ liệu, cách đọc dữ liệu từ cơ sở dữ liệu.
, được tạo bằng React+Redux.
Панель админа
Một ứng dụng CRUD đơn giản, lý tưởng để học những điều cơ bản. Hãy tìm hiểu:
- Tạo người dùng, quản lý người dùng.
- Tương tác với cơ sở dữ liệu - tạo, đọc, chỉnh sửa, xóa người dùng.
- Xác thực đầu vào và làm việc với các biểu mẫu.
Трекер криптовалют (нативное мобильное приложение)
Bất cứ thứ gì: Swift, Objective-C, React Native, Java, Kotlin.
Hãy nghiên cứu:
- Ứng dụng gốc hoạt động như thế nào.
- Cách lấy dữ liệu từ API.
- Cách bố cục trang gốc hoạt động.
- Cách làm việc với trình mô phỏng di động.
. Nếu bạn tìm thấy điều gì đó tốt hơn, hãy viết bình luận.
Nếu bạn quan tâm thì đây .
Настроить собственный конфиг webpack с нуля
Về mặt kỹ thuật, đây không phải là một ứng dụng, nhưng nó là một nhiệm vụ rất hữu ích để hiểu cách webpack hoạt động từ bên trong. Bây giờ nó sẽ không phải là một “hộp đen” mà là một công cụ dễ hiểu.
Yêu cầu:
- Biên dịch es7 thành es5 (cơ bản).
- Biên dịch jsx thành js - hoặc - .vue thành .js (bạn sẽ phải học các trình tải)
- Thiết lập máy chủ webpack dev và tải lại mô-đun nóng. (vue-cli và create-Reac-app sử dụng cả hai)
- Sử dụng Heroku, now.sh hoặc Github, tìm hiểu cách triển khai các dự án webpack.
- Thiết lập bộ tiền xử lý yêu thích của bạn để biên dịch css - scss, less, stylus.
- Tìm hiểu cách sử dụng hình ảnh và svgs với webpack.
Клон Hackernews
Mỗi Jedi được yêu cầu tạo Hackernews của riêng mình.
Những gì bạn sẽ học được trên đường đi:
- Cách tương tác với API hackernews.
- Cách tạo một ứng dụng một trang.
- Cách triển khai các tính năng như xem bình luận, bình luận cá nhân, hồ sơ.
- Tổ chức các tuyến xử lý yêu cầu (Routing).
Тудушечка
Nghiêm túc? Tudushka? Bọn họ có hàng ngàn người. Nhưng tin tôi đi, có lý do cho sự nổi tiếng này.
Ứng dụng Tudu là một cách tuyệt vời để đảm bảo bạn hiểu những điều cơ bản. Hãy thử viết một ứng dụng bằng Javascript thuần túy và một ứng dụng trong framework yêu thích của bạn.
Học hỏi:
- Tạo nhiệm vụ mới.
- Kiểm tra xem các trường đã được điền chưa.
- Lọc các nhiệm vụ (đã hoàn thành, đang hoạt động, tất cả). Sử dụng
filterиreduce. - Hiểu những điều cơ bản về Javascript.
Сортируемый drag and drop список
Rất hữu ích để hiểu .
Hãy tìm hiểu:
- API kéo và thả
- Tạo giao diện người dùng phong phú
Клон мессенджера (нативное приложение)
Bạn sẽ hiểu cách hoạt động của cả ứng dụng web và ứng dụng gốc, điều này sẽ khiến bạn khác biệt với đám đông xám xịt.
Những gì chúng ta sẽ nghiên cứu:
- Ổ cắm web (tin nhắn tức thời)
- Ứng dụng gốc hoạt động như thế nào.
- Cách mẫu hoạt động trong ứng dụng gốc.
- Tổ chức các tuyến xử lý yêu cầu trong các ứng dụng gốc.
Trình soạn thảo văn bản
Mục đích của trình soạn thảo văn bản là giảm bớt công sức của người dùng khi cố gắng chuyển đổi định dạng của họ thành đánh dấu HTML hợp lệ. Một trình soạn thảo văn bản tốt cho phép người dùng định dạng văn bản theo nhiều cách khác nhau.
Tại một số thời điểm, mọi người đều đã sử dụng trình soạn thảo văn bản. Vậy tại sao không ?
Клон Reddit
là một trang web tổng hợp tin tức xã hội, đánh giá nội dung web và thảo luận.
Reddit chiếm phần lớn thời gian của tôi nhưng tôi vẫn tiếp tục sử dụng nó. Tạo bản sao Reddit là một cách hiệu quả để học lập trình (đồng thời duyệt Reddit).
Reddit cung cấp cho bạn rất nhiều thứ. Đừng bỏ sót bất kỳ tính năng nào hoặc làm mọi việc một cách bừa bãi. Trong thế giới thực với khách hàng và khách hàng, bạn không thể làm việc bừa bãi, nếu không bạn sẽ nhanh chóng mất việc.
Những khách hàng thông minh sẽ ngay lập tức nhận ra rằng công việc đang được thực hiện kém và sẽ tìm người khác.
Публикация пакета NPM с открытым исходным кодом
Nếu bạn viết mã Javascript, rất có thể bạn đang sử dụng trình quản lý gói. Trình quản lý gói cho phép bạn sử dụng lại mã hiện có mà người khác đã viết và xuất bản.
Hiểu được toàn bộ chu trình phát triển của một gói sẽ mang lại trải nghiệm rất tốt. Có rất nhiều điều bạn cần biết khi xuất bản mã. Bạn cần suy nghĩ về bảo mật, phiên bản ngữ nghĩa, khả năng mở rộng, quy ước đặt tên và bảo trì.
Gói có thể là bất cứ thứ gì. Nếu bạn không có ý tưởng, hãy tạo Lodash của riêng bạn và xuất bản nó.
Lodash:
Việc bạn hoàn thành công việc trực tuyến sẽ giúp bạn cao hơn những người khác 10%. về các nguồn và gói mở.
Учебный план freeCodeCamp
freeCodecamp đã thu thập được rất nhiều .
freeCodeCamp là một tổ chức phi lợi nhuận. Nó bao gồm một nền tảng học tập dựa trên web tương tác, một diễn đàn cộng đồng trực tuyến, phòng trò chuyện, các ấn phẩm trên Medium và các tổ chức địa phương có ý định giúp mọi người có thể tiếp cận việc phát triển web học tập.
Bạn sẽ đủ tiêu chuẩn cho công việc đầu tiên của mình nếu bạn hoàn thành toàn bộ khóa học.
Создайте HTTP-сервер с нуля
Giao thức HTTP là một trong những giao thức chính mà qua đó nội dung được truyền đi trên Internet. Máy chủ HTTP được sử dụng để phục vụ nội dung tĩnh như HTML, CSS và JS.
Việc có thể triển khai giao thức HTTP từ đầu sẽ mở rộng kiến thức của bạn về cách mọi thứ tương tác.
Ví dụ: nếu bạn sử dụng NodeJ thì bạn biết rằng Express cung cấp máy chủ HTTP.
Để tham khảo, hãy xem liệu bạn có thể:
- Thiết lập máy chủ mà không cần sử dụng bất kỳ thư viện nào
- Máy chủ phải phục vụ nội dung HTML, CSS và JS.
- Triển khai bộ định tuyến từ đầu
- Theo dõi các thay đổi và cập nhật máy chủ
Nếu bạn không biết tại sao, hãy sử dụng và cố gắng tạo một máy chủ HTTP từ đầu.
Десктопное приложение для заметок
Tất cả chúng ta đều ghi chép, phải không?
Hãy tạo một ứng dụng ghi chú. Ứng dụng cần lưu ghi chú và đồng bộ hóa chúng với cơ sở dữ liệu. Xây dựng một ứng dụng gốc bằng Electron, Swift hoặc bất cứ thứ gì bạn thích và những gì phù hợp với hệ thống của bạn.
Hãy thoải mái kết hợp điều này với thử thách đầu tiên (trình soạn thảo văn bản).
Như một phần thưởng, hãy thử đồng bộ hóa phiên bản máy tính để bàn của bạn với phiên bản web.
Подкасты (клон Overcast)
Ai không nghe podcast?
Tạo một ứng dụng web có các tính năng sau:
- Tạo một tài khoản
- Tìm kiếm Podcast
- Xếp hạng và đăng ký podcast
- Dừng và phát, thay đổi tốc độ, chức năng tiến và lùi trong 30 giây.
Hãy thử sử dụng API iTunes làm điểm bắt đầu. Nếu bạn biết về bất kỳ tài nguyên nào khác, xin vui lòng gửi trong phần bình luận.
Chụp màn hình
Xin chào! Tôi đang quay phim màn hình của mình ngay bây giờ!
Tạo một ứng dụng máy tính để bàn hoặc web cho phép bạn chụp màn hình và lưu clip dưới dạng .gif
Đây làm thế nào để đạt được điều này.
nguồn
Nguồn: www.habr.com