📖 CSS для профи
🖋 Кит Грант, 2019

Как вы понимаете что зашли на хороший сайт? Это происходит практически мгновенно, с первого взгляда. Такие сайты привлекают внимание картинкой - отлично выглядят, - а кроме этого они интерактивны и отзывчивы. Сразу видно, что такую страничку создавал CSS-профи, ведь именно каскадные таблицы стилей (CSS) отвечают за всё наполнение и оформление сайта от расположения элементов до неуловимых штрихов. Дело за малым - стать CSS-профи, а для этого придется разобраться в принципах CSS, научиться воплощать в жизнь идеи дизайнеров, не забывать о таких важных "мелочах", как красиво подобранный шрифт, плавные переходы и сбалансированная графика.

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

WebDEV #book #css

🛠 Unminify позволяет превращать минифицированный (упакованный, обфусцированный) код (JavaScript, CSS, HTML, XML, JSON) в удобный для восприятия вид.

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

💡 Приемы JavaScript для повышения скорости кода

JS имеет богатую функциональность, позволяющую делать многие вещи по-разному. В данной серии советов будут представлены полезные приемы JavaScript, о которых вы, возможно, не знали, или уже забыли.

▍Объявляйте и инициализируйте массивы

Для инициализации массива определенного размера можно использовать значения по умолчанию, такие как “”, null или 0.

 array = Array(5).fill(''); 
// Output 
(5) ["", "", "", "", ""]
const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Output
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5

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

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

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

1. CSS для профи.

2. Unminify позволяет превращать минифицированный код в удобный для восприятия вид.

3. Знайте себе цену.

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

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

📺 YouTube

WebDEV #видео

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