#заметка дня
Практически всегда в различных обучающих видео и курсах по React вы могли наблюдать следующую фразу: “В JSX надо писать className когда вы хотите задать класс HTML-элементу потому что слово class является зарезервированным”.
Это является правдой лишь отчасти. На самом же деле это просто большое упрощение.
Первый DOM API, построенный на ES3, действительно запрещал переопределение “el.class = smth“.
Но начиная с ES5 (года эдак 2009-11) это исправлено. Да, нельзя присвоить переменной имя class, но свойства объекта никто не запрещал.
Более того, в контексте JSX это не имеет смысла даже относительно ES3. JSX же будет транслирован, возможно даже в “аналоговый” setAttribute("class”, …), что, конечно, работает вообще везде.
А ещё можно вспомнить чёртов htmlFor…
Разработчики React решили отталкиваться не от атрибутов DOM-элементов, а от свойств объектов. Для большинства атрибутов разницы нет. Но есть исключения:
— многословные атрибуты (maxlength, contenteditable) преобразуются в camelCase (maxLength). Обратите внимание на отсутствие дефиса, это тоже легаси первых имплементаций DOM
— SVG не отражает атрибуты как свойства объекта
— Веб-компоненты тоже не отражают, и, более того, могут вообще не документировать свои атрибуты и свойства
— Поля форм могут иметь одинаковые атрибуты, несущие совершенно разную семантическую нагрузку.
Естественно, это очень важно для SSR, пересылать-то приходится атрибуты.
Но до тех пор пока всё "просто работает", люди привыкли считать эти случаи граничными, незначащими. Но это не так: работать с ними приходится чаще, чем кажется.
На самом же деле разработчики React в начале своего пути решили брать XML-подобные атрибуты, а не DOM. For the greater good.
А потом…
…случился ES6, где стало можно создавать объекты в сокращённой форме: {class}. И вот тут старая добрая проблема зарезервированных слов всплыла с новой силой.
Короче говоря, не доверяйте самым простым объяснениям, даже если они приводят к чему-то похожему на правду. Реальность веселее.
Это был вольный перевод треда от Yehuda Katz с включением Дэна Абрамова.
#react #jsx
Практически всегда в различных обучающих видео и курсах по React вы могли наблюдать следующую фразу: “В JSX надо писать className когда вы хотите задать класс HTML-элементу потому что слово class является зарезервированным”.
Это является правдой лишь отчасти. На самом же деле это просто большое упрощение.
Первый DOM API, построенный на ES3, действительно запрещал переопределение “el.class = smth“.
Но начиная с ES5 (года эдак 2009-11) это исправлено. Да, нельзя присвоить переменной имя class, но свойства объекта никто не запрещал.
Более того, в контексте JSX это не имеет смысла даже относительно ES3. JSX же будет транслирован, возможно даже в “аналоговый” setAttribute("class”, …), что, конечно, работает вообще везде.
А ещё можно вспомнить чёртов htmlFor…
Разработчики React решили отталкиваться не от атрибутов DOM-элементов, а от свойств объектов. Для большинства атрибутов разницы нет. Но есть исключения:
— многословные атрибуты (maxlength, contenteditable) преобразуются в camelCase (maxLength). Обратите внимание на отсутствие дефиса, это тоже легаси первых имплементаций DOM
— SVG не отражает атрибуты как свойства объекта
— Веб-компоненты тоже не отражают, и, более того, могут вообще не документировать свои атрибуты и свойства
— Поля форм могут иметь одинаковые атрибуты, несущие совершенно разную семантическую нагрузку.
Естественно, это очень важно для SSR, пересылать-то приходится атрибуты.
Но до тех пор пока всё "просто работает", люди привыкли считать эти случаи граничными, незначащими. Но это не так: работать с ними приходится чаще, чем кажется.
На самом же деле разработчики React в начале своего пути решили брать XML-подобные атрибуты, а не DOM. For the greater good.
А потом…
…случился ES6, где стало можно создавать объекты в сокращённой форме: {class}. И вот тут старая добрая проблема зарезервированных слов всплыла с новой силой.
Короче говоря, не доверяйте самым простым объяснениям, даже если они приводят к чему-то похожему на правду. Реальность веселее.
Это был вольный перевод треда от Yehuda Katz с включением Дэна Абрамова.
#react #jsx
👏13👍2❤1👎1
#ссылка дня
Вчера на работе был семинар по проведению собеседований разработчиков. Со стороны собеседующих, конечно же :)
Попробую подготовить пост с выводами в ближайшее время, а пока что давайте почитаем об опыте собеседований в FAANG от того, кому было не лень.
Какие вопросы, каков порядок, чего ожидают? Все в документе.
TL;DR
Мобильный разработчик
13 лет iOS/Android/Unity
16 месяцев подготовки
11 он-сайтов - 11 оферов
принял офер от Google на L6-позицию.
https://docs.google.com/document/d/1c3xo5us0G8uMQVTWfm7xKpciRVvpj9p0YxmbW4pxmUI/edit#
#faang #interview
Вчера на работе был семинар по проведению собеседований разработчиков. Со стороны собеседующих, конечно же :)
Попробую подготовить пост с выводами в ближайшее время, а пока что давайте почитаем об опыте собеседований в FAANG от того, кому было не лень.
Какие вопросы, каков порядок, чего ожидают? Все в документе.
TL;DR
Мобильный разработчик
13 лет iOS/Android/Unity
16 месяцев подготовки
11 он-сайтов - 11 оферов
принял офер от Google на L6-позицию.
https://docs.google.com/document/d/1c3xo5us0G8uMQVTWfm7xKpciRVvpj9p0YxmbW4pxmUI/edit#
#faang #interview
👍8
#ссылка дня
Немного неожиданного контента хотите?
Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:
https://dotown.maeda-design-room.net
Все изображения можно использовать бесплатно без ссылок, в том числе и в коммерческих проектах! Есть ряд ограничений.
Так что если вам за каким-то интересом понадобились восьмибитные иконки… ну может пет-проект у вас, вы знаете, куда идти.
Да, на японском. Но кого это вообще останавливало?
#icons #8bit
Немного неожиданного контента хотите?
Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:
https://dotown.maeda-design-room.net
Все изображения можно использовать бесплатно без ссылок, в том числе и в коммерческих проектах! Есть ряд ограничений.
Так что если вам за каким-то интересом понадобились восьмибитные иконки… ну может пет-проект у вас, вы знаете, куда идти.
Да, на японском. Но кого это вообще останавливало?
#icons #8bit
🔥14👍1
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях.
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y
👍17
#инструмент дня
Помните пост про плейсхолдеры? https://t.me/htmlshit/431
Помимо задачи поставить временное изображение, существует и задача отобразить что-то, пока грузится основная картинка.
Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip
Например, SQIP: https://github.com/axe312ger/sqip (произносится сквиб, Гарри Поттер объяснит).
Задача показать вместо оригинального изображения что-то передающее хоть какую-то информацию об исходнике.
И вот новое: BlurHash от Wolt: https://blurha.sh/
Для генерации используется хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов). Плагины есть под любые мыслимые средства, от Eleventy до Flutter.
Если в вашем приложении или сайте требуется загрузить огромное число изображений — подобные техники очень вам помогут ускорить процесс загрузки для пользователя, попутно сделав его более, кхрм, цветным.
#css #img #placeholder
Помните пост про плейсхолдеры? https://t.me/htmlshit/431
Помимо задачи поставить временное изображение, существует и задача отобразить что-то, пока грузится основная картинка.
Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip
Например, SQIP: https://github.com/axe312ger/sqip (произносится сквиб, Гарри Поттер объяснит).
Задача показать вместо оригинального изображения что-то передающее хоть какую-то информацию об исходнике.
И вот новое: BlurHash от Wolt: https://blurha.sh/
Для генерации используется хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов). Плагины есть под любые мыслимые средства, от Eleventy до Flutter.
Если в вашем приложении или сайте требуется загрузить огромное число изображений — подобные техники очень вам помогут ускорить процесс загрузки для пользователя, попутно сделав его более, кхрм, цветным.
#css #img #placeholder
🔥15👍2
#ссылка дня
Кто сегодня чувствует себя тупым, как я, например, может посмотреть этот прекрасный коммит:
https://android-review.googlesource.com/c/platform/frameworks/base/+/1321016/1/packages/SystemUI/src/com/android/systemui/glwallpaper/ImageProcessHelper.java
Что он делает? Он исправляет циклическую перезагрузку при установке этой картинки на обои:
https://drive.google.com/file/d/11rxzYvPcIOh_8GvS4XSC3YtbW3CecE-O/view
Все ошибаются. Не надо хандрить лишний раз. Даже если ты и правда тупой (или разработчик Android).
Кто сегодня чувствует себя тупым, как я, например, может посмотреть этот прекрасный коммит:
https://android-review.googlesource.com/c/platform/frameworks/base/+/1321016/1/packages/SystemUI/src/com/android/systemui/glwallpaper/ImageProcessHelper.java
Что он делает? Он исправляет циклическую перезагрузку при установке этой картинки на обои:
https://drive.google.com/file/d/11rxzYvPcIOh_8GvS4XSC3YtbW3CecE-O/view
Все ошибаются. Не надо хандрить лишний раз. Даже если ты и правда тупой (или разработчик Android).
👍4😁1
#книга дня
Для тех, чей взор на типографику распространяется дальше, чем написать margin: 1em 0.
Александра Королькова уже достаточно давно выложила в бесплатный доступ свою книгу “Живая типографика”.
А я свою на Авито покупал когда-то, потому что тираж был полностью распродан…🙂
https://leksandra.livejournal.com/120488.html
Приобщаемся к основам типографики и благодарим автора.
Ссылка из поста: https://yadi.sk/i/oy19NzNjydZjR
#типографика
Для тех, чей взор на типографику распространяется дальше, чем написать margin: 1em 0.
Александра Королькова уже достаточно давно выложила в бесплатный доступ свою книгу “Живая типографика”.
А я свою на Авито покупал когда-то, потому что тираж был полностью распродан…🙂
https://leksandra.livejournal.com/120488.html
Приобщаемся к основам типографики и благодарим автора.
Ссылка из поста: https://yadi.sk/i/oy19NzNjydZjR
#типографика
Livejournal
Ещё раз про Живую типографику
Мне время от времени приходят письма с просьбой подсказать, где взять книгу. Я, к сожалению, этого не знаю: тираж распродан, издательство какое-то время назад закрылось. Поступали предложения о переиздании, но за те десять лет, которые прошли со времени первой…
👍6🔥3👎1🥰1
#библиотека дня
Вам надо выводить картинки в консоль браузера? Вот и мне нет.
Вру, были пара моментов, когда прям хотелось бы. Например, секвентальная загрузка для прелоадеров. Ещё и холст отлаживать было бы удобно... Ну давайте к делу.
Короче, все (надеюсь) знают, что логи в консоли можно не только форматировать ключами, но и стилизовать:
Вот и весь секрет этой библиотеки: https://github.com/adriancooney/console.image
Правда, автор не остановился и сделал генератор мемов заодно, console.meme :)
#devtools #console #img
Вам надо выводить картинки в консоль браузера? Вот и мне нет.
Вру, были пара моментов, когда прям хотелось бы. Например, секвентальная загрузка для прелоадеров. Ещё и холст отлаживать было бы удобно... Ну давайте к делу.
Короче, все (надеюсь) знают, что логи в консоли можно не только форматировать ключами, но и стилизовать:
console.log("%c[message]", [style rules]). Так вот, background-image тоже можно...Вот и весь секрет этой библиотеки: https://github.com/adriancooney/console.image
Правда, автор не остановился и сделал генератор мемов заодно, console.meme :)
#devtools #console #img
🔥11👍4
Ваш уровень в разработке
Anonymous Poll
16%
Сочувствующий
36%
Начинающий
29%
Junior Developer
16%
Senior/Middle Developer
3%
Team Lead
👍11👎3💩3
#статья дня
Я не так давно писал про инструмент для построения диаграм в Markdown-файлах, Mermaid.
Так вот, в том посте я говорил, что поступило предложение о поддержке Mermaid в GitHub.
И таки да! Завезли: https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
Рендерится, правда, в iframe. С другой стороны, ну и что.
Осталось дождаться пока завезут в GitHub Enterprise.
К слову, в предыдущем посте я не упомянул, что поддержка языков диаграм Mermaid и PlantUML имеется и в продуктах от JetBrains: PhpStorm, WebStorm, IDEA и т. д. Прямо во встроенном плагине Markdown.
#github #diagram #mermaid
Я не так давно писал про инструмент для построения диаграм в Markdown-файлах, Mermaid.
Так вот, в том посте я говорил, что поступило предложение о поддержке Mermaid в GitHub.
И таки да! Завезли: https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
Рендерится, правда, в iframe. С другой стороны, ну и что.
Осталось дождаться пока завезут в GitHub Enterprise.
К слову, в предыдущем посте я не упомянул, что поддержка языков диаграм Mermaid и PlantUML имеется и в продуктах от JetBrains: PhpStorm, WebStorm, IDEA и т. д. Прямо во встроенном плагине Markdown.
#github #diagram #mermaid
👍5🔥4
#заметка дня на скорую руку
Только что в дружественном чате на пустом месте произошла бурная дискуссия. Казалось бы, какой простой вопрос: «У одного блока margin-bottom: 10px, у блока ниже margin-top: 15px. Сколько в итоге будет margin в px между блоками?»
Можно, конечно, посмеяться над вопросом, но это вполне себе типичная задача на собеседовании.
Дайте себе 30 секунд на размышление, но если вы уже держите в голове конкретное число – вы неправы.
Ответ звучит так: «Какова модель расположения этих блоков?». Вопросом на вопрос, в лучших традициях, да.
Ну и кодпен для примера, чтоб уж наверняка: https://codepen.io/alinaki/pen/OJbvOmz
Схлопывание отступов (
На собеседованиях не ждут ответ. На собеседованиях ждут цепочку размышлений.
Только что в дружественном чате на пустом месте произошла бурная дискуссия. Казалось бы, какой простой вопрос: «У одного блока margin-bottom: 10px, у блока ниже margin-top: 15px. Сколько в итоге будет margin в px между блоками?»
Можно, конечно, посмеяться над вопросом, но это вполне себе типичная задача на собеседовании.
Дайте себе 30 секунд на размышление, но если вы уже держите в голове конкретное число – вы неправы.
Ответ звучит так: «Какова модель расположения этих блоков?». Вопросом на вопрос, в лучших традициях, да.
Ну и кодпен для примера, чтоб уж наверняка: https://codepen.io/alinaki/pen/OJbvOmz
Схлопывание отступов (
margin) штука такая.На собеседованиях не ждут ответ. На собеседованиях ждут цепочку размышлений.
👍11🤔1
#тред дня
Задержался с постом, релизил обновление продукта. Ух у юзеров будет бомбить, изменение уровня ribbon в MS Office.
Да, почти никакого автопостинга, с пылу с жару, цените, мои дорогие 😙
Итак, тут Андрей Ситник в очередной раз поднял тему безопасности npm-пакетов. Думаю, нелишним будет и тут сохранить. Далее слово автору с незначительной редактурой:
Угон пакета и вставка вредоносного кода — риски большинства пакетных менеджеров.
В npm при деплое можно снизить риски и ускорить деплой:
Использование
Но так даже лучше — при обновлении зависимостей сразу понятны риски (обновления devDependencies менее опасно).
TS и файлы типов не нужны для компиляции .ts в .js — swc и babel умеют отрезать типы.
Поэтому и для фронтенд-проекта и для nodejs-сервиса tsc и типы должны быть в devDependencies.
Проверка типов должна идти как тесты в отдельном задании.
Для nodejs-сервиса в dependencies записываются только те зависимости, что нужны для запуска сервера (а не его компиляции).
Отдельным заданием ставятся все зависимости и собирается JS-файлы. А внутри docker-образа сервиса установка только с
#npm #yarn #pnpm #node #security
Задержался с постом, релизил обновление продукта. Ух у юзеров будет бомбить, изменение уровня ribbon в MS Office.
Да, почти никакого автопостинга, с пылу с жару, цените, мои дорогие 😙
Итак, тут Андрей Ситник в очередной раз поднял тему безопасности npm-пакетов. Думаю, нелишним будет и тут сохранить. Далее слово автору с незначительной редактурой:
Угон пакета и вставка вредоносного кода — риски большинства пакетных менеджеров.
В npm при деплое можно снизить риски и ускорить деплой:
npm install --production --ignore-scripts
--production не будет ставить devDependencies, --ignore-scripts выключит postinstall-скрипты.Использование
--production при деплое, значит что вам более системно надо разделять dependencies (только что нужно для сборки) и devDependencies (всё остальное).Но так даже лучше — при обновлении зависимостей сразу понятны риски (обновления devDependencies менее опасно).
TS и файлы типов не нужны для компиляции .ts в .js — swc и babel умеют отрезать типы.
Поэтому и для фронтенд-проекта и для nodejs-сервиса tsc и типы должны быть в devDependencies.
Проверка типов должна идти как тесты в отдельном задании.
Для nodejs-сервиса в dependencies записываются только те зависимости, что нужны для запуска сервера (а не его компиляции).
Отдельным заданием ставятся все зависимости и собирается JS-файлы. А внутри docker-образа сервиса установка только с
--production.#npm #yarn #pnpm #node #security
👍7
#фишка дня
Любишь опечатываться в git? Не проблема, лови алиас — батя поможет. Так и научишься.
https://gist.github.com/haukot/5a8c456be43a3d49a7b563766b481315
#git #alias
Любишь опечатываться в git? Не проблема, лови алиас — батя поможет. Так и научишься.
https://gist.github.com/haukot/5a8c456be43a3d49a7b563766b481315
#git #alias
😁11
#такое дня
Стоило позавчера выпустить обновление нашего продукта, как нас (справа на изображении, Supermetrics) тут же обвинили в копировании. Кстати, как оказалось, не в первый раз.
Мощный маркетинговый буст от маленьких соперников.
Ваше мнение, господа присяжные заседатели? :)
#work #copyright
Стоило позавчера выпустить обновление нашего продукта, как нас (справа на изображении, Supermetrics) тут же обвинили в копировании. Кстати, как оказалось, не в первый раз.
Мощный маркетинговый буст от маленьких соперников.
Ваше мнение, господа присяжные заседатели? :)
#work #copyright
👍1
#заметка дня
Хочется идти в ногу со временем и доступностью интерфейсов, но что-то уж больно много в твоём коде зависит от событий transitionend и animationend? Ведь ты так старался.
Ставь длительность анимации для тех, кто предпочитает минимальные анимации (reduced motion) в 1мс.
Они не заметят, а ивенты сработают как надо :)
Но вообще, prefers-reduced-motion не означает, что все анимации стоит отключить. Просто надо относиться к ним разумно и предвосхищать возможную тошноту зрителя: плавное наведение оставить, а параллакс — убрать.
Вот, например, от такого — точно стошнит: https://codepen.io/argyleink/pen/RwwZMKm
Но поиграйтесь с медиа-запросами в девтулзах и станет понятно.
#media #a11y
Хочется идти в ногу со временем и доступностью интерфейсов, но что-то уж больно много в твоём коде зависит от событий transitionend и animationend? Ведь ты так старался.
Ставь длительность анимации для тех, кто предпочитает минимальные анимации (reduced motion) в 1мс.
Они не заметят, а ивенты сработают как надо :)
Но вообще, prefers-reduced-motion не означает, что все анимации стоит отключить. Просто надо относиться к ним разумно и предвосхищать возможную тошноту зрителя: плавное наведение оставить, а параллакс — убрать.
Вот, например, от такого — точно стошнит: https://codepen.io/argyleink/pen/RwwZMKm
Но поиграйтесь с медиа-запросами в девтулзах и станет понятно.
#media #a11y
👍2
#ссылка дня
Встречайте: https://browser.engineering/
Ребята ставят своей целью создание минимального браузера на Python, по пути разбирая как, собственно, это все должно работать: протоколы, объектная модель документа, стили, интерфейс. Работа все ещё в процессе, подано в формате учебного пособия, с домашними заданиями.
Этот проект сложно назвать «чтивом выходного дня» (кроме первой части), но вряд ли кто-то будет параллельно погружаться в исходники настоящих браузерных движков.
Впрочем, вдруг кто-то захочет сделать свой встраиваемый браузер для какой-нибудь игры.
Дико интересная штука.
#python #browser
Встречайте: https://browser.engineering/
Ребята ставят своей целью создание минимального браузера на Python, по пути разбирая как, собственно, это все должно работать: протоколы, объектная модель документа, стили, интерфейс. Работа все ещё в процессе, подано в формате учебного пособия, с домашними заданиями.
Этот проект сложно назвать «чтивом выходного дня» (кроме первой части), но вряд ли кто-то будет параллельно погружаться в исходники настоящих браузерных движков.
Впрочем, вдруг кто-то захочет сделать свой встраиваемый браузер для какой-нибудь игры.
Дико интересная штука.
#python #browser
👍5
#игра дня
Тут запустился очередной фронтендерский CTF (capture the flag): https://ctf-2022.ilovefrontend.ru/
Соревнования CTF в среде безопасников давно уже стали настоящим большим спортом: https://xakep.ru/2016/06/14/ctf/
Фронтендерский, вроде, проводится уже второй раз.
Меня слабо такие штуки интересуют, впрочем, два флага сразу нашёл. Тратить всё своё свободное время нет никакого желания.
Кто-нибудь играет? А в прошлом году?
#ctf #game
Тут запустился очередной фронтендерский CTF (capture the flag): https://ctf-2022.ilovefrontend.ru/
Соревнования CTF в среде безопасников давно уже стали настоящим большим спортом: https://xakep.ru/2016/06/14/ctf/
Фронтендерский, вроде, проводится уже второй раз.
Меня слабо такие штуки интересуют, впрочем, два флага сразу нашёл. Тратить всё своё свободное время нет никакого желания.
Кто-нибудь играет? А в прошлом году?
#ctf #game
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.
Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/
Потому что все мы в душе немного художники.
Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows
В треде автора плагина есть пара трюков по использованию, ну и вообще, можно оставить своё спасибо.
#figma #css #shadow
Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.
Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/
Потому что все мы в душе немного художники.
Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows
В треде автора плагина есть пара трюков по использованию, ну и вообще, можно оставить своё спасибо.
#figma #css #shadow
👍16🔥6
#заметка дня
Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.
Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.
Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.
Но есть нюанс.
Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:
...и будет норм.
#markdown
Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.
Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.
Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.
Но есть нюанс.
Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:
<td>_markdown_ **тут**</td>...и будет норм.
#markdown
👍11
#статья дня
Злые Марсиане и Андрей Ситник как всегда снабжают нас прекрасными статьями, описывающими современное состояние фронтенда.
Даже такая простая вещь, как фавиконка, совсем не простая. Каждый год выходят обновления минимального набора для максимальной поддержки клиентов.
Вот и в этом году тоже: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
В статье имеется TL;DR, для тех, кому ну вообще лень :)
Он настолько короткий, что умещается даже здесь:
HTML
И манифест:
И всё, делов-то.
#favicon #web
Злые Марсиане и Андрей Ситник как всегда снабжают нас прекрасными статьями, описывающими современное состояние фронтенда.
Даже такая простая вещь, как фавиконка, совсем не простая. Каждый год выходят обновления минимального набора для максимальной поддержки клиентов.
Вот и в этом году тоже: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
В статье имеется TL;DR, для тех, кому ну вообще лень :)
Он настолько короткий, что умещается даже здесь:
HTML
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
И манифест:
// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
И всё, делов-то.
#favicon #web
evilmartians.com
How to Favicon in 2025: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.
👍13😱1