Будни разработчика

2023-04-28 14:11:34 #ссылка дня

Олды тут?

Когда я начал официальную рабочую карьеру как верстальщик, в 2006 году, не было в интернете ресурса круче по CSS чем http://cssplay.co.uk/

И что-то мне подсказывает, что и нет.

Автору уже тогда было под 60, сейчас 74, но он фигачил и фигачит потрясающе сложные и при этом простые для понимания примеры вёрстки.

В 2009 году, например, в моде были выпадающие мега-меню, у него десятки их примеров. Естественно, без хаков для IE6 тогда не обходилось вообще ничего. Before, after? Забудьте. Flex? Забудьте. Float во все поля.

Коллекция меню поражает воображение. И до сих пор обновляется!

Раскладки на любой вкус и браузер. Всё категоризировано. Тоже обновляется!

Ну и он один из первопроходцев игр на CSS: http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html

В общем, без тени сомнения, Стюарт когда-то буквально стартанул мою карьеру и поддерживает веру в выбранное направление.

Не старейте, котаны.

#бородач Открыть/Комментировать

2023-04-27 20:25:31 #видео дня

Что приходит в голову при упоминании сложных анимаций?

Ну, Lottie, очевидно. Кто-то что-то нарисовал в After Effects Bodymovin, потом это экспортировали в специально сформированный JSON и, собственно, плеером-плагином запустили в огромном количестве сред, от веба до мобил и десктопов. Да, ваши любимые стикеры и реакции в Telegram тоже Lottie.

Есть ли альтернативы? Конечно! Например, активно набирает обороты Rive. Это векторный редактор, заточенный специально под анимации.

Формат гораздо легче, чем у Lottie, а список поддерживаемых платформ (рантаймов) даже больше. Да, на стороне Lottie сообщество After Effects, но и это решаемо экспортом. Имеется и сайт сообщества со свободно скачиваемыми анимациями.

Ладно, к чему это я. Вот видеоурок по интеграции Rive-анимации в React-приложение:



Анимация простая, но попробуйте скачать что-нибудь с сайта сообщества и попробовать сами :)

Удачи в анимировании, котаны!

#rive #инструмент #tool #lottie #animation Открыть/Комментировать

2023-04-27 13:42:22 #статья дня

Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.

Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?

Я наткнулся на этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.

Очень грубо говоря — описан весь цикл создания дизайна продукта.

На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.

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

В общем, рекомендую заварить чаю и погрузиться в чтение. Затягивает.

#design #ui #widgets Открыть/Комментировать

2023-04-26 14:09:55 #статья дня

Начиная с iOS и iPadOS 16.4, ваши PWA-приложения могут не только принимать пуши, но и отображать число уведомлений на своей иконке.

Это про Progressive Web App, почему-то в русском языке всё время хочется прибавить слово "приложения", как в CD-диск — "диск".

API максимально простой, всё, что требуется — одобрение от пользователя, а дальше можно установить Service Worker для проверки push-уведомлений и поехали.

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

Ну и, собственно, статья от разработчиков WebKit обо всём об этом: https://webkit.org/blog/14112/badging-for-home-screen-web-apps/

#ios #push Открыть/Комментировать

2023-04-26 12:05:49 #статья дня

До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?

Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/

Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)

#cmd #terminal #бородач Открыть/Комментировать

2023-04-25 17:01:08 Познакомьтесь с востребованным направлением программирования — Java-разработкой. Освойте базовые инструменты на практике и выйдите на рынок IT. Сделайте первый шаг — участвуйте в онлайн-интенсиве Skillbox с 27 по 29 апреля в 15:00 по московскому времени: https://epic.st/nDnFV

После регистрации сразу отправим вам на почту гайд по профессии Java-разработчика: из него вы узнаете, сложно ли изучить Java, сколько зарабатывают специалисты и как начать карьеру в этой сфере.

Интенсив ведёт Даниил Пилипенко — основатель и директор центра подбора IT-специалистов SymbioWay.
С 2004 года разрабатывает и руководит разработкой на Java, PHP и во фронтенде.
Он расскажет, как устроен язык Java, и научит писать простейший код, даже если вы никогда не программировали. Объяснит, как работать с файлами и переменными, а также где найти первых клиентов.

Всем, кто дойдёт до конца интенсива, подарим электронную книгу издательства МИФ и сертификат на скидку 10 000 рублей на любой курс Skillbox.

#реклама Открыть/Комментировать

2023-04-25 11:20:58 #codepen дня

Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).

Давайте исправим положение и сделаем что-то насущное.

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

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss #бородач Открыть/Комментировать

2023-04-24 17:50:34 Открыть/Комментировать

2023-04-24 08:19:57 #расширение дня

Как тестировать свои (и чужие, ну мало ли какие у вас увлечения) проекты на валидацию всякой дряни?

Очевидный ответ — вводить в поля всякую дрянь.

А где её брать? Не в каждой голове столько всего удержится...

Есть решение: расширения для Chrome под названием Bug Magnet.

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

Тестируйте проекты тщательно, котаны.

#test #extension #chrome Открыть/Комментировать

2023-04-23 08:12:09 #баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug #бородач Открыть/Комментировать