Тег: полезные ресурсы

Как начать изучать React

React — это библиотека, предназначенная для разработки пользовательских интерфейсов. React на самом деле не является полноценным фреймворком, как его часто называют. Он решает задачи оптимизации взаимодействия с DOM при связывании данных между представлением и моделью данных. То есть, если брать в пример архитектуру MVC (Modal-View-Controller), то React осуществляет лишь «V». Но тем не менее в настоящее время он очень популярен и востребован наряду с Angular и Vue. Вместе с React также часто используют Redux для управления состоянием приложений.

Как начать изучать React

Почти всё в React — это обычный JavaScript. Из-за этого он достаточно прост в изучении (по сравнению с Angular), ведь если вы хорошо знаете JS, то автоматически знаете большую часть React 🙂 Он подразумевает декларативный подход программирования, что значительно упрощает разработку. Чаще всего используется преимущественно для одностраничных сайтов (SPA).

Задачи по программированию

LeetCode

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

Хочу посоветовать очень хороший ресурс LeetCode, в котором расположено огромное количество задач по нескольким направлениям:

Категории задач
Категории задач

Ресурсы необходимые для верстальщика

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

  • Can I use — довольно известный ресурс, с помощью которого можно узнать поддержку и совместимость определенных свойств и технологий с разными версиями браузеров. Название говорит само за себя.

Например, статистика использования браузеров https://caniuse.com/usage-table, по ней мы можем определить, сколько процентов пользователей имеется у каждого браузера.

Или вот https://caniuse.com/#feat=flexbox — по таблице мы видим, что флекс-свойства работают во всех браузерах последних версий (но не работают в IE9 и ниже).

Can I use
Can I use

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

Полезные расширения Google Chrome для веб-разработчиков

Ниже будет небольшая подборочка 🙂

Полезные расширения Google Chrome для веб-разработчиков:

  • PerfectPixel — расширение, помогающее верстать с пиксельной точностью. То есть, вы выбираете изображение (макет разрабатываемого сайта) и регулируя его положение на странице, с легкостью сможете сверстать сайт, идеально совпадающий с макетом. Также есть возможность настроить прозрачность, масштаб и инверсию данной подложки.
Настройки PerfectPixel
Настройки PerfectPixel

Flexible Boxes — CSS флексбокс генератор

Flexible Boxes — это очень полезный ресурс для тех, кто использует флексы в вёрстке сайтов.

С помощью Flexible Boxes вы сможете интерактивно изобразить желаемое расположение блоков, и мгновенно увидеть результат реализации на HTML и CSS.

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

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

Ресурс для именования цветов. Переменные цветов SCSS, CSS

В процессе создания сайтов у нас может возникнуть проблема: как правильно назвать цвет? Нужно грамотное именование переменных!

Name that Color

Допустим, что на сайте пять оттенков зеленого. Как называть переменные цветов в SCSS, чтобы не путать? $color-green, $color-dark-green, $color-darken-green, $color-light-green — не самые удачные названия, т.к. мы сами будем путаться, какой цвет для чего нужен.