Нашел для вас интересный авторский канал на котором разбираются частые вопросы с тех. собеседований на позицию фронтенд разработчика:
frontends don't lie

Доступно, понятно, со ссылками на материал для изучения - всё как мы любим 😊

Канал будет интересен всем, т.к. на нём раскрывают много тонкостей фронтенда, которые пригодятся не только на собеседованиях.

Если потеряли мотивацию, столкнулись со сложностями, хочется всё бросить - остановитесь и послушайте подкаст от Marlin'a «Вот почему начинающим программистам нелегко учиться!»

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

За прошедшие 2 недели мало практиковался, но всё-таки начал писать классы по БЭМ и использовать препроцессор Less.

Препроцессоры, кажется, нужно использовать только если вам нужен какой-то их функционал, которого нет в css, но изучить их определенно стоит. Самые популярные препроцессоры Less и Sass очень похожи и если вы знаете один, считайте что знаете другой.

А вот БЭМ-методологию действительно лучше использовать, по началу будет немного непонятно (я сейчас на этом этапе), но далее это поможет не тратить много времени на создание структуры страницы.

Ссылки:
- HTML Шорты про БЭМ - коротко о главном;
- Основные понятия на сайте bem.info, там вся остальная информация про БЭМ, но не советую сильно углубляться, главное понять что такое блок, элемент блока, модификатор и как это всё называть;
- БЭМ-методология: с чего всё начиналось и зачем это всё нужно статья про создание БЭМ от Яндекса;
- материала по изучению и Less и Sass очень много, что-то особенно выделять не хочется - смотрите и читайте на любимых ресурсах, но начать можно, например с бесплатного курса от HTML Academy Знакомство с LESS;
- Less Tester, Sass Meister - две песочницы по Less и Sass соответственно, в которых можно попробовать функционал препроцессоров и сразу увидеть что будет в css.

Наконец-то нашёл время и разобрался как работает Gulp, а также настроил его под себя. Теперь вёрстка стала гораздо более приятным процессом.

Сейчас я просто пишу в консоли "gulp dev" (название выбрал сам, вы сможете написать другое) и у меня запускается сервер browser sync (о нём писал ранее), а препроцессорный код при сохранении файла на лету компилируется в css. Все изменения сразу видно в браузере. Сказка.

Для настройки Gulp вам может понадобиться много времени (у меня ушло часа 4, ещё настроил сборку проекта на будущее), но я рекомендую найти это время, спокойно сесть с чашкой чая и потихоньку шаг за шагом написать свою сборку.

В этом вам поможет статья (а внутри есть ещё видео урок) от WebDesign Master. Там всё очень подробно, с примерами кода. Рекомендую для начала разобраться с browser sync чтобы оценить всю магию автоматизации

Познакомился с canvas, говорят скоро без него никуда.
Canvas предназначен для создания графики с помощью JavaScript. Например, его используют для рисования графиков, создания фото композиций, анимаций и даже обработки и рендеринга видео в реальном времени.

Изучать canvas предлагаю сразу на практике: открывайте справочник MDN и пробуйте в каком-нибудь codepen все возможности, которые там описаны. Canvas переводится как холст, то что вы на нём нарисуете ограничено лишь вашей фантазией :)

На MDN не все статьи переведены на русский, так что если у вас есть возможность и способность к переводу, то вы можете помочь сообществу переводя статьи справочника на русский язык.

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

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

На learn.javascript.ru есть целый раздел посвященный событиям. Предлагаю вместе со мной потихоньку его изучать и пробовать всё в браузере. Вариантов использования событий огромное множество, есть где разгуляться в практике ☺

Продолжаю изучать события javascript, сейчас остановился на понятии делегирования событий. Делегирование событий позволяет не вешать обработчик события на каждый нужный нам DOM-элемент (которых например много и они должны похоже реагировать на событие).

Мы просто добавляем обработчик события на их общий родитель (контейнер) и с помощью свойства event.target узнаем откуда событие всплыло.

Подробнее описано в небольшой статье (можно использовать в качестве шпаргалки) на cat-in-web.ru.

Также для глубокого понимания работы событий предлагаю статью на habr.com Выразительный JavaScript: Обработка событий

Не забывайте и про learn.javascript.ru. Там мы получаем базовые знания и практику в решении предложенных задач.

Пост для тех кто все-ещё не пользуется дебаггером браузера с полезными ссылками для освоения

Browser's debugger
или Как я перестала бояться и полюбила дебаг. Ну или как-то так.

Один из первых инструментов, которые я освоила в начале обучения - это как дебажить JS через инструменты разработчика в Хроме. Считаю, что это были те самые 80% успеха за 20% времени. Потому что этот инструмент дает:
⚡️понимание контекста вызова функции и того, как в целом код выполняется в браузере;
⚡️уменьшение времени на поиски и исправление ошибок;
⚡️возможность изменения стейта и результата выполнения.
На медиуме вышла супер-прикладная статья о дебаггере, очень советую ее просмотреть и попробовать дебажить свой код https://medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff. На learnJS есть не менее полезная статья на русском: https://learn.javascript.ru/debugging-chrome. И еще одна статья о функциях Chrome DevTools, о которых вы могли не знать: https://www.lucidchart.com/techblog/2018/04/17/time-saving-chrome-devtools-shortcuts/ - идеально при параллельном освоении дебага.

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

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

В скором времени напишу ТЗ с требованиями к дневнику и потихоньку начну реализовывать, да поможет мне гугл 🙂

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

Вы периодически пишите мне в личку вопросы или советуете какие-либо ресурсы для изучения фронтенда, спасибо вам за это, обратная связь очень важна.

Следующим постом скину такое сообщение про сайт frontloops.io. Лучше я всё равно не опишу о чём этот сайт. От себя лишь добавлю что подписался на их рассылку и в ближайшее время приступлю к выполнению заданий 😎

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

1. Сайт адаптирован под мой телефон (айфон 6), под остальные экраны будет адаптирован, когда всё будет готово.

2. На главном экране после нажатия кнопки старт я выбираю тренировку (тренировки будут записаны заранее, возможность создавать свои тренировки возможно будет в будущем)

3. Внизу есть кнопки переключения экранов (стартовая страница, календарь, страница просмотра и редактирования упражнений, страница просмотра и редактирования тренировок. На начальном этапе реализую стартовую страницу и календарь, остальные две ссылки пока будут пустые)

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

5. На странице текущей тренировки я вижу общее время тренировки, время после крайнего подхода, текущее упражнение с картинкой, форму ввода количества повторений текущего упражнения. Остально буду добавлять по мере надобности

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

Для начала займусь интерфейсом, думаю будет интересно и мне, и вам 🙂

Удивительно, но я ни разу не рассказывал вам про Codewars. Исправляю упущение.

На этом сайте можно выполнять различные нетипичные задачи по программированию, в том числе и на javascript. На выполнение задачи у вас может уйти от 5 минут до бесконечности :) Всё зависит от вашего уровня знаний и сложности задачи.

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

Для меня codewars настоящее спасение, т.к. из-за катастрофического отсутствия времени полностью погрузиться в программирование сейчас не могу. А раз в пару дней зайти и решить одну задачу запросто.

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

А я продолжу помогать вам и себе в становлении героев фронтенда, вместе действительно проще не терять мотивацию. Спасибо что остаётесь со мной, дальше будет только интереснее 😎

Progressive Web Applications (PWA) появились уже вроде давно, поддерживаются всеми основными браузерами, но почему-то не пользуются популярностью.

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

Предлагаю для изучения следующие материалы:

- Статья на хабре, которая введёт вас в курс дела
- Инструкция от Google (на английском) как создать ваше первое PWA
- Бесплатная книга Progressive Web Apps The future of the Mobile Web от Google, Microsoft & Awwwards (тоже на английском). Книга небольшая, написана просто, рекомендую почитать, чтобы понять куда движется технология.

Сегодня я хочу поделиться с вами книгами, которые прямого отношения к программированию не имеют, но помогли мне в саморазвитии.

1. "Джедайские техники. Как воспитать свою обезьяну, опустошить инбокс и сберечь мыслетопливо" Максим Дорофеев

Книга научила меня правильно ставить задачи, планировать, беречь "мыслетопливо".
Любимая цитата: "Думать больно".

2. "Выйди из зоны комфорта. Измени свою жизнь. 21 метод повышения личной эффективности" Брайан Трейси

Суть книги в описана в названии. Помогла стать смелее в отношении к чему-то новому.
Любимая цитата: "Съешь лягушку!".
Лягушка это самое сложная или неприятная задача на день и Брайан советует выполнить её в первую очередь.

3. "Просто Космос. Практикум по Agile-жизни, наполненной смыслом и энергией" Катерина Ленгольд

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

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

Давно хотел порекомендовать вам канал на youtube Вадима Макеева, но ждал когда он в видео ответит на мой вопрос. На вопрос он так и не ответил, видимо их слишком много, но канал всё же советую 🙂

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

Кто не знает Вадим Макеев - известная личность во фронтенде, преподаватель HTML Academy, ведущий своего подкаста Веб-стандарты. В общем к его мнению можно прислушаться

Хочу поделиться каналами на youtube, на которых выкладывают доклады с различных мероприятий по фронтенду:

Фронтенд - канал от Яндекса, выкладывают выступления своих спикеров с ШРИ, Я.субботников и прочих мероприятий. Попадаются как сложные специфические доклады, как и на более общие темы

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

pitercss_meetup - Питерский митап в основном по вёртске, иногда можно встретить интересные доклады

HolyJS - самая известная конференция по JavaScript в России, выступают как наши топовые докладчики, так и зарубежные

100 быстрых советов по HTML, CSS и JS

Прочитайте, обязательно найдете что-то интересное (или неизвестное) для себя.

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

Сегодня год каналу и почти 5 месяцев как я ничего в него не выкладывал. Могло сложиться впечатление, что я закончил своё становление программиста, к счастью это не так.

За это время написал PWA приложение с калькуляторами, которые мне нужны по работе. Сейчас дописываю блог для жены практически весь на javascript (получил очень интересный опыт полного игнорирования бэкенда, всё на фронтенде). Далее хочу всё-таки написать дневник тренировок.

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

На канал решил писать, когда действительно будет что сказать, а не просто лишь-бы выложить пост. Спасибо, что были этот год со мной. Продолжаем становиться героями фронтенда и не только ✊