00:00:00 Интро
00:01:07 События
00:03:35 Aspect ratio, DevTools, реклама
00:17:46 Кроссбраузерный appearance: none
00:23:40 Top-level await в Node.js
00:34:52 Deno вместо Node
00:54:25 Постоянное хранилище
01:02:15 Дорогая цена стилей

Использование CSS-масок для создания у изображения зубчатых краёв.

https://css-tricks.com/using-css-masks-to-create-jagged-edges/

На днях Фейсбук купил сервис для поиска гифок Giphy за 400 млн долларов. Сделка, конечно, не ахти — бывали у ребят покупки и покрупнее — но никогда не поздно подсуетиться и запустить свой Инстаграм.

Поэтому наш редактор Женя пошёл на сайт с курсовыми работами для третьекурсников и нашёл там ещё 5 идей, которые могут принести создателям миллионы 😜

Вторая часть цикла статей про инструменты разработчика. Продолжаем вас знакомить с Chrome DevTools, в этот раз — про Console, Sources и Network.

Отзыв выпускницы «JavaScript. Профессиональная разработка веб-интерфейсов» #19 Анны Силаевой:

«Затянула меня Академия. Ведь я всего лишь хотела вёрстку поучить, а уже закончила этот курс и жду начала «JavaScript. Архитектура клиентских приложений».

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

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

В общем, если вы новичок в программировании, не теряйте время — ГОТОВЬТЕСЬ!»

Новый поток курса «JavaScript. Профессиональная разработка веб-интерфейсов» стартует уже 26 мая.

В программе появилось обновление — лекция, посвящённая знакомству с самыми распространёнными возможностями стандарта EcmaScript 2015 и новее.

Статья про виды изображений и обеспечение доступности.

https://www.smashingmagazine.com/2020/05/accessible-images/

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

Псевдокласс добавляется к селектору c помощью символа :, вот так селектор:псевдокласс. Список существующих псевдоклассов можно посмотреть в спецификации. А в наших интерактивных курсах потренироваться в их применении.

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

Сколько дали правильных ответов? 🤓

Создание эффекта фейерверка при нажатии на кнопку.

https://css-tricks.com/playing-with-particles-using-the-web-animations-api/

Руководство для новичков по работе с HTML-кодом на своём компьютере: разбираемся, в чём его писать и как запустить.

​​Открыли запись на новые потоки профессий:

«Фронтенд-разработчик» (7 сентября 2020 — 28 марта 2021)

«React-разработчик» (7 сентября 2020 — 1 августа 2021)

Если у вас есть вопросы про обучение, программу и трудоустройство — оставьте на сайте заявку на консультацию. Мы свяжемся с вами и постараемся помочь 😊

«Акселератор» мы запустили полгода назад. За это время его прошли 65 человек, а вместе они закончили 96 проектов.

В дайджесте рассказали, с каким уровнем подготовки приходят в «Акселератор», об обновлениях в проектах, и поделились отзывами выпускников.

Неочевидные возможности CSS-анимаций с примерами их применения.

https://habr.com/ru/post/503026/

Почему на профессиональных курсах мы отказались от Фотошопа и других графических редакторов в пользу Фигмы?

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

Теперь настала эпоха Фигмы. Веб-дизайнеру просто делать веб-интерфейсы в Фигме, верстальщику просто получить макет и узнать всю необходимую информацию о макете: размер текста, цвет фона, отступы до соседних элементов, ну и экспорт картинок.

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

В блоге у нас есть гайд, как начать работу с макетом в этом графическом онлайн-редакторе.

Научиться верстать быстро, HTML, CSS, кто такой фронтендер, кто такой Кекс, макеты в Фигме, профессиональные навыки, интерактивные курсы.

Сегодня отдаём дань поисковому трафику и празднуем день SEO-оптимизатора (да, такой есть)! В честь этого невероятного события — скидка на навыки и тренировочные макеты до 60% 🎉

С 2013 года мы учим начинающих и продолжающих веб-разработке. И один из наших продуктов — интерактивные курсы, они же — тренажёры. Каждую главу пишут продюсер, автор, дизайнер, разработчик и эксперты — люди с большим опытом продуктовой разработки.

Рассказали на примере обновлённого курса «Знакомство с JavaScript», как создаются курсы: про идеи, разработку, тестирование и работу над ошибками.

​​Живые и неживые коллекции в JavaScript. Рассказали, в чём отличие и как использовать.

​​Ассоциативные массивы в PHP: зачем они нужны, и как их использовать.

Развёрнутый отзыв выпускницы девятнадцатого потока «HTML и CSS. Адаптивная вёрстка и автоматизация» Вероники Сампетовой с советами для желающих пойти на курс. Следующий поток будет проходить с 13 июля по 13 сентября, доступна оплата в рассрочку.

«Ух! Вот только успешно сдала проект! Пишу по горячим следам, пока лёгкость бытия не улетучилась. Что могу сказать, интенсив был правда непростой, отзывы про небоскребы не были пустым звуком. И если на «HTML и CSS. Профессиональная вёрстка сайтов» мне казалось, что я пробежала спринт, едва успев запыхаться, здесь я почувствовала себя марафонцем на длинные дистанции.

У меня не было шока о новых технологиях в виде зависимостей, новых команд в гите, препроцессорах. Усвоилось всё быстро, но только потому, что в рамках своей нынешней работы я уже сталкивалась с подобным, плюс опыт в программировании на JavaScript сильно мне помог, скрывать не буду. А в БЭМ я и вовсе влюбилась чуть ли не с первого раза — очень лаконичная методология, ничего лишнего.

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

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

Второе и тоже стало для меня ключевым — не сдавайтесь. Звучит банально, но мне это помогло, правда. Если что-то не получается с первого раза, то оставьте, займитесь чем-то другим — тем, что наверняка знаете, но никогда не опускайте руки.

Третье — отдыхайте. В какой-то момент я настолько увлеклась вёрсткой, что спала по три часа в день, под конец я уже адекватно не могла соображать, только совершала ошибки и злилась. В этот момент я решила выдохнуть, сделать перерыв, отдышаться, это помогло.

Четвёртое — читайте статьи, слушайте подкасты по веб-разработке помимо основных лекций. Я поняла, что если бы дополнительно ничего не читала, некоторые вещи cверстать так просто не смогла бы.

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

Удачи и упорства всем в прохождении данного интенсива! А Академии большое спасибо за бесценный опыт!»

Анимированный эффект появления подписи к изображению при наведении на чистом CSS.

https://css-irl.info/css-only-slide-up-caption-hover-effect/

​​Вышел профессиональный навык «Построение сеток на гридах по макету» 🎉

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

В комплекте навыка — углубленная теория, демонстрационные кейсы с пошаговым созданием сетки и тренировочные с дизайном страницы и эталонным решением.