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

Без border-radius, без box-shadow, все приходилось вырезать в фотошопе и вставлять в таблицы, JavaScript в css. Иногда полезно узнать то, что было, чтобы лучше предсказать тенденцию. Можете ещё посмотреть видео о том как бы это выглядело сейчас

+1 работа в портфолио.
В этот раз решил запилить собственную анимацию при скролле, получилось неплохо, решил верстать макет в фигме, так как у меня не работал авакод, макет простой, но объёмный, посмотреть можно тут. Во время верстки возник интересный вопрос: «А всегда ли главный экран должен быть фулскином и как это влияет на пользователя?» что думаете? Напишите в чате

​​Вебстудия.
Это определенная команда разработчиков, чаще всего: дизайнер, верстальщик и бэкендщик(настройщик cms). С такой командой уже можно искать крупных клиентов, хотя первое время вебстудия будет уходить в минус и будет потрачено кучу нервов, поэтому не каждый решается её создать 

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

​​Задачки на собеседованиях. 
Вчера посмотрел собеседование очень странного джуна, а вопросы были минимум как для миддла. Заголовок видео не соврал:) пока смотрел, успел выписать кучу интересных моментов, вот некоторые из них:
•Includes
•Yield
•Tree shaking
•Set, Map и др.

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

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

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

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

​​Улучшения для верстки №7.
Переменные в scss и их применение. Вещь достаточно специфичная, я сам в начале не понимал зачем это нужно, пока сам не попробовал

Синтаксис scss позволяет создать переменную благодаря знаку $, обычно для всех переменных на проекте я создаю отдельный файл(_vareibles.scss), куда и складываю все переменные

Применение. Обычно их используют только в 2 случаях: когда на сайте есть повторяющиеся стили(например цвета) и когда мы хотим изменить что-то в одном месте, а все расчеты под нас подстроятся(например мы задали переменной шрифт, а потом в body у нас будет этот шрифт по умолчанию или мы задали размер для контейнера, как в макете, а медиа запросы сами подстроятся под нас)

Это значительно упрощает работу, поэтому используйте переменные у себя в проектах, но не стоит все оборачивать в переменные, всё-таки нужно знать меру

​​Пишем заявку.
Прежде всего должен сказать, что умение писать заявки приходит с опытом, с каждым разом этот навык оттачивается до совершенства, но пока стоит придерживаться некоторых советов:

Не будь как все. Вы думаете заказчику нравиться читать 50 однотипных заявок на проект? Стоит себя выделить, но не переходить черту адекватности. Лучше не использовать шаблонные фразы вроде «Доброго времени суток!» подробнее тут

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

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

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

+1 работа в портфолио.
Мой авакод наконец-то заработал, а это значит, что я сверстал wooder. И как мне кажется, моя верстка перешла на новый уровень

Основной сложностью было то, что этот макет сделан в стиле FullPage прокрутки, это было реально жестко так как надо следить не только за шириной устройства, но и за высотой, а последний блок пришлось вообще переделать, потому что там было 2 блока: о нас и футер, вообщем верстать обычные макеты это кайф

Я сейчас активно смотрю собесы, мы даже с другом попробовали провести друг другу один такой собес, мне реально понравилось, он меня подколол на области видимости var и там я тупанул :) Поэтому за это время я сильно подтянул нативный js, а затем прочту книгу по алгоритмам

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

Макеты.
Не знаете что делать во время праздников? Предлагаю немного поверстать:) макеты легкие, для новичков и не только. Всех с праздниками! (думаю вас уже все поздравили)

Тип: лендинг и многостраничник 
Уровень: легкий

#макет

Итоги 2020.
Это последний пост на канале в этом году, хотя это особо не имеет значения. За этот год я узнал много нового:

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

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

Попутно вёл свой телеграмм канал и искал свой стиль, так же создал свой первый сайт, который размещён в интернете, вообщем год был продуктивный

Надеюсь у вас все получилось в этом году и желаю, чтобы в следующем вы радовали себя новыми достижениями, с наступающим!

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

Ширина полоски задается в специальном объекте и генерируется в самом js, хотел сделать какой-то генератор случайного подарка, с определенным шансом на выпадение, который зависит от ширины полоски 

Посмотреть можно тут, кстати, если ввести код «everyred», то каждый раз будет выпадать самый редкий подарок

MDN.
Пожалуй самая лучшая, структурированная документация по js. Очень часто пользуюсь, когда забыл или надо найти какой-то метод, проверено на личном опыте 

Здесь собрана подробная документация по всем современным веб-технологиям, в том числе по js. Подробнее о технологиях можно почитать тут

Возможно, многие уже знают про этот сервис, но для новичков хочу сказать: «Не бойтесь гуглить!» Я тоже очень часто что-то забываю и это нормально, мы все люди, кстати, о людях, если вы не нашли ответ на свой вопрос в гугле, лучше написать в один из тематических чатов или спросить совета у более скилового человека(если вы работаете в компании), а так заходите в чат, будет полезно

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

​​Cdn.
Часто ли вам приходилось использовать cdn, чтобы подключать различные библиотеки на свой проект, но что это такое?

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

​​ColorHunt.
Если не можете придумать сочетания цветов для своих проектов, то хочу порекомендовать это хранилище крутых сочетаний различных цветов. Можно использовать для своих pet проектов, так как надо уметь еще и подать свои навыки, ведь без хорошего UI не будет полноценного проекта

Раньше использовал палитру безопасных цветов, но там не было удобных сочетаний и все приходилось подбирать самому. В добавок хочу посоветовать свою подборку 4 сочетаний цветов

​​Опять этот реакт.
В последнее время начал активно углубляться в реакт, это моя третья попытка и надеюсь последняя. Первая попытка была, когда я ещё не выбрал направления и пытался выучить все и сразу, но банальные знания js мне не позволили это сделать, недавно я снова решил изучать реакт, но потом у меня были проблемы с одним пакетом и я на него забил и продолжал верстать

Сейчас я уже достаточно крепко ориентируюсь в js и его функционала мне начинает не хватать, у меня была мечта — сделать свой чат, надеюсь с третий попытки я это сделаю, но сначала надо освоить webpack, ведь писать на чистом css мне как-то надоело:)

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

​​Redux.
Есть такое понятие, как flux-архитектура, которая гласит, что UI вторичен по отношению к state.
Поэтому когда мы пишем приложение нам нужно организовать стейт-менеджмент, чтобы изменять состояние приложения и redux на данный момент является самым популярным решением

State — это некая истина и мы не можем изменить UI, не изменив state, такова концепция flux, даже если мы вводим в форму данные они не должны отрисовывается, пока не измениться сам state

Есть ещё много библиотек, для управления состоянием, например: MobX, ещё в чате писали про reatom ну и много других, у всех есть как плюсы, так и недостатки, поэтому лучше хорошо знать одну, чтобы быстрее перейти, ибо проблемы одни и те же, а решений много и все правильные. И каждый в праве изучать то, что ему нравится

​​Резюме.
В первую очередь нужно писать от себя, с заботой о читателе, пусть там уже будет вся нужная информация о вас, которая может понадобиться работодателю, указывайте все ваши соц сети и контакты, для того же удобства — я мог бы этого не писать, но много людей отсылают просто шаблонное резюме, в котором просто поменяли навыки и контакты, если вы junior, то обязательно стоит указать опыт работы, даже если он маленький, будь то работа на фрилансе или свои pet проекты. Отличным плюсом будет вклад в openSource проекты. Ну и конечно крепкое портфолио, которое демонстрирует ваши навыки

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

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

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

Тогда можно вообще не читать книги? — спросите вы, и я вам отвечу: «Конечно же нет!» Все преподаватели на курсах получали информацию от своих менторов, а те, в свою очередь, учились по книгам, поэтому новичкам так сложно понять, что говорят на курсах, ведь это получается поломанный телефон: ментор объяснил, но его словарный запас был мельче, чем у автора книги, ученик из-за этого недопонял материал и начал обучать других

Я лишь хочу сказать, что не стоит читать книги по синтаксису какого нибудь языка, ведь они быстро устаревают и проще пройти какой-то курс, но уже с хорошей базой, полученной из книг, чтобы не было искажений. Алгоритмы, концепции программирования(API, ООП, FLUX, DRY и тд) — это базис, на котором держаться все языки, поэтому стоит на этой недельке почитать книгу по алгоритмам:)

​​Drag & Drop.
Создание drag and drop с использованием современного синтаксиса ES6 и немножечко reduce. Я нашёл англоязычный урок, но даже для тех, кто не знает английский все должно быть более-менее понятно. Советую почаще смотреть англоязычные туториалы, чтобы подтянуть произношение и не говорить php как пхп, ну это я уже утрирую