Forwarded from Web Stack
Руководство пользователя по переменным в CSS
https://increment.com/frontend/a-users-guide-to-css-variables/
https://increment.com/frontend/a-users-guide-to-css-variables/
Increment
A user’s guide to CSS variables – Increment: Frontend
Long-requested but still underused, CSS custom properties for cascading variables offer revolutionary possibilities for collaboration and code reuse.
#html #tips
Ленивая подгрузка изображений
Возможные значиния:
auto - поведение, установленное по умолчанию, для разных браузеров оно будет различным.
lazy - ленивая загрузка изображений. Загрузка изображения откладывается до тех пор, пока оно не появится в области видимости экрана при скролле.
eager - изображение загружается сразу.
Ленивая подгрузка изображений
<img src="/images/image.jpg" loading="lazy">Новый атрибут для ленивой подгрузки изображений, поддерживаемый на уровне браузера. К сожалению, пока не везде поддерживается.
Возможные значиния:
auto - поведение, установленное по умолчанию, для разных браузеров оно будет различным.
lazy - ленивая загрузка изображений. Загрузка изображения откладывается до тех пор, пока оно не появится в области видимости экрана при скролле.
eager - изображение загружается сразу.
Долговременное сотрудничество
Друзья, ищу part-time верстальщика, готового подхватить работу, с которой иногда не справляется наша текущая команда.
Если кто-то хочет присоединиться к нам или может поделиться хорошим контактом, напишите, пожалуйста, мне в личку! :)
@RainySkys
Друзья, ищу part-time верстальщика, готового подхватить работу, с которой иногда не справляется наша текущая команда.
Если кто-то хочет присоединиться к нам или может поделиться хорошим контактом, напишите, пожалуйста, мне в личку! :)
@RainySkys
Forwarded from Web Stack
Отслеживайте свой смартфон в 2D с помощью JavaScript
https://medium.com/better-programming/track-your-smartphone-in-2d-with-javascript-1ba44603c0df
https://medium.com/better-programming/track-your-smartphone-in-2d-with-javascript-1ba44603c0df
Medium
Track Your Smartphone in 2D With JavaScript
Imagine what you can do with this new medium of interaction
Прогрессивные веб-приложения в 2020
Большой обзор современного состояния PWA на разных платформах, реализованные возможности и ожидания.
Читать: https://habr.com/ru/post/482772/
#pwa
Большой обзор современного состояния PWA на разных платформах, реализованные возможности и ожидания.
Читать: https://habr.com/ru/post/482772/
#pwa
13 способов вертикального центрирования в 2020
1. Абсолютное позиционирование + margin: auto
2. top: 50% + translateY(-50%)
3. Таблицы + vertical-align: middle
4. Использование псевдоэлемента с height: 100% и vertical-align: middle
5. margin: auto внутри flex-контейнера
6. Использование псевдоэлементов с flex-grow: 1 внутри flex-контейнера
7. Выравнивание по осям внутри flex-контейнера (align-items: center или justify-content: center)
8. Выравнивание потомка flex-контейнера (align-self: center)
9. Выравнивание по осям внутри grid-контейнера
10. Выравнивание потомка grid-контейнера
11. Использование псевдоэлементов внутри grid-контейнера + указание размеров рядов в fr
12. Явное указание занимаемого ряда для потомка grid-контейнера (grid-row: 2/3)
13. margin: auto внутри grid-контейнера
Источник: https://www.youtube.com/watch?v=ngT6ZiInXDY
#css #video
1. Абсолютное позиционирование + margin: auto
2. top: 50% + translateY(-50%)
3. Таблицы + vertical-align: middle
4. Использование псевдоэлемента с height: 100% и vertical-align: middle
5. margin: auto внутри flex-контейнера
6. Использование псевдоэлементов с flex-grow: 1 внутри flex-контейнера
7. Выравнивание по осям внутри flex-контейнера (align-items: center или justify-content: center)
8. Выравнивание потомка flex-контейнера (align-self: center)
9. Выравнивание по осям внутри grid-контейнера
10. Выравнивание потомка grid-контейнера
11. Использование псевдоэлементов внутри grid-контейнера + указание размеров рядов в fr
12. Явное указание занимаемого ряда для потомка grid-контейнера (grid-row: 2/3)
13. margin: auto внутри grid-контейнера
Источник: https://www.youtube.com/watch?v=ngT6ZiInXDY
#css #video
YouTube
13 ways to vertical center in 2020
Try LogRocket for free: https://logrocket.com/?yt14
CSS has come a long way, providing lots of methods to vertical center. Check out 13 ways to vertical center in 2020.
LogRocket is a frontend application monitoring solution that lets you replay problems…
CSS has come a long way, providing lots of methods to vertical center. Check out 13 ways to vertical center in 2020.
LogRocket is a frontend application monitoring solution that lets you replay problems…
Forwarded from Frontender's notes [ru]
TypeScript - Полный Курс за 70 минут
https://www.youtube.com/watch?time_continue=1&v=nyIpDs2DJ_c&feature=emb_logo
https://www.youtube.com/watch?time_continue=1&v=nyIpDs2DJ_c&feature=emb_logo
YouTube
TypeScript - Быстрый Курс за 70 минут
Исходники тут: https://t.me/js_by_vladilen/8
Получить профессию Frontend разработчика - https://bit.ly/3u79ler
Подробнее узнать об обучении в Result School -
https://bit.ly/3OL0g2z
Бесплатный курс HTML & CSS - https://bit.ly/3ypUI8r
Сделать 5 проектов…
Получить профессию Frontend разработчика - https://bit.ly/3u79ler
Подробнее узнать об обучении в Result School -
https://bit.ly/3OL0g2z
Бесплатный курс HTML & CSS - https://bit.ly/3ypUI8r
Сделать 5 проектов…
Forwarded from Laravel World
Dropzone+Laravel+Vue: Загрузка файлов простым перетаскиванием в браузер
#enligsh
https://medium.com/@cerwyneliata.c/drag-and-drop-file-uploader-using-dropzone-library-and-vue-component-laravel-9f972c1d125c
#enligsh
https://medium.com/@cerwyneliata.c/drag-and-drop-file-uploader-using-dropzone-library-and-vue-component-laravel-9f972c1d125c
Medium
Drag and Drop File Uploader using Dropzone Library and Vue Component — Laravel
The Dropzone library gives us a beautiful styling when creating a drag and drop file uploader element. Of course, it’s highly customizable!
Интеграция Typescript в существующее VueJS приложение
Три шага для внедрения типизированного JS в ваш проект!
Читать: https://prglb.ru/1r9em
#frameworks #vue #typescript #tools
Три шага для внедрения типизированного JS в ваш проект!
Читать: https://prglb.ru/1r9em
#frameworks #vue #typescript #tools
Medium
Adding Typescript to your existing VueJS 2.6+ app
Improve the Javascript code of your VueJS app with Typescript and its super powers!
CSS анимация
Плейлист от Виталия Менчуковского, посвященный анимации в CSS: https://prglb.ru/3w5u7
#video #css #animation
Плейлист от Виталия Менчуковского, посвященный анимации в CSS: https://prglb.ru/3w5u7
#video #css #animation