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
Forwarded from Senior Frontend - javascript, html, css
Глобальные ключевые слова в CSS
Для всех свойств CSS, помимо их стандартных значений, можно задать значения в виде ключевых слов:
initial
У каждого из свойств в CSS есть значение по умолчанию. Оно применяется ещё до того, как вы написали что-либо в вашем файле стилей.
Ключевое слово initial сбрасывает все указанные значения свойства для конкретного блока до этих самых значений по умолчанию.
inherit
CSS-свойства делятся на наследуемые и ненаследуемые.
Значения наследуемых свойств применяются не только к элементу, для которого прописаны, но и для всех вложенных дочерних элементов. Это очень удобно, чтобы не писать много одинаковых свойств для разных селекторов, перечисляя всех потомков.
unset
Это ключевое слово ведёт себя по-разному с наследуемыми и ненаследуемыми свойствами:
- С наследуемыми свойствами ключевое слово unset ведёт себя как inherit.
- С ненаследуемыми свойствами оно ведёт себя как initial.
revert
Это ключевое слово сбрасывает значение свойства до указанного в стилях браузера.
Для всех свойств CSS, помимо их стандартных значений, можно задать значения в виде ключевых слов:
initial
У каждого из свойств в CSS есть значение по умолчанию. Оно применяется ещё до того, как вы написали что-либо в вашем файле стилей.
Ключевое слово initial сбрасывает все указанные значения свойства для конкретного блока до этих самых значений по умолчанию.
inherit
CSS-свойства делятся на наследуемые и ненаследуемые.
Значения наследуемых свойств применяются не только к элементу, для которого прописаны, но и для всех вложенных дочерних элементов. Это очень удобно, чтобы не писать много одинаковых свойств для разных селекторов, перечисляя всех потомков.
unset
Это ключевое слово ведёт себя по-разному с наследуемыми и ненаследуемыми свойствами:
- С наследуемыми свойствами ключевое слово unset ведёт себя как inherit.
- С ненаследуемыми свойствами оно ведёт себя как initial.
revert
Это ключевое слово сбрасывает значение свойства до указанного в стилях браузера.
👩💻 Radios With Sliding Focus
Анимированный переключатель с плавающей рамкой. Сделан на чистом CSS.
Открыть код
Original post link: t.me/frontendnoteschannel/3604
Forwarded and filtered by @smartfeed_bot
Анимированный переключатель с плавающей рамкой. Сделан на чистом CSS.
Открыть код
Original post link: t.me/frontendnoteschannel/3604
Forwarded and filtered by @smartfeed_bot
codepen.io
Radios With Sliding Focus
CSS `:has()` made this radio button effect possible without JS!...
This media is not supported in your browser
VIEW IN TELEGRAM
Magnify Glass w/ Zoom
Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.
https://codepen.io/kitjenson/pen/ExLRrgw
Original post link: t.me/senior_front/2029
Forwarded and filtered by @smartfeed_bot
Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.
https://codepen.io/kitjenson/pen/ExLRrgw
Original post link: t.me/senior_front/2029
Forwarded and filtered by @smartfeed_bot
🐙 OpenLayers – высокопроизводительная библиотека для создания интерактивных географических карт. Библиотека написана на JavaScript и имеет открытый исходный код.
Сайтодел | #репозиторий #github
Original post link: t.me/sitodel/1783
Forwarded and filtered by @smartfeed_bot
Сайтодел | #репозиторий #github
Original post link: t.me/sitodel/1783
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
CSS 3D Bending Effect - Page Flip
Создано на чистом CSS с использованием возможностей препроцессора Haml.
👉 @seniorFront
Original post link: t.me/seniorFront/4124
Forwarded and filtered by @smartfeed_bot
Создано на чистом CSS с использованием возможностей препроцессора Haml.
👉 @seniorFront
Original post link: t.me/seniorFront/4124
Forwarded and filtered by @smartfeed_bot
👩💻 Попытка создать идеальный компонент формы
Как я создавал свою библиотеку для работы с формой, какие сложности встретил и как их решал. Попытка типизировать вообще все и несколько интересных typescript кейсов, которые могут оказаться полезными.
Читать...
Original post link: t.me/frontendnoteschannel/3606
Forwarded and filtered by @smartfeed_bot
Как я создавал свою библиотеку для работы с формой, какие сложности встретил и как их решал. Попытка типизировать вообще все и несколько интересных typescript кейсов, которые могут оказаться полезными.
Читать...
Original post link: t.me/frontendnoteschannel/3606
Forwarded and filtered by @smartfeed_bot
Хабр
Попытка создать идеальный компонент формы
В моей работе(и не только моей) очень часто возникает необходимость писать логику для формы. Каждый раз это больно. Кажется, даже создатели React солидарны с этим, поэтому скоро у нас появится...
This media is not supported in your browser
VIEW IN TELEGRAM
3D glass weather icons
Иконки, сверстанные на HTML и SCSS.
https://codepen.io/onediv/pen/MWQKgmv
Original post link: t.me/senior_front/2030
Forwarded and filtered by @smartfeed_bot
Иконки, сверстанные на HTML и SCSS.
https://codepen.io/onediv/pen/MWQKgmv
Original post link: t.me/senior_front/2030
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
Как очистить карму своему коду?
Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!
В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?
Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.
Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.
Как же очистить карму своего кода?
Как утверждается в ведических текстах, любой программер может изменить судьбу кода, если напишет тесты и сотрет непотребные комментарии и сделав код втрое короче
👉 @seniorFront
Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!
В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?
Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.
Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.
Как же очистить карму своего кода?
Как утверждается в ведических текстах, любой программер может изменить судьбу кода, если напишет тесты и сотрет непотребные комментарии и сделав код втрое короче
👉 @seniorFront
👩💻 Гибкая ORM для Node.js – Sequelize
Когда начинаешь делать очередной проект, появляется желание упростить себе жизнь и лишний раз не писать SQL-запросы. В таком случае было бы неплохо познакомиться с технологией ORM.
Читать...
Original post link: t.me/frontendnoteschannel/3609
Forwarded and filtered by @smartfeed_bot
Когда начинаешь делать очередной проект, появляется желание упростить себе жизнь и лишний раз не писать SQL-запросы. В таком случае было бы неплохо познакомиться с технологией ORM.
Читать...
Original post link: t.me/frontendnoteschannel/3609
Forwarded and filtered by @smartfeed_bot
Библиотека программиста
🐘🗂️ Гибкая ORM для Node.js – Sequelize
Когда начинаешь делать очередной проект, появляется желание упростить себе жизнь и лишний раз не писать SQL-запросы. В таком случае было бы неплохо познакомиться с технологией ORM.