Введение

Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком, в этой отрасли изучение новых концепций и языков/фреймворков является обязательно чтобы успевать за трендами.

Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.

Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.

Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.

Чтобы помочь вам стать мастером фронт-енда в 2020 году, я собрал девять различных проектов, каждый из которых был посвящен разным фреймворкам и библиотекам JavaScript в качестве технического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не помогает вам больше, чем на практике создавать вещи, поэтому двигайтесь вперед, включите свой ум и сделайте это возможным

«Мастер совершает больше ошибок, чем новичок — попыток»

Прошлый список тренировочных проектов набрал 50к прочтений и 600 добавлений в избранное. Вот еще один список интересных проектов для практики, для тех кто хочет добавки.

1. Текстовый редактор

Цель текстового редактора — уменьшить усилия пользователей, пытающихся преобразовать их форматирование как валидную разметку HTML. Хороший текстовый редактор позволяет пользователям форматировать текст по-разному.

В какой-то момент каждый использовал текстовый редактор. Так почему бы не создать его самостоятельно?

«Мастер совершает больше ошибок, чем новичок — попыток»

Предлагаем 8 вариантов проектов, которые можно сделать «по фану», дабы получить реальный опыт разработки.

Проект 1. Клон Trello

Клон Trello от Indrek Lasn .

Что вы освоите:

• Организация маршрутов обработки запросов (Routing).
• Drag and drop.
• Как создавать новые объекты (доски, списки, карточки).
• Обработка и проверка входных данных.
• Со стороны клиента: как использовать локальное хранилище, как сохранять данные в локальном хранилище, как читать данные из локального хранилища.
• Со стороны сервера: как использовать базы данных, как сохранять данных в базе, как читать данные из базы.

Тут пример репозитория, сделанного на React+Redux.

Человек остается начинающим в течение 1000 дней. Он находит истину после 10000 дней практики.

Это цитата Оямы Масутацу, которая довольно хорошо излагает суть статьи. Если вы хотите быть классным разработчиком — приложите усилия. В этом весь секрет. Проводите много часов за клавиатурой и не бойтесь практиковаться. Тогда вы вырастите как разработчик.

Вот 7 проектов, которые могут помочь вам в развитии. Не стесняйтесь выбирать свой стек технологий — используйте все, что вашей душе угодно.

(предыдущие списки заданий для тренировки: 1) 8 учебных проектов 2) Еще список проектов, на чем потренироваться)

Проект 1: Pacman

Создайте свою версию Pacman. Это отличный способ получить представление о том, как разрабатываются игры, понять основы. Используйте JavaScript-фреймворк, React или Vue.

Вы узнаете:

• Как передвигаются элементы
• Как определить какие клавиши нажимать
• Как определить момент столкновения
• Вы можете не останавливаться на достигнутом и добавить управление движением призраков

Пример этого проекта вы найдете в репозитории GitHub

«Мастер совершает больше ошибок, чем новичок — попыток»

1. Форма кредитной карты

Клёвая форма кредитной карты с гладкими и приятными микровзаимодействиями. Включает форматирование чисел, проверку и автоматическое определение типа карты. Она построена на Vue.js, а также полностью адаптивная. (Посмотреть можно здесь.)



credit-card-form

Чему научитесь:

• Обрабатывать и валидировать формы
• Обрабатывать события (например, при изменении полей)
• Разберетесь как отображать и размещать элементы на странице, особенно данные кредитной карты, которая поверх формы

Продолжаем серию проектов для тренировки.

• 9 проектов для оттачивания Front-End мастерства
• Шесть задачек для Front-End разработчика
• Занимательная практика для разработчика
• 8 учебных проектов
• Еще список проектов, на чем потренироваться

Хабр, привет!

Сделал подборку из 22-х сайтов для изучения английского языка.
Подборка поможет изучить английский легко, без зубрежки и учебников.

Приступим!

Учить лексику

Плагины, мобильные приложения и сайты, которые помогут перевести и запомнить незнакомые термины с русского на английский и обратно.

ЛеоПереводчик

С этим плагином удобно переписываться с коллегами. Он автоматически переводит непонятные слова и выражения. Незаменимый инструмент, когда нет времени на доскональные переводы и нужен срочный ответ.

С недавних пор я активно заинтересовался темой переезда за границу, и в связи с этим изучил существующие сейчас сервисы, которые оказывают помощь в переезде ИТ-специалистам. К моему удивлению, далеко не так много проектов помогают потенциальным иммигрантам. Пока что я отобрал шесть сайтов, которые показались мне интересными.

Тема переезда в Европу, США или другие приятные регионы мира довольно часто поднимается на Хабре. Я решил собрать в одном месте список онлайн-сервисов, которые будут полезны тем, кто всерьез задумался об иммиграции. На удивление, «живых» и активных стартапов в этой сфере не так и много. Для статьи я отобрал четыре проекта.

Конструкция async/await представляет собой сравнительно новый подход к написанию асинхронного кода в JavaScript. Она основана на промисах и, в результате, не блокирует главный поток. Новшество этой конструкции заключается в том, что благодаря ей асинхронный код становится похожим на синхронный и ведёт себя подобным образом. Это открывает перед программистом замечательные возможности.



До появления async/await при разработке асинхронных механизмов программ использовались коллбэки и промисы. Автор материала, перевод которого мы публикуем сегодня, предлагает сначала вспомнить о том, как писать код по-старому, а потом, на реальном примере, изучить применение async/await.

От переводчика: Валерий Алексиев, опытный программист, рассказал о том, что лучше делать разработчику ПО в самом начале карьерного пути. В частности, какие инструменты стоит использовать и на что обращать внимание на собеседованиях.

Первые несколько лет моей карьеры были годами интенсивного обучения. Я столкнулся с суровой реальностью и понял, что мне необходимо получить много различных скиллов, о которых я раньше даже не думал. Поэтому я решил написать небольшой гайд для других разработчиков. В статье раскрываются такие темы, как собеседования, работа программистом, ресурсы, которые помогут совершенствоваться.

Мировой рынок IT стремительно развивается. С каждым годом профессия разработчика софта становится все более востребованной — уже в 2017 году в мире насчитывался примерно 21 миллион программистов различных направлений.

К сожалению, русскоговорящий рынок IT находится еще на начальной стадии развития — уже есть крупные и успешные проекты, но рынок еще долго не сможет сравняться с европейским и американским, которые производят до 85% всех IT-продуктов мира.

В 1978 году Министерство экономики, торговли и промышленности Японии установило кодировку, которую позже назовут JIS X 0208. Она до сих пор является основой всех японских кодировок. Но после выхода стандарта JIS люди заметили нечто странное: некоторые из добавленных символов не имели очевидных источников. Никто не мог сказать, что они означают и как их произносить. Никто не был уверен, откуда они появились. Эти символы теперь известны как призраки (幽霊文字).


Будьте осторожны с тем, что вы пишете. via NDL

Лес чуден, тёмен — глянь в глубину.
Но прежде я все долги верну…
И много миль, пока я усну,
Так много миль, пока я усну...
^{Роберт Фрост}



Промисы — это одно из самых замечательных новшеств ES6. JavaScript поддерживает асинхронное программирование посредством функций обратного вызова и с помощью других механизмов. Однако при использовании функций обратного вызова мы сталкиваемся с некоторыми проблемами. Среди них — «ад коллбэков» и «пирамида ужаса». Промисы — это паттерн, который значительно упрощает асинхронное программирование на JS. Асинхронный код, написанный с использованием промисов, выглядит как синхронный и лишён проблем, связанных с коллбэками.

Материал, перевод которого мы сегодня публикуем, посвящён промисам и их практическому использованию. Он рассчитан на начинающих разработчиков, которым хочется разобраться с промисами.

В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях — это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for, который выглядит примерно так: for (var i=0; i < value.length; i++ ){}. Однако, лучше, всё-таки, смотреть на вещи шире.



Предположим, нам надо вывести список товаров, и, при необходимости, разбивать его на категории, фильтровать, выполнять по нему поиск, модифицировать этот список или его элементы. Возможно, требуется быстро выполнить некие вычисления, в которые будут вовлечены элементы списка. Скажем, надо что-то с чем-то сложить, что-то на что-то умножить. Можно ли найти в JavaScript такие средства, которые позволяют решать подобные задачи быстрее и удобнее, чем с использованием обычного цикла for?

На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of, и о методах includes(), some(), every(), filter(), map() и reduce(). Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.

Привет. Я Катя. Я пишу фронтенд в Яндекс.Деньгах.

Я расскажу, как работа в большой компании помогла мне вырасти из верстальщика в программиста. О том, как я перестала бороться с особенностями браузеров и начала — с плохой архитектурой и низким rps. Пусть эта история сэкономит время талантливым разработчикам, которые штампуют лендинги вместо того, чтобы биться за настоящий фронтенд.

В этой статье я расскажу, что мы разрабатываем, как оптимизируем рабочие процессы и зачем развивать свои soft skills. На подходе вторая часть — она будет технической. В ней подробно расскажу про стек, почему их два и как мы дружили БЭМ с React (спойлер: будет много кода). Поехали!

upd. Вторая часть вышла.

В наших публикациях регулярно появляются статьи о CSS. Среди них — материал об истории CSS, рассказ о подборе имён для CSS-сущностей, статья о CSS-стилях для печати, о которых многие забывают. Мы писали о том, как работают CSS-селекторы, сравнивая происходящее с автосалоном, о сравнительно новой технологии CSS Grid Layout, и о том, что CSS — это не чёрная магия. Сегодня предлагаем вашему вниманию перевод материала, который посвящён странностям CSS, о которых, как полагает автор этого материала, мало кто знает.

Перед вами — первый материал из серии, посвящённой разработке полноценного веб-приложения, которое называется Budget Manager. Основные программные средства, которые будут использованы в ходе работы над ним — это Node.js для сервера, Vue.js для фронтенда, и MongoDB в роли базы данных.



Эти материалы рассчитаны на читателей, которые знакомы с JavaScript, имеют общее представление о Node.js, npm и MongoDB, и хотят изучить связку Node-Vue-MongoDB и сопутствующие технологии. Приложение будем писать с нуля, поэтому запаситесь любимым редактором кода. Для того, чтобы не усложнять проект, мы не будем пользоваться Vuex и постараемся сосредоточиться на самом главном, не отвлекаясь на второстепенные вещи.

Автор этого материала, разработчик из Бразилии, говорит, что ему далеко до JavaScript-гуру, но он, находясь в поиске новых знаний, готов поделиться с другими тем, что ему удалось найти.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.