14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Как философ заработал состояние в $750 млн на знакомствах?
Дмитрий Волков — предприниматель из списка Forbes, инвестор, доктор философских наук, коллекционер и деятель современного искусства.
Он основал крупнейшую в мире группу компаний по созданию приложений для общения в digital — Social Discovery Group🔥 Ее миссия — решить проблему одиночества, изоляции и разъединения с помощью виртуальной реальности. В нее входит более 40 приложений, которыми пользуются уже более 250 млн пользователей по всему миру.
В своем телеграм-канале Дмитрий рассуждает о философии и будущих технологиях, а также делится особенностями образа жизни цифрового кочевника.
👉Подписывайтесь👈
и участвуйте в дискуссиях!
#реклама
#заметка дня
Что-то я оборзел, пять дней без постов. Зато вы не отписываетесь. Устроил себе длинные выходные.
Знаете, чего я ждал? Выхода Firefox 117, чтобы в очередной раз поворчать!
Итак, начиная этой версии Firefox поддерживает нативный CSS nesting aka вложенность. Да-да, как практически любой из препроцессоров. То есть:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
.awesome {
color: deeppink;
}
}
&.alt {
color: cyan;
}
}
.nesting {
color: hotpink;
& > .is {
color: rebeccapurple;
& .awesome {
color: deeppink;
}
}
&.alt {
color: cyan;
}
}
Ты IT-специалист, задумываешься о релокации, но боишься не найти работу?
На канале «Цифровые кочевники» 🧳 рассказываем, как путешествовать и работать, делимся полезными ссылками и опытом тех, кто уже релоцировался.
А ещё мониторим вакансии в разных странах, рассказываем о визах и помогаем с бытовыми вопросами.
Подписывайся! 👉@digitalnomadsdv 👈
#реклама
#библиотека дня
А что если бы был такой UI-фреймворк, чтобы можно было запилить браузерку про космос и прочий киберпанк?
Оказывается, такое есть! Называется Arwes: https://arwes.dev/
Выглядит очень круто. У меня ассоциируется с чем-то из начала нулевых, но в хорошем смысле. Просто все ассоциации оттуда: StarCraft, Warfare Inc., Homeworld...
Учитывая, что во многих, даже AAA, играх интерфейс управления рисуется с помощью веб-технологий, создатели Arwes совсем не впустую работают 🙂
Страница примеров всё ещё в разработке, зато их песочница вполне себе доступна и очень крута: https://arwes.dev/play
Крайне рекомендую прокликать, вдохновляет.
#react #ui #future #games
#баг дня
Этот баг довольно сложно сходу осознать, если вёрстка для тебя всё ещё магия.
Итак: в Chrome не поддерживаются такие правила для clip-path как: margin-box, border-box, padding-box и content-box. В Firefox и Safari всё ок. Пример: https://codepen.io/thebabydino/pen/yLGyBrw
Ссылка на трекер: https://chromium-review.googlesource.com/c/chromium/src/+/4784067
Баг исправлен, но задерживается из-за рефакторинга. И сейчас в состоянии конфликта слияния.
А теперь по-русски 🙂
В потоке, размер элементов можно считать по-разному. Элементы можно представить как вложенные прямоугольники: отступы — margin, границы — border, поля — padding и содержимое — content — которое будет ограничено или типографически, или такими же прямоугольниками.
Потом начинается веселье со схлопывающимися отступами или же включением границ в размеры объекта (box-sizing)...
Зачем вам может понадобиться подобное — я не знаю. Но CSS-художникам это очень и очень мешает 🙂
Впрочем, исправление не за горами.
#clippath #css
#библиотека дня
Мой ТВ-пульт на Flutter уже, в принципе, умеет всё то, что необходимо мне. Так что скоро ждите обновлений в постах!
Но, как обычно, после проделывания 80% работы, остаётся ещё 80%. Это простая математика.
Вот частью этой работы, да и на самом деле просто чтобы научиться в анимации, является имитация перегруппировки иконок приложений с iOS. Ну, знаете, когда долго жмёшь на рабочий стол, иконки начинают дрожать, можно удалять или перетаскивать.
Пробежавшись по библиотекам анимаций во Flutter я обнаружил, что некоторые из них не стесняются просто брать и копировать CSS-наборы. А почему нет?
И вот вашему вниманию один из таких наборов: CSShake.
https://elrumordelaluz.github.io/csshake/
И копирующий его пакет Flutter: https://pub.dev/packages/flutter_shake_animated
Не совсем то, что мне нужно, разве что API подсмотреть. Но, может, кому-нибудь такой угар пригодится 😝
#css #animation
Каждый работодатель желает знать, чего хотят IT-специалисты. Расскажите о своих карьерных предпочтениях и повлияйте на создание крутых предложений в IT от топовых компаний.
Пройдите опрос, если Вы:
— проживаете в любом городе России;
— работаете в IT.
Расскажите, что важно именно Вам, и заберите гарантированные подарки:
— промокод на сумму до 2500 рублей на уроки английского в Skyeng;
— промокод на 15 000 рублей на самый полный курс по аналитике на рынке «Аналитик PRO» от школы Changellenge >> Education.
Участвуйте в опросе и меняйте индустрию вместе с нами: https://clck.ru/35Ke7V
#реклама
#фишка дня
Тут оказалось, что в Chrome DevTools встроен редактор кривых Безье для переходов aka transition!
Можно добавить точку, перетащить её и сразу посмотреть результат. Ну или выбрать из готового набора: linear, elastic, bounce, emphasized.
А в версии 116 добавят линейные функции переходов, linear(), о которых нам ещё только предстоит поговорить: https://developer.chrome.com/articles/css-linear-easing-function/
#devtools #css #linear #curve
#codepen дня
Устроим перепись олдов на канале? Кто ЛогоМиры помнит?
Мой путь в программирование точно с них начинался. Ещё с Муравья, но он был гораздо сложнее.
Кэсси Эванс придумала, что ЛогоМиры забавно ложатся на правила отрисовки SVG-кривых и сообразила сегодняшний кодпен дня.
Так что если вам интересно, как происходит отрисовка SVG — а на самом деле, там реально очень всё похоже на команды той самой черепашки — милости просим: https://codepen.io/cassie-codes/pen/ZEvNBmX
#svg #logo #бородач
Ищете работу frontend-разработчиком, но боитесь, что вам не хватит опыта и вы провалите собеседование?
Приходите на открытое собеседование на позицию junior+ frontend-разработчика в прямом эфире 16 августа в 19.00.
На собеседовании будут вопросы по HTML, CSS, JS и будут даны пару задач на решение. Вы увидите, как проводятся настоящие собеседования, поймёте, к чему нужно быть готовым, а в конце сможете задать вопросы и получить рекомендации.
Ведущие:
▪️Дмитрий Безуглый, CTO Frogly, работал Frontend Team Lead VK и нанимал разработчиков в VK.
▪️Артур Стамбульцян, Frontend Team Lead Telegram Open Network.
Перестаньте бояться собеседований
и узнайте, как проходить их лучше!
[Зарегистрироваться]
НОВЫЙ БОТ, который поможет тебе наконец-то разобраться в геймдеве
Тоже думаешь, что нужно знать языки программирования, чтобы создавать игры и зарабатывать на них?
Нет! Предлагаю перейти в бота от Евгения Гришакова, основателя студии Garden of Dreams, оборот его компании за 2022 год достиг почти 1 000 000 $.
Хочешь также?
Регистрируйся на РАЗБОР ИГР, который пройдет уже в этот вторник в 19:00 на моем Youtube-канале
Ты сможешь отправить свою игру на разбор, а также посмотреть на игры других и понять, КАК ЗАРАБАТЫВАТЬ на геймдеве в 2023 году.
А еще за регистрацию ты получаешь ИГРУ В ПОДАРОК
🔥 Скорее переходи в БОТА и регистрируйся на ближайший разбор - 15 августа в 19:00
#заметка дня
Что-то по Твиттеру опять пронеслась война тех, кто считает, что надо максимально ограничивать кандидату доступ информации во время собеседования, не пускать его в поиск Google, запрещать спрашивать у ChatGPT, не давать документацию и так далее. И тех, кто, в общем-то, считает наоборот.
Я пока не видел хороших и правильных примеров использования ChatGPT, если честно. Единственный известный мне случай подобного поведения кандидата вызывает нервный смех, потому что ему стоило честно сказать: "Не знаю". Он буквально понятия не имел даже как задать вопрос правильно, но с каменным лицом доказывал, что так и надо. Наверное, получился бы хороший продажник.
С документацией всё просто: естественно, надо разрешать доступ. Да даже в университетах разрешают пользоваться конспектами и справочниками. Ну, в нормальных...
Google... ситуация похожа на ChatGPT. Нужно внимательно смотреть, что и как человек гуглит. Как конкретно он формирует запрос и какие ссылки открывает.
Я лично нанимал фронта, который не стеснялся гуглить во время собеседования. Прям стримил экран и искал. Где-то для выжимки из доки, где-то чтобы посмотреть альтернативы алгоритму.
А потом чтобы показать скриншоты своего проекта, который был закрыт пейволлом!
А вот того, кто во время собеседования гуглил меня, мы не взяли...
А как у вас дела обстоят и опыт?
#work #interview #собеседование
#инструмент дня
Tailwind CSS при всех своих спорных моментах понравился многим людям. Кто-то не парится и пишет все атомы в классы, кто-то берёт компонентный подход и собирает компоненты на базе его DSL (domain-specific language), чтобы потом скомпилировать их в чистый CSS. Но, оказывается, есть и альтернативный подход: panda.
Что такое Panda CSS? Это CSS-in-JS движок, который собирает человекочитаемые атрибуты или пропсы компонентов в атомарный CSS-файл. Да, в файл, который создаётся в момент сборки, не в рантайме!
Есть три варианта описания стилей, мне больше всех импонирует компонентный подход, с пропсами.
В общем, такой атомарный CSS мы покупаем.
#css #react #cssinjs
🔥 Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 15 августа.
#презентация дня
Раз уж я упомянул не так давно и Scroll-driven Animations и View Transitions API в одном сообщении, надо идти дальше.
Хорошо уже нам известный товарищ Ван Дамм, который Брамус, собрал всё в кучу. Он давно оседлал тематику скроллозависимых анимаций и теперь, с выходом Chrome 115, пушит максимально.
Итак, встречайте: Scroll-Driven Animations and View Transitions (2023.06.09 @ CSS Day)
Ну и сразу ссылку на видео: https://youtu.be/nFbuXdEU-oA
#css #scroll #view #transition
#инструмент дня
Я когда готовил пример для поста про View Transition API, обратил внимание, как написан один из CodePen'ов, на которые я опирался. Конкретно, вот этот: https://codepen.io/argyleink/pen/GRPRJyM
Что же с ним не так? Да вроде всё так, но он импортирует нечто под названием open-props и потом использует какие-то переменные в коде...
Итак, оказалось, это — прости, господи — субатомные стили под названием Open Props: https://open-props.style/
Как можно догадаться, названы они так в пику атомным стилям типа Tailwind CSS, Assembler CSS, Tachyons или Windi CSS. Или любой другой попытке бакендеров сделать свой UI-кит.
Вот только вышеописанные наборы оперируют классами, а Open Props — переменными. Они предлагают интересный набор из цветов, размерностей, анимаций, теней и даже градиентов. Особенно меня порадовали типографические шлюзы aka clamp (Fluid sizes в терминологии фреймворка).
Получается что-то такое:
.card {
border-radius: var(--radius-2);
padding: var(--size-fluid-3);
box-shadow: var(--shadow-2);
&:hover {
box-shadow: var(--shadow-3);
}
@media (--motionOK) {
animation: var(--animation-fade-in);
}
}
#статья дня
Итак, ты решил анимировать скрытие элемента aka display: none...
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all 2s linear;
display: block;
}
.hidden {
display: none;
opacity: 0;
}
display: none не анимируется.@starting-style для описания поведения элемента при вставке в DOM.
#фишка дня
Хотите самый простой способ анимирования появления/исчезания элементов? Их есть у меня!
Правда, как всегда, пока только в Chrome. Но требующиеся изменения настолько мелкие, что это вообще неважно.
Итак, встречайте: View Transitions API. Вот даже ссылочка на MDN: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
1. Задали имя вашего слоя: style="view-transition-name: unique-name"
2. Вынесли добавление HTML в отдельную функцию aka mutate()
3. Вызвали её коллбеком в document.startViewTransition(() => mutate())
4. ...
5. Вы прекрасны!
Вот накидал вам быстрый пример: https://codepen.io/alinaki/pen/VwqLpvX
Основан на вот этих двух: раз и два.
Самое классное, оно просто работает как работало во всех остальных браузерах, потому что никакой дополнительной обработки нод не требуется. Да, есть забавные баги, но это временно.
Но, если честно, от чтения полного описания API у меня слегка заболела голова, поэтому чуть более сложные примеры последуют позже.
#css #view #transition
93% кодеров-новичков так и не начинают брать прибыльные проекты. А потом уходят из IT.
Если вы – что-то между 0 и джуном, добро пожаловать в Форматный код.
Автор на личном примере поясняет за плохой опыт, интересные проекты и негласные правила любого кодера.
Теперь ты не залипаешь, а учишься в тг: @format_code
#реклама
Ищем желающих попробовать себя на бесплатном интенсиве по frontend-разработке от METHED.
С 21 по 24 августа при помощи HTML, CSS и JavaScript мы вместе напишем сайт, на котором сможем найти идеальную вакансию для работы своей мечты.
Интенсив бесплатный, но количество мест ограничено! Осталось 27 мест.
Переходите по ссылке и присоединяйтесь к нам: https://in.methed.ru/md/ed3ae18ad7d299a48156da96ea053ae3?utm_source=telegram&utm_medium=july_freshy_bar&utm_campaign=htmlshit
#такое дня
Я сделяль!
Не в первый раз, впрочем :) Пять лет назад в Хуахине: /channel/htmlshit/106
О том, что буквы должны были выйти за пределы брелка, говорят не только лишь все...
#статья дня
В период пандемии средства для совместной работы пережили самый настоящий бум. Особенно взлетели видеоконференции и вайтборды (ну, доски с заметками, только онлайн). Успех того же Miro известен всем.
И вот Atlassian, которая имеет в своем арсенале почти все необходимое для организации проектной работы, тоже захотела удержать людей у себя, повысив привлекательность пакета. И выпустила Confluence whiteboards.
Но нас все же интересует не бизнес сторона вопроса, а технологические решения.
И тут нам очень повезло! Они выкатили в своем технологе огромную статью с описанием технических решений своей доски. Упор делали на производительность, потому остановились в итоге на чистом WebGL. Но вот что интересно: React+DOM не то чтобы критично медленнее, вполне себе конкурентноспособно.
В общем, это мы читаем: https://www.atlassian.com/engineering/rendering-like-butter-a-confluence-whiteboards-story
В статье полно ссылок на открытые проекты и концепции вообще. Крайне рекомендую.
#webgl #whiteboard
Хотите работать удалённо? Профессия веб-разработчика позволит вам стать фрилансером или устроиться в компанию и писать код из любой точки мира. Присоединяйтесь к мини-курсу, где вы сможете примерить на себя типовые задачи frontend- и backend-разработчиков и с нуля создать 3 проекта: сайт, приложение и сервис.
Регистрируйтесь: https://epic.st/E-abW
Вы научитесь:
— создавать веб-страницы, используя язык разметки HTML и технологию CSS;
— реализовывать серверную часть (backend) веб-приложений на языке PHP;
— работать с базой данных MySQL при помощи языка запросов SQL;
— создавать приложения на языке программирования JavaScript;
— размещать сайты в интернете.
Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах.
Подарки:
— Сертификат на скидку 10 000 рублей на любой курс.
— Доступ к изучению английского языка на год.
— 5 полезных подборок материала
— Персональная карьерная консультация
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#история дня
27 лет назад вышел Internet Explorer 3.0.
13 августа 1996 года появилась версия для Windows, а 8 января 1997 — для Mac OS (да-да, она тогда не macOS называлась). Было же время...
Что же такого в нём примечательного?
Ну, помимо того, что это первый IE с легендарной вселяющей ужас во всех верстальщиков иконкой, это ещё и первый браузер вообще с поддержкой CSS.
В то время CSS использовался чтобы помечать посещенные ссылки фиолетовым.
Эта самая поддержка была даже по тем скромным меркам неполной. Microsoft, впрочем, надолго решила продолжать в том же духе.
А ещё была своя реализация JavaScript: JScript. И предлагалась поддержка VBScript... я свой первый веб-проект на нём писал, не особенно содрогаясь.
Работал браузер на 386 с Windows 3.1, требовал от 4 MB оперативной памяти, 12 MB — если хотелось Java 🤯
Посмотреть скриншоты и видео можно в музее веб-дизайна: https://www.webdesignmuseum.org/old-software/web-browsers/internet-explorer-3-0
Взгрустнулось, котаны? 😅
#css #ie #history
#такое дня
Когда-то давным давно, во времена первых браузеров и изобретения JavaScript, кто-то подумал, что было бы неплохо получать доступ к элементам в глобальном пространстве имён. Речь идёт в том числе об атрибуте name для ссылок.
Вам все знакомы якоря вида #cheatsheet в адресной строке браузера. Да-да, хештеги не взялись из ниоткуда.
Так вот, пока браузеры пытались договориться (не пытались), что же должно быть индикатором доступа, name или id, вышло так, что IE сделал элементы с id свойствами не только объекта document, но и объекта window. А остальные, естественно, скопировали.
Что это значит? А то, что если вы добавили id элементу, то этот стал доступен как переменная в глобальном пространстве ваших скриптов. Без объявления! Буквально вот так: https://codepen.io/alinaki/pen/zYLJVZN
Если кому интересно подробнее почитать, что куда и как попадает, спецификация ответит на этот вопрос: https://html.spec.whatwg.org/multipage/dom.html#dom-tree-accessors
Но если коротко: не надо это использовать если вы не на хакатоне. Приведёт к таким спагетти, что мало не покажется.
А вот знать надо.
#js #dom #node #бородач
#инструмент дня
Что делать, если нужно срочно проверить какую-то гипотезу или сгенерировать набор строк, покадровую анимацию или что-нибудь ещё в таком духе?
Конечно же, открыть текстовый редактор и терминал, написать код на любимом языке и выполнить его в терминале любимой средой.
Например, что-то пошло не так и ваш любимый язык — JavaScript. Написали, выполнили node index.js и радуетесь выводу.
Впрочем, есть и другие варианты. Консоль браузера, codepen.io, codesandbox.io, jsfiddle.com... Но давайте что-то локальное.
Первый вариант: RunJS (на видео). Бесплатная версия вполне достаточна чтобы играть роль бесконечной удобной консоли. Платная добавляет работу с npm, вкладки, автодополнение, переменные среды и проверку типов.
Второй вариант: расширение CodeRunner для VS Code. В отличие от RunJS поддерживает большое количество языков и встраивается прямо в редактор.
Всем удачной проверки гипотез, котаны!
#js #runtime #coderunner
Отправляемся в за тридевять земель на поиски DevOps-Змея 🐉
11 сентября дружной командой отважных разработчиков на 2 месяца отправляемся в логово Змея 🦴
Вместо голов у него 13 страшных инструментов девопса: Vagrant, Terraform, Ansible, Docker, Gitlab CI, Jenkins, Nginx, Kubernetes, Prometheus, Grafana, Loki, Jaeger и SonarQube. А вместо хвостов — разные технологии и решения.
Задача этого путешествия сложна, но выполнима — разобраться со Змеем и пронести несколько сервисов приложения через все интеграции до успешного деплоя.
Что мы встретим на пути:
🧭 29 видеоуроков;
🧭 14 часов практики;
🧭 7 этапов интеграции кода;
🧭 3 месяца поддержки от богатырей;
🧭 и все материалы о путешествии останутся у вас на 2 года.
Ну что, разработчик, готов отправиться в путь?
Все о путешествии здесь 🗺
#реклама
#такое дня
Это дежурное напоминание о том, что если доступность вашего сайта зависит от геополитической ситуации в мире — вы что-то делаете не так.
Например, мне бы в голову не пришло выбрать домен в зоне .AF — Афганистан. А вот паре грандов в мире фронтенда, Вес Босу и Джейсону Ленсторфу так не показалось.
И этот день настал: регистраторы доменов не могут связаться с лицами, ответственными за доменную зону .AF.
Бизнес обоих зависел от сайтов, веселье! Зато крутая доменная зона, ага.
Думайте, котаны, где регистрируете проекты.
#фишка дня
Так, котаны мои хорошие, чтобы начать процедуру отладки, например, по клику на элементе, вам вообще не надо идти в Elements 👉 Event listeners, искать там click, искать нужный файл, или, ещё хуже, сразу начинать ковыряться в коде... Сейчас всё расскажу.
Открываем девтулзы, ползём в Sources, открываем в сайдбаре справа раздел Event Listener Breakpoints и выбираем событие click в ветке Mouse. Всё, вы прекрасны, все довольны.
Пользуемся 💝️️️️️️
#devtools #debug
Битрикс-разработчиков не хватает! Работодатели готовы брать даже стажеров!
Пока джуны по другим видам разработки бесконечно рассылают резюме и ждут оффера, новички в Битрикс находят работу за пару недель!
Почему 1С-Битрикс?
1. Востребованность. 2600 вакансий Bitrix-разработчиков по данным hh,ru в июле 2023.
2. Трудоустройство. Легко найти работу. Потребность в специалистах есть у нашей компании и в IT-компаниях партнеров.
3. Быстрый поиск первой работы. Bitrix Framework — одной из самых популярных CMS в России и спрос на специалистов только растет.
4. Фокус на разработке. Не обязательно знать английский язык.
5. Надежность. 1С-Битрикс на СНГ рынке существует давно - это простая и удобная в работе, постоянно развивающаяся система с низким уровнем конкуренции среди разработчиков.
6. Высокий доход. +100 000 руб. средняя зарплата junior-разработчика "1C-Битрикс" в РФ.
Не знаешь, что это и как начать? Не проблема!
Регистрируйся на бесплатный вебинар, где всё разложим по полочкам: https://live.webest.ru/
