14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
5. Flash для проигрывания музыки.
Никакого тега audio и его API не существовало. Играли флешем.
Я щас в шоке от того, что WebArchive запускает старые SWF на JS-движке. Если бы работали ссылки на музыку, можно было бы послушать!
6. jQuery. Естественно.
Фильтр по жанрам прекрасно работает спустя 15 лет. Ваше React-приложение так умеет? Ах да, ему же максимум 10 лет.
7. Скруглённые уголочки через четыре отдельных элемента.
Никакого border-radius не существовало, окститесь.
8. Лично я в 2009 году открыл для себя DL-DT-DD. Весь список на них построен. Я считал эту находку гениальной.
9. И синие ссылочки. Естественно, синие. Причем, те, что выполняют действие — было принято подчёркивать прерывистой линией.
Наверное, можно что-то ещё рассказать, но уже о технических деталях, аналогично видео Макеева.
Отметьтесь, если интересно ещё 🙂
#nostalgie #tech #old
Как пройти собеседование фронтендеру: взгляд тимлида
Елизавета Каторгина — фронт-тимлид веб-продакшена ДАЛЕЕ — провела сотни собеседований и знает, какие скиллы можно и нужно показывать фронтендеру, а что станет красным флагом для интервьюера ❌❌❌
Переходите в канал ДАЛЕЕ, читайте пост полностью и подписывайтесь, чтобы не пропустить полезные подборки и советы для айтишников и дизайнеров.
Реклама. ООО "ИА ДАЛЕЕ". ИНН 7704642617. erid: LjN8KTswY
#фишка дня
Как вы обычно подсвечиваете какой-то конкретный текст в словах?
Ну, например, пишешь ты приложение для изучения языка, и тебе надо подсветить корень слова или там окончание. Или, простите, суффикс.
Наверное, обернёшь кусок текста в span? Ну, пожалуй.
Вот сиди и пиши код, который бьёт текст на отрезки, потом динамически за ними следит, если нужно...
К счастью, скоро будет чуток попроще и логичнее, потому что к нам заезжает Highlight API!
Как следует из названия, это буквально API для подсветки диапазона (Range) символов.
1. Создаём экземпляр Highlight()
2. Подпихиваем его в коллекцию CSS.highlights, в этот момент экземпляру подсветки можно дать некоторое название, по цвету, например, или отрезку слова.
3. В CSS пишем:
::highlight(rangeName) {
color: #b3b308;
}
#статья дня
Я вестаю и вообще программирую для веба уже пару десятков лет. Ну ок, с перерывами на безуспешное обучение строительству стартовых ракетных комплексов.
И вот все это время основной задачей всех фронтенд-разработчиков, даже когда их так не называли, было центрирование элементов. Если с горизонтальным все кое-как справлялись, то вот с вертикальным постоянно вопросики.
Я видел центрирование таблицами, марджинами, инлайн-блоками, трансформами, флексом, гридом...
А CSS, тварь такая, постоянно подкидывает новые варианты решения проблемы. Как и новые проблемы, впрочем (чего стоит только укладка длинного текста в блок неизвестной ширины).
Короче, к делу. Джош Комо, наш любимый, собрал наконец-то все достаточно современные и бронебойные способы центрирования контента в блоке, на экране и вообще везде: https://www.joshwcomeau.com/css/center-a-div/
Как всегда, статья — интерактивная. Не знаете английского — не беда, за ползунки в примерах можно подёргать и сразу всё станет ясно.
Моё любимое, конечно, это align-content: center; на элемент любой боксовой модели. В принципе, уже вот-вот можно использовать будет.
Всем центрирования, котаны!
#css #center #middle
Три частые проблемы IT-директора:
❌ Интеграции между программным обеспечением - боль;
❌ Отказ одной системы приводит к отказу всего остального;
❌ Разработка интеграций переполняет и без того полный бэклог собственных разработчиков.
🚀 15 февраля в 11.00 МСК наши друзья KT.Team проводят бесплатный вебинар:
КАК ПОСТРОИТЬ ГИБКИЙ IT-КОНТУРС ВЫСОКОЙ СКОРОСТЬЮ ИЗМЕНЕНИЙ
🔸 без огромных бюджетов;
🔸 без зависимости от вендора;
🔸 с возможностью получать видимые улучшения ежемесячно.
Спикеры вебинара
Андрей Путин: консультант, бизнес-эксперт, основатель KT.Team.
Дмитрий Алексеев: эксперт KT.Integrations.
✅ Вы узнаете о подходе слабой связанности IT-контура и как он помогает решить проблемы бизнеса.
Зарегистрируйтесь на вебинар по ссылке.
#фишка дня
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
#инструмент дня
Пожалуй, только лишь карась на дне не слышал аббревиатур LCP, TTFB, BPP, CLS и так далее. Что их всех объединяет?
А это все метрики производительности веб-проектов. Если вы запускали тот же самый Lighthouse, то наверняка знаете, что на получение 100% влияет очень и очень многое. Так вот.
Сегодняшний инструмент дня это набор сниппетов для Chrome DevTools для визуализации и считывания влияющих на параметры производительности показателей:
https://webperf-snippets.nucliweb.net/
Что забавно, там даже есть сниппет чтобы искать изображения за пределами экрана, у которых не включена ленивая загрузка! Сомнительно, но почему бы и нет...
И, например, имеется код для анализа скорости подгрузки сторонних скриптов и их влияния на ваш сайт.
Прекрасная штука, в общем.
#performance #devtools #бородач
Много полезной практики по Javascript ты можешь найти на канале .CCODE
Подпишись 👉
#статья дня
До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?
Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/
Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)
#cmd #terminal #бородач
#инструмент дня
Итак, это свершилось. GreenSock, создатели GSAP — самой крутой библиотеки анимаций на свете — обновили свой хук useGSAP для React.
Раньше приходилось жонглировать useEffect и useLayoutEffect, учитывать рендеринг на сервере, чистить за собой... ну как-то так:
import { useEffect, useLayoutEffect, useRef } from "react";
import gsap from "gsap";
// for server-side rendering apps, useEffect() must be used instead of useLayoutEffect()
const useIsomorphicLayoutEffect = (typeof window !== "undefined") ? useLayoutEffect : useEffect;
const container = useRef();
useIsomorphicLayoutEffect(() => {
const ctx = gsap.context(() => {
// gsap code here...
}, container); // <-- scope for selector text
return () => ctx.revert(); // <-- cleanup
}, []); // <-- empty dependency
import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
const container = useRef();
useGSAP(() => {
// gsap code here...
}, { scope: container }); // <-- scope is for selector text (optional)
#новость дня
Слушайте, я даже не знаю, как вам сказать, но тут случилось такое...
Короче, вышла новая версия jQuery. И не просто новая, а мажорная.
Встречайте: jQuery 4.0.0 Beta.
Ну конечно мы все такие типа: «A? Чо? В смысле?»
Но так уж получается, что jQuery всё ещё самая популярная библиотека для работы с веб-технологиями. Кажется, она сдохнет лишь со всей вселенной сразу.
Я вот с ней не работал плотно два года, сегодня влез в старый код и первое, что получил — maximum call stack exceeded. Естественно, потому что вызвал две функции друг из друга. Потому что бизнес-логику на jQuery слишком легко превратить в грёбанные спагетти. Очень приятно.
Ладно, так чего там?
Ну, дропнули всё меньше IE11 (А его Китаю во славу оставили?). Дропнули все ненужные API вроде parseJSON (он уж давно везде есть). Дропнули ненастоящие методы массивов: push, sort и splice. Не очень понимаю, зачем оставили each и map (да, я снова сегодня долго вспоминал, как их-то использовать, с .get()).
А, ну и перевели основную сборку на ES-модули и Rollup. Надо посмотреть их конфиг чтоль.
Ждём пятую, котаны? :)
#js #jquery
#такое дня
Вы знали, что в macOS можно склеивать вместе PDF?
Всё, казалось бы, довольно логично и просто:
1. Открываешь файл в Preview
2. Выбираешь страницу после которой нужно вставить что-то
3. Кликаешь на пункт меню Edit → Insert → Pages from file, выбираешь файл
4. Сохраняешь
5. Ты великолепен
И всё? Да, но есть нюанс.
Я склеил 6 файлов по 180 Кб. Какого веса получился объединённый PDF?
Даю вам время подумать.
Кто там ответил "чуть больше мегабайта"? Ты считать не умеешь?
9. Девять мегабайт. Математика от Apple. После прогона через т. н. Quartz-фильтры в экспорте получилось пять.
В итоге я психанул и воспользовался официальным сервисом от Adobe, который тут же денег попросил.
Но мы же все знаем, что Apple славится подходом Think different. Иногда слишком different, правда (например, они внедрили сканер PDF в приложение для заметок, Notes).
И да, как оказалось, функция склеивания PDF встроена в Finder — аналог Проводника в Windows!
Открываем панель Preview (View → Show preview), выделяем наши PDF и просто нажимаем Create PDF. Результат — 700 Кб. Пушка.
К слову, если выделить, например, картинки — там появятся поворот, удаление фона (!), редактирование. Если видео — появятся Ножницы, чтобы это самое видео порезать. И, как оказалось, это можно добавить в т. н. Quick Actions и оно станет доступно в контекстном меню.
Я искренне не понимаю, почему это просто было не добавить в контекстное меню по-умолчанию, как поступает Windows. С другой стороны, в WIndows для множества плюшек нужны PowerToys.
Возможно, часть этого — следствие нынче популярного вирального маркетинга. Если бы это всё было интуитивно и просто — я бы не написал пост, правда, котаны?
P. S. А чтобы разделить PDF, нужно использовать интерфейс печати.
#macos #ui #ux #pdf
В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн.
Чтобы не пропустить полезные — сохраните канал IT мероприятия России.
Анонсы вебинаров, хакатонов, конференций, мастер-классов и других событий в IT. Ивенты от гигантов индустрии и лучших специалистов по кодингу.
Всё публикуют здесь.Реклама. Клюев И.К.
ИНН 471421081281
erid 2Vtzquu5UBr
#статья дня
Надо было эту статью на фишки раздербанить, ну да ладно. Итак, задача: сделать сетку, элементы которой должны иметь четкое и, возможно, изменяемое соотношение сторон.
Передавать соотношение сторон можно через классы, конечно, но мы в 2024 году, так что будем использовать CSS-переменные (`--ratio: 4/3`). Дальше имеются два варианта:
1. Задать соотношение сторон всей строке через, удивительное рядом, складывание дробей: 4/3 + 2/3 = 6/3. Сразу можно понять, что минусов у решения достаточно.
2. flex-grow. Легко и просто.
Подробнее о решениях и ходе мысли в статье:
https://9elements.com/blog/building-a-combined-css-aspect-ratio-grid/
Флексы рулят, котаны :)
#css #grid #flex #бородач
#инструмент дня
И снова на связи Глеб, автор extended-fetch. Слово автору.
Недавно потребовалось проанализировать зависимости в проекте (была проблема с транзитивными) и искал удобный инструмент для визуализации дерева зависимостей.
В итоге нашел https://npmgraph.js.org/
Что дает инструмент:
- анализ пакета из репозитория npm
- анализ package.json
- отображение интерактивного графа зависимостей (самое вкусное)
- выделение цветом заивисимостей по степени актуальности / по типу модуля (esm/cjs) / по числу мэйнтейнеров
- для выбранного модуля доступен детальный отчет по клику (на скриншоте пример)
Всем деревьев зависимостей, котаны!
Напоминаю, что кто угодно может выкатить пост на канал, если есть чем поделиться. Не стесняйтесь!
#node #dependencies
#заметка дня
Что-то у меня опять ностальгическое настроение.
Три года назад Вадим Макеев выкатил видео о том, как верстали в нулевых и начале десятых: https://www.youtube.com/watch?v=mE1AvBP08Cs
Видео так и называлось: «Флэшбеки олдфага: IE6, таблицы и JS в CSS».
А сегодня мне напомнили о том, что когда-то было модно слушать радио в интернете.
Давайте эти две темы и объединим в ностальгическом порыве.
Поскольку трафик у многих людей в 2005-2011 годах всё ещё тарифицировался помегабайтно или был очень сильно ограничен по скорости, местечковые провайдеры ставили ретрансляторы спутникового радио в локальную сеть. Было такое и у нас и называлось всё это буквально Радио: https://web.archive.org/web/20110226031844/http://radio.sampo.ru/
Я прикладываю ссылку на вебархив, потому что когда-то сервис был открыт для всех, но потом начались тёрки с РАО.
Так вот, это был мой первый проект когда я устроился веб-разработчиком официально, 2009 год.
Как же верстали в 2009 году?
1. Три колонки, aka святой грааль веб-разработки
Естественно, колонки так и назывались: left, right, main. RTL-поддержка? Семантика? О чём вы вообще, это местечковый сервис :)
2. Прибитый футер, это обязательно!
Ты не мог считаться верстальщиком если не умел в прибитый к низу футер.
3. Много свободного пространства и мягкие цвета
Тогда мы, в смысле, веб-разработчики, только-только начали уходить от газетной вёрстки и желания впихнуть всё на свете. Родился Web 2.0 и его пастельные цвета были везде.
4. Абсолютная резиновость!
Адаптивной вёрстки ещё не существовало как явления, но вот мониторы у людей были от 800x600 до 2560x1440. Мы хотели занять всё пространство вообще.
Откройте сайт на ультрашироком мониторе — ну круто же, согласитесь?
Всё не влезло в одно сообщение, продолжаем...
#видео дня
Я уже не раз говорил, что видео может сэкономить кучу времени на реализацию уже готовой идеи, будь то анимация по скроллу или просто красивый фон.
Да даже анимацию открытия модального окна можно сделать с помощью видео.
Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk
Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?
Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.
Как всегда прекрасно.
#video #alpha #transparency #webgl #бородач
Если вы не знаете как программисты написали программы для программирования без программ для программирования, то вам срочно необходимо подписаться на канал EngineerSpock | IT·Tech.
У нас вы найдёте неизвестные факты об IT и программировании, щипотку новостей, приправленных мемасами, образовательные посты, статьи и видео, а скоро подъедут и code-challenges с призами. Кроме того, в закрепе на канале вы найдёте ссылки на наши бесплатные курсы по Python, SQL, JS+React и другие!
#фишка дня
Я, конечно, топлю за максимальную простоту стилей и срезание углов, потому редко использую тег picture для работы с srcset в смысле размеров изображение под разные устройства и экраны. Но есть у него особенности, которые иначе повторить довольно неудобно.
И я говорю о поддержке медиа-запросов в, буквально, атрибуте media.
Одно из них — адаптация изображений для, например, тёмной или светлой темы или для людей, предпочитающих ограничение анимаций на экране.
В первом случае мы заменим картинку дня на картинку ночи, а во втором — гифку на фотографию.
В общем, смотрим иллюстрацию и кодпен: https://codepen.io/alinaki/pen/wvROeaR
И на закуску, универсальный компонент для отзывчивых изображений, Unpic: https://unpic.pics/img/learn/
#picture #media #theme #бородач
#фишка дня
Как написать timeout на CSS?
Дед, ты упоролся?
Нет. Мне вот буквально вчера это понадобилось.
На дворе 2024 год и я пишу аккордеоны через CSS Grid и transition на grid-template-rows. Вот как-то так: https://codepen.io/alinaki/pen/bGZOprv
Естественно, так можно анимировать и горизонтально, но суть не в этом.
Суть в том, что мне, например, может понадобиться иметь выпадающее меню внутри аккордеона. Хотя почему, например — мне буквально это понадобилось.
Вот только эта техника предполагает, что у меня на контенте стоит overflow: hidden. Как-то неудобненько получается.
Я попробовал выставить слушатель на событие transitionend и выставлять класс is-overflow, но это превратилось в жонглирование статусами и в итоге перестало работать если на аккордионе начинают быстро кликать.
В голову приходит решение с :has. Если у нас имеется открытый дропдаун, можно выставить overflow: visible и красота.
Вот только поддержка всё ещё так себе, хоть мы и не так ограничены в браузерах.
Следующая идея — повесить transition на overflow с задержкий. Но и тут облом, overflow не анимируется.
К счастью, мы не ограничены одними только транзишенами! У нас же ещё и анимации по ключевым кадрам есть!
И тут мы вспоминаем, что keyframes на самом деле являются ни чем иным, как нативными миксинами. Поэтому... давайте уже просто сделаем:
.accordion-inner {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s linear;
overflow: hidden;
.accordion-item.is-active & {
grid-template-rows: 1fr;
animation: 0.6s delay-overflow linear;
overflow: visible;
}
}
@keyframes delay-overflow {
from {
overflow: hidden;
}
}
#канал дня
Итак, котаны, вы могли заметить, я довольно редко делаю различного рода квизы, не выкладываю мемы и вопросы с собеседований. Мне немного интереснее общая сторона вопроса, от фишек и базы до личного опыта.
Поэтому тем, кому хочется быть ближе к коду, могу рекомендовать канал моего знакомого — @code_ready
#статья дня
Что больше всего бесит в рекламе на сайтах? Почему каждый второй ставит адблоки и прочие ублоки?
Ну, как минимум, назойливость. Во всяком случае, это то, что бесит лично меня. Вторая причина — количество баннеров.
Тем не менее, без рекламы бесплатный веб практически невозможен. Да, кто-то особо гордый скажет: "Я зарабатываю деньги в реальном мире, а не в интернете", но мы его и не спрашивали.
Так, вся эта сопливая подводка к чему, в блоге Google Chrome вышла хорошая статья на тему оптимизации рекламных вставок. Встречайте: https://web.dev/articles/loading-ads-page-speed
Как и в каком порядке размещать баннеры и контент, когда применять и не применять ленивую загрузку, как обновлять вставки. По пути немного про LCP, CLS и асинхронную загрузку.
Если вас в принципе тошнит от самой мысли о рекламе, воспринимайте статью как практическое руководство по производительности сайтов и приложений. Полезно.
#ad #lcp #cls #performance #бородач
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: /channel/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool
Как получить реальный опыт во фронтенд-разработке за 7 дней?
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
#инструмент дня
Не так давно я писал о том, что при выборе анимаций для вашего проекта, неважно, сайт это или мобильное приложение, выбор есть из Rive и Lottie.
Конкретно по Rive был небольшой обзор: /channel/htmlshit/2094
Теперь давайте про Lottie. Что это такое?
Кто-то что-то нарисовал в After Effects Bodymovin, потом это экспортировали в специально сформированный JSON и, собственно, плеером-плагином запустили в огромном количестве сред, от веба до мобил и десктопов. Да, ваши любимые стикеры и реакции в Telegram тоже Lottie.
Чуете проблему? Нужен After Effects. Что дорого.
Точнее, нужен был. За прошедшее с обзорного поста время появилось как минимум два веб-решения:
1. Редактор Lottielab: https://www.lottielab.com/
Проект достаточно новый, но уже уважаемый сообществом и имеет весьма крупных клиентов.
2. Буквально сегодня свой редактор выкатил репозиторий Lottie-анимаций LottieFiles.
Называется он буквально Lottie Creator и предоставляет просто потрясающие возможности по анимации без использования After Effects. В наличии огромное количество бесплатных шаблонов.
Да, бесплатные тарифы ограничены, но прекрасно подходят для обучения.
В общем, интересный выбор.
#motion #lottie #animation
Ребят, уверен, среди вас точно есть программисты, которые бы хотели работать в MAANG и других крупных IT компаниях.
Андрей Кобец - 19 лет работает в коммерческой разработке, 8 из них - в крупной IT-компании. Он точно знает, как стать крепким Middle/Senior разработчиком.
8 февраля в 19:00 он проводит БЕСПЛАТНЫЙ вебинар. На нём он разберёт темы:
🔺Что такое база для программиста и как ее качать?
🔺Как легко перестраиваться на новый стек технологий?
🔺Как быть востребованным специалистом за которым охотятся HR крупных компаний?
Вся информация проверена им самим на практике. Ни капли воды, только конкретика и реальные кейсы👍
🎁А ещё до вебинара он подарит Roadmap "От Junior к Senior для Frontend разработчика" за регистрацию.
Реклама. ИП Кобец Д.Д. (ИНН 032620506600)
ERID 2VtzqxRZTvQ
#статья дня
Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?
Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!
Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:
Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/
И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/
Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.
Прекрасные инструменты, целый новый мир открывают.
#fonts #tools #бородач
#фишка дня
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html #бородач
Любишь читать техно-новости, но в каждом канале не посты, а одна вода? 💧
Тогда тебе точно понравится новый канал от двух программистов (Питон, если кому интересно 🙂). Они выпускают новости в кратком, легко-четаемом формате.
Подписывайся, чтобы раньше всех узнавать все самое главное, при этом не загружая голову лишними эпитетами 👌
Перейти в канал 📝
#такое дня
Давайте немного о жизни офисных крыс. Пятница, вечер. Почему бы и нет.
Как правило, я хожу ежедневно в офис, потому что мне не нравится работать из дома.
Точнее, не так. Я работал из дома 10 лет, надоело.
Но суть не в этом. В офисе, конечно же, есть кофемашины. Два автомата, наливающих фильтр-кофе, и две капсульные, Nespresso Vertuoline.
Офис-менеджер регулярно закупает новые капсулы, от эспрессо на 40 мл, до американо на 230 и тыквенного мексиканского на 350. Я предпочитаю делать капучино на эспрессо по утрам, но многие не парятся и просто берут капсулы на объём побольше.
Но что-то пошло не так и заказаны были только эспрессо и двойные эспрессо (40 и 80 мл). Любители американо и всякой отравы взвыли. Никто не хотел греть чайник, чтобы разбавить 80 до 230.
Надо было что-то делать, помимо срача в Slack.
Объём кофе абсолютно одинаковый, что в капсуле для эспрессо на 40, что на 230 мл. Отличаются лишь давление и объём воды.
При всём при этом, если пропустить одну капсулу дважды — получается ерунда.
Так вот, в кофемашинах Nespresso давление (точнее, капсула быстро раскручивается, чтобы это давление создать) и объём воды кодируются штрих-кодом на крышке капсулы.
Дело за малым — взломать штрих-код и подменить его на капсуле.
Взламывать, конечно, никто ничего не собирался.
Ведь есть Reddit, на котором была выложена статья с описанием структуры штрих-кода:
01111010010001001000010110100111100101000100100001011010011110010100100010001001101010111010010010001000010110101011100101000100100010011010