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

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

1075 @frontend_pasta
Открыть

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

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

    Как через девтулзы хрома эмулировать предпочитаемые настройки пользователя 😌 Видео идёт 4 минуты, не поленись глянуть, это поможет стать твоему вебу более доступным для пользователя https://youtu.be/gOkM1L6azEI
    How to emulate CSS user preference media features | DevTools Tips

    You can use DevTools to emulate user preferences like device orientation, light/dark themes, color contrast, reduced motion and more. DevTools is your best friend in building user adaptive interfaces. Learn now on today’s episode of DevTools Tips with Adam Argyle and Jecelyn Yeen. Chapters: 0:00 - Intro 0:24 - What are user preference media features 1:13 - Why do we need DevTools? 1:34 - Simulate mobile devices with Device Mode and Sensors tab 1:44 - Render CSS media features with the Rendering tab 1:57 - Emulate light and dark themes 2:13 - Shortcuts to emulate light and dark themes 2:39 - Emulate reduced motion 2:53 - Emulate contrast preferences 3:00 - Emulate forced color preferences 3:08 - Emulate reduced data preferences 3:17 - Why build user adaptive interfaces 3:29 - Emulate user preferences with Run Command 3:44 - Learn more Links: New responsive → https://web.dev/new-responsive/ Emulate CSS media features with DevTools → https://goo.gle/devtools-emulate-css Simulate mobile devices with Device Mode → https://developer.chrome.com/docs/devtools/device-mode/ Emulate location and device orientation with Sensors tab → https://developer.chrome.com/docs/devtools/#sensors Workshop: Build user-adaptive interfaces → https://youtu.be/865olcAfwFg Catch more DevTools Tips → https://goo.gle/DevToolsTips Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs #DevToolsTips #Chrome #Developer

    YouTube

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

    Как создать и развернуть библиотеку компонентов Vue в NPM 😉 https://habr.com/ru/post/678274/ #translate
    Как создать и развернуть библиотеку компонентов Vue в NPM

    Эта статья — перевод оригинальной статьи Adesoji Temitope " How to Create and Deploy a Vue Component Library to NPM " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про...

    Хабр

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

    Делюсь своей работой — нужна ваша помощь ⚡️ Мы делаем крипто-портфолио трекер и идём на Product Hunt. Это такая социальная сеть для стартапов и инвесторов Силиконовой Долины. Раз Moni — стартап, то выход на Product Hunt нужен эффектный. Для этого важно получить много фидбека о продукте. Нужно зарейдить Product Hunt. Чтобы помочь, переходи на сайт https://www.producthunt.com/posts/moni-3 и оставляй отзыв о продукте и поставь Upvote 💜 Чтобы попробовать портфолио трекер, переходи по ссылке. Подключай кошелек по адресу или ENS домену и отслеживай активы. А за мобильным приложением идти сюда.

  • Реклама

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

    Топ-оффер: Работаем в Яндексе 🔥 #topoffer JS/TypeScript React Dev в Яндекс.Плюc Middle, Senior до 350 000 руб. на руки Полный рабочий день 💬 Мы пишем на TypeScript, используем React, GraphQL (Apollo Client), немного Redux, Node.js для серверного кода. Постоянно ищем способы повысить скорость и надёжность приложений; ✅ Дорабатывать SPA-приложения, расширять функциональность; проектировать кастомизируемые виджеты. Подробнее... JS React+Next.js Dev в Яндекс.Музыку Middle, Senior до 350 000 руб. на руки Полный рабочий день 😄 Предстоит ускорять работу интерфейса и разрабатывать новые функции; применять новые технологии для мобильного сайта Музыки; развивать процессы сборки, тестирования и выкатки инфраструктурных решений. ⚔️ Результатами нашей работы ежедневно пользуются миллионы людей, поэтому особое внимание мы уделяем производительности и стабильности нашего сайта. Сейчас мы пересматриваем процессы CI и workflow. Если вас не пугает легаси и в душе вы новатор, присоединяйтесь к нашей команде! Подробнее... JS/TypeScript Redux Dev в Яндекс Go Middle, Senior до 350 000 руб. на руки Полный рабочий день 💎 Сильная команда, миллионы пользователей, сложные задачи, премии и расширенная программа ДМС, оплата 80% стоимости ДМС для супругов и детей. 🎯 Разрабатывать инфраструктуру и веб-интерфейсы; разрабатывать клиентскую логику на JS; визуализировать данные, заниматься дизайном и вёрсткой. Подробнее... Посмотреть ещё 124 вакансии 🤖 При поддержке чат-бота Masterhub

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

    Media Queries Level 4 Syntax & Evaluation - Chrome Platform Status

    Allows writing media queries using ordinary mathematical comparison operators, and adds support for 'or', 'not', nesting, and evaluation of "unknown" features.

    Chromestatus

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

    ViteConf — что-то новенькое 🔥 Тема: веб-разработка Дата: 11-12 октября Цена: вроде пока бесплатно по предварительной регистрации Язык: английский Формат: онлайн https://viteconf.org/

    A free online conference about Vite and the projects reimagining Web Development, brought to you by StackBlitz

    viteconf.org

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

    tsParticles: частицы, конфетти и салюты для твоего вебсайтика 🎊 🎉 Хочешь разнообразить свой сайт добив классной анимации конфетти или салютика? Тогда тебе пригодится https://particles.js.org/

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

    Navigator.share — кроссплатформенный нативный шейр 🤩 Очень изящная штука для шейра текста, ссылок и файлов на вебе, буквально в пару строк Из минусов — опера и фаерфокс пока что в пролёте :( Пример использования: navigator.share({ title: 'MDN', text: 'Navigator.share() - Web APIs | MDN', url: 'developer.mozilla.org/en-US/d…or/share' }) Ссылка на MDN Ссылка на Can I Use

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

    Яндекс выложил в опенсорс языковую модель YaLM на 100 млрд параметров 🙈 Сейчас это самая большая в мире GPT-подобная нейросеть в свободном доступе как для английского, так и для русского языков. В Яндексе YaLM уже больше года является частью бэкенда Поиска и Алисы Модель обучалась 60 дней на 1,7 ТБ текстов из интернета, книг и множества других источников с помощью 800 видеокарт A100 😅 Ссылка на Гитхаб Ссылка на статья на Хабре

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

    Одно из главных в обучении фронтенд-разработке — это непрерывная практика и навыки, нужные бизнесу. Чем раньше вы нырнёте с головой в продакшен, тем быстрее почувствуете себя уверенно на рынке труда. Изучите JavaScript, HTML и CSS, фреймворки React+Redux Toolkit и сопутствующую инфраструктуру на реальных кейсах, наполните портфолио готовыми веб-приложениями и пройдите оплачиваемую стажировку в проектах IT-кластера Ростелеком. 65% выпускников Хекслет получают оффер на первых 5 собеседованиях! Начните учиться прямо сейчас, чтобы оценить формат.

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

    Container queries === бомба 👀 Представь, что ты можешь делать адаптив отдельно для каждого класса-контейнера, а не пихать всё подряд в media-query, кажется, что это уже становится возможным Зацени этот видосик от гугла https://www.youtube.com/watch?v=gCNMyYr7F6w А также доку на MDN
    Container queries - Designing in the Browser

    Container queries are an experimental API that unlocks intrinsic component-level styling based on an element’s containing parent. This episode goes over how to use container queries, to highlight the responsive possibilities of tomorrow. Container Query Polyfill → https://goo.gle/3Gn9UUO CSS Container Queries on MDN → https://goo.gle/3ogyIrp Simplified Container Query Demo → https://goo.gle/3lxbb3P Podcast Card Demo → https://goo.gle/2ZRxdGY Plant Store Demo → https://goo.gle/3G831GR Baby Clothes Demo → https://goo.gle/3GdVYwB Container Query Spec → https://goo.gle/3ok42pw CSS Tricks post on @container → https://goo.gle/3rvGkIB Web.dev article on containment → https://goo.gle/3wBMB52 Catch more videos from Designing in the Browser → https://goo.gle/dib-chrome Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs #DesigningInTheBrowser #Chrome #Developer

    YouTube

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

    Nx — самый быстрорастущий монорепозиторий в экосистеме JS 🔥 Nx достиг 2 миллиона скачиваний в неделю, с чем я поздравляю команду Лично я часто слышал про Nx, но постоянно откладывал его изучение, но после такой новости не смог остаться в стороне Что это такое? Официальный слоган: «умная, быстрая и расширяемая система сборки». Означает ли это, что это замена Webpack, Vite, SWC или Vite? Не совсем! По своей сути Nx является скорее оркестратором, который применяет эти инструменты наиболее эффективным образом Объём огромный чего он умеет, но для понимания зачем Nx может понадобиться, достаточно глянуть это видео https://www.youtube.com/watch?v=9iU_IE6vnJ8
    Monorepos - How the Pros Scale Huge Software Projects // Turborepo vs Nx

    Big companies, like Google & Facebook, store all their code in a single monolithic repository or monorepo... but why? Learn how to use tools like NPM or Yarn workspaces, Learna, Nx, and Turborepo to scale your codebase https://fireship.io/pro #software #js #compsci 🔗 Resources Turborepo https://turborepo.org/ Nx https://nx.dev/ Lerna https://lerna.js.org/ Google's Monorepo https://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext 📚 Chapters 00:00 The World’s Largest Codebase 00:49 Benefits of Monorepos 01:50 The Problem with Monorepos 02:18 Yarn & NPM Workspaces 02:48 Lerna 03:30 PNPM 03:48 Nx vs Turborepo 06:10 Turborepo Tutorial 🔥 Get More Content - Upgrade to PRO Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment. 🎨 My Editor Settings - Atom One Dark - vscode-icons - Fira Code Font 🔖 Topics Covered - Monorepo Pros and Cons - What is a monorepo? - Who uses Monorepos? - Should I use a monorepo? - Nx compared to Turborepo - How Google's Monorepo works.

    YouTube

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

    чтобы найти норм работу на удалёнке (или офисную) — не надо целыми днями шерстить HeadHunter и сотни других сайтов. Надо просто держать в подписках React Job. Туда напрямую обращаются лучшие работодатели со всего мира. Если вы пишете на React, вы только начинаете или уже профи в своем деле, то подписывайся на наш канал. У нас вы найдете стажировки, работу для разного уровня и рекомендации как не облажаться при трудоустройстве!

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

    Fresh — фулл-стек фреймворк для Deno ⚡️ Кажется уже можно писать довольно серьёзные проектики на Deno, ух, намечается жара 🔥 https://habr.com/ru/post/674382/
    Fresh — фулл-стек фреймворк для Deno

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

    Хабр

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

    Что нового в Chrome 103? — Как можно улучшить перфоманс с помощью 103-его http статуса? — Доступ к локальным шрифтам пользователя — WTF is AbortSignal.timeout Инфа в видео 🔥 https://www.youtube.com/watch?v=e8LUoJClVo4
    New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!

    Chrome 103 is rolling out now! There’s a new HTTP status code that helps the browser decide what content to preload before the page has even started to arrive. The Local Font Access API gives web applications the ability to enumerate and use fonts installed on the user’s computer. There’s an easier way to implement timeouts on asynchronous APIs. And there’s plenty more! Pete LePage has all the details about what’s new for developers in Chrome 103. Check out https://goo.gle/3zBMYRO for a deeper dive, including links to docs, specs and samples. Check out what’s New in Chrome → https://goo.gle/NewInChrome Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs #NewinChrome #ChromeDeveloper #Chrome

    YouTube

  • Реклама

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

    Vue 2.7 теперь в бета-тесте 😨 Нет возможности перейти сразу на Vue 3? Команда Vue даёт тебе версию 2.7, приятного чтения 😘 https://habr.com/ru/post/673484/
    Vue 2.7 теперь в бета-тесте

    Эта статья — перевод оригинальной статьи Evan You " Vue 2.7 is Now in Beta! " Также я веду телеграм канал “ Frontend по-флотски ”, где рассказываю про интересные вещи из мира разработки интерфейсов....

    Хабр

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

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

    Вечеринка компонентов — действительно любопытный сайт 🥳 Тут ты можешь сравнить базовые штуки популярных и набирающих популярность фреймворков Считаю, что это очень простой способ начать писать код, используя новый инструмент Все поддерживаемые фреймворки видно на скрине вверху, а также на скрине я сравнил объявление стейта и присваивания ему начального значения Заходи и тыкайся тут ❤️