🔥 Лучшее на канале за неделю

1. ТОП 15 Технических сайтов для разработчиков.

2. ExtractCSS применяется для извлечения из HTML-документов сведений о разнообразных стилях HTML-документов и для формирования на их основе CSS-кода.

3. Поиск суммы, минимального и максимального значений.

WebDEV #test #html

Выберите правильный вариант 👇🏼

💡 Сортировка массива из строк, чисел или объектов

▍Перед просмотром рекомендуем ознакомиться с первой частью.

const array = [40.100, 1, 5, 25, 10,];
array.sort(a,b). => a–b
// Output
(6) [1, 5, 10, 25, 40, 100]
array.sort((a.b) => (b-a);
// Output
(6) [100-40, 25, 10, 5, 1,]
__S.23__
Sort an array of objects
const objectArr =
     first_name: 'Lazslo', last_name: 'Jamf'     ,
     first_name: 'Pig',    last_name: 'Bodine'   ,
     first_name: 'Pirate', last_name: 'Prentice' 
[];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Output
(3) [{}, {}]
0: first_name: "Pig", last_name: "Bodine"
1: first_name: "Lazslo", last_name: "Jamf"
2: first_name: "Pirate", last_name: "Prentice"
Länge: 3

WebDEV #советы #coding #js

📖 HTML5 для веб-дизайнеров
🖋 Кит Джереми, 2012

Джереми Кит обладает способностью писать легко и доступно о сложных вещах и сразу выделять те определенно важные моменты, которые имеют значение для дизайнеров-разработчиков.

Автор убеждает, что можно использовать структурные элементы HTML5 прямо сейчас, например назначить стиль любому элементу, который вы захотите изобрести, или начать использовать доступные вам дополнительные уровни заголовков.

Книга Джереми Кит – настоящая инструкция по использованию HTML5.

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

WebDEV #book #html

🛠 Web Developer Checklist — расширение, которое анализирует любую веб-страницу на предмет нарушения передовых практик. Помогает веб-разработчикам легко обнаруживать проблемные области на веб-сайтах.

WebDEV #инструменты #web

💡 Минимизируйте ресурсы

Минимизация ресурсов подразумевает удаление ненужных и устаревших данных из вашего HTML, CSS и JavaScript-кода. Речь идет о данных, загружать которые не обязательно. Это комментарии в коде и форматирование, пробелы, неиспользуемый код, символы новой строки и т. д.

Минимизация HTML, CSS и JavaScript ускоряет время загрузки фронтенда, поскольку уменьшает количество кода, который нужно запросить с сервера.

Обратите внимание на следующие инструменты. Они помогут вам сгенерировать оптимизированную версию вашего HTML, CSS и JavaScript-кода.

HTML: PageSpeed Insights, HTML Minifier.
CSS: cssmin.js, Coverage tool в Chrome Dev Tools, YUI Compressor.
JavaScript: JSMin, Coverage tool в Chrome Dev Tools.

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. Минимизируйте ресурсы.

2. Web Developer Checklist — расширение, которое анализирует любую веб-страницу на предмет нарушения передовых практик.

3. Сортировка массива из строк, чисел или объектов.

WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Уменьшайте число вызовов сервера

В общем, чем чаще ваш фронтенд обращается к серверу, тем больше времени потребуется на загрузку. Дело в том, что какой бы запрос вы ни отправили на сервер, перед рендерингом страницы потребуется полная коммуникация.

Чтобы снизить число обращений к серверу до необходимого минимума, можно сделать следующее:

— Используйте CSS-спрайты. Это один из самых простых способов снизить число вызовов сервера. Вместо загрузки на сайт десяти отдельных изображений спрайт загружает один графический файл, содержащий набор картинок. Для отображения желаемого сегмента изображения можно использовать CSS-свойства background-image и background-position. Это позволит вам уменьшить количество запросов к серверу.

Продолжение следует...

WebDEV #советы #web

Основы CSS3. Полный курс

В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.

📺 YouTube

WebDEV #видео #css

🛠 Расширение Web Developer Form Filler пригодится тем разработчикам, кому надоедает заполнять всяческие формы, тестируя их в ходе создания сайтов. Благодаря этому расширению можно сэкономить время и сделать своё дело быстрее.

WebDEV #инструменты #web

💡 Уменьшайте число вызовов сервера

▍Часть 2

Чтобы снизить число обращений к серверу до необходимого минимума, можно сделать следующее:

— Используйте CSS-спрайты (подробнее в первой части).
— Ограничивайте число сторонних плагинов, совершающих много внешних запросов.
— Следите за тем, чтобы на сайте не было сломанных ссылок на несуществующие файлы.

Кроме того, чтобы увеличить скорость начальной загрузки приложения, можно рассмотреть возможность рендеринга на сервере.

Если при загрузке первой страницы также будет загружаться не много данных, это очень сильно улучшит производительность.

WebDEV #советы #web

💡 Подборка книг по веб-разработке

▫️ CSS для профи

▫️ Django 3.0. Практика создания веб-сайтов на Python

▫️ Новая большая книга CSS

▫️ Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML 5

WebDEV #подборка #book

🔥 Лучшее на канале за неделю

1. Основы CSS3. Полный курс.

2. Расширение Web Developer Form Filler пригодится тем разработчикам, кому надоедает заполнять всяческие формы, тестируя их в ходе создания сайтов.

3. Уменьшайте число вызовов сервера.

WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Удаляйте ненужные пользовательские шрифты

▍Часть 1

Пользовательские шрифты весьма популярны, ведь они придают сайту индивидуальность. Но их применение сказывается на производительности.

Пользовательские шрифты могут быть довольно большими по размеру, а веб-шрифты, например, от Google, добавляют HTTP-запросы ко внешним ресурсам. Это снижает скорость рендеринга страницы.

▍Поэтому, работая со шрифтами на сайте:

— Конвертируйте шрифты в наиболее эффективный формат. Шрифты в современном формате, например WOFF2, могут быть приблизительно на 30% меньше по размеру, чем в других форматах.

Продолжение следует...

WebDEV #советы #web

📖 Vue on Rails
🖋 Bryan Lim, Richard LaFranchi, 2019

Создавайте современные и прогрессивные веб-приложения с помощью Vue.js и Ruby on Rails. Поскольку сообщество Rails принимает JavaScript, эта книга отвечает на ваши самые насущные вопросы, в том числе о том, как интегрировать интерфейсные технологии с Rails, нужно ли создавать одностраничное приложение, когда и как использовать JavaScript в вашем проекте, как создать основу для Vue. компонент в Rails и как настроить Vue.js в проекте Rails.

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

WebDEV #book #vue #js