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

Обратный отсчёт

Этот счётчик обратного отсчёта выполнен на HTML и CSS с использованием препроцессоров. Никакого JavaScript. Рекомендуем изучить для понимания принципов работы.

@frontend_school #статья

Numl – Альтернативный язык разметки и стилизации для веб

Numl это язык разметки, который объединяет в себе функции CSS-фреймворка, JS-фреймворка без композиции и Дизайн-системы, и предоставляет набор готовых элементов, каждый из которых имеет обширный набор свойств для кастомизации. Язык основывается на нативном браузерном API Custom Elements из спецификации Web Components, и совместим с популярными JS-фреймворками, такими как Vue, Svelte, Angular и React. Отличительной чертой Numl является то, что все стили для интерфейса он генерирует в runtime, что позволяет выжать максимум из CSS и добиться огромной гибкости в стилизации и кастомизации элементов. Эта статья — ответ на вопрос, как так получилось и почему такой подход заслуживает право на жизнь.

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

@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи №36 «Калькулятор функций».

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

Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!

@frontend_school #юмор

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

Загрузчик в стиле Pacman

Выполнен без использования JavaScript. Можно добавить на сайт, посвящённый играм, например.

@frontend_school #статья

Безумие на чистом HTML + CSS

Недавно в нашей рубрике "Интересное" была игра, сделанная без использования JavaScript. В сегодняшней статье разбирается то, как именно она была сделана, какие приёмы были использованы. Рекомендую к прочтению - там много любопытных моментов и тонкостей.

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

@frontend_school #задача №37

Тест IQ

Знакомьтесь, Боб! Боб готовится сдавать тест на IQ и ему нужна ваша помощь, иначе ему не поздоровится. Наиболее частая задача в этом тесте - найти лишний элемент. Боб заметил, что одно число обычно отличается от других чётностью. Помогите Бобу!

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

Например:
iqTest("2 4 7 8 10") => 3 // Третье число нечётное, в то время, как все остальные чётные

iqTest("1 2 1 1") => 2 // Второе число чётное, в то время, как все остальные нечётные

Примечание:
Имейте в виду, что ваша задача - помочь Бобу пройти настоящий тест на IQ, что означает, что индексы элементов начинаются с 1 (а не с 0).

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

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

@frontend_school #юмор

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

Пикачу на сёрфе

Сделан в виде svg картинок и анимирован с помощью сторонней библиотеки GreenSock.

@frontend_school #статья #JavaScript

13 полезных однострочников на JavaScript

Однострочник — фрагмент кода в одну строку и решающий задачу, на которую у новичка может уйти пара десятков строк. В этой статье собраны 13 однострочников, которые могут вам пригодиться.

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

@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи №37 «Тест IQ».

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

Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!

@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 сек)

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