This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/frankyjo/pen/eYeJvmB - делаем прелоадер в стиле шаров Ньютона
Полезные подкасты и некоторые YouTube-каналы про веб-разработку
В этой подборке я поделюсь ресурсами, которые я слушаю в свободное время. На самом деле, покдасты - это очень удобно.
Пока ты едешь в машине, в автобусе, метро, просто гуляешь с собакой или бегаешь - можно слушать и поглащать полезный контент. И я считаю что это очень круто!!
🔹Web-стандарты
Кстати, это подкаст выпускает первое сообщество фронтент девелоперов
🔹Мы обречены
Как пишут сами о себе ребята - это лучший бесполезный подкаст про ИТ. Но я так не считаю 🙃
🔹Суровый вэб
Парни из Челябинска которые рассказывают про веб-разработку, обсуждают новости из мира айти и другие интересные вещи
🔹UnderJs.ru
Ребята обсуждают все, что касается JavaScript ( браузеры/библиотеки/спецификации, Node.js, React Native и многое другое )
🔹Radiojs.ru
Обсуждение новостей из мира IT, разрабы из мира IT, профессионалы своего дела, которые делятся опытом - это все тут, на radioJs
И как бонус - парочка Ютуб-каналов, которые тоже можно послушать 🤓
🔹АйТиБорода
🔹Sergey Nemchinskiy
🔹Фрилансер по жизни
В этой подборке я поделюсь ресурсами, которые я слушаю в свободное время. На самом деле, покдасты - это очень удобно.
Пока ты едешь в машине, в автобусе, метро, просто гуляешь с собакой или бегаешь - можно слушать и поглащать полезный контент. И я считаю что это очень круто!!
🔹Web-стандарты
Кстати, это подкаст выпускает первое сообщество фронтент девелоперов
🔹Мы обречены
Как пишут сами о себе ребята - это лучший бесполезный подкаст про ИТ. Но я так не считаю 🙃
🔹Суровый вэб
Парни из Челябинска которые рассказывают про веб-разработку, обсуждают новости из мира айти и другие интересные вещи
🔹UnderJs.ru
Ребята обсуждают все, что касается JavaScript ( браузеры/библиотеки/спецификации, Node.js, React Native и многое другое )
🔹Radiojs.ru
Обсуждение новостей из мира IT, разрабы из мира IT, профессионалы своего дела, которые делятся опытом - это все тут, на radioJs
И как бонус - парочка Ютуб-каналов, которые тоже можно послушать 🤓
🔹АйТиБорода
🔹Sergey Nemchinskiy
🔹Фрилансер по жизни
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/frankyjo/pen/KKyQaNv - Слайдер сравнения изображений
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/frankyjo/pen/OJzgBMo - красивый ховер эффект для кнопки
Изучаем SCSS
Сегодня, я уже даже представить не могу свою работу без SCSS. Данный препроцессор упрощает сильно работу с стилями и значительно ускоряет процесс разработки в общем.
Так как браузеры не воспринимают SCSS, его надо конвертировать в CSS с помощью специальных программ или сборщиков проектов таких как gulp или webpack
Рассмотрим все преимущества работы с SCSS
1. Переменные
Чтобы создать переменную, просто добавьте $ к имени переменной и установите их как обычное свойство CSS.
Кстати, в примере сразу виден пример вложенности.
2. Вложенность
Вложенность в SCSS - очень полезная штука. При помощи нее вы можете выстраивать код так, что SCSS будет визуально напоминать иерархию в вашем HTML.
3. Наследование
@extends помогает вам наследовать свойства другого классаю.
4. Миксины
Миксины в SCSS позволяют нам создавать группы правил CSS и переиспользовать их в своем коде. В миксины, можно даже передавать значение, чтобы сделать их более гибкими
5. Математические операторы
В SCSS можно использовать математические операторы +, -, *, /, %
Например, их можно использовать в тех же миксинах.
6. Циклы
В SCSS можно использовать циклы. Таким образом, вы можете избежать копипаста.
7. Условия
Условия SCSS можно использовать тоже для создания различных условий внутри ваших миксинов.
Вот так, буквально за три минуты вы окунулись в мир SCSS. Я надеюсь что те, кто его использовали узнали для себя что-то новое, а те, кто не использовали - начнут.
____
#вебразработка #вебразработчик #изучаемфронтенд #фронтенд #версткасайта #изучаемфронтенд #цсс #css #scss
Сегодня, я уже даже представить не могу свою работу без SCSS. Данный препроцессор упрощает сильно работу с стилями и значительно ускоряет процесс разработки в общем.
Так как браузеры не воспринимают SCSS, его надо конвертировать в CSS с помощью специальных программ или сборщиков проектов таких как gulp или webpack
Рассмотрим все преимущества работы с SCSS
1. Переменные
Чтобы создать переменную, просто добавьте $ к имени переменной и установите их как обычное свойство CSS.
Кстати, в примере сразу виден пример вложенности.
2. Вложенность
Вложенность в SCSS - очень полезная штука. При помощи нее вы можете выстраивать код так, что SCSS будет визуально напоминать иерархию в вашем HTML.
3. Наследование
@extends помогает вам наследовать свойства другого классаю.
4. Миксины
Миксины в SCSS позволяют нам создавать группы правил CSS и переиспользовать их в своем коде. В миксины, можно даже передавать значение, чтобы сделать их более гибкими
5. Математические операторы
В SCSS можно использовать математические операторы +, -, *, /, %
Например, их можно использовать в тех же миксинах.
6. Циклы
В SCSS можно использовать циклы. Таким образом, вы можете избежать копипаста.
7. Условия
Условия SCSS можно использовать тоже для создания различных условий внутри ваших миксинов.
Вот так, буквально за три минуты вы окунулись в мир SCSS. Я надеюсь что те, кто его использовали узнали для себя что-то новое, а те, кто не использовали - начнут.
____
#вебразработка #вебразработчик #изучаемфронтенд #фронтенд #версткасайта #изучаемфронтенд #цсс #css #scss
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/frankyjo/pen/JjMqyNK - Делаем каркасную загрузку контента ( skeleton ) 🙂
PyScript убийца JavaScript ?
Не так давно на PyCon 2022, который проходил 27.04 - 03.05, был сделан анонс и объявили о новой технологии PyScript 🙂
Я немного прочитал про нее и вот, что узнал 🤔
Разработчики рассказали, что теперь можно будет писать код на Python, встраивать его, используя специальные HTML-теги, подключать JavaScript библиотеки и все это благодаря PyScript 🙂
Звучит вроде неплохо. К тому же, с PyScript не надо думать о развертывании специального программного обеспечения. Также, создатели рассказали, что теперь можно будет поделиться дашбордами и моделями в html-файле, который будет запускать код всякий раз, когда другие открывают этот файл в веб-браузере.
Что же такого интересного в PyScript?🤔
А то, что он построен Pyodide ( Pyodide предоставляет способ запуска Python в браузере ) . А в будущем, PyScript может начать поддерживать написание и выполнение кода и на других языках🙃
Альфе-версию вы можете посмотреть на сайте pyscript.net
В общем, Python теперь в браузере благодаря PyScript
Не так давно на PyCon 2022, который проходил 27.04 - 03.05, был сделан анонс и объявили о новой технологии PyScript 🙂
Я немного прочитал про нее и вот, что узнал 🤔
Разработчики рассказали, что теперь можно будет писать код на Python, встраивать его, используя специальные HTML-теги, подключать JavaScript библиотеки и все это благодаря PyScript 🙂
Звучит вроде неплохо. К тому же, с PyScript не надо думать о развертывании специального программного обеспечения. Также, создатели рассказали, что теперь можно будет поделиться дашбордами и моделями в html-файле, который будет запускать код всякий раз, когда другие открывают этот файл в веб-браузере.
Что же такого интересного в PyScript?🤔
А то, что он построен Pyodide ( Pyodide предоставляет способ запуска Python в браузере ) . А в будущем, PyScript может начать поддерживать написание и выполнение кода и на других языках🙃
Альфе-версию вы можете посмотреть на сайте pyscript.net
В общем, Python теперь в браузере благодаря PyScript
https://codepen.io/frankyjo/pen/dydKRgZ - красивая карточка на чистом CSS
This media is not supported in your browser
VIEW IN TELEGRAM
https://codepen.io/frankyjo/pen/eYrzbvM - Цікавий ховер ефект при наведенні на карточку