14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#обновление дня
Вышла новая версия российского веб-сервера с открытым исходным кодом — Angie 1.4.0
Сервер уже поддерживал протокол HTTP/3 на клиент-серверном уровне, но с этой версией добавилась поддержка проксирования запросов на том же протоколе, что удобно если к HTTP/3-серверу обращаются клиенты на HTTP 1.1 и HTTP/2.
А если вы разрабатываете IoT устройства или поддерживаете сети датчиков, будет полезно знать, что Angie не только поддерживает протокол MQTT, но и позволяет балансировать нагрузку. В 1.4.0 эту возможность немного улучшили. Думаю, мои товарищи на бетонном заводе будут рады 🙂
Для справки:
Angie — эффективный, мощный и масштабируемый веб-сервер, реализованный как форк nginx.
Создан бывшими разработчиками исходного проекта, чтобы двигаться в новом направлении, и может служить заменой предшественнику без переработки конфигурации и модулей.
Подробнее
#фишка дня
Итак, сегодня я спросоня долго смотрел на этот пример от Джея и никак не мог понять, какого фига тут происходит.
Не, ну я вижу, что в итоге получается градиентная граница, но... но почему?
И тут до меня дошло: оказывается, при настройке фона можно фактически указывать боксовую модель! Ну то есть называется-то оно background-origin, но по факту работает по тем же принципам, что и box-sizing.
Итак, три значения: border-box, padding-box и content-box.
Выходит, border-box заполнит фон, включая границы, padding-box — до полей, a content-box — по контенту.
Ну и для градиентных границ (к сожалению, только с непрозрачным фоном), получается так:
article {
background: // layer them up with different origin!
linear-gradient(var(--bg), var(--bg)) padding-box,
var(--gradient) border-box;
border: 4px solid transparent;
}
#итоги года
Музыкальные и видеостриминги подводят итоги года. Правда, побеждают там треки с которыми люди засыпают, забыв снять наушники...
Но мы-то с вами знаем, что настоящие итоги — они в State of JavaScript, State of CSS (правда эти ребята почему-то закрыли итоги года аж в июле) и CSS Wrapped 2023.
Опрос State of JavaScript открыт прямо сейчас. И пусть вас не смущает то, что это опрос — каждый вопрос это возможность узнать о существовании чего-то нового. Авторы спецификаций и статей тюнят маркетинг таким образом и знают, о чем стоит писать :)
CSS Wrapped же просто большая статья всех появившихся фишек CSS в этом году. А было много чего: has к концу года будет во всех браузерах, контейнерные запросы с нами, вложенность уже везде.
Тока ради бога не пытайтесь понять русский перевод в CSS Wrapped. По всей видимости, машинному переводу от Google ещё очень далеко до понимания контекста... Обёрнутый CSS, my ass. Gemini, говорите? Ну да, ну да 🤡
P. S. Wrapped в данном контексте переводится как «подведенный к итогу», «итоговый», от словосочетания «wrap up», что значит «summarize».
#stateofjs #css #js
Да, это было безумно медленно с точки зрения длительности процесса сборки и разработчиков вроде меня, привыкших к классической генерации HTML, приводило в ужас: только вдумайтесь, огромная мешанина всего на свете внутри одного JS-файла и чтобы вытащить всё наружу требовались плагины-экстракторы, ну просто смешно. Но это позволяло писать и выкатывать фичи очень быстро, используя современные возможности языка. Никто не хотел оглядываться на генерацию HTML на PHP и прочем. Обратился к API, сгенерировал HTML на клиенте — и всё, мухи отделены от котлет.
В итоге получилась такая картина: чтобы быстро и удобно писать код на современных средствах разработчику требовалось освоить:
1. HTML и DOM
2. CSS и SCSS/LESS
3. JavaScript, ES Modules
4. Командную строку
5. Базу Node.js и npm
6. Конфигурацию Webpack
7. Конфигурацию Babel
7. AJAX/AHAH и API
И где-то тут появляются полновесные фреймворки/UI-библиотеки вроде React.js с его дополнительным языком JSX, Vue.js с его концепцией скоупов, Ember.js с его классическим MVC и утилитами командной строки и Angular 2.0 на чём-то с названием TypeScript.
И всё бы ничего, но мы ведь говорим о потоковой промышленной разработке, где всё это помогает писать код очень и очень быстро и находиться на острие прогресса. А теперь поставьте себя на место начинающего разработчика, которому сказали:
«Так, вот это командная строка, тебе надо скачать Node.js вот отсюда, написать вот такую команду, установить с десяток пакетов, теперь взять Webpack, написать конфигурацию (в смысле, ты хочешь многостраничник? зачем?), импортировать SCSS внутрь твоего JS, раскатить перезагрузку по сохранению страницы... а отладчик у тебя будет в браузере, вот по F12. Ах, не понимаешь, что там написано? Так тебе ещё нужны source maps, чтобы склеенный минимизированный код расшифровывать».
Вам не кажется, что это малость далековато ушло от «вот блокнот, вот браузер»?
И ведь обвинить создателей подобных инструкций сложно: они хотят только хорошего, чтобы начинающий использовал все крутые плюшки языка, чтобы не тратил время на старые принципы.
Есть только одна проблема: люди просто хотят чтобы по нажатию на кнопку браузер с ними поздоровался.
И я попробую дать своё предложение в итоговой части, не стану затягивать.
#заметка дня
Продолжаем
Делиться же результатом труда было очень просто. Гораздо проще, чем копировать друзьям на дискету скомпилированный экзешник из Delphi.
Каждый интернет-провайдер в те годы давал возможность разместить «персональную веб-страницу» с диким адресом вроде http://example.com/~username.
Даже поддержка Perl и иногда PHP имелась, зависело от вашего умения ныть по телефону техподдержке. Как вы понимаете, этим стоило пользоваться. А ещё был легендарный narod.ru, но туда можно было грузить только простой HTML и сопутствующие файлы, что не мешало многим строить целые миры.
То есть, чтобы распространить результат, нужно было наляпать что-то в блокноте и загрузить это на FTP провайдера, обозвав index.html или index.php. Всё!
К этому моменту многие могли потерять мысль, но я всё же выражу её ещё раз: кроме блокнота и браузера не нужно было ничего, а масштабы распространения были при этом безграничны.
Вполне логично, что в какой-то момент хотелось сделать, например, книгу посетителей, отзывы... чат. Для этого применялись языки на сервере, тот же PHP, которые генерировали некий HTML код. Ни о каком изменении содержимого без перезагрузки страницы речи пока не шло: вы отправляли форму кнопкой Submit, сохраняли значения куда-то в базу данных или файл, потом генерировали при помощи PHP новый HTML и возвращали его обратно. Каждый раз всю страницу целиком.
JavaScript так и использовался в большинстве случаев для того, чтобы сделать снежинки.
Gmail, перевернувший мир, появился только в 2004.
Всё это хотелось сделать красиво, потихоньку набирал обороты CSS, который изначально буквально был нужен чтобы убрать подчёркивание у ссылок при наведении. Но уже от этого был восторг. Веб-страницы так и верстались при этом таблицами, даже до понятия семантики было ещё лет 10.
Я не планировал связывать свою жизнь с вебом и после 2004 года выпал на несколько лет. Вернувшись уже профессионально в 2009 году, я с удивлением обнаружил, насколько всё стало больше. При этом веб как был ориентирован на генерацию страниц на сервере, так и остался.
Но, хвала Gmail, дико распространился AJAX! Если коротко, это загрузка контента без перезагрузки страницы.
При этом JavaScript-файлы так и оставались чем-то отдельным и обособленным, но их роль уже заключалась в том, чтобы обработать какое-то событие нажатия на элементе, выполнить AJAX-запрос, получить в ответ, опять же, кусок HTML и вставить на страницу.
Где-то в эти же года (2006) на сцену вышел jQuery, который сразу обозначил свою позицию:
- безумно простой AJAX
- безумно простые анимации
- безумно простые обработчики кликов по элементам
Этот коктейль, простите, безумно быстро и высоко взлетел продолжал нестись с той же скоростью аж до 2021 года, когда балом уже правили совсем другие подходы к разработке. Да и сейчас, скорее, замедлился, чем исчез.
Но он дал нам кое-что ещё, и это самое важное: систему плагинов. Это время расцвета каруселей, кастомных селектов, попапов и лайтбоксов. Подключали плагин, описывали свои правила его работы и вперёд. Именно в это время распространяется IIFE: это был на тот момент лучший способ делать независимые модули.
Скриптов и файлов стилей стало больше, захотелось их как-то разбивать по файлам, но и заставлять человека грузить всё на свете было не очень хорошо, веб всё ещё был медленным.
Чувствуете, куда подбираемся? Да, дамы и господа. К системам сборки и минимизации кода. Как раз в 2009 году вышла первая версия Node.js.
И вот об этом-то через несколько часов и будет следующая часть.
Согласно статистике, лучший язык программирования, чтобы попасть в айти - PHP.
ВАйти - авторский канал от практикующего Senior PHP разработчика, который делится опытом о том, как с нуля обучиться, написать резюме и попасть на хорошую работу.
Подписаться на канал
#фишка дня
Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().
Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.
Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.
Так вот, к чему это я. С выходом Firefox 115 в июле этого года мы получили иммутабельные методы работы с массивами во всех браузерах:.toReversed()
.toSorted()
.toSpliced()
.with()
Если что, with — это про замену элементов по индексам.
Есть и полифиллы на core-js, так что без работы никто не останется.
И это прекрасно.
#js #array #sort #бородач
#заметка дня
Что-то я взял дурную привычку постить после 9 вечера. Вроде не поздно, а потом понимаю, что у большинства подписчиков-то плюс один час...
Потому сегодня буду краток, заметка по большей части для начинающих верстальщиков.
Я часто вижу в профильных чатах вопросы типа: «Помогите, паника-истерика, текст не занимает всю ширину контейнера и мой флексбокс не работает!»
Короче, происходит ситуация, как на картинке: кажется, что место справа никак не используется.
Ладно бы только начинающие такое спрашивали, но нет же. У всех дыры и паника, паника и дыры.
А суть в том, что рендер текста — это сложно. Рендер длинных слов — это очень сложно.
Потому браузер всегда выделяет для текста максимально возможную ширину. Возьмёт всё и начнёт упихивать буквы, как сможет.
Подсказка: он не сможет. И выделенное место не вернет.
А люди ожидают, что текст спокойно сдвинется вправо и у чекбокса будет больше воздуха. К сожалению, так не получится вообще никак.
Единственно кажущееся разумным решение — это заполнить всю предоставленную ширину, используя переносы (словарь или ­). Ну или word-break: break-all;
Вот три примера: https://codepen.io/alinaki/pen/ExrGRwL?editors=1100
Не паникуйте, ну.
#css #flex #render
Сложно представить современный бизнес без сайта или приложения. Поэтому грамотные бэкенд-разработчики ещё не скоро останутся без работы.
Хотите погрузиться в востребованную профессию — добро пожаловать на митап СИБУР Диджитал 6 декабря в 18:00. Эксперты расскажут, какие навыки самые ценные и где их получить, о нюансах профессии и мифах о разработчиках. В мир бэкенда погрузят:
— Старший разработчик Антон Федосеев передаст главные лайфхаки из 15 лет программирования на С/С++, Java, Kotlin, TypeScript;
— Бэкенд-разработчик Андрей Шубин погрузит в индустрию и раскроет главные тенденции за 12 лет в профессии;
— Разработчик и лидер компетенций Владимир Кирилкин расскажет про путь от стажёра в Яндекс Лицее до эксперта по системам видеоаналитики на производстве;
— Старший рекрутер Татьяна Сущева поделится кейсами и советами для успешного собеседования.
Только не забудьте зарегистрироваться тут: https://u.to/vFslIA
#codepen дня
Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?
Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME
Для лучшего понимания происходящего слои можно вращать. Выбирайте разные режимы наложения, меняйте фоны — лучше не найти.
Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui
Описываете конфигурацию и переменные, которыми желаете управлять, загружаете их в dat — и получаете возможность менять их на лету. Очень популярная штука в разных демках, особенно в WebGL.
#mix #blend #css #бородач
#инструмент дня
Давайте честно, процесс сборки откровенно раздражает.
Да, мы живём в 2023 году и вполне можем себе позволить использовать импорты и модули вообще без транспиляции кода и сборки.
Вот только с тем же кодом на React (да и не только, JSX сейчас много где) так не получится.
Плюс, естественно, у сырого импорта есть куча собственных проблем, Андрей Ситник писал об этом тред, а у меня, конечно, имеется выжимка.
К счастью, есть некое решение! И это решение — https://esm.sh/
Это автоматический сборщик и хостинг модулей на Deno в одном флаконе, если уж совсем грубо.
И вот недавно они релизнули новую часть проекта — поддержка кода, задекларированного в тегах script. Кривовато написал...
Давайте я сразу покажу пример: https://codepen.io/alinaki/pen/NWoERwW
Что тут происходит?
1. Запихиваю приложение в <script>, указывая тип text/babel (так повелось, что тогда VS Code его подсветит).
Тип такой нужен, чтобы браузер исполнять не полез.
2. Чуть выше импортирую скрипт для «сборки» (какая ирония): https://esm.sh/run
3. ...
4. Работает!
5. В примере я объявил importmap чтобы писать названия модулей так, будто у меня есть package.json. Но esm и просто ссылки поддерживает, дублируя npm и обогащая своими плюшками.
Штука забавная, на самом деле. Можно хостить самому, не опираясь на CDN.
Изначально я пробовал другой их продукт, build. Он собирает модули на лету, весьма удобно, рекомендую. Правда, немного задолбался с тем, что среда требует чёткого указания MIME-типа файла, а GitHub Pages отдают jsx как text/jsx и так далее. И настроить нельзя :( Так что для такого проекта надо брать полновесный хостинг.
Так или иначе, оно завелось! Для демок точно прекрасно, для кода, требующего ремонт на лету — тоже, вполне.
#js #module #esm
Если вам всегда нравилось находить какие-то мелкие ошибки на картинках, в тексте, у колллег (шутка!)... То сейчас вы узнаете, как на таком можно заработать!
Секрета нет – нужно просто пройти обучение на тестировщика.
Инженер по тестированию программного обеспечения (он же тестировщик или QA engineer) проверяет IT-продукты на прочность. Он продумывает, что и где может сломаться, прогнозирует сбои и находит ошибки в приложениях, сайтах и программах, чтобы продукт вышел работоспособным.
Компании готовы достойно платить специалистам, которые помогут избежать финансовых потерь и обеспечат бесперебойную работу их сервисов.
Не теряйте время, htmlshit">записывайтесь на обучение в SkillBox !
Реклама. ООО Скилбокс" ИНН 9701078611
Erid: 2VtzquseANm
#статья дня
С чего начать построение своего веб-секвенсора?
Конечно же с изучения Web Audio и Web Midi API!
Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Ну и, конечно, сразу демо: https://codepen.io/alinaki/pen/jOdeqRv
Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!
#web #audio #grid #music #бородач
Погрузитесь в мир ☕️ Java и станьте Java-разработчиком за 4 месяца с курсом от Merion Academy!
Все, кому интересно, получат 🚀 3 бесплатных урока, 📍 Мы расскажем про то, что из себя представляет язык Java и его базовый синтаксис.
📍 Установите Java и среду разработки где будете писать код.
📍 Напишете свою первую консольную программу, а после нее и REST API приложение.
📍 А в конце закрепите полученные знания.
🎁 Бонус – интенсив по развитию карьеры, где HR-эксперты расскажут как создавать сильные резюме и проходить собеседования.
📜 Плюс гайд по базовому синтакису языка.
🕺У ребят одна из самых доступных цен, которая в разы ниже, чем в других онлайн-школах, а еще есть рассрочка для тех, кто хочет учиться сейчас и платить по чуть-чуть ежемесячно.
👉 Регистрируйтесь по ссылке чтобы забрать бесплатные уроки, интенсив по карьере и гайд.
Merion Academy – это экосистема доступного образования, которая включает в себя:
📍IT-базу знаний с полезными статьями.
📍merionacademy">Youtube-канал ,где простыми словами говорят о сложных вещах.
📍IT-академию, где обучат востребованным направлениям по самым доступным ценам.
#автор дня
Олды помнят, что я пытался ввести эту рубрику, но как-то подзабил.
И это при том, что инфлюенсеров в мире фронтенда (ну так уж повелось, что канал больше об этом) не так уж и много на самом деле. Впрочем, потому и упоминаются достаточно часто.
Тем не менее, некоторые из них достойны отдельного поста. И сегодня — Ана Тюдор (Ana Tudor).
Она, кстати, не Анна, она — Анастасия, если уж полное имя рассматривать.
Чем известна? О, ну тут вопрос, с чего бы начать. По-моему, самой популярной её работой является коллекция "ползунков" — виджетов для ввода диапазонов, CodePen. Все на базе нативных полей, с минимумом JS. Бери и пользуйся.
Так же раньше она очень много писала для ресурса CSS Tricks, но сейчас больше фокусируется на демо для YouTube-канала.
Кстати, о демо. Опять же, на CodePen представлено невероятное количество её работ, сгруппированное по категориям, от абстрактных геометрических экспериментов до весьма практичной инфографики.
А уровень её использования CSS-переменных вообще где-то за гранью.
Ну и конечно недавняя простая, но эффектная демка с анимированным градиентным текстом — тоже её.
В общем, Ана не то чтобы нуждалась в моей рекомендации, но если вы о ней не знали до этого момента, надеюсь, этот пост был полезен :)
#css #art #author
#инструмент дня
Важной частью процесса разработки является сканирование уязвимостей в коде и зависимостях. А ещё более важной — слежение за ними.
И этот процесс было бы неплохо автоматизировать.
Да, в какой-то мере справляется dependabot, но не во всех компаний используется GitHub и хотелось бы получать сводки в любой момент. Ну а npm audit такая себе игрушка.
И тут у нас имеются прекрасные инструменты. Для начала, конечно же, база уязвимостей для Open Source библиотек: https://ossindex.sonatype.org/
Обратите внимание, речь не только про JS aka npm, в каталоге присутствуют практически все мыслимые среды и пакетные менеджеры.
Второй момент это тулинг. И тут от тех же Sonatype имеется пакет AuditJS: https://github.com/sonatype-nexus-community/auditjs
И расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=SonatypeCommunity.vscode-iq-plugin
Всем безопасной разработки, котаны!
#security #vulnerability #scan #audit
Увлекаешься играми и 3D моделированием?
Тогда тебе точно стоит подписаться на канал опытного 3D моделлера. Андрей в этой сфере уже более 7 лет, за это время создал огромное количество моделей для игра и знает все тонкости работы на фрилансе. А самое приятное, что он готов бесплатно делиться этой информацией с тобой!
Хочешь тоже создавать модели для игр/кино?
Тогда скорее подписывайся - @asmirnov_school
#заметка дня
Итак, что же я предлагаю после всех этих длинных тирад?
Я пытался написать что-то про то, что нужно определиться, интересует тебя веб или программирование вообще. Про то, что надо решать задачи, а не выбирать серебряные пули и технологии... Но если вы здесь — наверняка, веб уже выбран.
Потому мой посыл будет таким: не лезьте в промышленную разработку до того момента, как вам реально это будет нужно.
Нельзя недооценивать желание быстро похвастаться поделиться результатом работы, иначе я бы порекомендовал установить Android Studio как бесплатный вход в мобильную разработку, с полноценными IDE, хорошей документацией и большим сообществом.
Зачем пытаться развернуть весь стек у себя на компьютере, если есть решения вроде https://codesandbox.io/? Туда же replit.com и codepen.io
Прямо в браузере можно дойти до весьма высокой точки своего развития, ни разу не прикоснувшись к терминалу, не устанавливая там пакеты и даже не думая о концепции клиент-серверных взаимодействий.
При этом делать на таких ресурсах можно практически всё, что угодно (на codepen.io чуть меньше, конечно): писать на React и Vue, загружать файлы, создавать большое количество страниц, ставить пакеты Node.js.
А когда вы выросли из коротких штанишек песочницы — просто скачивайте результат работы себе на компьютер и разбирайтесь с промышленной установкой.
И, конечно, постарайтесь разобраться с базовым владением компьютером и английским языком до того, как начнёте пытаться что-то делать: научитесь отличать /, от ./, ../ и https://.
Чтобы не страдать с настройкой Webpack и отладкой кода после упаковки, есть прекрасные современные средства вроде Parcel, Vite и Snowpack, которые не станут запутывать ваш код так, что вы не сможете даже с отладчиком его распутать. Все браузеры уже давно умеют в поддержку модулей, всё, что вам нужно — это сервер и немного прослойки к пакетам, чем эти инструменты и являются.
Но особо хочется отметить тот факт, что никто и никогда за все эти года не отменял такое простое сочетание блокнота и index.html. Не лезьте в промышленную разработку с первых же дней, не портите себе настроение.
Поддержка фишек JavaScript в современных браузерах сейчас на своём пике. Всё, что вы найдёте в руководствах по JavaScript — будет там. Даже CSS и тот поддерживает вложенность, если вам так лень писать классы.
На ваши HTML-файлы на файловой системе вполне можно ссылаться, для этого не надо поднимать сервер, достаточно понимать, что такое ./.
Не ведитесь на рассказы, что веб-разработка или какой-то конкретный скилл в программировании это социальный лифт. Социальный лифт — это умение декомпозировать и решать задачи. Остальное приложится.
А разбивать себе лоб промышленной разработкой на самом старте не имеет никакого смысла.
#заметка дня
Как я уже сказал, будет три части и итог. Это третья часть. В двух сообщениях.
В 2009 году я для себя базой выбрал Drupal, CodeIgniter и jQuery. Вёрстку к тому времени изучил по Маниакальному веблогу, за что Ивану Сагалаеву огромное спасибо, база оттуда осталась неизменной.
В 2010 году появляется Angular 1. Где-то в то же время нарастает движение HTML5 против XHTML 2.0, в ход вступает семантика и то, что называлось «вёрсткой на дивах» становится «семантической вёрсткой». У нас уже есть Firefox, Safari и только-только появился Chrome. IE предстояло потесниться.
Конечно, были ещё Ext.js, Backbone и Marionette, Dojo, MooTools...
Я плавно подвожу к тому, что с 2009 по 2014 год веб сильно рос. Именно с той поры пошли шутки про новые фреймворки каждый день, и это не было преувеличением.
Рост массы JS-кода был лавинообразным, но до какого-то момента было всё равно: ты подключал кучу файлов и не парился.
Но в какой-то момент это всё же стало зачастую превышать разумные пределы, потому появились инструменты для минификации и обфускации кода; для сжатия картинок.
Требовалось что-то для сборки шаблонов и упрощения вёрстки. Так родился Gulp, позволявший выполнять задачи по порядку: собрать JavaScript-файлы в кучу, минимизировать их, сжать картинки, склеить HTML...
К 2015 году появилась концепция ES6/ES2015, ES-модулей. К тому времени уже был Node.js с CommonJS и его require(), но все хотели стандартов; Node.js-вариант не всем нравился и имел свои минусы, хотя на фронтенде его можно было использовать через Gulp и Browserify, что многие очень активно и делали.
Крупные разработчики стали обращать своё внимание на такой простой и детский JavaScript и резко захотели приблизить его к индустриальным стандартам.
Естественно, браузеры все новые фишки JS не поддерживали, потому вместе с идеей ES6 родился и «транспилятор» Babel.js, который можно было использовать как прямо на странице, так и в своих сборках на Gulp.
Помните я в первой части рассказывал про IDE, в которой было всё? Я не упомянул одну важную штуку: линковщик. Или, собственно, сборщик. Чтобы скомпилированный код собрать в один исполняемый EXE-файл вместе со всеми ресурсами, картинками, иконками и звуками именно его и нужно было использовать.
И как раз вместе с концепциями ES6, ES2015 и ES Modules на рынок вышел Webpack, принёсший идею сборщика в веб.
Отличием Webpack от Gulp стало то, что он именно что собирал всё, что вы ему передали, в один огромный JS-файл. Webpack катком прошёлся по стандарту модулей и позволил импортировать CSS, SCSS, LESS, HTML, JS, JSON, SVG и даже картинки вообще простой директивой import! Это совпало с ростом запросов на одностраничные лендинги от бизнеса, где такой подход потрясающе себя оправдывал.
Случился настоящий взрыв. Разработчики, привыкшие к идее сборщиков на серьёзных системах, прониклись идеей максимально.
А Node.js к 2014-2015 году уже доказала свою полезность не только как серверная среда, но и как пакетный менеджер и основа для запуска бесконечного количества JS-кода для инструментов сборки и выполнения задач.
#заметка дня
Последние дни в чате и общение с начинающими свой путь в разработку знакомыми наткнули меня на пост дедовского нытья.
И нытьё это о процессе изучения программирования вообще и веб-разработки в частности.
TL;DR веб-разработка никогда не была настолько простой, а процесс обучения ей — настолько усложнённым.
Теперь давайте по порядку. Будет 2-3 части и некий итог. Если хотите коротко — рекомендую дождаться итога. Я пытаюсь создать атмосферу.
Мне 36 лет и я уже на полном серьёзе могу применять фразы вроде «моё поколение». Так вот, это самое моё поколение начинало изучение программирования на интегрированных средах разработки — IDE. Сначала это был Turbo Pascal, но очень быстро мы все переползли на Delphi.
Почему я упоминаю IDE вообще? Всё просто, секрет в той самой букве I, «интегрированности».
За свои деньги (2002 год в РФ, конечно же за деньги, что вы, что вы) вы получали:
1. Справочник по языку
2. Текстовый редактор с автоподстановкой
3. Визуальный конструктор интерфейса (буквально мышкой размещать компоненты!)
4. Компилятор
5. Отладчик
Что на выходе? А на выходе рабочее desktop-приложение под де-факто одну доминирующую платформу. Напомню, минут 30 назад вы всего лишь перетащили кнопку из палитры на окошко и кликнули по ней дважды, получив готовый код обработчика события нажатия.
В 2002 году при этом веб-разработка была уже устоявшейся, но не считалась серьёзной, особенно после бума дот-комов. Если интересно, я раздам расклад, но мы всё-таки попробуем сфокусироваться на фронтенде.
А весь кайф фронтенда заключался в том, что для старта не нужно было вообще ничего.
Да, были редакторы вроде Front Page и DreamViewer, но это считалось примерно тем, чем сейчас считаются Tilda и Framer: не для серьёзных пацанов.
У вас был браузер (IE или Netscape 6), блокнот и сочетание клавиш Ctrl-U для просмотра кода страниц. Всё.
Уже подготовленные знанием о том, что для работы кнопки по нажатию нужно писать какой-то код мы находили на интересующем сайте саму кнопку, нажимали Ctrl-U, искали её в коде страницы, копировали в блокнот. Потом искали в коде этой же страницы всё, что могло быть с этой кнопкой хоть как-то связано и чаще всего находили кусок JavaScript в теге <script>.
Иногда ничего не находилось, но после просмотра всего, что хоть как-то походило на ссылку с расширением js улыбалась удача и приходило понимание: код можно хранить в других файлах. И опять начинался процесс поиска, чтобы заставить кнопку показать alert().
Естественно, потом бралась в школьной же библиотеке куча книг с названиями вида Dynamic HTML, DHTML, "веб-мастер" где серьёзные дяди на серьёзных щах рассказывали как написать калькулятор или прилепить к курсору мыши снежинки. Так приходило понимание работы с DOM.
Пост становится слишком длинным, потому я рискну выпустить эту часть к полуночи и понять, нужно ли вам продолжение, уже утром. Дайте знать 🙂
#фишка дня
Поскольку селектор has почти прилетел во все браузеры (Firefox 121 вот-вот выйдет), самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: /channel/htmlshit/1873
Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.
Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/
Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.
И, наконец, мы можем это сделать!
Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN
Значащий код:
table:has(td:nth-child(5):hover) {
td:nth-child(5) {
background: var(--hover);
}
}
Frontend Portal — канал каждого уважающего себя frontend-разработчика, там вы найдете:
— Теорию, проиллюстрированную яркими примерами и кодом
— Разбор вопросов с собеседований
— Задачи и викторины с объяснением
👉 Подпишитесь на @FrontendPortal и станьте частью дружного frontend-комьюнити!
#такое дня
Не знаю, в какую рубрику это поместить, да ещё и чуть не пропустил...
Котаны, языку JavaScript сегодня исполнилось 28 лет!
4 декабря 1995 года после фееричных 10 дней разработки Брендан Эйх представил компании Netscape язык LiveScript, предназначавшийся для встраивания в их всё ещё свежий и самый популярный в мире браузер.
Но яйцеголовые маркетологи были уже тогда, потому язык быстренько обозвали JavaScript и выкинули на рынок как есть. Да, история немного сложнее и они реально собирались создать упрощённый вариант Java и JVM, но уж получилось как получилось.
Продавать это всё равно решили как простое решение для добавления интерактива на веб-страницы используя ваши существующие ресурсы в виде программистов на Java.
В итоге, JavaScript прошёл все круги издевательств, особенно от Microsoft. Был стандартизирован как EcmaScript, а году так в 2008 его даже называли СНЯП: Самый Недооценённый Язык Программирования.
Ну в 2023 году мы с вами точно можем сказать, что если кого и недооценили — то это точно не JS.
В общем, дальнейшего джаваскрипту развития, котаны! Всё только начинается.
#js #jscript #ecmascript
#заметка дня
Хочу сказать пару слов про файлы-реэкспорты aka index.js. В англоязычном сегменте разработчиков их ещё бочками зовут — barrels. Кори Хауз сегодня в тви напомнил :)
Задачи бочки просты:
✅ Сократить путь импорта
✅ Дать возможность импортировать несколько модулей из одного места
✅ Предоставить некий публичный контракт.
Мол, если вы используете что-то не задекларированное в index.js — сами себе злобные буратины.
Вот только минусов-то побольше будет:
🚫 Раздувает бандл, ведь тришейкинг становится невозможным
🚫 Потребление памяти тоже возрастает, обработать-то файл надо
🚫 Замедляет сборку
🚫 Мешает навигации по коду, когда опция "перейти к определению" кидает тебя в реэкспорт.
В общем, я перестал создавать их и планирую грохнуть из существующего кода.
Вот правило для ESLint чтобы найти у себя это в коде и больше так не делать: https://github.com/christianvuerings/eslint-plugin-no-re-export, там же есть и побольше информации.
А у вас дела как, котаны?
#js #ts #module
Секретный интенсив для погружения в сферу фронтенд с 0!
Присоединяйся к нашему интенсиву, где собрана максимальная польза и минимум воды. Поверь, что освоить навыки фронтенд-разработчика проще, чем ты думаешь.
Всего за 4 дня ты с нуля сможешь создать свой сервис поздравительных открыток. Интенсив даст тебе чёткое осознание дальнейшего развития в веб-разработке.
Регистрация тут 👉 https://tglink.io/94aa95d99b2c?erid=LjN8K3ebp
Решайся! Переходи по ссылке и присоединяйся к нашей команде!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
#заметка дня
Итак, объяснение результатов опроса выше. Поехали.
Пока я думал, как написать, и искал время, в комментариях к опросу уже всё сделали. Аж дважды. И даже обняться успели.
Потому, буквально, цитата:
1) Что такое тип Omit? А вот что:
type Omit<T, K extends string | number | symbol> = { [P in Exclude<keyof T, K>]: T[P]; }
#фишка дня
Кричащий банан 🍌 (да-да) принёс шикарную фишку TypeScript: как типизировать ключ объекта без каста.
Решение: заранее объявите тип переменной перебора как keyof typeof. Всё, вы великолепны.
Пруф на TS Playground.
#typescript #cast
#баг дня
Сегодня Google опрокинул миллионы пользователей расширений Google Sheets.
Для многих станет сюрпризом, но этот рынок огромен: аналитика, SEO, рассылки, бюджет, ведение рекламных кампаний, анализ опросов из Google Forms... всё там.
Только у нашего расширения — под миллион установок, например.
Так вот, когда-то давно в Chrome 83 появилась очередная директива Content-Security Policy (CSP): Trusted Types.
MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
Web.Dev: https://web.dev/articles/trusted-types
Когда она включена, любую загрузку скриптов надо предварительно одобрить. Любое изменение innerHTML и документа вообще — тоже.
Звучит разумно? Давайте дальше.
Практически любой скрипт на свете использует innerHTML, но это полбеды. Если директива неправильно описана, загрузка и исполнение скриптов внутри iframe тоже становится невозможной.
И сегодня в Google Sheets появился заголовок, включающий директиву, а код настройки — нет.
Масштабы ошибки оказались сокрушительными. Полегли все расширения Google Sheets, просто потому что каждое из них использовало какой-нибудь скрипт, загружающийся извне. Повторю, миллионы пользователей потеряли возможность нормально работать.
Ах да, директива учитывается только в Chrome 🤡
Баг-трекер: https://issuetracker.google.com/issues/313466551
Мы достаточно быстро нашли решение и указали на него в трекере, но далеко не все разработчики отреагировали так же быстро, потому ситуация остаётся плачевной.
А решение, собственно, заключается в минимальной настройке директивы.
Это то, что должны были сделать разработчики Google Sheets:
<script>
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: string => string,
createScriptURL: string => string,
createScript: string => string,
});
}
</script>
7 дней бесплатного обучения вёрстке сайтов!
Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью, куратором, где ты:
- Добавишь в портфолио 1 сайт;
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
Забрать бесплатно 7 дней обучения Frontend-разработке
Бонусом мы вышлем тебе в подарок чек-лист чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 6 декабря.