Будни разработчика
14.7K subscribers
1.18K photos
334 videos
7 files
2.01K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv

Чат: https://t.me/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
#статья дня

Вы не поверите, но, кажется, до Apple таки дошло, что Safari начинает всех бесить.

На самом деле, Safari надо любить, потому что Firefox стремительно загибается, но сложно любить то, что не очень-то и уважает потребности разработчиков.

Так вот!

Вышел Safari 15.4: https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

В списке нововведений: lazy loading, dialog, :has(), каскадные слои, svh/lvh/dvh, focus-visible, accent-color, display: contents fix, scroll-behavior, Manifest-иконки, BroadcastChannel.

Выглядит охренительно, даже похоже на будущее.

Обновляемся, пользуемся.

Upd. держите перевод на русский https://habr.com/ru/news/t/655743/

#safari #webkit #macos
👍12🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
#видео дня

Инструкции по Chrome DevTools никогда не перестанут быть актуальными. Вот с пылу с жару подлетело новое видео от их developer advocate — Jecelyn Yeen. (Понятия не имею, как пишутся на русском ни должность ни имя, сорян).

Про отладку CSS Grid: https://www.youtube.com/watch?v=M8SlBgul8ao

А год назад было видео про отладку флексов, тоже нелишне будет напомнить: https://www.youtube.com/watch?v=J5n2aS37rpE

Естественно, не забываем, что у Google прекрасная документация: https://developer.chrome.com/docs/devtools/css/grid/

С датами публикации, правда, что-то не то… ну да ладно.

В качестве иллюстрации к посту вынесу отображение имён grid-area. Весьма удобно!

#css #grid #devtools
👍12🔥3
#фишка дня

Шоковый контент!

Вам, наверное, известно, что WebView — это когда в нативном приложении рендерится веб-приложение. И что такое точно есть в Android.

Я знал, что в Windows тоже применяется, знал, что в iOS вполне. Но не представлял, что даже официальные приложения Apple в macOS этим промышляют.

Если есть WebView-виджет, значит, есть и возможность его отладки?

Таки да! Следите за руками. Идём в терминал:

defaults write NSGlobalDomain WebKitDeveloperExtras -bool true
defaults write -g WebKitDeveloperExtras -bool YES


И вуаля — смотрим исходники того, что вам поставляет Apple и наслаждаемся.

Как по мне, весьма неожиданно. Поражает, насколько Apple поменяла свои правила интерфейсов, что даже встроенные web-части смотрятся настолько хорошо и нативно в контексте десктоп-приложения.

#macos #apple #webkit
🔥4👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

Наверное, вы и так уже в курсе, но я решил написать.

Всем (хочется верить) известная песочница CodeSandbox расширила свои возможности от простой песочницы чуть сложнее CodePen до полноценного средства разработки и управления проектами от начала и до конца: https://codesandbox.io/post/announcing-codesandbox-projects

Теперь это не просто прототипирование!

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

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

Ну и на закуску напоминаю, что это те ребята, кто сделал адресные шорткаты вроде https://react.new/

#sandbox #project #tool #deploy
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня

Что-то захотелось мне вам на ночь глядя дать нашпигованной няшноты.

Итак, собственно, милая (это определение автора, не надо на меня так смотреть!) солнечная система:

Demo: https://codepen.io/manz/pen/rNpeEoz
Repo: https://github.com/ManzDev/twitch-solar-system/
Demo GitHub: https://manzdev.github.io/twitch-solar-system/
Twitch Making-of: https://www.twitch.tv/videos/1430488082
Twitter: https://twitter.com/Manz

Что же в ней крутого?

Ну, это демо — на веб-компонентах. Их там семь штук плюс одно изображение (звёздное небо).

Для обучения и понимания, как работают веб-компоненты — залетает сходу.

#css #webcomponents #js
14👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

Очень жаль, что у меня не было под рукой этого сайта в бытность студентом.

Итак, встречайте: https://algorithm-visualizer.org/

У ребят что-то с сертификатом, но сути дела не меняет: прекрасный проект по визуализации алгоритмов. От брутфорса и сортировки до динамического, будь оно неладно, программирования.

Приглашаю накидать в комментариях подобных проектов.

#algorithms #cs #visualizations
👍12
#инструмент дня

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

Как насчёт регулярных выражений? Там тоже есть что показать. Да и многие (я в том числе) гораздо проще воспринимают графическое решение задачи, нежели аналитическое.

Смотрим: https://regex-vis.com/

Ну согласитесь, не правда ли (?<first>^1$)|(?<second>^YES$)|(\s{2}) на КДПВ выглядит гораздо понятнее?

#regex #js #visualization
🔥10👍3
#статья дня

Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.

А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.

Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.

А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.

Итак, статья: https://sia.codes/posts/lighthouse-treemap/

TL;DR

Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.

Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.

Пользуемся, наслаждаемся. Неделя визуализации продолжается!

#devtools #chrome
🔥7👍1
#шпаргалка дня

Уникальное предложение в рамках недели визуализации!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

Такая себе пирамида Маслоу, но для обсуждения качества кода. От базовых вещей (но не опускаясь до того, что можно сделать автоматически) до того, что сделает ваш код действительно красивым.

#pr #process #work
👍6
Новый формат получения IT специальности - Буткемп. Что это такое?

Буткемп — методика, которую использовали в лагерях для подготовки солдат. Чтобы стать полноценным бойцом, в обычных условиях новобранцу нужно 3-4 года. В условиях Bootcamp такого результата достигали за 4 месяца. Эффективность методики обоснована тем, что на период кемпа человек полностью погружается в процесс обучения и быстрей воспринимает информацию. Сейчас этот метод обучения активно используют в Гарварде, IT-компаниях, бизнес-проектах и образовательных программах.

Для обучения IT специальностям (прежде всего программирование) формат начали использовать в 2011 году в США. Он быстро доказал свою эффективность и стал популярным. К примеру, за 2020 год IT буткемпы выпустили 24975 американцев. Для стран бывшего СССР, это новый формат.

В 2018 году в России открылся первый - Эльбрус Буткемп. С тех пор его выпускниками стали 752 человека. 93% из них нашло работу в течение 3 месяцев после выпуска. 

Буткемп работает как оффлайн (Москва и Санкт-Петербург), так и онлайн.

Подробнее о формате Буткемп можно узнать на мероприятии в ближайший вторник
👍5
#библиотека дня

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

easyData — библиотека, позволяющая вставить на сайт данные из сервисов Google: Analytics, Sheets, Search Console и в целом любых других.

Установка и использование максимально простые (главное не забыть ограничить действия ключа API в Google-консоли), пара строк кода — и вот у вас на руках SEO-панель управления :)

Есть и обучающее видео: https://youtu.be/5BvarQdBtFk?list=PLl1gkwYU90QkjQyRJijEbpouyFOUNv7MW

#seo #google #sheets #dashboard
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня

It’s-a me, Mario!

Немного расслабимся и взглянем на прекрасно выполненную 3D-голову Mario, следящую за курсором: https://codepen.io/ivorjetski/pen/abEBjKN

Дикий объём работы, конечно. И ни строчки JS.

Слежение как всегда сделано кучей раскиданных hover-якорей.

Бонус! Ссылка на видео процесса создания: https://www.youtube.com/watch?v=GWyod2tkTxI

#css #3d #art
🔥12👎2
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

Чота мало было тулзов для визуализации алгоритмов, давайте ещё одну.

https://visualgo.net/en

Не Visual Go, мелкомягкие тут ни при чём, а VisuAlgo. Ну фантазия так работает у парней. Точнее, у профессора CS из Сингапура, потому и языки там — английский, китайский и индонезийский.

Т. е. реально настоящий обучающий инструмент. С вводными, заданиями, примерами кода. Что ещё нужно? :)

#algorithms #cs #visualization
👍7
#статья дня

Есть такой скандально известный в HR-кругах iOS-разработчик: Антон Назаров.

Чем же он скандально известен? Ну, например, своей концепцией осознанной меркантильности.

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

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

Но я вот что принёс сегодня: статью о том, что волк не лев, но в цирке… ой, простите. Статья о волчистости в айти: https://boosty.to/m0rtymerr/posts/082000b6-c390-4d08-96b4-00c07d049d9c?share=post_link

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

TL;DR будь наглым.

Почитать полезно, мне по жизни чуток подобного не хватает.

#hr #work #cv
👍13👎1
#фишка дня

Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html
🔥24👍6🤔2💩1
#статья дня

Любите ли вы Markdown так, как люблю его я?

Даже диаграммы составляю в текстовом виде, как многие мои читатели уже знают: https://t.me/htmlshit/913

Терпеть не могу WYSIWYG с первых дней использования компьютера. Никогда не работает так, как надо, и один хрен никто не знает, как правильно использовать стили и контекст. Что-то не то нажал, и вот у тебя весь документ курсивом. А визивиг-редакторы на сайтах это вообще источник бесконечной боли: мусорная разметка, незакрытые теги, инлайн-стили…

Хотя кому-то проще и на кнопочку В нажать, да… но не суть.

Поэтому я крайне обрадовался новости, что и в Google Docs теперь официально появляется возможность писать Markdown: https://www.theverge.com/2022/3/29/23002138/google-docs-markdown-support-formatting-update

Всё есть текст. Всё будет текст.

#google #markdown
🔥6👍2
#codepen дня

Хотите фотографической точности? Их есть у меня.

Более ювелирной работы с тенями я не нашёл. Поделитесь?

https://codepen.io/ivorjetski/pen/xMJoYO

#shadow #picture
🤯7👍4
#инструмент дня

Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV

Создать любое число последовательностей и наложений, включая радиальные, добавить текст, сохранить для будущего использования — всё есть.

Удобный предпросмотр и экспорт в React-компоненты наличествуют.

#gradient #css #tool
👍95
#тред дня

На прошлой неделе сайт правительства Соединённого Королевства — gov.uk — отказался от jQuery.

Т. о. они выкинули 32 кб минимизированного и сжатого кода, который надо не только скачать, но и обработать.

Какие же результаты? Давайте глянем.

Собственно, вот тред: https://twitter.com/TheRealNooshu/status/1509487050122276864
Вот версия для чтения поудобней: https://threadreaderapp.com/thread/1509487050122276864.html

TL;DR

Снижение нагрузки на CPU от 3% до 10% что положительно сказалось на UX пользователей с мобильных устройств.

#js #seo #performance
🔥12👍1
#фишка дня

Хотите расположить текст вдоль контура (кривой)?

Да без проблем! Смотрим КДПВ. Поддержка только в Chrome!

Ладно-ладно, вот вам демо: http://codepen.io/t_afif/full/eYEQbmg

#css #path #svg
😁14