Прогрессивные веб-приложения в 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
Forwarded from FrontEndDev
Руководство для начинающих по WEBPACK (Очень простое)
Сколько лет уже его использую, но все еще читаю руководства)
https://webdevblog.ru/ochen-prostoe-rukovodstvo-dlya-nachinajushhih-po-webpack/
Сколько лет уже его использую, но все еще читаю руководства)
https://webdevblog.ru/ochen-prostoe-rukovodstvo-dlya-nachinajushhih-po-webpack/
Forwarded from Senior Frontend - javascript, html, css
Безопасное использование target="_blank"
Когда страница открыта с помощью target="_blank" - она имеет доступ к window.opener, это может быть использовано мошенниками
Пример:
1. Вы делитесь страницей на facebook
2. На ней присутствует код - window.opener.location = 'https://phishingwebsite'
3. Этот код перезагружает открытый таб на копию facebook, которая просит повторно авторизоваться
Вуаля - пользователь вводит учетные данные на фишинговой странице
Как избежать:
Реализуйте ссылки в таком виде (noreferrer - для старых браузеров)
В таком случае у отрытой страницы не будет доступа к открывшему ее табу браузера
#seniorFrontHTML
Когда страница открыта с помощью target="_blank" - она имеет доступ к window.opener, это может быть использовано мошенниками
Пример:
1. Вы делитесь страницей на facebook
2. На ней присутствует код - window.opener.location = 'https://phishingwebsite'
3. Этот код перезагружает открытый таб на копию facebook, которая просит повторно авторизоваться
Вуаля - пользователь вводит учетные данные на фишинговой странице
Как избежать:
Реализуйте ссылки в таком виде (noreferrer - для старых браузеров)
<a href="/share" rel="noopener noreferrer" target="_blank">Перейти</a>
В таком случае у отрытой страницы не будет доступа к открывшему ее табу браузера
#seniorFrontHTML
Forwarded from Web Stack
Эффект складывания журнала на CSS
https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/
https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/
Thomas Park
The Mad Magazine Fold-In Effect in CSS
After 65 years at Mad Magazine, comic artist Al Jaffee announced his retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page would reveal a hidden message in the artwork. Plenty of examples can be found on the web. The problem is, they…
Forwarded from Владилен про IT
Deno Быстрый Курс
Deno - новая технология от создателя NodeJS. В курсе рассмотрим все аспекты: стандартные библиотеки, тестирование, версионность пакетов, создание полного Rest API, работа с файлами, работа с удаленным сервером и защита
На Youtube вы найдете таймкоды по темам.
Буду благодарен за лайк и комментарий за актуальный материал
Приятного просмотра!)
https://www.youtube.com/watch?v=5tkDUN8xAMw
GitHub исходники тут:
https://github.com/vladilenm/deno-crash-course
Deno - новая технология от создателя NodeJS. В курсе рассмотрим все аспекты: стандартные библиотеки, тестирование, версионность пакетов, создание полного Rest API, работа с файлами, работа с удаленным сервером и защита
На Youtube вы найдете таймкоды по темам.
Буду благодарен за лайк и комментарий за актуальный материал
Приятного просмотра!)
https://www.youtube.com/watch?v=5tkDUN8xAMw
GitHub исходники тут:
https://github.com/vladilenm/deno-crash-course
YouTube
Deno - Быстрый Курс (Замена NodeJS?)
Исходный код в Telegram: https://t.me/js_by_vladilen/189
Получить профессию Frontend разработчика - https://bit.ly/3AgH3Sr
Подробнее узнать об обучении в Result School -
https://bit.ly/3AcG4m7
Бесплатный курс HTML & CSS - https://bit.ly/3HXKdMV
Сделать…
Получить профессию Frontend разработчика - https://bit.ly/3AgH3Sr
Подробнее узнать об обучении в Result School -
https://bit.ly/3AcG4m7
Бесплатный курс HTML & CSS - https://bit.ly/3HXKdMV
Сделать…