Статья на английском из 3х частей на css tricks о том как пользоваться css grid в ie.

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

На проекте JavaScript.Ninja выложили матрицу компетенций Fullstack JS разработчика.

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

А главное посмотреть что представляет из себя уровень "гуру" и что нужно понимать, чтобы его достичь. А наша цель - его достичь.

С 16 июля 2018 года открыт новый набор в Школу разработки интерфейсов Яндекса! В этот раз она пройдёт в трёх городах: Москве, Санкт-Петербурге и Симферополе.

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

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

Наткнулся на отличную подборку книг на гугл диске по веб-разработке на русском языке.

Обязательно загляните - столько хороших книг в одном месте не часто увидишь.

Зачем я создал этот канал?

Мне 26. Меня не устраивает моё текущее место работы и проживания, я бы хотел поменять свой род деятельности. На самом деле таких как я очень много. Но моя главная цель не быть тем, кто хочет что-то поменять у себя в жизни, а тем кто изменил и не пожалел.

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

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

В силу определенных жизненных обстоятельств на текущем месте работы я задержусь ещё на 3,5 года.
Кажется, это неплохой срок, чтобы научиться программировать. Всё-таки это марафон, а не спринт.

Главное не забывать:
«Дисциплина и постоянство усилий на длительном промежутке времени создаёт результат» Ярослав Брин

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

За прошедшую неделю изучил основные моменты Git, создал первый репозиторий на GitHub, покомитил.
Ещё сильнее влюбился в VS Code, с Git можно работать не выходя из редактора.

Ссылки для изучения Git:
- Скринкаст по Git от learn.javascript.ru - всё что вы хотели и не хотели знать про Git здесь
- Подробная шпаргалка
- Интерактивный курс по Git - набиваем руку

Когда в голове появляется очередная идея для сайта/приложения и хочется быстренько накидать интерфейс, вам может помочь минималистичное веб-приложение Wireframe.

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

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

Найти макеты можно, например, на этих сайтах:
- psdrepo.com
- psd-html-css.ru

На этой неделе попробовал сверстать макет по технике pixel perfect. Получилось так себе, есть куда развиваться, буду верстать дальше.

Почитать про pixel perfect и инструменты для него можно на zencoder.ru. Я использовал расширение для Chrome.

Ещё недавно открыл для себя "HTML Шорты" от HTML Academy. Это серия коротких видео, которые помогут разобраться во многих вопросах по вёрстке.

Всем привет. Продолжаю прокачиваться в вёрстке. Сейчас смотрю записи с интенсивов HTML Academy (т.к. курсы у них платные, ссылок кидать не буду, легко находится в гугле) - отлично и доступно рассказывают, кто только присоединился - начните изучение вёрстки с них.

Попробовал использовать Browser Sync. Он нужен для синхронного тестирования в разных браузерах; может по аналогии с Live Reload обновлять страницу при изменении выбранных файлов; запускает мини-сервер с сайтом, который можно открыть на любом устройстве в одной сети (например для тестирования сайта на мобильном устройстве).
Крайне полезный инструмент, лучше освоить его как можно раньше, в будущем поможет сэкономить много времени. Посмотрите урок от лофтблога в ссылках для лучшего понимания зачем нужен browser sync и как его использовать.

Ссылки:
- сам browser sync
- урок по browser sync на youtube от LoftBlog

Нашел для вас интересный авторский канал на котором разбираются частые вопросы с тех. собеседований на позицию фронтенд разработчика:
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. Лучше я всё равно не опишу о чём этот сайт. От себя лишь добавлю что подписался на их рассылку и в ближайшее время приступлю к выполнению заданий 😎