Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
1.21K 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
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Бумажный заголовок

При наведении на часть заголова она “проминается” словно бумага.
@frontend_school #статья #CSS

Как работает flex-shrink в CSS. Подробное руководство

Эта статья про Flex-shrink - подсвойство, которое помогает в создании шаблона страницы с помощью Flex-box.
Оно определяет фактор “нарезки” элемента, который указывает на сколько “flex частей” будет уменьшаться элемент относительно других элементов в flex-контейнере, в тех случаях, когда для него недостаточно места в этом самом контейнере.
Прошу прощения за задержку в публикации постов - наблюдаются проблемы в работе бота, отвечающего за красивый отложенный постинг
@frontend_school #задача

Паша? Дуров? Это ты?! Привет, я подсяду?!
Знаешь, я тоже ведь сайты могу делать. Кстати, с чего порекомендуешь начать?
Написать полностью фронт и бек? Не, ну это как-то запарно… Может что попроще?
Написать функцию, которая показывает кто лайкнул запись?! А что, лайки все любят! Спасибо за совет.

Условие:
Реализуйте функцию like :: String -> String, которая принимает входной массив, содержащий имена людей, которым нравится элемент. Должен возвращаться текст, как показано в примерах ниже.

Примеры:
likes // “Пока что никто не поставил лайк“
likes “Никита” // “Никита поставил лайк“
likes “Никита”, “Стас” // “Никита и Стас поставили лайк”
likes “Никита”, “Стас”, “Гена” // “Никита, Стас и Гена поставили лайк”
likes “Никита”, “Стас”, “Гена”, “Турбо”, “Дюша Метёлкин” // “Никита, Стас и ещё 3 поставили лайк"

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
На картинке выше представлены три блока со значением width: 200px. Выберите вариант ответа, который соответствует значениям flex-shrink для каждого блока.
Anonymous Quiz
16%
item 1 - 1, item 2 - 2, item 3 - 3
3%
item 1 - 2, item 2 - 3, item 3 - 1
7%
item 1 - 2, item 2 - 1, item 3 - 3
19%
item 1 - 3, item 2 - 1, item 3 - 2
38%
item 1 - 3, item 2 - 2, item 3 - 1
17%
item 1 - 1, item 2 - 3, item 3 - 2
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Анимированная папка

Анимация осуществляется за счёт CSS без использования JavaScript
@frontend_school #туториал

Пишем приложение для заметок на JavaScript

Читать полезные статьи важно и нужно, чтобы стать хорошим специалистом. Но без практики усвоить, полученные из статей знания, трудно. С помощью этого туториала вы сможете самостоятельно написать приложения для заметок.
@frontend_school #викторина_недели

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

Добрый день, мистер Хайзенберг! Да, деньги нужны всем, это понятно. Давайте так, мы закроем глаза на ваши дела, если возьмёте к себе на работу нашего Васеньку. Он хороший мальчик, программки пишет. Зачем он вам?! Ну, пусть напишет программку, которая будет атомы в молекулах считать. Вы и так знаете сколько атомов в молекулах?! Ну, пускай он напишет, а дальше вы сами разберетесь, что с программой делать, вон как у него глаза горят!

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

Примеры:
let water = 'H2O';
parseMolecule(water); // {H: 2, O: 1}
let magnesiumHydroxide = 'Mg(OH)2';
parseMolecule(magnesiumHydroxide); // {Mg: 1, O: 2, H: 2}


Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Media is too big
VIEW IN TELEGRAM
@frontend_school #интересное

Конструктор машины

С помощью соответствующих отметок можно настроить внешний вид и поведение автомобиля. При создании использовался только HTML и CSS.
@frontend_school #статья #JavaScript

Промисы в JavaScript для чайников.

Промисы в JavaScript на самом деле совсем не сложные. Тем не менее, многие люди находят затруднительным их понимание с первых моментов изучения. Поэтому, в этой статье всё будет описано способом для начинающих, чтобы читающий понял материал полностью и объемно. Помните, что промисы лежат в основе async/await и их понимание, можно сказать, что обязательно для работы с асинхронным JavaScript.
Что будет выведено в консоль, при выполнении кода, представленного на изображении выше?
Anonymous Quiz
12%
“Один”
20%
“Два”
30%
“Один” “Два”
38%
“Два” “Один”
@frontend_school #задача

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

Ясно одно: Боб оставил после себя цепочку невыполненных промисов.

Можете ли вы помочь исправить ситуацию?

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

Примечания:
Функции, которые вызываются, действительно существуют и принимают заданные параметры в заданном порядке.
Пользователь «12345» является допустимым пользователем для тестирования.
Любая предоставленная функция, имя которой заканчивается на Async, возвращает промис.
Любая предоставленная функция, имя которой не заканчивается на Async, является синхронной, то есть calculateShipping().
function submitOrder(user) {
 var shoppingCart, zipCode, shippingRate, orderSuccessful;
  
 // Получает корзину текущего пользователя
 OrderAPI.getShoppingCartAsync(user).then(function(cart) {
  shoppingCart = cart;
 });
  
 // Получает почтовый индекс из профиля пользователя
 CustomerAPI.getProfileAsync(user).then(function(profile) {
  zipCode = profile.zipCode;
 });
  
 // Рассчитывает стоимость доставки
 shippingRate = calculateShipping(shoppingCart, zipCode);
  
 // Оформляет заказ
 OrderAPI.placeOrderAsync(shoppingCart, shippingRate).then(function(success) {
  orderSuccessful = success;
 });
  
 console.log(`Your order ${orderSuccessful? "was" : "was NOT"} placed successfully`);
}

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