Три статьи, которые, как ожидается, будут переведены на этот раз, следующие:
- 01. [Перевод] 9 проектов, которые сделают вас фронтенд-экспертом в 2020 году
- 02. [Перевод] Предварительная загрузка адаптивных изображений, начиная с Chrome 73
- 03. 13 полезных трюков с массивами в JavaScript, которые вы должны знать
Почему я создаю этот репозиторий git? Изучайте и следите за новыми идеями и новыми технологиями веб-разработки, переводя зарубежные технические статьи, связанные с Интернетом. Адрес git-репозитория:GitHub.com/Even Sun Lei/Срочно…
представлять
Будь вы новичок в программировании или опытный разработчик. В интернет-индустрии необходимо постоянно изучать новые концепции и языки/фреймворки, чтобы идти в ногу с быстрыми темпами изменений. Возьмем, к примеру, React — исходный код, открытый Facebook 4 года назад, теперь является популярным выбором для разработчиков JavaScript во всем мире. Vue и Angular, безусловно, имеют своих последователей. Кроме того, есть Svelte и общие фреймворки, такие как Next.js или Nuxt.js, а также Gatsby, Gridsome, Quasar и другие. Если вы хотите стать профессиональным разработчиком JavaScript, у вас должен быть как минимум некоторый практический опыт работы с различными фреймворками и библиотеками, помимо использования нативного JS для рабочих задач.
Чтобы помочь вам стать Frontend Master в 2020 году, я собрал 9 различных проектов, каждый из которых имеет свою тему и свою среду или библиотеку JavaScript, в качестве технического стека, который вы можете создавать и использовать в дополнение к целям обучения. Помните, ничто не помогает вам больше, чем само создание чего-то, так что напрягите свой ум, чтобы это произошло!
Создание приложения для поиска фильмов с помощью React (используя хуки)
Во-первых, вы можете создать приложение для поиска фильмов с помощью React. Вот примерная схема конечного приложения:
что вы узнаете
Соберите приложение, вы будете использовать относительно новый Hooks API React для улучшения своих навыков. Пример проекта React использует компонент, хук, внешний API, конечно, есть некоторые стили CSS.
Стек технологий и особенности
- React with Hooks
- create-react-app
- JSX
- CSS
Этот проект, не использующий классов, дает вам идеальную отправную точку для функциональности и определенно поможет вам в 2020 году. Примеры проектов вы можете найти здесь:Woohoo.бесплатный код camp.org/news/how-to…Следуйте этому руководству или сделайте это по-своему!
Создание приложения для чата с помощью Vue
Еще один отличный проект для вас создает приложение чата, используя мою любимую библиотеку JavaScript, Vuejs. Приложение будет выглядеть так:
чему вы научитесь
Следуя этому руководству, вы узнаете, как настроить приложение Vue с нуля, создать компоненты, управлять состоянием, создавать маршруты, подключаться к сторонним службам и даже обрабатывать аутентификацию.
Стек технологий и особенности
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Это действительно отличный проект, чтобы начать работу с Vue или улучшить свои существующие навыки для разработки в 2020 году. Вы можете найти учебник здесь:woohoo.site point.com/pusher-v UE-…
Создавайте красивые погодные приложения с помощью Angular 8
Этот пример поможет вам создать красивое погодное приложение с помощью Google Angular 8:
чему вы научитесь
Проект научит вас некоторым ценным навыкам, таким как создание приложения с нуля, от проектирования до разработки и развертывания в рабочей среде.
Стек технологий и особенности
- Angular 8
- Firebase
- рендеринг на стороне сервера
- Использование макета сетки и гибкого макета
- Мобильный дружественный и отзывчивый
- темный режим
- Красивый ui
Что мне действительно нравится в этом всеобъемлющем проекте, так это то, что вы изучаете не отдельные вещи, а весь процесс разработки от проектирования до окончательного развертывания. Вы действительно должны это сделать!medium.com/@Ха-ха DBA ах до…
Создание приложения для работы со Svelte
По сравнению с React, Vue и Angular, Svelte является чем-то новым, но по-прежнему остается одной из горячих тем 2020 года. Хорошо, приложение To-Do не обязательно является самой горячей темой, но оно помогает вам улучшить свои навыки Svelte, выглядя так:
чему вы научитесь
В этом руководстве показано, как создать приложение с помощью Svelte 3 от начала до конца. Он применяет компоненты, стили и обработчики событий.
Стек технологий и особенности
- Svelte 3
- компоненты
- Стилизация через CSS
- Синтаксис ES 6
Существует не так много хороших стартовых проектов Svelte, поэтому я думаю, что это хорошее место для начала. Кто знает, может быть, именно вы создаете еще одно более подробное руководство по Svelte, которое будет рассмотрено в выпуске этого поста в следующем году?medium.com/coding он и SM…
Создание корзины покупок для электронной коммерции с помощью Next.js
NextJs — самый популярный фреймворк для создания приложений React, который поддерживает приложения «из коробки». Этот проект покажет вам, как создать корзину для покупок в электронной коммерции, которая выглядит следующим образом:
чему вы научитесь
В этом проекте вы узнаете, как настраивать среду разработки Next.js, создавать новые страницы и компоненты, извлекать данные, стилизовать и развертывать свое следующее приложение.
Стек технологий и особенности
- Next.js
- Компоненты и страницы
- сбор информации
- стиль
- Метод развертывания
- ССР и СПА
Всегда приятно иметь реальный пример (например, витрину электронной коммерции), чтобы узнать что-то новое. Вы можете найти учебник здесь:это ты ПК art.com/blog/next - просто…
Создайте полноценный многоязычный блог-сайт Nuxt.js
То, что Nuxt.js делает с Vue, является зеркалом Next.js. Отличный фреймворк для объединения рендеринга на стороне сервера и функциональности одностраничных приложений. Окончательное приложение, которое вы можете создать, будет выглядеть так:
чему вы научитесь
Этот пример проекта научит вас, как создать полноценный веб-сайт с помощью Nuxt.js, от первоначальной настройки до окончательного развертывания. Он использует многие замечательные функции, которые может предложить Nuxt, такие как страницы и компоненты и стили SCSS.
Стек технологий и особенности
- Nuxt.js
- Компоненты и страницы
- Модуль сюжетных блоков
- Миксины
- Управление состоянием Vuex
- SCSS-стиль
- Промежуточное ПО Nuxt
Это действительно классный проект для вас, который охватывает многие замечательные функции Nuxt.js. Мне лично нравится использовать Nuxt, поэтому вам действительно стоит попробовать его, так как он также сделает вас лучшим разработчиком Vue!woo woo woo.story Bailian OK.com/vote/angry subsides-that's-…
Ведение блога с Гэтсби
Gatsby — отличный генератор статических сайтов, который использует React и GraphQL под капотом. Вот результат проекта:
чему вы научитесь
В этом руководстве вы узнаете, как использовать Gatsby для создания отличного блога, написания собственных статей с использованием React и GraphQL.
Стек технологий и особенности
- Gatsby
- React
- GraphQL
- Плагины и темы
- MDX/Markdown
- Bootstrap
- шаблон
Если вы хотите вести блог, это отличный пример того, как это сделать с помощью React и GraphQL. Я не говорю, что Wordpress — плохой выбор, но с Gatsby вы можете создавать эффективные сайты, используя React!blog.bit SRC.IO/how-to-no IL…
Создание блога с Gridsome
Gridsome работает с Vue, ну, у нас это уже есть в Next/Nuxt, но так же работает Gridsome и Gatsby. Оба используют GraphQL в качестве уровня данных, но Gridsome использует VueJS. Это также отличный генератор статических сайтов, который поможет вам создать отличный блог:
чему вы научитесь
Этот проект научит вас, как создать простой блог, чтобы начать работу с Gridsome, GraphQL и Markdown. В нем также описывается, как развертывать приложения через Netlify.
Стек технологий и особенности
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Конечно, это не самый полный учебник, но он охватывает основные концепции Gridsome и Markdown и может стать хорошей отправной точкой.woohoo.tel Erik.com/blogs/build…
Создание приложения аудиоплеера, похожего на SoundCloud, с помощью Quasar
Quasar — еще один фреймворк Vue, который также можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудиоплеера следующим образом:
чему вы научитесь
В то время как другие проекты сосредоточены в основном на веб-приложениях, этот проект покажет вам, как создавать мобильные приложения с использованием Vue через платформу Quasar. У вас уже должна быть настроена рабочая среда Cordova и настроена android studio/xcode. Если нет, в учебнике есть ссылка на веб-сайт quasar, где вам покажут, как его настроить.
Стек технологий и особенности
- Quasar
- Vue
- Cordova
- Wavesurfer
- Компоненты пользовательского интерфейса
Небольшой проект, демонстрирующий возможности Quasar для создания мобильных приложений.Woohoo.учимся чему-то новому.com/how-to-no il…
В заключение
В этой статье я покажу вам 9 проектов, которые вы можете создать, каждый из которых ориентирован на фреймворк или библиотеку JavaScript. Теперь выбор за вами: собираетесь ли вы попробовать что-то новое, используя фреймворк, которым вы раньше не пользовались? Или вы хотите улучшить свои навыки, выполняя проекты для технологии, о которой у вас уже есть некоторые знания? Или вы будете полагаться на свой любимый фреймворк/библиотеку и делать все свои проекты в 2020 году? Не стесняйтесь комментировать и не забудьте подписаться на меня, чтобы не пропустить новые публикации!
Оригинальная ссылка:Dev.to/Simon держи или…