фронт.ру

2021-11-01 08:58:25 ​#css

Функции min(), max() и clamp() в CSS

Вы знаете, что математика в CSS не ограничивается только свойством calc()?
Кроме него есть аж целых 3 крутых свойства, которые могут очень сильно изменить подход к адаптивной вёрстке! Посмотрите небольшое видео об этом. Кстати, у автора крутая подача материала. Открыть/Комментировать

2021-10-13 19:54:24 ​React 18 - новая версия, новые фичи

В начале лета в официальном блоге React вышла новость о планах на 18 версию библиотеки. Команда разработчиков рассказала о новых фичах и API, которые планируется зарелизить в обновлении.
Статья подробно рассказывает, что нового завезут нам разработчики всеми любимой библиотеки.

https://habr.com/ru/post/577168/ Открыть/Комментировать

2021-10-05 10:04:59 ​#лайфхак

Как редактировать любой макет в Фигме?

Часто, когда мы верстаем, на макете нельзя достать какой-то элемент или иконка не правильно сгруппирована. В таких ситуациях я всегда пользуюсь таким лайфхаком:

1) Дублируем макет дизайнера в наши макеты
2) Открываем его как свой черновик

И все! Можете делать с макетом, что угодно! Естественно оригинал никак не постарадает, зато вы сэкономите себе пару нервных клеток от того, что иконка сохраняется неправильно. Открыть/Комментировать

2021-10-02 10:02:42 ​#библиотека

Попапы для ReactJs приложения на изи

При разработке мы часто выводим информацию через console.log(), чтобы понимать, что вообще происходит. Но юзер не будет открывать консоль на вашем сайте и смотреть почему не отработало нажатие на кнопку "войти на сайт".

Попапы это отличный инструмент, чтобы сделать ваш UX намного лучше. Красивые маленьки окошки, которые всплывают и дают полезную инфу для пользователя. С библиотекой react-toastify сделать такое на вашем сайте займет 5-10 минут, а юзеры скажут спасибо!

Сам использую в продакшене. Ссылка внизу.

react-toastify на npm Открыть/Комментировать

2021-07-31 14:46:13 ​Пак готовых SVG лоадеров для твоего сайта

Без лишних слов:

1) качаете svg файл по ссылке ниже,
2) вставляете в тег img src="loader.svg"
3) кайфуете от лоадера

Ссылка на пак - http://samherbert.net/svg-loaders/ Открыть/Комментировать

2021-07-25 08:55:29 ​Оптимизируем ваш код с помощью этих 2-х практик

Если вам нужно сделать автозаполнение или в вашем кейсе есть функция, которая выполняется очень часто на какое-то действие пользователя, то постоянно вызывать такую функцию будет очень дорого. Есть 2 практики, благодаря которым можно оптимизировать все это дело: Throttling и Debouncing.

В статье ниже очень простым языком и с аналогиями рассказывается, показывается и пишется код :)

P.S загляните в комментарии к статье

Что такое Throttling и Debouncing? Открыть/Комментировать

2021-07-23 20:08:49 ​Что такое политика CORS?

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

Приглашаю к чтению!

Статья про CORS Открыть/Комментировать

2021-07-09 20:41:31 Пишем своё расширение для браузера на JavaScript, ну и HTML/CSS конечно

Недавно наткнулся на статью, где описывается как создать свой плагин для браузера. Оказывается, это проще простого! Такой себе мини-сайт, который может делать полезные вещи. Я из интереса решил написать и свое расширение, чтобы сохранять статьи/вкладки, которые хочу позже прочитать. Сделал его в сумме за пару часов. Сейчас оно находится на проверке и как только его подтвердят - оно появится в официальном каталоге расширений. Круто, да?
Прикрепляю ссылку на статью-туториал, но если знаете английский, то лучше и проще (мне по крайней мере было проще) идти по оф.документации от гугла!

Статья-туториал от Яндекса
Документация от Гугла (я шёл по ней) Открыть/Комментировать

2021-06-20 12:36:18 Тестовое задание от реальной компании Junior Frontend

Около двух недель назад я получил тестовое задание от одной Московской компании на позицию Junior Frontend. Суть заключается в разработке небольшого SPA на ReactJs (можете на Vue или Angular) и работе с API фильмов. Задание довольно хорошо вписывается в критерии джуна. Это именно то, что и должен уметь начинающий разработчик, претендующий на должность в компании.
На выполнение задания мне дали 2 дня, я справился за 1.

Вот тз + ссылка на макет дизайна:
https://www.notion.so/Junior-Frontend

Вот моё решение на TypeScript (можете писать на JavaScript): dnotrad.github.io/msu-movies/ Открыть/Комментировать

2021-05-28 09:31:16 ​Тестовое задание для джуна

Сделайте этот проект и положите его к себе в портфолио!

Поле 6х6. 18 парных карточек с различными иконками. При нажатии на кнопку “старт” запускается таймер. Карты, естественно, должны располагаться в случайном порядке. По нажатию на карточку она открывается, в течении 5 сек игроку нужно открыть вторую карточку, если иконки на паре открытых карт совпадают они удаляются, если нет - пара открытых карт закрываются. Игра заканчивается когда все пары карт найдены. Таймер останавливается.

При этом нужно:
1) Использовать React/Vue/Angular
2) Использовать state manager
3) Создать таблицу результатов

Мой вариант реализации (сделал поле 4*4):
https://dnotrad.github.io/card-game/ Открыть/Комментировать