WebDEV #test #js

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

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

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

const array  = [5,4,7,8,9,2];
Sum
array.reduce((a,b) => a+b);
// Output: 35
Max
array.reduce((a,b) => a>b?a:b);
// Output: 9
Min
array.reduce((a,b) => a<b?a:b);
// Output: 2

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

🛠 ExtractCSS применяется для извлечения из HTML-документов сведений о разнообразных стилях HTML-документов (речь идёт о стилях, назначаемых идентификаторам и классам элементов, о встроенных стилях) и для формирования на их основе CSS-кода. В ходе работы с этим ресурсом не нужно делать ничего особенного: достаточно скопировать в соответствующее окно HTML-код, а всё остальное делается автоматически.

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

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

Для сортировки строк есть встроенные методы, такие как reverse() и sort(). А как насчет чисел и массивов объектов? Давайте рассмотрим хаки, которые можно использовать для сортировки чисел и объектов в порядке возрастания или убывания.

Sort String Array
const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort()
// Output
(4) ["Joe", "Kapil", "Musk", "Steve"]
stringArr.reverse()
// Output
(4) ["Steve", "Musk", "Kapil", "Joe"]
S.12

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

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

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

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