Привет, друзья! Немного пропал, но я всё ещё изучаю с вами фронтенд. Сейчас осваиваю события в 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 (получил очень интересный опыт полного игнорирования бэкенда, всё на фронтенде). Далее хочу всё-таки написать дневник тренировок.

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

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

Параллельно с написанием своих проектов, я изучаю дисциплины computer science.

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

На каждую дисциплину я отвожу 9 недель, в течение которых я прочитываю одну книгу и просматривая какой-нибудь короткий курс на youtube.
На данный момент дошел до темы Алгоритмы и структуры данных (читаю книгу «Грокаем алгоритмы»).

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

Всем привет!

В данный момент закончил свой краткий экскурс в «Алгоритмы и структуры данных». Следующую дисциплину «Математика для Компьютерных Наук» из статьи выше решил пока пропустить и перейти сразу к «Операционным системам». Пару лекций уже посмотрел, довольно интересно.

Начинаю осознавать уровень абстракции программирования в целом и поражаться как всё это было придумано 🙂

Активно пишу свой дневник тренировок. На данный момент тренировка запускается, можно записывать подходы, работают таймеры общий и отдыха, но куда это всё сохранять пока не понятно, сохраняю в localStorage.

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

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

Всем привет! Продолжаю погружение в Computer Science, сейчас изучаю операционные системы. Видео курсы какие-то особо выделить не могу, но нашёл замечательную книгу, которую в данный момент читаю.

Книга называется «Современные операционные системы» 4-е издание, авторы Э. Таненбаум и Х. Бос.

Я не знаю почему, но она очень легко читается, как художественное произведение, хотя там объясняются довольно сложные вещи. Если до этого в книгах перелистывалал какие-то сложные технические подробности, здесь я читаю всё (если честно почти всё, нперелистываюаю минимум).

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

У нас появился свой чат «Герои фронтенда», жмите на кнопку внизу «Обсудить» если есть вопросы, пожелания, предложения или просто хочется найти единомышленников на нашем непростом пути.

Посмотрел интересное интервью с node.js разработчиком на канале АйТи Борода https://youtu.be/qQwcCS8K_K0

Канал смотрю давно, но раньше желания с вами поделиться не было, а это интервью очень понравилось.
В интервью обсудили много технологий помимо node.js, шутили, оскорбляли наш любимый javascript, в общем отличное видео на выходные 🙂

​Друзья, помните я писал дневник тренировок? Я довёл его до состояния когда им можно пользоваться. Правда только мне 🙂

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

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

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