1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
مضمون کا ترجمہ EDISON سافٹ ویئر کے تعاون سے کیا گیا تھا، جو اور .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- بونس: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
نوٹ: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- بونس: Если вам интересно, я недавно написал на криптовалюту с React Native.
نوٹ: یہاں .
Подборка проектов из предыдущих публикаций.
پرت
پرت ایک کمیونٹی ہے جہاں ہر کوئی مشترکہ "بورڈ" پر ایک پکسل بنا سکتا ہے۔ اصل خیال Reddit پر پیدا ہوا تھا۔ r/Layer کمیونٹی مشترکہ تخلیقی صلاحیتوں کا ایک استعارہ ہے، کہ ہر کوئی تخلیق کار ہو سکتا ہے اور مشترکہ مقصد میں اپنا حصہ ڈال سکتا ہے۔
اپنا پرت پروجیکٹ بناتے وقت آپ کیا سیکھیں گے:
- JavaScript کینوس کیسے کام کرتا ہے کینوس کو چلانے کا طریقہ جاننا بہت سی ایپلی کیشنز میں ایک اہم مہارت ہے۔
- صارف کی اجازتوں کو کیسے مربوط کریں۔ ہر صارف لاگ ان کیے بغیر ہر 15 منٹ میں ایک پکسل کھینچ سکتا ہے۔
- کوکی سیشن بنائیں۔
اسکواش
اسکووش ایک امیج کمپریشن ایپلی کیشن ہے جس میں بہت سے جدید اختیارات ہیں۔
GIF 20 MB
اسکووش کا اپنا ورژن بنا کر آپ سیکھیں گے:
- تصویر کے سائز کے ساتھ کیسے کام کریں۔
- Drag'n'Drop API کی بنیادی باتیں جانیں۔
- سمجھیں کہ API اور ایونٹ سننے والے کیسے کام کرتے ہیں۔
- فائلوں کو اپ لوڈ اور ایکسپورٹ کرنے کا طریقہ
نوٹ: امیج کمپریسر مقامی ہے۔ سرور کو اضافی ڈیٹا بھیجنا ضروری نہیں ہے۔ آپ گھر پر کمپریسر رکھ سکتے ہیں، یا آپ اسے اپنی پسند کے سرور پر استعمال کر سکتے ہیں۔
کیلکولیٹر۔
چلو بھئی؟ سنجیدگی سے؟ کیلکولیٹر؟ ہاں، بالکل، ایک کیلکولیٹر۔ ریاضی کی کارروائیوں کی بنیادی باتوں کو سمجھنا اور وہ کیسے مل کر کام کرتے ہیں آپ کی درخواستوں کو آسان بنانے کے لیے ایک اہم مہارت ہے۔ جلد یا بدیر آپ کو نمبروں سے نمٹنا پڑے گا اور جتنی جلدی بہتر ہے۔
اپنا کیلکولیٹر بنا کر آپ سیکھیں گے:
- اعداد اور ریاضی کی کارروائیوں کے ساتھ کام کریں۔
- ایونٹ سننے والے API کے ساتھ مشق کریں۔
- عناصر کو کیسے ترتیب دیا جائے، انداز کو سمجھیں۔
کرالر (سرچ انجن)
ہر ایک نے سرچ انجن استعمال کیا ہے، تو کیوں نہ اپنا خود بنائیں؟ معلومات کی تلاش کے لیے کرالر کی ضرورت ہوتی ہے۔ ہر کوئی انہیں روزانہ استعمال کرتا ہے اور اس ٹیکنالوجی اور ماہرین کی مانگ وقت کے ساتھ ساتھ بڑھے گی۔
گوگل سرچ انجن
اپنا سرچ انجن بنا کر آپ کیا سیکھیں گے:
- کرالر کیسے کام کرتے ہیں۔
- سائٹس کو کیسے انڈیکس کیا جائے اور درجہ بندی اور شہرت کے لحاظ سے ان کی درجہ بندی کیسے کی جائے۔
- ڈیٹا بیس میں انڈیکس شدہ سائٹس کو کیسے اسٹور کیا جائے اور ڈیٹا بیس کے ساتھ کیسے کام کیا جائے۔
میوزک پلیئر (Spotify، Apple Music)
ہر کوئی موسیقی سنتا ہے - یہ ہماری زندگی کا صرف ایک لازمی حصہ ہے۔ آئیے بہتر طور پر سمجھنے کے لیے ایک میوزک پلیئر بنائیں کہ جدید میوزک اسٹریمنگ پلیٹ فارم کے بنیادی میکانکس کیسے کام کرتے ہیں۔
Spotify
آپ اپنا میوزک اسٹریمنگ پلیٹ فارم بنا کر کیا سیکھیں گے:
- API کے ساتھ کیسے کام کریں۔ Spotify یا Apple Music سے API استعمال کریں۔
- اگلے/پچھلے ٹریک کو کیسے چلائیں، موقوف کریں یا ریوائنڈ کریں۔
- حجم کو تبدیل کرنے کا طریقہ
- یوزر روٹنگ اور براؤزر ہسٹری کا نظم کیسے کریں۔
Приложение для поиска фильмов с помощью React (с хуками)
Первое, с чего вы могли бы начать, — это создать приложение для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть финальное приложение:
آپ کیا سیکھیں گے۔
Создавая это приложение, вы улучшите свои навыки React, используя сравнительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стили CSS.
Технический стек и фичи
- React с hook’ами
- تخلیق-رد عمل-ایپ
- جے ایس ایکس
- CSS
Без использования каких-либо классов, эти проекты дают вам идеальную точку входа в функциональный React и определенно помогут вам в 2020 году. Вы можете найти . Следуйте инструкциям или сделайте все на собственный вкус.
Приложение чата с помощью Vue
Еще один отличный проект для вас — создать приложение чата, используя мою любимую библиотеку JavaScript: VueJS. Приложение будет выглядеть примерно так:
آپ کیا سیکھیں گے۔
Из этого руководства вы узнаете, как сделать приложение Vue с нуля — создавать компоненты, обрабатывать состояния, создавать маршруты, подключаться к сторонним сервисам и даже обрабатывать аутентификацию.
Технический стек и фичи
- قول
- ویویکس
- ویو راؤٹر
- Vue CLI
- پاؤڈر
- CSS
Это действительно отличный проект, чтобы начать работать с Vue или улучшить свои существующие навыки, чтобы заняться разработкой в 2020 году. Вы можете найти .
Красивое приложение для просмотра погоды с Angular 8
Этот пример поможет вам создать красивое приложение для просмотра погоды с помощью Angular 8:
آپ کیا سیکھیں گے۔
Этот проект научит вас ценным навыкам при создании приложений с нуля — начиная с проектирования и заканчивая разработкой, вплоть до готового к развертыванию приложения.
Технический стек и фичи
- کونیی 8
- فائر بیس
- Рендеринг на стороне сервера
- CSS с сеткой и Flexbox
- Mobile friendly и адаптивность
- ڈارک موڈ
- خوبصورت انٹرفیس
Что мне действительно очень нравится в этом всеобъемлющем проекте, так это то, что вы не изучаете вещи изолированно. Вместо этого вы изучаете весь процесс разработки — от проектирования до окончательного развертывания.
To-Do приложение с помощью Svelte
Svelte это как новый ребенок в компонентном подходе — по крайней мере, похожий на React, Vue и Angular. И это одна из самых горячих новинок на 2020 год.
To-Do приложения не обязательно являются самой горячей темой, но это действительно поможет вам оттачивать свои навыки Svelte. Это будет выглядеть так:
آپ کیا سیکھیں گے۔
Из этого туториала вы узнаете, как создать приложение с помощью Svelte 3, от начала до конца. Вы будете использовать компоненты, стилизацию и обработчики событий
Технический стек и фичи
- Svelte 3
- اجزاء
- Стилизация с помощью CSS
- Синтаксис ES 6
Существует не так много хороших стартовых проектов по Svelte, поэтому я нашел .
Приложение для электронной коммерции с помощью Next.js
Next.js является самым популярным фреймворком для создания приложений React, которые поддерживают рендеринг на стороне сервера из коробки.
Этот проект покажет вам, как создать приложение для электронной коммерции, которая выглядит следующим образом:
آپ کیا سیکھیں گے۔
В этом проекте вы узнаете, как разрабатывать с помощью Next.js — создавать новые страницы и компоненты, извлекать данные, а также стилизовать и развертывать приложение Next.
Технический стек и фичи
- Next.js
- Компоненты и страницы
- ڈیٹا سیمپلنگ
- اسٹائلائزیشن
- Развертывание проекта
- SSR и SPA
Всегда здорово иметь реальный пример, такой как приложение для электронной коммерции, чтобы узнать что-то новое. Вы можете .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js для Vue, тоже что и Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений
Последнее приложение, которое вы можете создать, будет выглядеть так:
آپ کیا سیکھیں گے۔
В этом примере проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js — от начальной настройки до окончательного развертывания.
Он использует множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.
Технический стек и фичи
- نکسٹ جے
- Компоненты и страницы
- Storyblock модуль
- Миксины
- Vuex для управления состоянием
- SCSS для стилизации
- Nuxt middlewares
, который включает в себя множество замечательных возможностей Nuxt.js. Я лично люблю работать с Nuxt, так что вам стоит попробовать его, так как это также сделает вас отличным разработчиком Vue.
Блог с Gatsby
Gatsby — отличный генератор статических сайтов, использующий React и GraphQL. Это результат проекта:
آپ کیا سیکھیں گے۔
В этом руководстве вы узнаете, как использовать Gatsby для создания блога, который вы будете использовать для написания своих собственных статей, используя React и GraphQL.
Технический стек и фичи
- Gatsby
- جواب دیں
- گراف کیو ایل
- Плагины и темы
- MDX/Markdown
- بوٹسٹریپ سی ایس ایس
- مراسلے
Если вы когда-нибудь хотели завести блог, того, как сделать его, используя React и GraphQL.
Я не говорю, что WordPress является плохим выбором, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React — что является удивительной комбинацией.
Блог с Gridsome
Gridsome для Vue… Хорошо, у нас уже было это с Next/Nuxt.
Но то же самое верно для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:
آپ کیا سیکھیں گے۔
Этот проект научит вас, как создать простой блог, чтобы начать работу с Gridsome, GraphQL и Markdown. В нем также рассказывается, как развернуть приложение через Netlify.
Технический стек и фичи
- گرڈسم
- قول
- گراف کیو ایل
- Markdown
- نیٹلائف
Это, конечно, не самый полный туториал, но он охватывает основные понятия Gridsome и .
Аудио плеер, похожий на SoundCloud, с помощью Quasar
Quasar — это еще один фреймворк Vue, который можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудио-плеера, например:
آپ کیا سیکھیں گے۔
В то время как другие проекты сосредоточены в основном на веб-приложениях, этот покажет вам, как создать мобильное приложение с использованием Vue и фреймворка Quasar.
У вас уже должна быть работающая Cordova с настроенной Android Studio/Xcode. Если нет, то в руководстве есть ссылка на веб-сайт Quasar, где они показывают, как все настроить.
Технический стек и фичи
- کوثر
- قول
- کورڈووا
- ویو سرفر
- UI Компоненты
, демонстрирующий возможности Quasar для создания мобильных приложений.
Форма кредитной карты
Клёвая форма кредитной карты с гладкими и приятными микровзаимодействиями. Включает форматирование чисел, проверку и автоматическое определение типа карты. Она построена на Vue.js, а также полностью адаптивная. (Посмотреть можно .)
Чему научитесь:
- Обрабатывать и валидировать формы
- Обрабатывать события (например, при изменении полей)
- Разберетесь как отображать и размещать элементы на странице, особенно данные кредитной карты, которая поверх формы
بار گراف
Гистограмма — это диаграмма или график, который представляет категорийные данные с прямоугольными столбцами с высотами или длинами, пропорциональными значениям, которые они представляют.
Они могут быть нанесены вертикально или горизонтально. Вертикальная гистограмма иногда называется линейной диаграммой.
Чему научитесь:
- Отображать данные в структурированном и понятном виде
- Дополнительно: Узнаете, как использовать элемент
canvasи как рисовать элементы с ним
вы можете найти данные о населении мира. Они отсортированы по годам.
Анимация сердечка Twitter
Еще в 2016 году Twitter представил эту удивительную анимацию для своих твитов. По состоянию на 2019 год оно все еще выглядит достойно, так почему бы не создать его самостоятельно?
Чему научитесь:
- Работать с CSS-атрибутом
keyframes - Манипулировать и анимировать элементы HTML
- Объединять JavaScript, HTML и CSS
Репозитории GitHub с функцией поиска
Здесь нет ничего необычного — репозитории GitHub — это просто прославленный список.
Задача состоит в том, чтобы отобразить репозитории и позволить пользователю фильтровать их. Используйте для получения репозиториев для каждого пользователя.
GitHub profile page —
Чему научитесь:
- Получать данные из API
- Отображать данные из API
- Фильтровать и показывать релевантные данные для каждого поиска
- Дополнительно: Если вы готовы принять вызов, используйте , созданный с использованием GraphQL. .
Чаты в стиле Reddit
Чаты являются популярным способом общения благодаря простоте и удобству использования. Но что на самом деле питает современные чаты? WebSockets!
Чему научитесь:
- Использовать WebSockets, применять коммуникацию в режиме реального времени и обновления данных
- Работать с уровнями доступа пользователей (например, владелец канала чата имеет роль
admin, а другие в комнате —user) - Обрабатывать и валидировать формы — помните, окно чата для отправки сообщения является
input - Создавать и вступать в разные чаты
- Работать с личными сообщениями. Пользователи могут общаться с другими пользователями в частном порядке. По сути, вы будете устанавливать соединение WebSocket’а между двумя пользователями.
Навигация в стиле Stripe
Уникальность этой навигации заключается в том, что контейнер popover трансформируется под содержимое. В этом переходе есть элегантность по сравнению с традиционным поведением открытия и закрытия нового поповера.
Чему научитесь:
- Совмещать CSS-анимацию с переходами
- Затенять контент и применять активный класс для перемещаемого элемента
Pacman
Pacman کا اپنا ورژن بنائیں۔ گیمز کو کیسے تیار کیا جاتا ہے اور بنیادی باتوں کو سمجھنے کا یہ ایک بہترین طریقہ ہے۔ جاوا اسکرپٹ کا فریم ورک استعمال کریں، React یا Vue۔
آپ سیکھیں گے:
- عناصر کیسے حرکت کرتے ہیں۔
- اس بات کا تعین کیسے کریں کہ کون سی کیز کو دبانا ہے۔
- تصادم کے لمحے کا تعین کیسے کریں۔
- آپ مزید جا سکتے ہیں اور ماضی کی نقل و حرکت کا کنٹرول شامل کر سکتے ہیں۔
آپ کو اس منصوبے کی مثال مل جائے گی۔ GitHub کے
صارفی انتظام
پروجیکٹ GitHub کے
صارف انتظامیہ کے لیے ایک CRUD قسم کی ایپلیکیشن بنانا آپ کو ترقی کی بنیادی باتیں سکھائے گا۔ یہ خاص طور پر نئے ڈویلپرز کے لیے مفید ہے۔
آپ سیکھیں گے:
- روٹنگ کیا ہے
- ڈیٹا انٹری فارم کو کیسے ہینڈل کریں اور چیک کریں کہ صارف نے کیا درج کیا ہے۔
- ڈیٹا بیس کے ساتھ کام کرنے کا طریقہ - اعمال بنائیں، پڑھیں، اپ ڈیٹ کریں اور حذف کریں۔
Проверка погоды в вашем местоположении
پروجیکٹ GitHub کے
اگر آپ ایپس بنانا چاہتے ہیں تو موسم ایپ سے شروع کریں۔ یہ پروجیکٹ سوئفٹ کے ذریعے مکمل کیا جا سکتا ہے۔
ایپلیکیشن بنانے کا تجربہ حاصل کرنے کے علاوہ، آپ یہ سیکھیں گے:
- API کے ساتھ کیسے کام کریں۔
- جغرافیائی محل وقوع کا استعمال کیسے کریں۔
- ٹیکسٹ ان پٹ شامل کرکے اپنی ایپلیکیشن کو مزید متحرک بنائیں۔ اس میں صارفین مخصوص مقام پر موسم کی جانچ کے لیے اپنی لوکیشن درج کر سکیں گے۔
آپ کو ایک API کی ضرورت ہوگی۔ موسم کا ڈیٹا حاصل کرنے کے لیے، OpenWeather API استعمال کریں۔ OpenWeather API کے بارے میں مزید معلومات.
Окно чата
میری چیٹ ونڈو ایکشن میں ہے، دو براؤزر ٹیبز میں کھلی ہے۔
چیٹ ونڈو بنانا ساکٹ کے ساتھ شروع کرنے کا بہترین طریقہ ہے۔ ٹیک اسٹیک کا انتخاب بہت بڑا ہے۔ مثال کے طور پر، Node.js کامل ہے۔
آپ سیکھیں گے کہ ساکٹ کیسے کام کرتے ہیں اور انہیں کیسے نافذ کیا جاتا ہے۔ یہ اس منصوبے کا بنیادی فائدہ ہے.
اگر آپ Laravel ڈویلپر ہیں جو ساکٹ کے ساتھ کام کرنا چاہتے ہیں تو میرا پڑھیں
گٹ لیب سی آئی
اگر آپ مسلسل انضمام (CI) کے لیے نئے ہیں، تو GitLab CI کے ساتھ کھیلیں۔ کچھ ماحول مرتب کریں اور کچھ ٹیسٹ چلانے کی کوشش کریں۔ یہ کوئی بہت مشکل پروجیکٹ نہیں ہے، لیکن مجھے یقین ہے کہ آپ اس سے بہت کچھ سیکھیں گے۔ بہت سی ترقیاتی ٹیمیں اب CI استعمال کر رہی ہیں۔ اسے استعمال کرنے کا طریقہ جاننا مفید ہے۔
آپ سیکھیں گے:
- GitLab CI کیا ہے؟
- ترتیب دینے کا طریقہ
.gitlab-ci.ymlجو GitLab صارف کو بتاتا ہے کہ کیا کرنا ہے۔ - دوسرے ماحول میں کیسے تعینات کیا جائے۔
Анализатор сайтов
ایک سکریپر بنائیں جو ویب سائٹس کے سیمنٹکس کا تجزیہ کرے اور ان کی ریٹنگ بنائے۔ مثال کے طور پر، آپ امیجز میں کھوئے ہوئے Alt ٹیگز کی جانچ کر سکتے ہیں۔ یا چیک کریں کہ آیا صفحہ میں SEO میٹا ٹیگز ہیں۔ یوزر انٹرفیس کے بغیر کھرچنی بنائی جا سکتی ہے۔
آپ سیکھیں گے:
- سکریپر کیسے کام کرتا ہے؟
- DOM سلیکٹرز کیسے بنائیں
- الگورتھم کیسے لکھیں۔
- اگر آپ وہاں رکنا نہیں چاہتے تو ایک صارف انٹرفیس بنائیں۔ آپ ہر ویب سائٹ پر ایک رپورٹ بھی بنا سکتے ہیں جسے آپ چیک کرتے ہیں۔
Определение настроений в социальных сетях
سوشل میڈیا پر جذبات کا پتہ لگانا مشین لرننگ سے متعارف کرانے کا ایک بہترین طریقہ ہے۔
آپ صرف ایک سوشل نیٹ ورک کا تجزیہ کر کے شروع کر سکتے ہیں۔ ہر کوئی عام طور پر ٹویٹر سے شروع ہوتا ہے۔
اگر آپ کو پہلے سے ہی مشین لرننگ کا تجربہ ہے تو مختلف سوشل نیٹ ورکس سے ڈیٹا اکٹھا کرنے اور انہیں یکجا کرنے کی کوشش کریں۔
آپ سیکھیں گے:
- مشین لرننگ کیا ہے؟
Клон Trello
آپ کیا سیکھیں گے:
- درخواست پر کارروائی کرنے والے راستوں کی تنظیم (روٹنگ)۔
- ڈریگ اور ڈراپ.
- نئی اشیاء (بورڈز، فہرستیں، کارڈ) کیسے بنائیں۔
- ان پٹ ڈیٹا پر کارروائی اور جانچ کرنا۔
- کلائنٹ کی طرف سے: لوکل اسٹوریج کا استعمال کیسے کریں، لوکل اسٹوریج میں ڈیٹا کیسے محفوظ کریں، لوکل اسٹوریج سے ڈیٹا کیسے پڑھیں۔
- سرور کی طرف سے: ڈیٹا بیس کا استعمال کیسے کریں، ڈیٹا بیس میں ڈیٹا کیسے محفوظ کریں، ڈیٹا بیس سے ڈیٹا کیسے پڑھیں۔
، React+Redux میں بنایا گیا ہے۔
Панель админа
ایک سادہ سی آر یو ڈی ایپلی کیشن، بنیادی باتیں سیکھنے کے لیے مثالی۔ آئیے سیکھتے ہیں:
- صارفین بنائیں، صارفین کا نظم کریں۔
- ڈیٹا بیس کے ساتھ تعامل کریں - صارفین بنائیں، پڑھیں، ترمیم کریں، حذف کریں۔
- ان پٹ کی توثیق کرنا اور فارم کے ساتھ کام کرنا۔
Трекер криптовалют (нативное мобильное приложение)
کچھ بھی: Swift, Objective-C, React Native, Java, Kotlin.
چلو پڑھیں:
- مقامی ایپلیکیشنز کیسے کام کرتی ہیں۔
- API سے ڈیٹا بازیافت کرنے کا طریقہ۔
- مقامی صفحہ لے آؤٹ کیسے کام کرتے ہیں۔
- موبائل سمیلیٹر کے ساتھ کیسے کام کریں۔
. اگر آپ کو کچھ بہتر لگتا ہے تو، تبصرے میں لکھیں.
اگر آپ دلچسپی رکھتے ہیں تو یہ یہاں ہے۔ .
Настроить собственный конфиг webpack с нуля
تکنیکی طور پر، یہ کوئی ایپلی کیشن نہیں ہے، لیکن یہ سمجھنے کے لیے بہت مفید کام ہے کہ ویب پیک اندر سے کیسے کام کرتا ہے۔ اب یہ ’’بلیک باکس‘‘ نہیں بلکہ ایک قابل فہم ٹول ہوگا۔
کے تقاضے:
- es7 سے es5 (بنیادی باتیں) مرتب کریں۔
- jsx کو js میں مرتب کریں - یا - .vue to .js (آپ کو لوڈرز سیکھنا ہوں گے)
- ویب پیک ڈیو سرور اور ہاٹ ماڈیول ری لوڈنگ سیٹ اپ کریں۔ (vue-cli اور create-react-app دونوں استعمال کرتے ہیں)
- Heroku، now.sh یا Github استعمال کریں، سیکھیں کہ ویب پیک پروجیکٹس کو کیسے تعینات کیا جائے۔
- سی ایس ایس - ایس سی ایس ایس، کم، اسٹائلس کو مرتب کرنے کے لیے اپنا پسندیدہ پری پروسیسر ترتیب دیں۔
- ویب پیک کے ساتھ تصاویر اور svgs استعمال کرنے کا طریقہ سیکھیں۔
Клон Hackernews
ہر جیدی کو اپنی ہیکر نیوز بنانے کی ضرورت ہے۔
راستے میں آپ کیا سیکھیں گے:
- hackernews API کے ساتھ تعامل کیسے کریں۔
- سنگل پیج ایپلیکیشن کیسے بنائیں۔
- تبصرے، انفرادی تبصرے، پروفائلز دیکھنے جیسی خصوصیات کو کیسے نافذ کیا جائے۔
- درخواست پر کارروائی کرنے والے راستوں کی تنظیم (روٹنگ)۔
Тудушечка
سنجیدگی سے؟ تودوشکا؟ ان میں سے ہزاروں ہیں۔ لیکن یقین کریں اس مقبولیت کی ایک وجہ بھی ہے۔
Tudu ایپ یہ یقینی بنانے کا ایک بہترین طریقہ ہے کہ آپ بنیادی باتوں کو سمجھتے ہیں۔ ایک ایپلیکیشن ونیلا جاوا اسکرپٹ میں اور ایک اپنے پسندیدہ فریم ورک میں لکھنے کی کوشش کریں۔
جانیں:
- نئے کام بنائیں۔
- چیک کریں کہ فیلڈز بھرے ہوئے ہیں۔
- فلٹر ٹاسک (مکمل، فعال، تمام)۔ استعمال کریں۔
filterиreduce. - جاوا اسکرپٹ کی بنیادی باتوں کو سمجھیں۔
Сортируемый drag and drop список
سمجھنے میں بہت مددگار .
آئیے سیکھتے ہیں:
- API کو گھسیٹیں اور چھوڑیں۔
- بھرپور UIs بنائیں
Клон мессенджера (нативное приложение)
آپ سمجھ جائیں گے کہ ویب ایپلیکیشنز اور مقامی ایپلیکیشنز دونوں کیسے کام کرتی ہیں، جو آپ کو گرے ماس سے الگ کر دے گی۔
ہم کیا مطالعہ کریں گے:
- ویب ساکٹ (فوری پیغامات)
- مقامی ایپلیکیشنز کیسے کام کرتی ہیں۔
- مقامی ایپلی کیشنز میں ٹیمپلیٹس کیسے کام کرتے ہیں۔
- مقامی ایپلی کیشنز میں درخواست کی کارروائی کے راستوں کو منظم کرنا۔
متن ایڈیٹر۔
ٹیکسٹ ایڈیٹر کا مقصد اپنے فارمیٹنگ کو درست HTML مارک اپ میں تبدیل کرنے کی کوشش کرنے والے صارفین کی کوششوں کو کم کرنا ہے۔ ایک اچھا ٹیکسٹ ایڈیٹر صارفین کو متن کو مختلف طریقوں سے فارمیٹ کرنے کی اجازت دیتا ہے۔
کسی وقت، ہر ایک نے ٹیکسٹ ایڈیٹر استعمال کیا ہے۔ تو کیوں نہیں؟ ?
Клон Reddit
ایک سماجی خبروں کا مجموعہ، ویب مواد کی درجہ بندی اور بحث کی سائٹ ہے۔
Reddit میرا زیادہ تر وقت لیتا ہے، لیکن میں اس پر ہینگ آؤٹ کرتا رہتا ہوں۔ Reddit کلون بنانا پروگرامنگ سیکھنے کا ایک مؤثر طریقہ ہے (ایک ہی وقت میں Reddit کو براؤز کرتے ہوئے)۔
Reddit آپ کو بہت امیر فراہم کرتا ہے۔. کسی بھی خصوصیت کو مت چھوڑیں یا بے ترتیبی سے کام نہ کریں۔ گاہکوں اور گاہکوں کے ساتھ حقیقی دنیا میں، آپ بے ترتیبی سے کام نہیں کر سکتے، یا آپ جلدی سے اپنی ملازمت سے ہاتھ دھو بیٹھیں گے۔
سمارٹ کلائنٹس کو فوری طور پر احساس ہو جائے گا کہ کام خراب ہو رہا ہے اور وہ کسی اور کو تلاش کر لیں گے۔
Публикация пакета NPM с открытым исходным кодом
اگر آپ Javascript کوڈ لکھتے ہیں، تو امکان ہے کہ آپ پیکیج مینیجر استعمال کریں۔ ایک پیکیج مینیجر آپ کو موجودہ کوڈ کو دوبارہ استعمال کرنے کی اجازت دیتا ہے جسے دوسرے لوگوں نے لکھا اور شائع کیا ہے۔
پیکج کے مکمل ڈیولپمنٹ سائیکل کو سمجھنا ایک بہت اچھا تجربہ فراہم کرے گا۔ کوڈ شائع کرتے وقت آپ کو بہت سی چیزیں جاننے کی ضرورت ہے۔ آپ کو سیکیورٹی، سیمنٹک ورژننگ، اسکیل ایبلٹی، نام دینے کے کنونشنز اور دیکھ بھال کے بارے میں سوچنے کی ضرورت ہے۔
پیکج کچھ بھی ہو سکتا ہے۔ اگر آپ کے پاس کوئی آئیڈیا نہیں ہے تو اپنا لوڈاش بنائیں اور اسے شائع کریں۔
لوڈش:
آپ نے آن لائن کچھ کیا ہے جو آپ کو دوسروں سے 10% اوپر رکھتا ہے۔ کھلے ذرائع اور پیکجوں کے بارے میں۔
Учебный план freeCodeCamp
freeCodecamp نے بہت کچھ جمع کیا ہے۔ .
freeCodeCamp ایک غیر منافع بخش تنظیم ہے۔ یہ ایک انٹرایکٹو ویب پر مبنی لرننگ پلیٹ فارم، ایک آن لائن کمیونٹی فورم، چیٹ رومز، میڈیم پبلیکیشنز، اور مقامی تنظیموں پر مشتمل ہے جو ویب ڈویلپمنٹ سیکھنے کو ہر کسی کے لیے قابل رسائی بنانا چاہتے ہیں۔
اگر آپ پورا کورس مکمل کرنے کا انتظام کرتے ہیں تو آپ اپنی پہلی ملازمت کے لیے زیادہ اہل ہوں گے۔
Создайте HTTP-сервер с нуля
HTTP پروٹوکول ان اہم پروٹوکولز میں سے ایک ہے جس کے ذریعے مواد انٹرنیٹ پر سفر کرتا ہے۔ ایچ ٹی ٹی پی سرورز کو جامد مواد پیش کرنے کے لیے استعمال کیا جاتا ہے جیسے کہ HTML، CSS اور JS۔
شروع سے HTTP پروٹوکول کو لاگو کرنے کے قابل ہونے سے آپ کے علم میں اضافہ ہوگا کہ چیزیں کیسے آپس میں ملتی ہیں۔
مثال کے طور پر، اگر آپ NodeJs استعمال کرتے ہیں، تو آپ جانتے ہیں کہ ایکسپریس ایک HTTP سرور فراہم کرتا ہے۔
حوالہ کے لیے، دیکھیں کہ کیا آپ کر سکتے ہیں:
- کسی بھی لائبریری کو استعمال کیے بغیر سرور ترتیب دیں۔
- سرور کو HTML، CSS اور JS مواد پیش کرنا چاہیے۔
- شروع سے روٹر کو لاگو کرنا
- تبدیلیوں کی نگرانی کریں اور سرور کو اپ ڈیٹ کریں۔
اگر آپ نہیں جانتے کہ کیوں، استعمال کریں۔ اور HTTP سرور بنانے کی کوشش کریں۔ شروع سے.
Десктопное приложение для заметок
ہم سب نوٹ لیتے ہیں، کیا ہم نہیں؟
آئیے ایک نوٹ ایپ بنائیں۔ ایپلیکیشن کو نوٹوں کو محفوظ کرنے اور انہیں ڈیٹا بیس کے ساتھ ہم آہنگ کرنے کی ضرورت ہے۔ الیکٹران، سوئفٹ، یا جو بھی آپ کو پسند ہے اور جو آپ کے سسٹم کے لیے کام کرتا ہے اسے استعمال کرکے ایک مقامی ایپ بنائیں۔
اسے پہلے چیلنج (ٹیکسٹ ایڈیٹر) کے ساتھ بلا جھجھک جوڑ دیں۔
بونس کے طور پر، اپنے ڈیسک ٹاپ ورژن کو ویب ورژن کے ساتھ ہم آہنگ کرنے کی کوشش کریں۔
Подкасты (клон Overcast)
پوڈ کاسٹ کون نہیں سنتا؟
درج ذیل فعالیت کے ساتھ ایک ویب ایپلیکیشن بنائیں:
- کھاتا کھولیں
- پوڈکاسٹ تلاش کریں۔
- پوڈ کاسٹ کی درجہ بندی کریں اور سبسکرائب کریں۔
- 30 سیکنڈ کے لیے رکیں اور چلائیں، رفتار تبدیل کریں، آگے اور پیچھے کی طرف افعال کریں۔
آئی ٹیونز API کو نقطہ آغاز کے طور پر استعمال کرنے کی کوشش کریں۔ اگر آپ کسی دوسرے وسائل کے بارے میں جانتے ہیں، تو براہ کرم تبصرے میں پوسٹ کریں.
سکرین کی تصویر لو
ہیلو! میں ابھی اپنی اسکرین فلم کر رہا ہوں!
ایک ڈیسک ٹاپ یا ویب ایپ بنائیں جو آپ کو اپنی اسکرین کیپچر کرنے اور کلپ کو بطور محفوظ کرنے کی اجازت دیتا ہے۔ .gif
یہاں یہ کیسے حاصل کرنا ہے.
ذرائع
ماخذ: www.habr.com