Обложка канала

Frontend по-флотски 👨‍💻. Страница 2

1075 @frontend_pasta
Открыть

Новости и факты о разработке интерфейсов в неформальном стиле

  • Frontend по-флотски 👨‍💻

    HTMX и HTML Driven Development Эта практика - одна из разновидностей серверного рендеринга htmx — это инструмент, который позволяет разрабатывать сложные и интерактивные веб-приложения на базе HTML, предлагая альтернативу клиентскому рендерингу на JS. Ключевое отличие от современных SSR инструментов, в том, что ответ от сервера приходит всегда в HTML, а не в JSON, зачёт этого приложения работают быстрее Подробнее про HTML Driven Development Смотреть короткое видео про htmx
    Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода

    htmx — инструмент для создания сложных и интерактивных веб-приложений на HTML, альтернатива клиентскому рендерингу на Javascript. В этой статье рассказываем, как библиотека помогает переиспользовать...

    Хабр

  • Frontend по-флотски 👨‍💻

    Новые единицы измерения в CSS 🛁 Сегодня я тебя познакомлю с новыми единицами измерения созданные специально для контейнеров, они задают длину относительно его размеров 
    cqw
    Представляет собой процент от ширины контейнера. 1cqw - это 1% от его ширины. Например, если ширина контейнера составляет 800px, то значение 50cqw для свойства будет равно 400px. 
    cqh
    То же самое, что и cqw, только относительно высоты контейнера 
    cqi
    Представляет собой процент от inline-size контейнера. 1cqi - это 1% от inline-size контейнера. Например, если inline-size контейнера составляет 800px, то значение 50cqi для свойства будет равно 400px. 
    cqb
    То же самое, что и cqi, только от block-size 
    cqmin
    Наименьшее между cqi и cqb 
    cqmax
    Наибольшее между cqi и cqb

  • Frontend по-флотски 👨‍💻

    ❓Хотите начать разрабатывать смарт-контракты? Начните с бесплатного урока - присоединяйтесь 13 июля в 20:00 мск к вебинару OTUS и создайте свой первый смарт-контракт! 👨‍🎓В рамках онлайн-курса «Solidity Developer» пройдет открытый урок «Введение в смарт-контракты». Вместе с экспертом мы сначала разберем, как развивались смарт-контракты, а затем перейдем от теории к практике — разработаем смарт-контракт. 🚩На вебинаре мы: - Погрузимся в увлекательную историю смарт-контрактов, иллюстрируя их зарождение и развитие до сегодняшнего дня - Рассмотрим области применения смарт-контрактов, представив реальные примеры их использования в различных сферах - Создадим и задеплоим наш первый смарт-контракт с помощью онлайн-инструмента Remix IDE - Обсудим известные случаи взлома смарт-контрактов, рассмотрим основные уязвимости и способы их устранения. 🔥После вебинара вы сможете продолжить обучение на курсе, доступном в рассрочку. ✔️Для участия зарегистрируйтесь https://otus.pw/GxXk/ Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. 2RanykkkR4k

  • Реклама

  • Frontend по-флотски 👨‍💻

    Михаил Трифонов — Друг или враг? Искусственный интеллект во фронтенд-разработке

    Ближайшая конференция: HolyJS 2023 Autumn, 2–3 ноября (online), 11–12 ноября (offline, Санкт-Петербург) Подробности и билеты: https://cutt.ly/Fwtp1eqJ — — За последний год ИИ очень сильно развился. Таким технологиям, как ChatGPT, GitHub Copilot, Midjourney и RuGPT-3, пророчат заменить разработчиков. В докладе будут затронуты вопросы: — Правда ли заменят? — Могут ли заменить уже сейчас? — Можно ли объединиться с ИИ и приобрести суперсилу? — Решить ли реальную задачу с помощью ИИ?

    YouTube

  • Frontend по-флотски 👨‍💻

    🎉 С Днём Рождения, дорогая макароннинка! 🎂 Сегодня каналу Frontend по-флотски 2 года! И я от всего сердца поздравляю тебя с этим особенным днём! 🍝🖥 Я хочу поблагодарить тебя за твоё доверие и веру. За прошедший год мы вместе с тобой исследовали безграничный мир фронтенд-разработки, узнавали новые технологии и погружались во все аспекты веба. Я хочу пожелать тебе постоянного роста и развития в разработке. Пусть твои проекты всегда будут успешными и инновационными. Пусть твоя страсть к коду никогда не угасает, а каждый день приносит новые возможности и достижения. Спасибо, что ты со мной, и позволяешь быть твоим надежным проводником в мире фронтенда. Я с нетерпением жду продолжения и новых встреч, и буду продолжать готовить для тебя самый сочный и аппетитный фронтенд, но по-флотски 😎

  • Frontend по-флотски 👨‍💻

    Анонсируем Dart 3

    Эта статья — перевод оригинальной статьи " Announcing Dart 3 ". Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов. Вступление...

    Хабр

  • Frontend по-флотски 👨‍💻

    Как сделать Ambilight эффект? 🧑‍🎓 Недавно заметил, что YouTube добавил этот эффект в тёмной версии на вебе, выглядит прям сочненько Вот небольшой код-сниппет: 
    ctx = canvas.getContext('2d');

video.addEventListener('play', () => {
    video.currentTime = 0;
    timerID = setInterval(() => {
      ctx.drawImage(video, 0, 0, 600, 460)
    }, 30);
});
    Сколько же ещё крутых и простых вещей можно сделать с помощью канваса в современном мире 😍 CodePen Demo

  • Frontend по-флотски 👨‍💻

    The future of responsive design - Una Kravets, Adam Argyle (Config 2023)

    Speakers: Una Kravets – Developer Relations Engineer, Google Adam Argyle – CSS Developer Relations Engineer, Google Everything you know about responsive design is changing. With new entry points for user-centered inputs, component-based responsive capabilities, and more functional theming systems, responsive design is no longer limited to the size of your user's screen. In this talk, learn about new landings in the Web UI ecosystem and how to leverage them to build robust and personalized digital experiences. Please visit https://config.figma.com/video-on-demand/6329934272112 to view ASL version of this Config 2023 session. Figma is free to use. Sign up here: https://bit.ly/3msp0OV ____________________________________________________ Find us on ⬇️ Twitter: https://twitter.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

    YouTube

  • Frontend по-флотски 👨‍💻

    WebStorm 2023.2 появился в Early Access Program 🔥 Что нового? — ИИ ассистент (чат и генератор коммитов) — Улучшено форматирование ошибок типов TypeScript — Поддержка CSS Nesting — Возможность коммитить определенные строки кода — Подсказки для JSON данных в JavaScript — Поддержка импорта JavaScript в файлах .http — Предварительный просмотр PDF и HTML для ответов в HTTP-клиенте — Поддержка редактирования файлов AsyncAPI — Пара фич для Докера — Поддержка Emmet для Preact и SolidJS Фулл тут

  • Frontend по-флотски 👨‍💻

    Мы в HITECHWOOD вдохновляемся примерами лучших мировых «сетапов» - рабочих мест, являющихся оазисами красоты и комфорта, а также оборудованных по последнему слову техники. Это рабочие места, которыми хочется хвастаться. Красивый деревянный стол, полочки с цветами в стильных горшках, множество аксессуаров, которые интересно рассматривать. За таким столом и работается лучше. Вспомните свои ощущения, когда вы едите из одноразовой посуды пластиковой вилкой и из красивых тарелок дорогими приборами. Одна и та же еда имеет разный вкус, не так ли? HITECHWOOD производит умные деревянные столы, которые послужат идеальной основой для вашего уникального сетапа. Мы встроим прямо в ваш стол розетки 220V и USB, беспроводную зарядку и wi-fi «Умный дом». Подписывайтесь на нас: https://vk.com/hitech.wood https://instagram.com/hitech.wood Мы вдохновляем на красивую работу!

  • Frontend по-флотски 👨‍💻

    Розыгрыш скидки в 25% на HolyJS 🥳 Организаторы дали мне личную скидку, но я не смогу присутствовать на мероприятии (даже онлайн), поэтому я решил отдать её кому-нибудь из вас, чего добру пропадать Тыкай "Участвовать" и 30го апреля узнаешь результат ❤️

  • Frontend по-флотски 👨‍💻

    CSS свойство display с несколькими значениями 🧑‍🎓 Скоро в Chrome Canary появится возможность указывать display с несколькими значениями, но это не какая-то новая лайфченжинг фича, а всего лишь более очевидная форма свойства display, что я имею ввиду? Например, у нас есть свойство значение inline-flex, по новому это будет inline flex, небольшая разница, правда же? Но подобные дополнения будут для каждого из значений, вот значение flex будет block flex, просто block станет block flow, а list-item будет block flow list-item Спецификацию мона глянуть тут P.S. предыдущие значения не исчезнут, а будут работать как сокращения

  • Frontend по-флотски 👨‍💻

    Фичи WebKit в Safari 16.4 🧑‍🎓 Очень долго переводил статью, команда webkit выпустила по настоящему большое обновление 🥳 https://habr.com/ru/articles/730998/
    Фичи WebKit в Safari 16.4

    Эта статья — перевод оригинальной статьи « WebKit Features in Safari 16.4 » Также я веду телеграм канал « Frontend по‑флотски », где рассказываю про интересные вещи из мира разработки...

    Хабр

  • Frontend по-флотски 👨‍💻

    HolyJS — конференция для всех, кто пишет на JS 👨‍💻 В программе технические доклады от спикеров из топовых компаний, личный опыт, боль, практика и много кода Поговорим про ИИ во фронтенд-разработке, разберемся в устройстве плееров анимаций на примере lottie-web, обсудим, почему Playwright лучше Jest — и это только малая часть программы. Будут и более софт-скилловые доклады, например, про апгрейд карьеры, а также круглые столы и дискуссии. Ты можешь пообщаться с коллегами из разных компаний, увидеть новые лица JS-мира, а в офлайне поиграть в старую-добрую JS-игру: ищи в словаре случайное слово, гугли, есть ли JS-библиотека с таким названием. Если есть, пьёшь пиво :) Если билет тебе оплачивает работодатель, то отправь ему эту ссылку Если идёшь за свой счет, то ищи билеты здесь, по промокоду FRONTENDPASTA они будут дешевле

  • Frontend по-флотски 👨‍💻

    Яндекс.Браузер научился переводить китайский язык в видео 😑 На радостях я решил потестить эту функцию, к сожалению, получается очень плохо, но посмеялся от души 😂 Видео на котором тестил Анонс Яндекса

  • Реклама

  • Frontend по-флотски 👨‍💻

    zoom - CSS: Cascading Style Sheets | MDN

    The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

    developer.mozilla.org

  • Frontend по-флотски 👨‍💻

    Клетчатый бэкграунд в две строчки CSS Может когда-нибудь пригодится, помянешь меня хорошим словом ☺️ body { background-image: linear-gradient(#444444 1px, transparent 1px), linear-gradient(to right, #444444 1px, white 1px); background-size: 22px 22px; }

  • Frontend по-флотски 👨‍💻

    Задумывались ли вы когда-нибудь, что отличает веб-разработчика от обычного кодера? ✅ Умение анализировать задачу и правильно выделять подзадачи; ✅ Использование формул и алгоритмов, где это необходимо; ✅ Понимание паттернов программирования и интеграция в проект сторонних библиотек. Все это и многое другое на программе обучения "Веб-разработчик с нуля". Курс изначально создавался для повышения квалификации ИТ-команд среднего и крупного бизнеса, имеет положительные отзывы и прошел проверку временем. Автор курса — веб-разработчик и ведущий преподаватель-исследователь, с опытом в ИТ-образовании более 7 лет. Курс обновляется несколько раз в месяц, все обновления полностью бесплатны для наших слушателей. О каждом обновлении мы подробно рассказываем в Телеграм канале. Узнать подробнее о программе обучения можно у Телеграм бота. Первые 2 самых быстрых слушателя получат скидку 25% на Базовый тариф по промо коду: PR_CODE_BASIC 🎁 Активировать код и оставить заявку на обучение поможет наш Телеграм бот