Годных codepen-проектов вам в ленту: Newton's CSS cradle — Колыбель Ньютона
Проект реализован с помощью SCSS. Исходники: https://codepen.io/amit_sheen/pen/XWMXwvJ
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4586
Forwarded and filtered by @smartfeed_bot
Проект реализован с помощью SCSS. Исходники: https://codepen.io/amit_sheen/pen/XWMXwvJ
👍 — юзабельно
🗿 — троллейбус_из_буханки_хлеба.jpg
#codepen
Original post link: t.me/tproger_web/4586
Forwarded and filtered by @smartfeed_bot
Какие JS-библиотеки использовать для анимаций на сайте?
JS-библиотек более тысячи — они постоянно обновляются, а многие из них создаются сообществом. Собрали и попробовали самые актуальные библиотеки для разработки анимации, такие как Anime.js, Popmotion, Vivus.js, Mo.js и другие.
Делимся обзором на лучшие из них с вами: https://tproger.ru/articles/kakie-js-biblioteki-ispolzovat-dlya-animacij-na-sajte-v-2024-godu
#javascript
Original post link: t.me/tproger_web/4587
Forwarded and filtered by @smartfeed_bot
JS-библиотек более тысячи — они постоянно обновляются, а многие из них создаются сообществом. Собрали и попробовали самые актуальные библиотеки для разработки анимации, такие как Anime.js, Popmotion, Vivus.js, Mo.js и другие.
Делимся обзором на лучшие из них с вами: https://tproger.ru/articles/kakie-js-biblioteki-ispolzovat-dlya-animacij-na-sajte-v-2024-godu
#javascript
Original post link: t.me/tproger_web/4587
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Бесплатный разбор для улучшения кода
В среду 29 мая в 20:00 по мск присоединяйтесь посмотреть, как лид фронтенд-разработки разбирает чужой код.
Стек: HTML, CSS, React и Vite.
👉 Подробности здесь.
Подпишитесь на канал, чтобы не пропустить эфир.
Original post link: t.me/seniorFront/4110
Forwarded and filtered by @smartfeed_bot
В среду 29 мая в 20:00 по мск присоединяйтесь посмотреть, как лид фронтенд-разработки разбирает чужой код.
Стек: HTML, CSS, React и Vite.
👉 Подробности здесь.
Подпишитесь на канал, чтобы не пропустить эфир.
Original post link: t.me/seniorFront/4110
Forwarded and filtered by @smartfeed_bot
👩💻 Collapsible Timeline
Таймлайн с возможностью раскрывать пункты. Сделан на SVG, CSS и JavaScript.
Открыть код
Original post link: t.me/frontendnoteschannel/3600
Forwarded and filtered by @smartfeed_bot
Таймлайн с возможностью раскрывать пункты. Сделан на SVG, CSS и JavaScript.
Открыть код
Original post link: t.me/frontendnoteschannel/3600
Forwarded and filtered by @smartfeed_bot
codepen.io
Collapsible Timeline
A timeline with animated collapsible descriptions for each item. Source for Unix facts: [Wikipedia](https://en.wikipedia.org/wiki/Unix_time)....
✍️ Thunder – узкий шрифт, который подходит для крупных заголовков и используется для создания контраста. Пример можно увидеть в макете Abstract 3D Coral Shapes
Сайтодел | #шрифт
Original post link: t.me/sitodel/1781
Forwarded and filtered by @smartfeed_bot
Сайтодел | #шрифт
Original post link: t.me/sitodel/1781
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Fullscreen drag-slider with parallax
Оригинальный слайдер, логика работы которого реализована в JS. Стилизовано в SCSS.
👉 @seniorFront
Original post link: t.me/seniorFront/4112
Forwarded and filtered by @smartfeed_bot
Оригинальный слайдер, логика работы которого реализована в JS. Стилизовано в SCSS.
👉 @seniorFront
Original post link: t.me/seniorFront/4112
Forwarded and filtered by @smartfeed_bot
👩💻 Предложение по стандартизации сигналов для TC39
Энтузиасты JavaScript-сообщества разработали предложение по стандартизации сигналов для рассмотрения в TC39. Каждый из вас может не только ознакомиться с этим предложением, но и внести свой вклад в стандарт сигналов, тем самым расширив возможности JS-разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3601
Forwarded and filtered by @smartfeed_bot
Энтузиасты JavaScript-сообщества разработали предложение по стандартизации сигналов для рассмотрения в TC39. Каждый из вас может не только ознакомиться с этим предложением, но и внести свой вклад в стандарт сигналов, тем самым расширив возможности JS-разработки.
Читать...
Original post link: t.me/frontendnoteschannel/3601
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Предложение по стандартизации сигналов для TC39
Энтузиасты JavaScript-сообщества разработали предложение по стандартизации сигналов для рассмотрения в TC39. Каждый из вас может не только ознакомиться с этим предложением, но и внести свой вклад в стандарт сигналов, тем самым расширив возможности JS-разработки.
This media is not supported in your browser
VIEW IN TELEGRAM
Motion Blur Step 2
Анимация размытия в движении. Написана на чистом CSS.
https://codepen.io/Nealevf/pen/oNxKZOx
Original post link: t.me/senior_front/2025
Forwarded and filtered by @smartfeed_bot
Анимация размытия в движении. Написана на чистом CSS.
https://codepen.io/Nealevf/pen/oNxKZOx
Original post link: t.me/senior_front/2025
Forwarded and filtered by @smartfeed_bot
Все ещё пишете сложные, непроизводительные и «жирные» сайты? Тогда HTMX идёт к вам!
HTMX — библиотека, которая позволяет создавать динамические веб-интерфейсы, используя только HTML и немного JavaScript. И вот небольшое демо, как она работает: https://htmx.org/examples/click-to-edit/#demo
Идея в том, что мы можем запускать интерактивные элементы, написанные с помощью AJAX, CSS Transitions, WebSockets и Server Sent Events, прямо из HTML-кода. HTMX сохраняет преимущества SPA, не требуя полной перезагрузки страницы, и в то же время по простоте она ближе к MPA.
В статье рассказали про Карсона Гросса, создателя HTMX, и про HTMX — красивую альтернативу клиентскому рендерингу на JavaScript: https://habr.com/ru/companies/ruvds/articles/814193/
#javascript
Original post link: t.me/tproger_web/4588
Forwarded and filtered by @smartfeed_bot
HTMX — библиотека, которая позволяет создавать динамические веб-интерфейсы, используя только HTML и немного JavaScript. И вот небольшое демо, как она работает: https://htmx.org/examples/click-to-edit/#demo
Идея в том, что мы можем запускать интерактивные элементы, написанные с помощью AJAX, CSS Transitions, WebSockets и Server Sent Events, прямо из HTML-кода. HTMX сохраняет преимущества SPA, не требуя полной перезагрузки страницы, и в то же время по простоте она ближе к MPA.
В статье рассказали про Карсона Гросса, создателя HTMX, и про HTMX — красивую альтернативу клиентскому рендерингу на JavaScript: https://habr.com/ru/companies/ruvds/articles/814193/
#javascript
Original post link: t.me/tproger_web/4588
Forwarded and filtered by @smartfeed_bot
What's in a name?
Создайте функцию, принимающую в качестве параметра две строки и проверяющую, содержит ли первая строка все буквы второй строки по порядку.
В этом случае функция должна возвращать true, а в противном случае — false. Сравнение букв должно быть чувствительным к регистру.
Примеры:
👉 @seniorFront
Original post link: t.me/seniorFront/4113
Forwarded and filtered by @smartfeed_bot
Создайте функцию, принимающую в качестве параметра две строки и проверяющую, содержит ли первая строка все буквы второй строки по порядку.
В этом случае функция должна возвращать true, а в противном случае — false. Сравнение букв должно быть чувствительным к регистру.
Примеры:
"Across the rivers", "chris" --> true
^ ^ ^^ ^
c h ri s
Contains all of the letters in "chris", in order.
----------------------------------------------------------
"Next to a lake", "chris" --> false
Contains none of the letters in "chris".
--------------------------------------------------------------------
"Under a sea", "chris" --> false
^ ^
r s
Contains only some of the letters in "chris".👉 @seniorFront
Original post link: t.me/seniorFront/4113
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Jackie's Pet Store – лендинг для зоомагазина. Здесь есть крутые 3D-иллюстрации, выпадающие окна и эффект зума при наведении курсора на карточки.
Сайтодел | #сниппет #css
Original post link: t.me/sitodel/1782
Forwarded and filtered by @smartfeed_bot
Сайтодел | #сниппет #css
Original post link: t.me/sitodel/1782
Forwarded and filtered by @smartfeed_bot
👩💻 Очистка операторов импорта TypeScript с помощью псевдонимов путей
В мире программирования особенно ценятся кодовые базы, которые легко поддаются чтению. "Незасоренные" операторы импорта во многом способствуют этой цели. Сегодня поговорим о том, как сделать их чище с помощью псевдонимов путей.
Читать...
Original post link: t.me/frontendnoteschannel/3602
Forwarded and filtered by @smartfeed_bot
В мире программирования особенно ценятся кодовые базы, которые легко поддаются чтению. "Незасоренные" операторы импорта во многом способствуют этой цели. Сегодня поговорим о том, как сделать их чище с помощью псевдонимов путей.
Читать...
Original post link: t.me/frontendnoteschannel/3602
Forwarded and filtered by @smartfeed_bot
NOP::Nuances of programming
Очистка операторов импорта TypeScript с помощью псевдонимов путей
В мире программирования особенно ценятся кодовые базы, которые легко поддаются чтению. "Незасоренные" операторы импорта во многом способствуют этой цели. Сегодня поговорим о том, как сделать их чище с помощью псевдонимов путей.
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Art - Sphere
Плавная анимация сферы. Написана на чистом CSS.
https://codepen.io/shunyadezain/pen/mdEJjJR
Original post link: t.me/senior_front/2026
Forwarded and filtered by @smartfeed_bot
Плавная анимация сферы. Написана на чистом CSS.
https://codepen.io/shunyadezain/pen/mdEJjJR
Original post link: t.me/senior_front/2026
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend Developer | JavaScript, React, HTML & CSS
Для первого сезона профильной IT-конференции Podlodka React Crew сложно придумать более нужную тему, чем «архитектура».
Уже 27 мая опытные эксперты научат React-разработчиков:
💜 Решать архитектурные вопросы в разрезе React. В формате круглого стола Сергей Сова, Максим Вишневский и Сергей Самохов обсудят, как строить архитектуру, организовывать компоненты и данные, использовать рендер-движок, задействовать реактивность и учитывать особенности
💜 Применять архитектурный линтер для Feature-Sliced Design. Антон Медведев и Лев Челядинов из FSD core team представят новый линтер и в режиме лайвкодинга покажут, как его применять.
💜 Менять жизненный цикл проектов на React, проектировать гибкое приложение и править негибкое. Редактор «Доки» Полина Гуртовая расскажет, когда мигрировать проект и нужно ли это делать, если он ещё не устарел.
💜 Выбирать стейтменеджер. Валерий Смирнов из Oone.World покажет, когда и какие популярные библиотеки использовать для управления стейтом.
🎁 Бонусы: публичное собеседование по архитектуре и открытый микрофон.
Билеты уже ждут вас на сайте
Уже 27 мая опытные эксперты научат React-разработчиков:
Билеты уже ждут вас на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужна ли айтишнику вышка?
Куда отдать абитуриента, чтобы вырос программистом? Можно ли совмещать ли работу с учебой и когда начинать? Получать ли второе высшее, если недавно устроился в IT и хочешь выучить недостающую базу?
Из-за статуса кво высшее образования идеализируются и не подвергается рациональной оценке. Отцы и деды ходили в ВУЗ, значит и нам надо, чего тут рассуждать. Но проблема у отцов и дедов не было столь стремительно развивающихся технологий, интернета и компьютеров. Во избежание когнитивных искажений, в этой статье оценивается высшее образование по критериям обычного курса. То есть, продукта со своими плюсами и минусами, который нам предлагает приобрести за деньги государство.
👉 @seniorFront
Original post link: t.me/seniorFront/4115
Forwarded and filtered by @smartfeed_bot
Куда отдать абитуриента, чтобы вырос программистом? Можно ли совмещать ли работу с учебой и когда начинать? Получать ли второе высшее, если недавно устроился в IT и хочешь выучить недостающую базу?
Из-за статуса кво высшее образования идеализируются и не подвергается рациональной оценке. Отцы и деды ходили в ВУЗ, значит и нам надо, чего тут рассуждать. Но проблема у отцов и дедов не было столь стремительно развивающихся технологий, интернета и компьютеров. Во избежание когнитивных искажений, в этой статье оценивается высшее образование по критериям обычного курса. То есть, продукта со своими плюсами и минусами, который нам предлагает приобрести за деньги государство.
👉 @seniorFront
Original post link: t.me/seniorFront/4115
Forwarded and filtered by @smartfeed_bot
🖥 Самые интересные публикации за последние дни:
• Разработчикам: рецензия на книгу «Создание микрофронтендов»
• Как я запрограммировала собственный рукописный шрифт
• Демо City In A Bottle – система рейкастинга в 256 байтах
• Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS
• Непривычный менталитет, трудоголизм и внезапные увольнения: как выглядит работа в американской компании
Original post link: t.me/frontendnoteschannel/3603
Forwarded and filtered by @smartfeed_bot
• Разработчикам: рецензия на книгу «Создание микрофронтендов»
• Как я запрограммировала собственный рукописный шрифт
• Демо City In A Bottle – система рейкастинга в 256 байтах
• Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS
• Непривычный менталитет, трудоголизм и внезапные увольнения: как выглядит работа в американской компании
Original post link: t.me/frontendnoteschannel/3603
Forwarded and filtered by @smartfeed_bot
Хабр
Разработчикам: рецензия на книгу «Создание микрофронтендов» (Building Micro-Frontends) Луки Меццалиры
Продолжаем рецензии на книги по ИТ‑тематике с промокодом от нашего блога. Сегодня это перевод известной книги «Building Micro‑Frontends» O'REILLY по микросервисам, вышедший...
This media is not supported in your browser
VIEW IN TELEGRAM
90% - SVG Animation
SVG-анимация загрузки. Реализована с помощью JavaScript.
https://codepen.io/Adir-SL/details/zYozoNZ
Original post link: t.me/senior_front/2028
Forwarded and filtered by @smartfeed_bot
SVG-анимация загрузки. Реализована с помощью JavaScript.
https://codepen.io/Adir-SL/details/zYozoNZ
Original post link: t.me/senior_front/2028
Forwarded and filtered by @smartfeed_bot
☄️ Горячая акция для IT-специалистов на дизайн и ремонт квартиры!
RE Design Buro создаем дизайн-проекты и реализуем их в жизнь более 15 лет ⭐️
За это время сделали уже 450+ проектов и ремонтов в Москве и области 🏆
Коротко о компании:
⭐️ работают не бригады, а узкие специалисты: плиточники, электрики, сантехники т.д.
⭐️ 6 месяцев средний срок ремонта.
⭐️ рейтинг выполненных ремонтов - 4.9.
⭐️ все цены и сроки фиксируем в договоре.
⭐️ оплата разбивается частями по факту сдачи работ.
💥 Только для специалистов IT-индустрии - скидка 10% на дизайн и ремонт от компании RE Design Buro
‼️ Важное условие — вы работаете в IT-компании, которая получила аккредитацию Минцифры РФ
👉 Наши работы
👉 Мы в Телеграм
👉 Связаться с нами
👉 Консультация дизайнера БЕСПЛАТНО
👉 Получить сметный расчёт стоимости ремонта
Original post link: t.me/seniorFront/4116
Forwarded and filtered by @smartfeed_bot
RE Design Buro создаем дизайн-проекты и реализуем их в жизнь более 15 лет ⭐️
За это время сделали уже 450+ проектов и ремонтов в Москве и области 🏆
Коротко о компании:
⭐️ работают не бригады, а узкие специалисты: плиточники, электрики, сантехники т.д.
⭐️ 6 месяцев средний срок ремонта.
⭐️ рейтинг выполненных ремонтов - 4.9.
⭐️ все цены и сроки фиксируем в договоре.
⭐️ оплата разбивается частями по факту сдачи работ.
💥 Только для специалистов IT-индустрии - скидка 10% на дизайн и ремонт от компании RE Design Buro
‼️ Важное условие — вы работаете в IT-компании, которая получила аккредитацию Минцифры РФ
👉 Наши работы
👉 Мы в Телеграм
👉 Связаться с нами
👉 Консультация дизайнера БЕСПЛАТНО
👉 Получить сметный расчёт стоимости ремонта
Original post link: t.me/seniorFront/4116
Forwarded and filtered by @smartfeed_bot