VueJS, JS, HTML, Frontend - Uncolored collection
125 subscribers
228 photos
8 videos
5 files
541 links
Пополняющаяся коллекция материалов по VueJS и смежных технологий.

Канал по Laravel:
https://t.me/laravel_uncolored

По Svelte:
https://t.me/svelte_uncolored

По React:
https://t.me/react_uncolored

Для связи @RainySkys
Download Telegram
Talking TypeScript

Книга Акселя Раушмайера о TypeScript. Половина доступна для чтения бесплатно!

Читать: https://prglb.ru/101c1

#books #typescript
Open source таблички а-ля Exel. Вдруг кому пригодится)
​​Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

It has lots of features!

https://github.com/mengshukeji/Luckysheet

#js
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
#devops

Мне кажется, любому разработчику стоит разобраться с основами DevOps, потому что это не только набор инструментов, но и культура работы с кодом. Рекомендую данную статью, чтобы понять проблематику и смысл данной области деятельности.

https://habr.com/ru/company/nixys/blog/514098/
Forwarded from Хабр
[Перевод] Vue.js для начинающих, урок 11: вкладки, глобальная шина событий

Сегодня, в 11 уроке, который завершает этот учебный курс по основам Vue, мы поговорим о том, как организовать содержимое страницы приложения с помощью вкладок. Здесь же мы обсудим глобальную шину событий — простой механизм по передаче данных внутри приложения.

Читать дальше →
http://amp.gs/F73S
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
Forwarded from Веб-страница
С Vue 3 больше не нужен Vuex?

Vuex — это паттерн управления состоянием и библиотека для приложений на Vue.js. Так зачем от неё отказываться? Дело в том, что новый Vue 3 из коробки предлагает реактивность и новые способы структурирования веб-приложений. Эти изменения настолько глобальны, что можно централизовать управление состоянием без дополнительных инструментов.

Подробнее в статье: https://tprg.ru/m61Q

#фронтенд #vuejs
#статья дня
#html #css #px #em #rem #vw #vh

Лето и отпуск не лучшие помощники в написании новых статей, но ничто не забыто.

Тем временем великолепная Йоксель (https://twitter.com/yoksel) выпустила крайне подробную статью о единицах измерения в CSS.

Рассмотрены даже не самые популярные единицы вроде ex и ch, даны разъяснения об их вычислении и приведены наглядные примеры.

Единственное, не сказано о том, что v-единицы не реагируют на масштаб в браузере. Надо бы сообщить. (см. Upd.)

Читаем и не забываем подписываться на Йоксель в твиттере.

Upd. О важности взаимодействия с авторами. В статье появилось упоминание, что v-единицы не реагируют на масштаб. Никогда не стесняйтесь сообщать авторам статей о всём, что считаете нужным.

http://css.yoksel.ru/size-units/
​​Используйте инструменты разработчика Chrome как синьор фронт-энд разработчик

Перечень функций инструментов разработчика Chrome, которые помогают при разработке.

Читать статью
Forwarded from IT Библиотека
​​📓 Совершенный алгоритм. Основы

«Совершенный алгоритм» превратит вас в настоящего профи, который будет ставить задачи и мастерски их решать как в жизни, так и на собеседовании при приеме на работу в любую IT-компанию. Тим Рафгарден расскажет об асимптотическом анализе, нотации большое-О, алгоритмах «разделяй и властвуй», рандомизации, сортировки и отбора. Книга адресована тем, у кого уже есть опыт программирования. Вы перейдете на новый уровень, чтобы увидеть общую картину, разобраться в низкоуровневых концепциях и математических нюансах.

Скачать

@itlibrary
Приоритеты загрузки JavaScript

Небольшая шпаргалка по приоритетам разных техник загрузки JavaScript:
https://prglb.ru/4jxkx

#browser #performance
Full-Stack Web Development with Vue.js and Node

Автор: Aneeta Sharma
Год издания: 2018

Скачать книгу

#Vue #english
Объекты в JavaScript: полное погружение

Объекты в JS так мощны и просты в применении, что разработчики даже не задумываются о том, как они устроены. Пора разобраться: https://prglb.ru/4unys

#javascript
Правильная реализация бесконечной прокрутки

Все тонкости в одном материале: https://prglb.ru/2yan

#interface