Forwarded from Хабр
CSS Grid понятно для всех
Что такое Grid?
Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.
Поддержка браузерами
В 2020 году поддержка браузерами достигает 94 %
Grid контейнер
Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.
<body>
<div class="row">
<div class="row__item header">
<h1>Header</h1>
</div>
<div class="row__item nav">
<h1>Navbar</h1>
</div>
<div class="row__item article">
<h1>Article</h1>
</div>
<div class="row__item ads">
<h1>Ads</h1>
</div>
</div>
</body>
.row {
display: grid;
margin: auto;
grid-template-rows: 60px 1fr ;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
width: 1000px;
height: 1000px;
justify-items: center;
justify-content: space-between;
grid-template-areas:
"header header header"
"nav article ads";
}
grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.
CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.
Свойство CSS grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.
Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.
Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.
С помощью свойства grid-area мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать. Читать дальше →
http://amp.gs/Ftx0
Что такое Grid?
Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.
Поддержка браузерами
В 2020 году поддержка браузерами достигает 94 %
Grid контейнер
Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.
<body>
<div class="row">
<div class="row__item header">
<h1>Header</h1>
</div>
<div class="row__item nav">
<h1>Navbar</h1>
</div>
<div class="row__item article">
<h1>Article</h1>
</div>
<div class="row__item ads">
<h1>Ads</h1>
</div>
</div>
</body>
.row {
display: grid;
margin: auto;
grid-template-rows: 60px 1fr ;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
width: 1000px;
height: 1000px;
justify-items: center;
justify-content: space-between;
grid-template-areas:
"header header header"
"nav article ads";
}
grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.
CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.
Свойство CSS grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.
Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.
Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.
С помощью свойства grid-area мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать. Читать дальше →
http://amp.gs/Ftx0
Хабр
CSS Grid понятно для всех
Что такое Grid? Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут...
Forwarded from КНИГИ: REACT, JS, ANGULAR, NODE, VUE
Working with Vue.js
Автор: sitepoint
Год издания: 2019
Скачать книгу pdf
Скачать книгу epub
#vue #english
Автор: sitepoint
Год издания: 2019
Скачать книгу pdf
Скачать книгу epub
#vue #english
Forwarded from Laravel, PHP, Backend - Uncolored collection
#devops
Мне кажется, любому разработчику стоит разобраться с основами DevOps, потому что это не только набор инструментов, но и культура работы с кодом. Рекомендую данную статью, чтобы понять проблематику и смысл данной области деятельности.
https://habr.com/ru/company/nixys/blog/514098/
Мне кажется, любому разработчику стоит разобраться с основами DevOps, потому что это не только набор инструментов, но и культура работы с кодом. Рекомендую данную статью, чтобы понять проблематику и смысл данной области деятельности.
https://habr.com/ru/company/nixys/blog/514098/
Хабр
С чего начать DevOps?
Понятие DevOps знакомо многим, но в своей практике я часто наблюдаю такую ситуацию, когда соискатель на должность DevOps-инженера в нашу компанию не может ответить на вопрос “А что же такое DevOps?”....
Forwarded from Хабр
[Перевод] Vue.js для начинающих, урок 11: вкладки, глобальная шина событий
Сегодня, в 11 уроке, который завершает этот учебный курс по основам Vue, мы поговорим о том, как организовать содержимое страницы приложения с помощью вкладок. Здесь же мы обсудим глобальную шину событий — простой механизм по передаче данных внутри приложения.
Читать дальше →
http://amp.gs/F73S
Сегодня, в 11 уроке, который завершает этот учебный курс по основам Vue, мы поговорим о том, как организовать содержимое страницы приложения с помощью вкладок. Здесь же мы обсудим глобальную шину событий — простой механизм по передаче данных внутри приложения.
Читать дальше →
http://amp.gs/F73S
Хабр
Vue.js для начинающих, урок 11: вкладки, глобальная шина событий
Сегодня, в 11 уроке, который завершает этот учебный курс по основам Vue, мы поговорим о том, как организовать содержимое страницы приложения с помощью вкладок. З...
Forwarded from Хабр
Новое CSS-свойство content-visibility ускоряет отрисовку страницы в несколько раз
5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.
В этой демке content-visibility: auto, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз Читать дальше →
http://amp.gs/FgxI
5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.
В этой демке content-visibility: auto, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз Читать дальше →
http://amp.gs/FgxI
Хабр
Новое CSS-свойство content-visibility ускоряет отрисовку страницы в несколько раз
5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой за...
Forwarded from Веб-страница
С Vue 3 больше не нужен Vuex?
Vuex — это паттерн управления состоянием и библиотека для приложений на Vue.js. Так зачем от неё отказываться? Дело в том, что новый Vue 3 из коробки предлагает реактивность и новые способы структурирования веб-приложений. Эти изменения настолько глобальны, что можно централизовать управление состоянием без дополнительных инструментов.
Подробнее в статье: https://tprg.ru/m61Q
#фронтенд #vuejs
Vuex — это паттерн управления состоянием и библиотека для приложений на Vue.js. Так зачем от неё отказываться? Дело в том, что новый Vue 3 из коробки предлагает реактивность и новые способы структурирования веб-приложений. Эти изменения настолько глобальны, что можно централизовать управление состоянием без дополнительных инструментов.
Подробнее в статье: https://tprg.ru/m61Q
#фронтенд #vuejs
Forwarded from Будни разработчика
#статья дня
#html #css #px #em #rem #vw #vh
Лето и отпуск не лучшие помощники в написании новых статей, но ничто не забыто.
Тем временем великолепная Йоксель (https://twitter.com/yoksel) выпустила крайне подробную статью о единицах измерения в CSS.
Рассмотрены даже не самые популярные единицы вроде ex и ch, даны разъяснения об их вычислении и приведены наглядные примеры.
Единственное, не сказано о том, что v-единицы не реагируют на масштаб в браузере. Надо бы сообщить. (см. Upd.)
Читаем и не забываем подписываться на Йоксель в твиттере.
Upd. О важности взаимодействия с авторами. В статье появилось упоминание, что v-единицы не реагируют на масштаб. Никогда не стесняйтесь сообщать авторам статей о всём, что считаете нужным.
http://css.yoksel.ru/size-units/
#html #css #px #em #rem #vw #vh
Лето и отпуск не лучшие помощники в написании новых статей, но ничто не забыто.
Тем временем великолепная Йоксель (https://twitter.com/yoksel) выпустила крайне подробную статью о единицах измерения в CSS.
Рассмотрены даже не самые популярные единицы вроде ex и ch, даны разъяснения об их вычислении и приведены наглядные примеры.
Единственное, не сказано о том, что v-единицы не реагируют на масштаб в браузере. Надо бы сообщить. (см. Upd.)
Читаем и не забываем подписываться на Йоксель в твиттере.
Upd. О важности взаимодействия с авторами. В статье появилось упоминание, что v-единицы не реагируют на масштаб. Никогда не стесняйтесь сообщать авторам статей о всём, что считаете нужным.
http://css.yoksel.ru/size-units/
Видео-курс по CSS-анимациям
Почти 4 часа крутых уроков: https://prglb.ru/1utih
#video #css #animation
Почти 4 часа крутых уроков: https://prglb.ru/1utih
#video #css #animation
Forwarded from Верстальщик от бога
Используйте инструменты разработчика Chrome как синьор фронт-энд разработчик
Перечень функций инструментов разработчика Chrome, которые помогают при разработке.
Читать статью
Перечень функций инструментов разработчика Chrome, которые помогают при разработке.
Читать статью
Forwarded from КНИГИ: REACT, JS, ANGULAR, NODE, VUE
Vue.js: Tools & Skills
Автор: sitepoint
Год издания: 2019
Скачать книгу pdf
Скачать книгу epub
#vue #english
Автор: sitepoint
Год издания: 2019
Скачать книгу pdf
Скачать книгу epub
#vue #english
Forwarded from IT Библиотека
📓 Совершенный алгоритм. Основы
«Совершенный алгоритм» превратит вас в настоящего профи, который будет ставить задачи и мастерски их решать как в жизни, так и на собеседовании при приеме на работу в любую IT-компанию. Тим Рафгарден расскажет об асимптотическом анализе, нотации большое-О, алгоритмах «разделяй и властвуй», рандомизации, сортировки и отбора. Книга адресована тем, у кого уже есть опыт программирования. Вы перейдете на новый уровень, чтобы увидеть общую картину, разобраться в низкоуровневых концепциях и математических нюансах.
Скачать
@itlibrary
«Совершенный алгоритм» превратит вас в настоящего профи, который будет ставить задачи и мастерски их решать как в жизни, так и на собеседовании при приеме на работу в любую IT-компанию. Тим Рафгарден расскажет об асимптотическом анализе, нотации большое-О, алгоритмах «разделяй и властвуй», рандомизации, сортировки и отбора. Книга адресована тем, у кого уже есть опыт программирования. Вы перейдете на новый уровень, чтобы увидеть общую картину, разобраться в низкоуровневых концепциях и математических нюансах.
Скачать
@itlibrary
Приоритеты загрузки JavaScript
Небольшая шпаргалка по приоритетам разных техник загрузки JavaScript:
https://prglb.ru/4jxkx
#browser #performance
Небольшая шпаргалка по приоритетам разных техник загрузки JavaScript:
https://prglb.ru/4jxkx
#browser #performance
Forwarded from FrontEnd книги для программистов
Effective TypeScript
Автор: Dan Vanderkam
Год издания: 2020
Скачать книгу pdf
Скачать книгу epub
#TypeScript #javascript #english
Автор: Dan Vanderkam
Год издания: 2020
Скачать книгу pdf
Скачать книгу epub
#TypeScript #javascript #english
Forwarded from КНИГИ: REACT, JS, ANGULAR, NODE, VUE
Full-Stack Web Development with Vue.js and Node
Автор: Aneeta Sharma
Год издания: 2018
Скачать книгу
#Vue #english
Автор: Aneeta Sharma
Год издания: 2018
Скачать книгу
#Vue #english
Объекты в JavaScript: полное погружение
Объекты в JS так мощны и просты в применении, что разработчики даже не задумываются о том, как они устроены. Пора разобраться: https://prglb.ru/4unys
#javascript
Объекты в JS так мощны и просты в применении, что разработчики даже не задумываются о том, как они устроены. Пора разобраться: https://prglb.ru/4unys
#javascript
Правильная реализация бесконечной прокрутки
Все тонкости в одном материале: https://prglb.ru/2yan
#interface
Все тонкости в одном материале: https://prglb.ru/2yan
#interface
Forwarded from FrontEndDev
5 причин выбрать PWA для ваших веб и мобильных приложений
https://blog.bitsrc.io/5-reasons-to-choose-pwa-for-your-web-and-mobile-apps-515c6d0e784d
https://blog.bitsrc.io/5-reasons-to-choose-pwa-for-your-web-and-mobile-apps-515c6d0e784d
Medium
5 Reasons to Choose PWA for Your Web and Mobile Apps
I’m sure that most of you must have heard about Progressive Web Apps (PWAs). PWA is an exciting piece of technology that has the potential…
Forwarded from КНИГИ: REACT, JS, ANGULAR, NODE, VUE