@frontend_school #юмор

@frontend_school #интересное

Как далеко проскроллишь?

Забавный проект, который считает в метрах как много ты проскроллил вниз. Интересен с точки зрения кода - бесконечная прокрутка и подсчёт пройденного расстояния.

@frontend_school #статья #JavaScript

Деструктуризация в ES6. Полное руководство

Деструктуризация просто подразумевает разбивку сложной структуры на простые части. В JavaScript, таковая сложная структура обычно является объектом или массивом. Используя синтаксис деструктуризации, вы можете выделить маленькие фрагменты из массивов или объектов. Такой синтаксис может быть использован для объявления переменных или их назначения. Вы также можете управлять вложенными структурами, используя уже синтаксис вложенной деструктуризации.

@frontend_school #викторина_недели

Это 11-я еженедельная викторина, основанная на вопросах, публиковавшихся в течении недели. Вы можете закрепить, полученные знания, ответив на несколько вопросов. Для ответа на каждый вопрос даётся 30 секунд.

А вот топ-10 прошлой викторины:
🥇 @ivan_beletsky – 6 (1 мин 46 сек)
🥈 @panamanap – 5 (1 мин 1 сек)
🥉 @natalia_koshevaya – 5 (1 мин 32 сек)
 4. @awaqum – 5 (1 мин 56 сек)
 5. @nikolay696 – 4 (1 мин 58 сек)
 6. @Camrado – 3 (1 мин 8 сек)
 7. @artem_pleskachov – 3 (1 мин 2 сек)
 8. @Elena_mariupol – 3 (1 мин 34 сек)
 9. @Marianakukhar – 3 (1 мин 9 сек)
 10. @maxguitarman – 3 (2 мин 13 сек)

Проверьте свои навыки и знания!

@frontend_school #полезное

Прижатый футер

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

Существуют разные способы прижать подвал:
- абсолютное позиционирование 
- минимальная высота контента
- табличная верстка
- css flex
- css grid

Сегодня будут рассмотрены два варианта, как наиболее актуальные - с помощью flex и с помощью grid.
В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.

@frontend_school #юмор

@frontend_school #интересное

Карусель

Выполнена на чистом CSS. Никакого JS. Необычный внешний вид достигнут благодяря CSS свойству clip-path.

@frontend_school #статья #CSS

10 полезных инструментов для создания роскошного CSS

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

@frontend_school #викторина

@frontend_school #юмор

@frontend_school #интересное

Nodivember. Карандаш

Сегодня предлагаю вам посмотреть на такой интересный проект, как анимированный карандаш, выполненный без использования блока <div></div>. В общем-то поэтому он и участвует в челендже Nodivember. Посмотрите, как реализована данная анимация.

@frontend_school #статья #JavaScript

JavaScript Maps vs Обычные объекты: смертельная битва

Стандарт ES6 дал в руки разработчикам мощное и гибкое оружие – JavaScript Maps. Кажется, простым объектам уже пора на покой... Или нет?

@frontend_school #викторина

@frontend_school #задача №38

Самый одинокий символ

Условие:
Необходимо написать функцию, которая принимает строку и возвращает массив символов, у которых есть наибольшее количество пробелов справа и слева.

Например:
"a b c" --> ["b"]
"a bcs d k" --> ["d"]
" a b sc p t k" --> ["p"]
"a b c de" --> ["b", "c"]
" a b c de " --> ["b"]
"abc" --> ["a", "b", "c"]

Примечание:
1. Пробелы перед строкой и после строки не учитываются
2. Строка не должна содержать одинаковый символ более одного раза
3. Порядок символов в возвращаемом массиве не имеет значения

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

И не стесняйтесь задавать вопрос, если зашли в тупик!

@frontend_school #юмор

@frontend_school #интересное

Кусок пиццы Тони Пеперони

Сделана в виде svg картинок, которые автор анимирует библиотекой GSAP. Анимация происходит по нажатию.

@frontend_school #статья

Chrome расширения для веб-разработки и работы с GitHub

Подборка расширения для Хрома, которые используются при разработке, анализе сайтов, в работе с GitHub и просто в повседневной жизни.
Возможно для большинства список этих расширений не будет открытием, но те, кто узнает о них впервые и установит, несомненно будут наслаждаться работой с новыми инструментами.

@frontend_school #викторина