Programmer Way | IT и фриланс

​​Новые правила деловой переписки. Я прочёл эту книгу и могу посоветовать ее тем, кто часто общается по почте или просто ведёт переписку с начальством, клиентом, заказчиком. Если у вас есть свободные двадцать минут на эту книгу, читайте всё до первого раздела и дальше посмотрите на любые разборы из раздела «Практика» Слова ради слов. Часто люди откликаясь на заказы или подавая резюме пишут пустые слова, мол «пусть будет больше, чем просто по делу», ведь когда текст выглядит большим, то кажется, что над ним изрядно постарались, но в львиной доле это пустые слова Пиши, сокращай. Как и в предыдущей книге авторов, здесь делается акцент на удобстве читателя, писать из благих намерений и если текст усложнен — сделать его проще Ещё отличным советом будет помечать ссылки в письме, так мы не только сделаем удобнее получателю, но и сохраним его время, ведь переходить по ссылкам и смотреть что там, не самое лучшее занятие. Часто, к сожалению, делают наоборот: так, как удобно отправителю, а не получателю. Закончить хотел бы цитатой из книги: «Например, фрилансер сделал себе красивый личный сайт с работами, биографией и всем остальным, что нужно для резюме. Теперь ему удобнее не сочинять письмо на каждую вакансию, а кидать одну ссылочку. Но читателю может быть неудобно переходить на сайт и искать там нужную информацию. А удобство читателя нам важнее»

Создай свой продукт и получи до $6000 — и все это не выходя из дома 😎 27 ноября начинается онлайн-хакатон #USGH — это крутая возможность для разработчиков, маркетологов, дизайнеров реализовать свою идею, поработать с менторами из топовых компаний и побороться за призовой фонд. Два дня драйва, креатива и бесценного опыта. Регистрируйся до 15:00 27 ноября на сайте USGH🚀

FullPage. Идея с фулскрином мне понравилась и я решил попробовать, хотя этот макет не сильно подходит под фулскрин, но его можно немного переделать.  Как вы уже догадались в этом поможет библиотека FullPage.js, она очень популярна и гибко настраивается под любую задачу, прикреплю уроки к посту, сверстайте какой-то макет(можете взять выше приведённый wooder) и можете смело добавлять в портфолио навык работы с FullPage.js. Прикреплю к посту 2 интересных урока Я уже совсем скоро буду проступать к верстке wooder и обязательно покажу интересные фишки, а пока хочу немного улучшить свой сайт — добавить кнопку «Загрузить ещё работы», основной функционал уже реализовал, осталось только поправить стили

Пацаны из подкаста «Мы обречены» ведут охрененный канал про IT в телеге. Злой как дед-плюсист, искренний, как твой гнев на аджайл. Фил каждый день пишет про разрабовскую боль для тех, кто уже пожил в индустрии, и поджигает задницы. Тема раз в год пишет про книги, о которых хер где еще узнаешь. В общем — редкая вещь, тексты про суть индустрии, а не учебу и развитие. Подписывайтесь, там мощно.

WOODER — Макет для тренировок. Во макете реализованы интересные и нестандартные вещи, не стыдно будет положить в портфолио, буду его скоро верстать, расскажу чему научился и что нового узнал  Тип: лендинг Уровень: средний #макет

​​Один класс, но несколько слайдеров. Заметил, что новички, да и не только, часто путаются, когда дело доходит до создания одинаковых слайдеров на станице, сегодня я покажу своё решение проблемы Когда мы обращаемся к одному классу, то по-умолчанию swiper берет первый блок на странице, остальные слайдеры, с таким же классом начинают «ломаться», решением данной проблемы будет перебор через forEach: let sliderCatalog = document.querySelectorAll(".catalog__block");  sliderCatalog.forEach(element => {       new Swiper(element.querySelector('.catalog__items'), {       slidesPerView: 1,       pagination: {         el: element.querySelector('.catalog__info'),         type: 'fraction'       },       });    }); Иногда одинаковые слайдереры находятся ещё и в табах( в основном на каких-то каталогах товаров), поэтому вы можете столкнуться с проблемой, что все сделано правильно, но остальные слайдеры не работают, это связано со свойством display: none; так как значение none полностью удаляет объект со страницы, а так как стили подключаются первыми, js не успевает инициализировать слайдеры, лечиться это все следующим образом:  Обертке задаём position: relative; а самим блокам  &__block{     opacity: 0;     visibility: hidden;     position: absolute;     width: 100%;     transition: all .3s ease-in-out;     &._active{       opacity: 1;       visibility: visible;       position: static;     }   } При _active все возвращаем на место и добавляем плавности. Готовый результат, а так же код прикреплю к посту

​​Своя библиотека. Решил создать библиотеку, чтобы понять как работают такие библиотеки, как swiper, typed, nouislider и другие OnResize. Иногда нам нужно исполнить код только на определённом расширении. Допустим, по макету блок на расширении 767px превращается в слайдей, после 767px нам код слайдера не нужен, да и могут возникнуть ошибки. Поэтому я решил запилить такую простенькую библиотеку Она включает 4 параметра, из которых 2 обязательных: size: 767(размер) code: функция с кодом, который нужно выполнить, в нашем случаи — инициализация слайдера  По умолчанию стоит max-width, но благодаря двум оставшимся параметрам это можно изменить см. документацию, кстати о документации, это был мой первый опыт ее написания, не судите строго. Может у кого будут советы по коду, пишите, буду благодарен за обзор кода

​​Сотрудничество с дизайнерами. Представьте, вы нашли хорошего дизайнера, вы видели его работы и понимаете, что он делает реалистичные макеты, без всяких там штук, которые почти невозможно сделать. Теперь представьте, что этого дизайнера заказчик попросил посоветовать верстальщика и он даёт ваш контакт. Звучит круто? Безусловно! Так почему бы так же не сделать?:) Работа с партнерами это целая гора плюсов: • проверенный человек(не кинет и не скроется с деньгами) • уже работал и знаешь чего ожидать(дизайн, верстка и тд) • дополнительный доход  • дополнительные клиенты • ещё больше известности о вас(если планируете развивать свой бренд) Как это работает? Пишешь, знакомишься, просишь портфолио, если дизайн адекватный, то показываешь своё портфолио и предлагаешь сотрудничество: «Если тебя попросят сказать верстальщика — дай мой номер, взамен я тебе дам 15% от заказа» Это пример с дизайнером, но их может быть очень много, верстка, натяжка, seo и тд. Ведь заказчики обитают не только на фриланс биржах

​​Куда пойти программисту. Офис — место для быстрой прокачки навыков, там собираются опытные специалисты своего дела. Много полезных знакомств и интересных людей. Подходит для людей, которые любят компанию и хотят быстрого старта Фриланс — место, где тебе не подскажут и в тоже время место свободного графика. На фрилансе ты сам распределяешь время, финансы, отдых, сам ищешь заказчиков, учишься общаться с людьми и учишься вести деловую переписку Стартап — подходит для тех, кто любит экстрим и уже перепробовал много вариантов, желательно приходить уже с большим багажом знаний и опыта. В случае успеха ждёт всемирная слава и незабываемый опыт Удаленка — новая тенденция, работа из дома собрала в себе много плюсов и минусов, подходит тем, кто не хочет искать заказчиков и заниматься прочими коммуникациями, может управлять своим временем и имеет желание работать в кампании и быстро развиваться Своё дело — часто программисты создают бизнес и начинают его продвигать. Появляются гениальные идеи, которые хочешь воплотить в жизнь, тогда это до тебя Где трудитесь вы? Проголосуйте в опросе!

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

​​React.  Знакомство с ним оказалось довольно быстрым, так как уже пытался писать какие-то программки на нём. React — это библиотека(фреймворк) разработанная программистами из Facebook, для создание SPA приложений. Основным отличием react является компоненты и их пропсы Компонента — функция возвращающая jsx разметку, но эту функцию никто не вызывает, ее вызывает сам реакт под капотом. Но как тогда ее вызывать? Компонента это ещё и тег, в который можно поместить props Props — объект, который передаётся компоненте, в качестве параметра, туда можно положить ключ-значение, чтобы впоследствии вывести его в компоненте А пока, я продолжаю изучать react и скоро поделюсь новой информацией

Макет туристического сайта. Яркий макет, много интерактива, есть адаптивная версия. Есть сложный поиск, табы и слайдер.  Макет можно открыть в sketch, figma, avocode Тип: лендинг Формат: fsketch Уровень: сложный #макет PS: небольшое обновление канала :)

Калькулятор Гоблина. Просто появилась идея сделать калькулятор драгоценных металлов, люблю делать мелкие pet projects, ведь благодаря ним начинаешь лучше понимать структуру языка, да и просто классно сделать что-то от души Суть: Гоблину нужно посчитать своё состояние в разных драгоценностях: золоте, алмазах, изумрудах и сапфирах. 1 алмаз равен 2 золотым монетам, 1 изумруд равен 2 алмазам, а 1 сапфир равен 2 изумрудам. Вот такой незамысловатый калькулятор, результат можно глянуть тут

Начни ценить свое время! ⚡️Индустрия программирования развивается настолько быстро, что уследить за всеми трендами очень трудно, но мы знаем решение!  💡Канал Твой Программист - клондайк полезной информации из мира IT. 📚Именно здесь вы найдете интересные статьи, отборный юмор, а также уйму полезной информации! Твой Программист - 1 канал вместо 1000 образовательных ресурсов!

​​Улучшение для верстки №5. Процентный line-height. Коротко о line-height, это свойство регулирует межстрочный интервал, простыми словами свойство отвечает за расстояние между верхним и нижним этажом текста. Можно указывать в пикселях, процентах, rem,em Во всех программах для чтения макета: avocode, figma, photoshop, zeplin, line-height указывается в пикселях, поэтому при изменении шрифта, во время адаптива, появиться проблема с большим line-height, чтобы все время не изменять его можно воспользоваться простой формулой и добавить ее к себе в снипетты line-height: (line-height в пикселях / font-size);

​​Игра то Google. Решил немного разбавить ленту. Google выпустила веб игру в канун Хеллоуина. Управление происходит посредством рисования символов, у каждого противника есть свои символы, которые надо повторить. Игра доступна каждому пользователю, стоит лишь кликнуть на логотип кампании А тем временем я продолжаю изучать React, чтобы создать свой чат. Сегодня познакомился с компонентой, сам реакт для меня не кажется какой-то дикостью, так как я уже немного изучал его, но были слабые навыки нативного Jan, да и сам не сильно понимал зачем он мне Веселого Хеллоуина!

​​Logo. Юху! Закончил верстку интернет магазина, это был первый опыт в верстке такого большого проекта. Скажу сразу — это не так страшно, как может показаться, header и footer везде повторяются, а большинство страниц однотипны. Основной труд здесь сконцентрирован на главной, каталоге, карточке товара и корзине, ещё может «О нас», но я решил отнести к однотипным, так как там только текст  За время марафона знатно прокачал навыки верстки и дополнил свой стартовый шаблон большим количеством фич, так же обновил снипетты HTML,SCSS,JS Теперь буду бомбить react и немного поверстаю, решил учить react постепенно, чтобы сразу не забивать голову. Давно хотел посмотреть курс «React путь самурая», а потом сделаю главный pet project, ради которого все это затевалось — чат на реакте Буду делаться наработками и интересными материалами с вами, посмотреть результат можно тут, код прикреплю к посту

​​3 причины почему не нужен Pixel Perfect. 1)Дизайн макет и разные отступы. Дизайнер не верстальщик! Он не верстал макеты и не знает частые ошибки, которые опытному верстальщику видны невооружённым глазом, поэтому советы от верстальщика будут более уместны, чем полное соответствие макету. Простой пример:  Внутренние и внешние отступы, если дизайнер сделал отступ от края блока до заголовка меньше, чем отступ заголовка до текста, то визуально кажется, что заголовок принадлежит другому блоку, а не тексту 2) Нужно больше времени, а разницы почти нет. Все упирается во время, ваш сайт будет верстать в разы сложнее и дольше, на что это влияет? Ни на что! Ваш сайт не будет грузиться быстрее, не будет выше в поисковых выдачах и даже не будет смотреться красивее, чем без pixel perfect(ну это уже зависит от проекта) 3) Измерять каждый пиксель — это бесполезный и никому не нужный труд, но если заказчик решил, что ему нужна pixel perfect верстка, то пускай готовиться к завышенным ценам, так как верстальщики не любят вымерять каждый пиксель Буду благодарен, если поделитесь с друзьями, так же заходите в чат, увидимся!

​​Grid или flex? Сталкивать эти технологии лоб в лоб нет никакого смысла, так как они используются для разных задач. Flex работает только в одной плоскости x либо y, а с помощью сеток grid можно размещать и комбинировать элементы сразу в 2 плоскостях Немного о поддержке, flex можно спокойно использовать и в львиной доле браузеров все работает, как швейцарские часы, но вот с гридами все немного иначе, если вы зайдёте в can I use, то увидите баснословные 96%! Но не спешите радоваться, так как другие свойства работают не во всех браузерах и везде по-разному Сейчас верстка на flexbox, это обыденная вещь, но гриды стоит и нужно учить. За гридами будущее! Поэтому я нашёл свежий плейлист по гридам, где простыми словами объясняется довольно обширная тема тык

​​Pet project. Это проект, который ты делаешь для себя, некая тренировка скилов, сам делаешь дизайн, функционал и придумываешь идею. В таких проектах не будет правок от сторонних людей, только твое мнение, за это их и любят, ведь можно сделать что-то своё, раскрыть на полую свой потенциал и прокачать знания того или иного ЯП А какие у вас есть pet project? Напишите в чате!