Математические функции CSS со ступенчатыми значениями
В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.
Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:
https://habr.com/ru/articles/816587/
#css
Учитесь фронтенду с нами — подпишитесь 💻
В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.
Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:
https://habr.com/ru/articles/816587/
#css
Хабр
Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS
Введение. Что это такое? Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить...
Какая CSS-медиафича используется для определения предпочтений пользователя по темной или светлой цветовой схеме интерфейса?
Anonymous Quiz
11%
@media (color)
24%
@media (scheme)
46%
@media (prefers-color-scheme)
19%
@media (user-color)
Учимся создавать анимацию жидкости с помощью JS и CSS
В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.
Подробнее:
https://youtu.be/a5X512icOM8
#видео #css #javascript
Учитесь фронтенду с нами — подпишитесь 💻
В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.
Подробнее:
https://youtu.be/a5X512icOM8
#видео #css #javascript
YouTube
Amazing Liquid Dripping Effects using CSS & Javascipt
All Source Code : https://www.patreon.com/onlinetutorials
Get now more than 1000+ source code just by clicking on this link
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation…
Get now more than 1000+ source code just by clicking on this link
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation…
Сложный макет в Figma для прокачки ваших навыков
Я специально написал в самом заголовок, что макет сложный, чтобы не расстраивать тех, кто только начинает осваивать вёрстку. Если же вам кажется, что вы уже достаточно окрепли для создания чего-то более сложного, чем одностраничник, то обязательно попробуйте сверстать это.
По ссылке ниже вы найдёте объёмный макет для CRM дошкольной образовательной организации. Справитесь?
https://www.figma.com/design/egY90HlOAiLF53TaTrkM9W/детсад?node-id=0-1&t=cMtypXlNrFBGq9yF-1
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
Я специально написал в самом заголовок, что макет сложный, чтобы не расстраивать тех, кто только начинает осваивать вёрстку. Если же вам кажется, что вы уже достаточно окрепли для создания чего-то более сложного, чем одностраничник, то обязательно попробуйте сверстать это.
По ссылке ниже вы найдёте объёмный макет для CRM дошкольной образовательной организации. Справитесь?
https://www.figma.com/design/egY90HlOAiLF53TaTrkM9W/детсад?node-id=0-1&t=cMtypXlNrFBGq9yF-1
#figma #макет
This media is not supported in your browser
VIEW IN TELEGRAM
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов
CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.
В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.
#css
CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.
В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.
#css
Zeplin — инструмент для работы с макетами формата .psd
Сегодня всё больше верстают по макетам из Figma. Но иногда всё же встречаются и другие форматы. Zeplin — это инструмент, который помогает дизайнерам и разработчикам совместно работать над макетами. Он позволяет быстро и удобно экспортировать дизайн из Sketch, Figma или Adobe XD, создавать спецификации для разработчиков, а также обмениваться комментариями и обратной связью. Zeplin упрощает процесс совместной работы и помогает сохранить единство дизайна на всех этапах разработки.
Скачать можно здесь: https://zeplin.io/
#инструменты
Учитесь фронтенду с нами — подпишитесь 💻
Сегодня всё больше верстают по макетам из Figma. Но иногда всё же встречаются и другие форматы. Zeplin — это инструмент, который помогает дизайнерам и разработчикам совместно работать над макетами. Он позволяет быстро и удобно экспортировать дизайн из Sketch, Figma или Adobe XD, создавать спецификации для разработчиков, а также обмениваться комментариями и обратной связью. Zeplin упрощает процесс совместной работы и помогает сохранить единство дизайна на всех этапах разработки.
Скачать можно здесь: https://zeplin.io/
#инструменты
Метод bind() в JavaScript
Простыми словами,
Давайте разберёмся на примере. Представьте, что у вас есть объект
Если мы вызовем
Но что, если мы захотим передать эту функцию в другое место? Например:
В этом случае контекст потеряется, и
Теперь функция
#урок #javascript
Простыми словами,
bind
— это инструмент, который позволяет «привязать» определённый контекст (this
) к функции.Давайте разберёмся на примере. Представьте, что у вас есть объект
user
:const user = {
name: 'Аня',
greet() {
console.log(`Привет, меня зовут ${this.name}`);
}
};
Если мы вызовем
user.greet()
, то увидим: «Привет, меня зовут Аня». Всё работает, потому что контекст (this
) указывает на объект user
.Но что, если мы захотим передать эту функцию в другое место? Например:
const greetFunc = user.greet;
greetFunc(); // Что произойдет?
В этом случае контекст потеряется, и
this
будет указывать не на user
, а на глобальный объект (или undefined
в строгом режиме). Метод bind
поможет нам решить эту проблему:const greetFuncBound = user.greet.bind(user);
greetFuncBound(); // Привет, меня зовут Аня
Теперь функция
greetFuncBound
всегда будет знать, что её контекст — это объект user
.#урок #javascript
Область видимости и замыкания в JavaScript
Область видимости в JS — это любая область в коде, которая содержит именованные сущности (переменные, классы, функции) и определяет их доступность из разных частей кода. В зависимости от того, где расположен ваш код — в глобальной или локальной области, он будет вести себя по-разному.
В этой статье вы найдёте базовую информацию по этой теме. Без знания её вы просто не сможете писать правильно работающий код, поэтому к прочтению обязательно!
https://habr.com/ru/articles/828618/
#javascript
Учитесь фронтенду с нами — подпишитесь 💻
Область видимости в JS — это любая область в коде, которая содержит именованные сущности (переменные, классы, функции) и определяет их доступность из разных частей кода. В зависимости от того, где расположен ваш код — в глобальной или локальной области, он будет вести себя по-разному.
В этой статье вы найдёте базовую информацию по этой теме. Без знания её вы просто не сможете писать правильно работающий код, поэтому к прочтению обязательно!
https://habr.com/ru/articles/828618/
#javascript
Что такое Git для начинающих
Многие из вас уже пробовали работать с Git и GitHub, а некоторые только собираются подступиться к нему. Если не знаете с чего начать, то здесь вы найдете все ответы!
Узнайте, что такое GitHub, как использовать Git для начинающих, и как выполнить установку Git за 15 минут:
https://youtu.be/VJm_AjiTEEc
#git #github
Учитесь фронтенду с нами — подпишитесь 💻
Многие из вас уже пробовали работать с Git и GitHub, а некоторые только собираются подступиться к нему. Если не знаете с чего начать, то здесь вы найдете все ответы!
Узнайте, что такое GitHub, как использовать Git для начинающих, и как выполнить установку Git за 15 минут:
https://youtu.be/VJm_AjiTEEc
#git #github
YouTube
Что такое Git для Начинающих / GitHub за 30 минут / Git Уроки
Узнать о Java Буткемпе: https://www.faang.school/java-bootcamp?utm_source=youtube_video&utm_medium=organic&utm_campaign=bootcamp&utm_content=video-29
Интересуетесь GitHub и Git, но не знаете, с чего начать? Здесь вы найдете все ответы! Узнайте, что такое…
Интересуетесь GitHub и Git, но не знаете, с чего начать? Здесь вы найдете все ответы! Узнайте, что такое…
Верстаем макет SKINDOM
Ловите свеженький макет для Figma. Он уже попроще, чем предыдущий, но всё же требует определённых навыков.
Сложность: средняя
Доступен по ссылке: https://www.figma.com/file/NtwsMuRC0u1c5gZIZYCl1l/KK-Shop?node-id=13%3A994
#макет #figma
Учитесь фронтенду с нами — подпишитесь 💻
Ловите свеженький макет для Figma. Он уже попроще, чем предыдущий, но всё же требует определённых навыков.
Сложность: средняя
Доступен по ссылке: https://www.figma.com/file/NtwsMuRC0u1c5gZIZYCl1l/KK-Shop?node-id=13%3A994
#макет #figma
Какой метод используется для получения значения из LocalStorage по заданному ключу?
Anonymous Quiz
90%
localStorage.getItem()
6%
localStorage.setItem()
4%
localStorage.fetchItem()
0%
localStorage.retrieveItem()
This media is not supported in your browser
VIEW IN TELEGRAM
Форма авторизации с капчей
Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.
Ниже вы можете посмотреть, как это работает, а также изучить код:
https://codepen.io/Frontend-Portal/pen/oNRbjXG
#codepen #html #css #javascript
Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.
Ниже вы можете посмотреть, как это работает, а также изучить код:
https://codepen.io/Frontend-Portal/pen/oNRbjXG
#codepen #html #css #javascript
Большой видеокурс по Vue 3 для начинающих
Это 7-часовое видео рассчитано на тех, кто не знаком с Vue и начинает учить его с нуля. Просмотрев его,вы вы узнаете, как работает Vue и научитесь:
— передавать данные между компонентами;
— делать запросы на бэк и обрабатывать JSON-данные;
— делать переход между страницами с помощью Vue Router;
— стилизировать приложение с помощью TailwindCSS;
— делать красивую и простую анимацию списков товаров, корзину и т.п.
Узнать подробности, изучить новые технологии и создать свой первый проект на Vue можно тут:
https://youtu.be/U_-Ht_v-oAs
#видео #vue
Учитесь фронтенду с нами — подпишитесь 💻
Это 7-часовое видео рассчитано на тех, кто не знаком с Vue и начинает учить его с нуля. Просмотрев его,вы вы узнаете, как работает Vue и научитесь:
— передавать данные между компонентами;
— делать запросы на бэк и обрабатывать JSON-данные;
— делать переход между страницами с помощью Vue Router;
— стилизировать приложение с помощью TailwindCSS;
— делать красивую и простую анимацию списков товаров, корзину и т.п.
Узнать подробности, изучить новые технологии и создать свой первый проект на Vue можно тут:
https://youtu.be/U_-Ht_v-oAs
#видео #vue
YouTube
Vue 3 для начинающих / Разработка интернет-магазина Vue Sneakers
Наконец-то доделал курс по Vue 3 для начинающих, в котором мы будем разрабатывать полноценный проект Vue Sneakers (старый добрый React Sneakers, но улучшенный в плане дизайна, анимации и функционала) + хранить данные будем на бесплатном сервисе Mokky.
🧐…
🧐…
Что такое WeakMap и WeakSet
WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. Особенность WeakMap: если объект, использованный как ключ, больше нигде не упоминается, он автоматически удаляется.
WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.
Примеры использования:
WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. ОсобенноЧто такое Wподходит для привязки данных к объекту с автоматической очисткой, например, для кеша DOM-элементов.
#урок #javascript
Учитесь фронтенду с нами — подпишитесь 💻
WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. Особенность WeakMap: если объект, использованный как ключ, больше нигде не упоминается, он автоматически удаляется.
WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.
Примеры использования:
let wm = new WeakMap();Что такое WeakMap и WeakSet
let obj = {};
wm.set(obj, 'значение');
console.log(wm.get(obj)); // 'значение'
obj = null; // Объект становится недоступен и может быть удалён
WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. ОсобенноЧто такое Wподходит для привязки данных к объекту с автоматической очисткой, например, для кеша DOM-элементов.
WeakSet
полезен для хранения множества объектов с автоматической очисткой.#урок #javascript
Стоит ли решать задачи на CodeWars
Вы решали когда-нибудь задачки с CodeWars? Они помогают проверить знания, отточить навыки и попробовать новые алгоритмы.
Автор этой статьи уже долгое время сидит на этом сайте и взял за правило регулярно решать одну или несколько задач, сравнивать свои решения с решениями других пользователей и тем самым сильно прокачался. Подробнее о методе и результата здесь:
https://habr.com/ru/articles/828048/
Учитесь фронтенду с нами — подпишитесь 💻
Вы решали когда-нибудь задачки с CodeWars? Они помогают проверить знания, отточить навыки и попробовать новые алгоритмы.
Автор этой статьи уже долгое время сидит на этом сайте и взял за правило регулярно решать одну или несколько задач, сравнивать свои решения с решениями других пользователей и тем самым сильно прокачался. Подробнее о методе и результата здесь:
https://habr.com/ru/articles/828048/