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

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

#макет

Итоги 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 как пхп, ну это я уже утрирую

​​SVG анимация.
Большая статья, в которой разобраны все аспекты анимации векторной графики. Автор рассказывает про 2 типа svg анимации: через CSS и с помощью SMIL анимации (на самом деле это SVG анимация, которая базируется на SMIL и расширяет его функционал). SMIL стоит использовать тогда, когда нужно сделать сложную анимацию, а возможностей CSS не хватает( следите за поддержкой браузеров)

​​Сложный JavaScript.
Бесплатный курс по прокачанному js, будет полезно как новичкам, так и опытным разработчикам, сам часто заглядываю, чтобы повторить, ведь все не запомнишь. Я в этом уже не раз убедился…

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

​​LinkedIn.
Соц сеть для поиска работы, контактов или полезных знакомств. Решил тоже завести для себя, ведь чем раньше я это сделаю, тем больше это поможет в дальнейшем (так же как и с гитхабом)

Когда у вас есть хороший профиль в linkedIn-е, вам больше не нужно мониторить hh.ru или какой-то другой сайт по поиску работы, ведь HR-ы будут находить вас и писать именно в LinkedIn-е. Поэтому стоит заводить свой профиль уже сейчас, предлагаю так же подписаться на меня, взамен сделаю тоже самое. Будем вместе прокачиваться, ну и делиться опытом, удачи :)

​​MoscowJs.
Если у вас есть пару свободных часов, и вы хотите с пользой отдохнуть, то советую посмотреть 2 онлайн-конференции:
Собеседование глазами кандидата и Собеседование глазами компании. Вообщем желаю узнать что-то новое, и просто весело провести время

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

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

Хорошо, но тогда почему нельзя просто залезть в чужие куки и посмотреть пароль? Дело в том, что сервер заранее кодирует важные данные и просто так не получиться залезть в DevTools и посмотреть там пароль, потому что только сервер может его раскодировать 

Каждая кука имеет определённое время жизни, оно может отличаться в зависимости от сервера и когда время жизни истечёт кука соответсвенно удалиться, но если поставить галочку «запомнить меня» при регистрации, то время жизни куки увеличиться и вам не придётся постоянно авторизовываться

Если немного подзабыли про куки, то можно послушать небольшой ликбез:

​​Rest API.
У каждой программы есть свой интерфейс, через который осуществляется работа с данной программой. Это нужно для сокрытия лишних деталей, о который пользователю лучше не догадываться. И по сути, любая библиотека — это та же программа, в которой есть свои объекты, интерфейсом которых является то, какие методы и свойства у него доступны из вне

Сервер является программой, интерфейсом(API) которого является набор url адресов, но просто знать адреса, чтобы отправить запрос, будет недостаточно, надо еще знать тип запроса, параметры, которые нужно передать и response, который вернет нам сервер

Rest API — это некая рекомендация/договоренность для упорядочивания запросов на сервер, правила, по которым стоит взаимодействовать с сервером, в Rest API используются такие CRUD методы: get(получить данные), post(отправить данные), put,patch(обновить данные) и delete соответсвенно удалить

Подробнее можно посмотреть в видео ниже:

Как использовать wp термины правильно.
У кого-то посты равны страницам, кто-то не знает о постах, знает только о записях, а у кого-то архив – это, «где документы лежат». Эта статья направлена на искоренение подобных ошибок, чтобы внутри WordPress сообщества стало проще общаться. Есть так же видео, для тех, кому этот формат больше заходит

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

Ну и раз уж я заговорил про верстку, то стоит отметить, что у меня появился второй монитор! Он стоит у меня уже месяц, но я так и не успел об этом вам рассказать…

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

​​Thunk.
Библиотека позволяющая диспачить функцию, которая принимает диспач, делает асинхронные операции и диспачит обычные экшены. Из коробки всякой асинхронщины в redux-е нету, редьюсеры меняют state синхронно, поэтому когда нам надо сделать какой-то запрос на сервер и потом изменить состояния, то мы используем санку

Диспачить можно только объекты, у которых есть хотя бы один ключ — type, а redux thunk является функцией, но тут нам на помощь приходит middleware, именно тут определяется: передан обычный экшен или же функция. Если mw увидит функцию, то он сначала исполнит все асинхронные операции, а потом будет диспачить обычные экшены

Для работы с асинхронностью существует так же библиотека redux-saga, она предназначена для больших приложений с множеством обращений к сторонним API, мне было бы интересно с ней поработать, ведь я слышал, что там используются генераторы для упрощения работы с асинхронным кодом

Нашёл небольшую статью по санкам: