Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
1.22K subscribers
550 photos
66 videos
3 files
252 links
Крутым фронтендером не рождаются — им становятся на канале @frontend_school!

Наш чат: @frontend_school_chat
Наша флудилка: @frontend_school_flud

Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy

Мы в VK: vk.com/frontend_school

Связь: @jellyjail
Download Telegram
@frontend_school #интересное

Скелет проекта

В данном проекте метафорично показно взаимодействие между HTML, CSS и Javascript. В общем-то оно и показано с помощью HTML, CSS и Javascript.
@frontend_school #статья

Ревью верстки: 10 полезных замечаний и советов

Code-review для верстки часто пренебрегают, отчасти, возможно, из-за сложившегося стереотипа, что верстать нужно, набрав побольше воздуха, зажмурившись и раскидываясь хаками и костылями, пока не будет достигнута та самая неуловимая кроссбраузерность. А поддерживать чужую верстку — только человеку с крепкими нервами и достаточным запасом медикаментов.
Какое значение примет переменная result при выполнении кода, представленного на изображении выше?
Anonymous Quiz
16%
[]
10%
toString
36%
[object Object]
21%
[object Array]
17%
[Object]
@frontend_school #юмор

У новичков ещё и одежда рядом с человеком будет из-за съехавших стилей.
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Дом на дереве

Игра, выполненная на HTML и CSS (с использованием препроцессора SCSS). Никакого JavaScript! Здесь вам и постройка дома, и смена дня и ночи, и отражение в воде!
@frontend_school #статья #JavaScript

BigInt — длинная арифметика в JavaScript

BigInt — числовой примитивный тип данных в JavaScript, позволяющий работать с числами произвольной точности. С BigInt вы сможете безопасно хранить и обрабатывать большие целые числа даже за пределами максимального безопасного целочисленного значения Number. В этой статье мы рассмотрим некоторые примеры использования BigInt и новые функции Chrome 67, сравнивая BigInt и Number в JavaScript.
Каким из нижепредставленных способов можно получить значение дата атрибута “data-EX” в JavaScript?
Anonymous Quiz
37%
elem.dataset(“EX”);
41%
elem.data(“EX”);
12%
elem.dataset(“ex”);
10%
elem.data(“ex”);
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Переключатель в виду клубка

Написан на HTML, CSS и JavaScript. Напоминает Невыполнимый чекбокс, который мы публиковали ранее.
@frontend_school #статья #JavaScript

Зачем в JavaScript нужен строгий режим?

Семантика строгого режима отличается от традиционного нестрогого режима, который иногда называют «грязным» (sloppy mode). В таком режиме синтаксические правила языка не так строги, а когда происходят некоторые ошибки, система никак не оповещает о них пользователя. То есть — ошибки могут быть проигнорированы, а код, в котором они допущены, сможет выполняться дальше. Это способно привести к неожиданным результатам выполнения кода.
Какое значение примет переменная res в коде, представленном на изображении выше?
Anonymous Quiz
3%
null
9%
999
14%
undefined
22%
object
36%
function
17%
number
@frontend_school #интересное

Крестики-нолики

Полноценная игра крестики-нолики в которую можно играть и одному, и вдвоём. Интересна с точки зрения кода и дизайна.
@frontend_school #статья #JavaScript

Как использовать Nullish Coalescing(оператор нуллевого слияния) в JavaScript

В этой статье вы узнаете как работать с Nullish Coalsing, а именно оператором нулевого слияния в JavaScript. И чем он отличается от логических операторов.
@frontend_school #викторина_недели

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

А вот топ-10 прошлой викторины:
🥇 @nadin_zhen6 (1 мин 8 сек)
🥈 @AndrewWeb6 (1 мин 15 сек)
🥉 @noachase5 (1 мин 44 сек)
 4. @Egor_Karapetayn5 (1 мин 35 сек)
 5. @Elena_mariupol4 (1 мин 43 сек)
 6. Анна – 4 (1 мин 51 сек)
 7. @Anton_Kiylo4 (2 мин 9 сек)
 8. @gkharut4 (1 мин 45 сек)
 9. @AlexeyKii3 (1 мин 40 сек)
 10. @rebintex3 (2 мин)

Проверьте свои навыки и знания!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #задача №32

Берлинские часы

Круглая лампочка вверху конструкции мигает каждые две секунды. Далее наблюдаем четыре ряда лампочек. Верхние два ряда отображают часы. Нижние два отвечают за минуты.
В каждой группе в первом ряду порядковый номер последней горящей лампочки умножаем на 5. Во втором ряду умножаем на 1.
Произведения первого и второго ряда складываем. Сумма верхней группы дает часы в 24-часовом формате. Сумма нижней группы дает минуты.

Условие:
Напишите функцию, которая принимает определенное время в 24-часовом формате ('чч : мм : сс') и выводит строку, воспроизводящую Берлинские часы.
“O” = Лампочка не горит
“R” = Горит красная лампочка
“Y” = Горит жёлтая лампочка

Например:
Ввод:
12:56:01
Вывод:
O
RROO
RROO
YYRYYRYYRYY
YOOO

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

И не стесняйтесь задавать вопросы в чате, если что-то непонятно!