​Я: собираю всю волю в кулак, чтобы продуктивно поработать и написать кучу качественно кода

Моя воля после 10 строк кода:

​Создание компонента переключения темы

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

https://web.dev/building-a-theme-switch-component/

А если не хотите читать, то можно посмотреть видеоверсию.

​Что такое Agile и какие альтернативы существуют

Если открыть HeadHunter и посмотреть, что обычно пишут в требованиях к кандидатам в разработчики, то часто можно встретить слов Agile. Для человека, который только начинает свою карьеру в IT это слово ни о чем не говорит.

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

Подробнее об Agile можно прочитать здесь:

https://doka.guide/tools/agile/

​Можно ли подключиться к базе данных с помощью CSS

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

А другой пользователь посчитал шутку не смешной и решил доказать, что это вполне возможно. Вот, что у него получилось в итоге:

https://tprg.ru/N3Kj

#css

​5 частых ошибок при использовании Promise

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

Часто можно встретить именно эти 5 ошибок:

https://www.cat-in-web.ru/5-promises-mistakes/

#javascript

И даже 10 лет спустя

​Как использовать Fetch с async/await

Хотя fetch() прост в использовании, есть некоторые нюансы, которые стоит знать. В данном случае предлагаем вам посмотреть, как работает fetch() с async/await синтаксисом.

Подробнее:

https://dmitripavlutin.com/javascript-fetch-async-await/

#javascript

Камень-ножницы-бумага на чистом CSS

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

https://codepen.io/alvaromontoro/pen/BaaBYyz

#codepen #css

​Как тестировать компоненты React

При тестировании компонентов с помощью Jest, вы можете столкнуться с ситуацией, когда компоненты по какой-то причине выходят из строя при рендеринге. Дело в том, что для компонента в тесте необходимо находиться в определённой среде.

Как её правильно настроить для правильного тестирования компонентов без проблем, рассказали здесь:

https://javascript.plainenglish.io/how-to-test-react-components-2eff11d8cd75

#react

​Удаляем неиспользуемый CSS с помощью PurgeCSS

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

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

https://blog.logrocket.com/purgecss-remove-unused-css-code/

#css

Библиотека Splide для создания качественных каруселей

Splide.js — это легковесная, гибкая, доступная и универсальная библиотека для создания слайдеров и каруселей. С помощью неё вы сможете добавит карусель в ваше приложение несмотря на то, используете вы чистый JavaScript, TypeScript, React, Vue или ещё какое решение.

Познакомиться ближе можно тут:

https://splidejs.com/

#фронтенд #библиотека #javascript

​JavaScript-разработчик выбирает библиотеку для текущего проекта:

​Предотвратите цепочку прокрутки с помощью поведения Overscroll

CSS-свойство overscroll-behavior позволяет нам контролировать прокрутку отдельных элементов и непосредственно страницы веб-сайта, предотвращая нежелательное поведение. Если раньше это решалось с помощью хитрых манипуляций, то теперь достаточно одного свойства.

Посмотрите, как это работает:

https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/

#css

Ребята из Cedro Agency ищут разработчика с опытом от 3 лет, который разбирается в PHP и «1С-Битрикс»

Cedro — это диджитал-агентство из Питера. Делают цифровые продукты и сервисы. Успели поработать с «Леруа Мерлен», GeekBrains, «Группой ЛСР» и другими классными компаниями. Входят в топ-30 студий СПб и несколько раз выиграли на Awwwards.

Что требуется:
— писать свой код и редактировать чужой;
— участвовать в разработке корпоративных сайтов, интернет-магазинов и промо-страниц;
— работать с БУС;
— делать интеграции с внешними системами на php и python;
— натягивать вёрстку на код.

Что предлагают:
— заработную плату от 100 тысяч рублей;
— возможность работать удалённо или в лофтовом питерском офисе на Нарвской на ваш выбор;
— задачи напрямую от техлида без необходимости коммуникацией с клиентом и менеджерами;
— адекватный коллектив.

Подробности можно узнать на странице в Ноушен

#вакансия

​Большие, малые и динамические вьюпорты

CSSWG определила несколько дополнительных размеров области просмотра и сопутствующие единицы измерения , относящиеся к области просмотра, в дополнение к уже существующим vw/vh/vmin/vmax. Теперь можно определить значения для различных вьюпортов, например для различных способов отображения интерфейса мобильного браузера и прочего.

Подробнее:

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/

#фронтенд #css

CSS Speedrun

Насколько хорошо вы знаете CSS и, в частности, умеете работать со списками? Предлагаем вам проверить свои знания в CSS Speedrun, где вам нужно выполнить 11 заданий на время.

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

https://css-speedrun.netlify.app/

#css

​Переменные CSS для разработчиков React

В этой статье Джош Камю показал, как применение современных кастомных свойств упрощает разработку приложения на React:

https://www.joshwcomeau.com/css/css-variables-for-react-devs/

#фронтенд #react #css

С этим сталкивался каждый начинающий фронтендер

​Великолепное Aspect Ratio

Для того, чтобы раньше обеспечить нужное соотношение сторон у блока необходимо было писать кучу костыльного CSS-кода. Но теперь, благодаря всего одному css-свойству, этот вопрос решается всего одной строчкой. Более того, это свойство крайне удобно использовать для самых разных целей.

Подробнее:

https://css-irl.info/aspect-ratio-is-great/

#css

Переключатель на чистом CSS

Красивый переключатель с качественной анимацией, выполненной без использования JavaScript. Эффект свечения достигнут благодаря грамотному использованию теней.

Изучить проект можно тут:

https://codepen.io/Wujek_Greg/pen/Bqvzbp

#codepen #css