CodeRoll | Frontend

Реальное тестовое задание на позицию Junior Frontend Developer (React) от компании Jupiter Soft

❗️ Обратите внимание, что макеты часто дают не только в формате Figma, но и в Adobe XD

Все материалы, что предоставляли для реализации тестового задания лежат тут:

👀 Посмотреть

#js

Вопрос с собеседования сегодня полегче:

❓Можно ли вложить p в другой такой же p? Можно ли вложить div в p?

Синтаксически div и p внутри p является недопустимым во всех стандартах HTML. Более того, при использовании соответствующего парсера HTML невозможно разместить элемент div внутри p в DOM, потому что открывающий тег div автоматически закрывает элемент p.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#html

Вопрос с собеседования

❓Знаете ли вы тег dfn и за что он отвечает?

Ответ:
Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег dfn применяется для выделения таких терминов при их первом появлении в тексте.

Браузеры отображают содержимое контейнера с помощью курсивного начертания.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#html

JavaScript. Рецепты для разработчиков

Зачем решать типовые задачи с нуля? В книге представлены готовые рецепты для JavaScript, примеры кода и советы по настройке среды разработки, работе с мультимедиа, данными и асинхронным кодом. Вы также освоите Node.js и Express для создания приложений.

👀 Почитать книжку

#js

CodeBasics — портал с бесплатными курсами программирования

Курсы по самым разным направлениям. По фронту есть HTML/CSS, JS, TypeScript. Как пишут авторы, помимо материала на курсе есть тренажёры для отработки навыков

👀 Приступить к курсам

#js #css #html

MediaElement.js

JavaScript-библиотека для добавления HTML5 видео- и аудиоплеера на сайт.

👀 Посмотреть и забрать себе

#html

JavaScript с нуля до профи

Книга обучает разработке веб-приложений на JavaScript через теорию и практические проекты, включая проверку данных, асинхронный код и работу с DOM. Включены примеры валидаторов, игр и анимаций, а также краткий курс по HTML и CSS.

👀 Почитать книжку

#js

Игра-тренажёр по Flexbox

Раз уж вам так понравилась предыдущая игра — держите ещё одну, но уже по флексам. Суть игры — расставить пушки так, чтобы кружочки-злодеи не прошли по карте

👀 Расставить пушки

#css

Игра-тренажёр по CSS Grid

В Grid Garden вам предстоит следить за своим огородом управлять растениями в саду при помощи CSS Grid, Приятный нетипичный способ изучить важную технологию

👀 Начать тренировку

#css

Сервис с базой вопросов к собесам и квизами по фронтенду

Квизы по JS, React, вопросами по CSS и TypeScript.

👀 Посмотреть-почитать

#frontend

Пачка новых докладов от спикеров HolyJS

Посмотреть видео

#лекции

Книга по React

Лучшие практики создания приложений, для чтения не нужны супер-глубокие знания React, хватит HTML/CSS + JS на базовом уровне

👩‍💻 Почитать книжку

#react

Бесплатный онлайн-справочник по HTML (если вдруг у вас с ним проблемы)

Справочник хорош тем, что показывает всё наглядно: не просто «вот тег <a> делает то-то», но и покажет пример использования тега

Перейти к справочнику

#html

React.js: Знакомимся с useReducer, Axios и JSON Server на примере создания инвентарного списка

Независимо от того, как вы относитесь к React, создавать что-либо с его помощью — это настоящее удовольствие, и с этим трудно не согласиться. Поэтому сегодня я решил создать простой инвентарный список, чтобы объяснить несколько мощных концепций, таких как сложное управление состояниями с помощью useReducer.

А также между делом мы создадим мок API сервера с помощью JSON Server, будем использовать axios для вызова API и, наконец, воспользуемся хуком useReducer для управления состоянием.

Ссылка

#react

📘 5 must-read книг по JavaScript

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

"You Don't Know JS" (Kyle Simpson) — серия из шести книг, которая глубоко погружается в концепции языка.

"JavaScript: The Good Parts" (Douglas Crockford) — классика, которая научит писать чистый и эффективный код.

"Eloquent JavaScript" (Marijn Haverbeke) — книга, которая поможет новичкам освоить JavaScript, а опытным разработчикам углубить свои знания.

"JavaScript: The Definitive Guide" (David Flanagan) — подробное руководство, которое часто называют "библией JavaScript".

📚 Эти книги помогут вам не только улучшить навыки, но и понять, как работает JavaScript изнутри. Чтение — отличный способ перейти на новый уровень!

Как мы приготовили Feature-Sliced Design

В этой статье расскажу немного о том, как мы знакомились с замечательной архитектурой FSD (Feature-Sliced Design), как мы рефакторили свои проекты под неё. И, самое главное, что из этого вышло. Постараюсь заинтересовать вас, чтобы и вы смело её внедряли в свои проекты. FSD — это, пожалуй, то, чего так не хватало в Frontend-мире.

Ссылка

#react

Кажется, мы стали забывать основы фронтенда

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

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

Ссылка

#js