Качество или количество?
Часто слышу мол: «Нужно набрать Х часов, и тогда вы станете крутым программистом», некоторые набирают эти Х часов и всё-таки становятся спецами, но это ошибка выжившего. Многие, набрав эти часы, так и не начинают понимать то, как все устроено. Зачастую эти люди просто ставят себе цель: буду программировать по 14 часов в неделю и через 3 месяца стану программистом, но в это время включается ещё и просмотр обучающих видео, ответы на сообщения, пролистывание соцсетей и тд
Да и сами часы могут тратится по-разному: можно тратить на вёрстку банальных страниц, а можно сверстать необычный блок или придумать какую-то сложную логику с неординарным решением. В общем, все эти часы — условность, поэтому только от вас и вашего труда зависит то, как быстро вы станете востребованным специалистом
Ещё часто встречается, что программируют по 10 часов в сутки, а потом неделю просто ничего не делают. Важно программировать регулярно, чтобы код был всегда перед глазами, так вы не забудете то, что выучили и лучше запомните новое
Часто слышу мол: «Нужно набрать Х часов, и тогда вы станете крутым программистом», некоторые набирают эти Х часов и всё-таки становятся спецами, но это ошибка выжившего. Многие, набрав эти часы, так и не начинают понимать то, как все устроено. Зачастую эти люди просто ставят себе цель: буду программировать по 14 часов в неделю и через 3 месяца стану программистом, но в это время включается ещё и просмотр обучающих видео, ответы на сообщения, пролистывание соцсетей и тд
Да и сами часы могут тратится по-разному: можно тратить на вёрстку банальных страниц, а можно сверстать необычный блок или придумать какую-то сложную логику с неординарным решением. В общем, все эти часы — условность, поэтому только от вас и вашего труда зависит то, как быстро вы станете востребованным специалистом
Ещё часто встречается, что программируют по 10 часов в сутки, а потом неделю просто ничего не делают. Важно программировать регулярно, чтобы код был всегда перед глазами, так вы не забудете то, что выучили и лучше запомните новое
Fullstack проект.
В чем отличие fullstack проекта от не fullstack? В том, что в первом мы делаем сразу и фронтенд и бэкенд части, а во втором — только одну. Если мы захотим сделать fullstack pet-проект, но не знаем бэкенда, то мы можем воспользоваться готовыми решениями, например использовать готовые api, но мы попрежнему будем разрабатывать только одну часть
В одной из недавних статей я рассказывал то, что сейчас работаю над своим pet-проектом Music Mix, если коротко, то это музыкальный плеер, где можно слушать и загружать музыку. Но я столкнулся с проблемой: мне нужен был сервер, чтобы хранить аудио и картинки для постов, думал использовать json server, но, как вы уже поняли по названию, он хранит данные в строковом формате(json), поэтому я максимум могу помесить туда путь к файлам, и все опять упирается в бэкенд
Я принял решение заморозить проект, пока я не освою node.js, думаю мне надо время, чтобы найти хорошую информацию по этой теме. Основной функционал уже готов: проигрывание песен в обычном и случайном порядке или только избранные, добавление в избранное, поиск по названию, страница избранных и страница всех песен, осталось только внедрить добавление песен и пару фич, но для этого нужен api
В чем отличие fullstack проекта от не fullstack? В том, что в первом мы делаем сразу и фронтенд и бэкенд части, а во втором — только одну. Если мы захотим сделать fullstack pet-проект, но не знаем бэкенда, то мы можем воспользоваться готовыми решениями, например использовать готовые api, но мы попрежнему будем разрабатывать только одну часть
В одной из недавних статей я рассказывал то, что сейчас работаю над своим pet-проектом Music Mix, если коротко, то это музыкальный плеер, где можно слушать и загружать музыку. Но я столкнулся с проблемой: мне нужен был сервер, чтобы хранить аудио и картинки для постов, думал использовать json server, но, как вы уже поняли по названию, он хранит данные в строковом формате(json), поэтому я максимум могу помесить туда путь к файлам, и все опять упирается в бэкенд
Я принял решение заморозить проект, пока я не освою node.js, думаю мне надо время, чтобы найти хорошую информацию по этой теме. Основной функционал уже готов: проигрывание песен в обычном и случайном порядке или только избранные, добавление в избранное, поиск по названию, страница избранных и страница всех песен, осталось только внедрить добавление песен и пару фич, но для этого нужен api
Спойлер.
Если кратко, спойлер — это контент, который мы хотим скрыть, а по нажатию на заголовок отобразить. Аккордион — это тоже самое, но открытым может быть только один спойлер. Есть два самых популярных варианта использования: когда у нас слишком большой контент, который занимает много места или не является очень важным, чаще всего это ответы на вопросы или характеристики товара; либо когда мы хотим скрыть меню(или любой другой блок) в спойлер на определенном расширении
В видео автор делиться собственными наработками, которые позволят сделать любой спойлер + крутая анимация
Если кратко, спойлер — это контент, который мы хотим скрыть, а по нажатию на заголовок отобразить. Аккордион — это тоже самое, но открытым может быть только один спойлер. Есть два самых популярных варианта использования: когда у нас слишком большой контент, который занимает много места или не является очень важным, чаще всего это ответы на вопросы или характеристики товара; либо когда мы хотим скрыть меню(или любой другой блок) в спойлер на определенном расширении
В видео автор делиться собственными наработками, которые позволят сделать любой спойлер + крутая анимация
Funiro.
Сверстал нереально крутой интернет магазин с работающей корзиной и подгрузкой товара из json. Верстка вышла на совершенно другой уровень: повсеместное использование grid, нестандартные блоки, сложные слайдеры с параллакс эффектом, крутые решения, а самое главное — адаптив
Когда нам нужно сделать адаптив блока, то мы действуем по такой схеме: уменьшаем шрифт, отступы, пока верстка выглядит нормально, если контент уже не влезает — изменяем блоки(делаем в колонку или уменьшаем размер). Если с перестановкой блоков все понятно, и от этого нельзя избавится, то с отступами и размером шрифта все немного иначе. Часто мы вынуждены на каждом бреикпоинте уменьшать отступы блоков, подбирать подходящий размер шрифта, который будет смотреться, если вы хоть раз верстали макеты, то думаю вам это знакомо
Решением будет простой миксин, который принимает css свойство, значение при максимальном контейнере и минимальное значение, которое будет на 320px, а также тип(по умолчанию 1, и 0, если надо чтобы свойство пропорционально изменялось на любых расширениях, а также 2, если только для расширений больших чем контейнер), подробнее можно посмотреть на курсе или в видео про отзывчивое свойство
К посту прикреплю результат и GitHub репозиторий с кодом:
Сверстал нереально крутой интернет магазин с работающей корзиной и подгрузкой товара из json. Верстка вышла на совершенно другой уровень: повсеместное использование grid, нестандартные блоки, сложные слайдеры с параллакс эффектом, крутые решения, а самое главное — адаптив
Когда нам нужно сделать адаптив блока, то мы действуем по такой схеме: уменьшаем шрифт, отступы, пока верстка выглядит нормально, если контент уже не влезает — изменяем блоки(делаем в колонку или уменьшаем размер). Если с перестановкой блоков все понятно, и от этого нельзя избавится, то с отступами и размером шрифта все немного иначе. Часто мы вынуждены на каждом бреикпоинте уменьшать отступы блоков, подбирать подходящий размер шрифта, который будет смотреться, если вы хоть раз верстали макеты, то думаю вам это знакомо
Решением будет простой миксин, который принимает css свойство, значение при максимальном контейнере и минимальное значение, которое будет на 320px, а также тип(по умолчанию 1, и 0, если надо чтобы свойство пропорционально изменялось на любых расширениях, а также 2, если только для расширений больших чем контейнер), подробнее можно посмотреть на курсе или в видео про отзывчивое свойство
К посту прикреплю результат и GitHub репозиторий с кодом:
Эффект дыма.
Решил поделиться небольшим видео с довольно простым, но очень крутым эффектом: превращение текста в дым, можно использовать у себя в прокатах, чтобы эффектно показывать или скрывать текст, также сделал небольшой пример, ссылку прикреплю к посту
Начал проходить курс React Pizza, пока всем доволен, в курсе будут классовые компоненты, но думаю это не проблема, так как они все ещё используются, и знать про них стоит. Скоро подведу итоги моего трехмесячного эксперимента с «зелёным» GitHub, думаю будет интересно
Решил поделиться небольшим видео с довольно простым, но очень крутым эффектом: превращение текста в дым, можно использовать у себя в прокатах, чтобы эффектно показывать или скрывать текст, также сделал небольшой пример, ссылку прикреплю к посту
Начал проходить курс React Pizza, пока всем доволен, в курсе будут классовые компоненты, но думаю это не проблема, так как они все ещё используются, и знать про них стоит. Скоро подведу итоги моего трехмесячного эксперимента с «зелёным» GitHub, думаю будет интересно
Рекурсия.
Когда функции вызывают сами себя — этот процесс называют рекурсией. Это напоминает цикл while, соотвественно функция не может вызывать себя бесконечно, поэтому должно быть условие выхода из рекурсии. Если это условие будет написано неверно или его не будет, то call stack будет переполнен и вылезет ошибка, поэтому внимательно проверяйте условия, когда работаете с рекурсией
Для корректной работы нам также нужно написать правило движение по рекурсии, например: у нас есть массив экранов, внутри которых есть свои элементы, которые надо анимировать с определенной задержкой, а также показывать нужный экран, в таком случае мы можем использовать рекурсию: создадим функцию и передадим туда массив, нулевому элементу добавим класс, пробежимся циклом по внутренним элементам первого экрана(чтобы анимировать их) и на последней итерации вызовем ту же функцию, с тем же массивом, но без первого элемента. Условием выхода будет нулевая длинна переданного массива, так мы поймём, что элементы закончились и перебирать больше нечего. Похожий функционал я реализовывал, когда делал эффект дыма
Нашёл отличный урок про рекурсию с подробным объяснением и примерами:
Когда функции вызывают сами себя — этот процесс называют рекурсией. Это напоминает цикл while, соотвественно функция не может вызывать себя бесконечно, поэтому должно быть условие выхода из рекурсии. Если это условие будет написано неверно или его не будет, то call stack будет переполнен и вылезет ошибка, поэтому внимательно проверяйте условия, когда работаете с рекурсией
Для корректной работы нам также нужно написать правило движение по рекурсии, например: у нас есть массив экранов, внутри которых есть свои элементы, которые надо анимировать с определенной задержкой, а также показывать нужный экран, в таком случае мы можем использовать рекурсию: создадим функцию и передадим туда массив, нулевому элементу добавим класс, пробежимся циклом по внутренним элементам первого экрана(чтобы анимировать их) и на последней итерации вызовем ту же функцию, с тем же массивом, но без первого элемента. Условием выхода будет нулевая длинна переданного массива, так мы поймём, что элементы закончились и перебирать больше нечего. Похожий функционал я реализовывал, когда делал эффект дыма
Нашёл отличный урок про рекурсию с подробным объяснением и примерами:
Итоги зелёного лета.
За это лето я узнал много нового и сделал много проектов, завершил курсы «Путь самурая», «Funiro» и «React пицца»(об этом расскажу совсем скоро). Касательно GitHub, то я старался каждый день заливать туда что-то, были дни, когда не получалось физически, а бывало и просто лень, я старался сохранить тенденцию, и у меня это получилось
Поначалу все шло очень даже хорошо: я не пропускал ни дня почти месяц, но потом я не делал коммиты 5 недель по субботам из-за того, что у меня не получалось; примерно в тот момент я понял, что надо давать себе отдыхать и делать перерывы, ведь у меня не было цели программировать каждый день, я хотел только делать это регулярно. Следующие недели я старался отдыхать некоторые дни и переключаться
Итог: я понял, что программирование каждый день приносит хороший результат на небольших отрезках времени, если программировать каждый день без перерыва очень долго, то рано или поздно это надоест и прогресс замедлиться или вовсе пропадёт интерес к этому, а если программировать без интереса — наступит выгорание. Надо делать для себя перерывы, чтобы отдохнуть и переключиться
За это лето я узнал много нового и сделал много проектов, завершил курсы «Путь самурая», «Funiro» и «React пицца»(об этом расскажу совсем скоро). Касательно GitHub, то я старался каждый день заливать туда что-то, были дни, когда не получалось физически, а бывало и просто лень, я старался сохранить тенденцию, и у меня это получилось
Поначалу все шло очень даже хорошо: я не пропускал ни дня почти месяц, но потом я не делал коммиты 5 недель по субботам из-за того, что у меня не получалось; примерно в тот момент я понял, что надо давать себе отдыхать и делать перерывы, ведь у меня не было цели программировать каждый день, я хотел только делать это регулярно. Следующие недели я старался отдыхать некоторые дни и переключаться
Итог: я понял, что программирование каждый день приносит хороший результат на небольших отрезках времени, если программировать каждый день без перерыва очень долго, то рано или поздно это надоест и прогресс замедлиться или вовсе пропадёт интерес к этому, а если программировать без интереса — наступит выгорание. Надо делать для себя перерывы, чтобы отдохнуть и переключиться
React pizza.
Очень крутой курс, который я рекомендую всем новичкам, действительно просто и с нуля объясняется про компонент, пропсы и хуки. Из минусов: иногда автор чересчур детально описывает некоторые моменты, но можно проставить на 2х или промотать. Используются библиотеки redux, axios, для работы с бд используется json-server, а сам проект можно выложить на heroku
По итогу я сделал крутое приложение, в котором можно отсортировать и выбрать пиццы, изменять размер, тип теста, количество, а все эти параметры потом можно собрать и передать на сервер, демо прикреплю к посту:
Очень крутой курс, который я рекомендую всем новичкам, действительно просто и с нуля объясняется про компонент, пропсы и хуки. Из минусов: иногда автор чересчур детально описывает некоторые моменты, но можно проставить на 2х или промотать. Используются библиотеки redux, axios, для работы с бд используется json-server, а сам проект можно выложить на heroku
По итогу я сделал крутое приложение, в котором можно отсортировать и выбрать пиццы, изменять размер, тип теста, количество, а все эти параметры потом можно собрать и передать на сервер, демо прикреплю к посту:
Axios.
Библиотека для более удобной отправки запроса на сервер, создано на базе fetch, но с более коротким и простым синтаксисом, может использоваться в любых проектах, часто используется в связке с react для взаимодействия с различными api
Нашёл крутой урок, где рассказывается про основные функции и преимущества данной библиотеки:
Библиотека для более удобной отправки запроса на сервер, создано на базе fetch, но с более коротким и простым синтаксисом, может использоваться в любых проектах, часто используется в связке с react для взаимодействия с различными api
Нашёл крутой урок, где рассказывается про основные функции и преимущества данной библиотеки:
Изучать что-то новое.
Если вы идёте в каком-то направлении и вам это надоело, попробуйте изучить какую-то новую тему/подход, например вы работаете с redux и react, и вам это надоело, тогда попробуйте поменять redux на mobx и начать его учить
Почему вам может надоесть? Чаще всего это происходит из-за рутины: вы уже все изучили в той или иной сфере и не двигаетесь, поэтому у вас нет трудностей, которые бы вы преодолевали и получали новый опыт. Ещё одним плюсом изучения новых тем будет то, что вы расширяете кругозор и узнаёте почему надо делать именно так, делаете выводы и сравниваете ваши старые знания с той темой, в которой вы пока новичок
Если вы идёте в каком-то направлении и вам это надоело, попробуйте изучить какую-то новую тему/подход, например вы работаете с redux и react, и вам это надоело, тогда попробуйте поменять redux на mobx и начать его учить
Почему вам может надоесть? Чаще всего это происходит из-за рутины: вы уже все изучили в той или иной сфере и не двигаетесь, поэтому у вас нет трудностей, которые бы вы преодолевали и получали новый опыт. Ещё одним плюсом изучения новых тем будет то, что вы расширяете кругозор и узнаёте почему надо делать именно так, делаете выводы и сравниваете ваши старые знания с той темой, в которой вы пока новичок
RGym.
Сверстал небольшой, но довольно интересный макет: сайт спортзала, много элементов дизайна, которые выходят за контейнер, поэтому пришлось немного повозиться с адаптивом и сомой структурой; анимированный слайдер на главной с плавными переходами. Время на адаптив значительно уменьшилось благодаря адаптивному свойству, подробнее в этом посте. Затрат на подборы размеров шрифта и отступов больше нет, думаю продолжать использовать этот миксин в своих проектах, в планах ещё сверстать пару макетов
Код и сам сайт прикреплю к посту:
Сверстал небольшой, но довольно интересный макет: сайт спортзала, много элементов дизайна, которые выходят за контейнер, поэтому пришлось немного повозиться с адаптивом и сомой структурой; анимированный слайдер на главной с плавными переходами. Время на адаптив значительно уменьшилось благодаря адаптивному свойству, подробнее в этом посте. Затрат на подборы размеров шрифта и отступов больше нет, думаю продолжать использовать этот миксин в своих проектах, в планах ещё сверстать пару макетов
Код и сам сайт прикреплю к посту:
TypeScript.
Обычный JavaScript, но со встроенными типами. Когда js начал набирать популярность, а бизнес начал создавать все больше приложений со сложным функционалом, разработчики задумались о том, как расширять и поддерживать существующие приложения. Нативный js приносил как и быструю скорость и лёгкость в освоении, так и много новых проблем, одна из них была типизация
Объявление переменных без заданных типов приносило непредсказуемости в код, а, как следствие, кучу багов. Вдохновившись типизацией других языков(Java, C# и тд) разработчик из Microsoft создал TypeScript, который полностью совместим с js и компилируется в него при сборке
Буду делиться моими успехами в изучение TypeScript-a. А пока хочу посоветовать небольшое вводное видео про основы ts:
Обычный JavaScript, но со встроенными типами. Когда js начал набирать популярность, а бизнес начал создавать все больше приложений со сложным функционалом, разработчики задумались о том, как расширять и поддерживать существующие приложения. Нативный js приносил как и быструю скорость и лёгкость в освоении, так и много новых проблем, одна из них была типизация
Объявление переменных без заданных типов приносило непредсказуемости в код, а, как следствие, кучу багов. Вдохновившись типизацией других языков(Java, C# и тд) разработчик из Microsoft создал TypeScript, который полностью совместим с js и компилируется в него при сборке
Буду делиться моими успехами в изучение TypeScript-a. А пока хочу посоветовать небольшое вводное видео про основы ts:
Шифр Цезаря.
Шифр Цезаря — это вид шифра, в котором каждый символ в тексте заменяется символом, находящимся на некотором постоянном числе позиций впереди или позади него в алфавите. Написал небольшое приложение, в котором можно зашифровать и расшифровать английский текст, а также выбрать сдвиг и направление(вперёд/назад) куда будет сдвигаться буква, например: если сдвиг 3 и направление по-умолчанию(вперёд), то a -> d, b -> e, c -> f и тд. Результат и код прикреплю к посту, можете потестить:
Шифр Цезаря — это вид шифра, в котором каждый символ в тексте заменяется символом, находящимся на некотором постоянном числе позиций впереди или позади него в алфавите. Написал небольшое приложение, в котором можно зашифровать и расшифровать английский текст, а также выбрать сдвиг и направление(вперёд/назад) куда будет сдвигаться буква, например: если сдвиг 3 и направление по-умолчанию(вперёд), то a -> d, b -> e, c -> f и тд. Результат и код прикреплю к посту, можете потестить:
Material UI.
Библиотека для создания UI для ваших react приложений. Если вы не хотите париться над вёрсткой и не нуждаетесь в каком-то сложном функционале, то вы можете использовать готовые компоненты и даже целые секции из Material UI. Очень полезно, если вам не слишком важен визуал или у вас мало времени на создание верстки. Также подойдёт для тех, кому надо что-то быстро протестить и быстро накидать тестовую структуру проекта, чтобы потом уже конкретно заняться визуалом. Нашёл небольшой курс, где вкратце рассказывается про данную UI библиотеку:
Библиотека для создания UI для ваших react приложений. Если вы не хотите париться над вёрсткой и не нуждаетесь в каком-то сложном функционале, то вы можете использовать готовые компоненты и даже целые секции из Material UI. Очень полезно, если вам не слишком важен визуал или у вас мало времени на создание верстки. Также подойдёт для тех, кому надо что-то быстро протестить и быстро накидать тестовую структуру проекта, чтобы потом уже конкретно заняться визуалом. Нашёл небольшой курс, где вкратце рассказывается про данную UI библиотеку:
Работа с Date.
Всем привет, недавно досмотрел видео, где создавалась копия Вконтаке на react и решил добавить отображение времени для постов и сообщений, казалось, что сделать это будет проще простого: просто записываешь дату, время, а затем показываешь, но нет; обычно в соц сетях время показывается по-разному: если пост вышел недавно, то можно показать время относительно текущего(5 минут назад, 1 час и тд.), когда прошло уже достаточно времени можно показать что-то по типу «Сегодня в 20:00», если пост уже давний, то смысла нет показывать его точное время, можно просто записать дату
Поэтому решил записать число миллисекунд прошедших с 1.01.1970 и потом просто сравнивать с текущим значением и выбрать подходящий формат, для удобной работы решил подключить momentjs, так как есть ещё нюансы, например, если пост вышел до 12, а текущее время уже после, то надо записать «Вчера», чтобы это все не считать можно воспользоваться функционалом библиотеки, а какие вы используете библиотеки для работы с датой или используете чистый js? Напишите в чате!
Всем привет, недавно досмотрел видео, где создавалась копия Вконтаке на react и решил добавить отображение времени для постов и сообщений, казалось, что сделать это будет проще простого: просто записываешь дату, время, а затем показываешь, но нет; обычно в соц сетях время показывается по-разному: если пост вышел недавно, то можно показать время относительно текущего(5 минут назад, 1 час и тд.), когда прошло уже достаточно времени можно показать что-то по типу «Сегодня в 20:00», если пост уже давний, то смысла нет показывать его точное время, можно просто записать дату
Поэтому решил записать число миллисекунд прошедших с 1.01.1970 и потом просто сравнивать с текущим значением и выбрать подходящий формат, для удобной работы решил подключить momentjs, так как есть ещё нюансы, например, если пост вышел до 12, а текущее время уже после, то надо записать «Вчера», чтобы это все не считать можно воспользоваться функционалом библиотеки, а какие вы используете библиотеки для работы с датой или используете чистый js? Напишите в чате!
Neuro.
Небольшой сайт с крутой анимацией перемещения по планетам, вращение планет сделано просто передвигающийся картинкой, но эффект очень красивый, можно почувствовать себя космо-туристом и просто насладиться красивой анимацией, давно была такая идея, но никак руки не доходили, все ссылки прикреплю к посту и всех с наступающим
В этом году я узнал много нового (не только по программированию) Столкнулся с морем трудностей, взял крупный заказ, примерно определил дальнейший путь и понял, что мне нужно ещё много чего учить, хотя за этот год я значительно преуспел: начал учить react и redux, лучше изучил grid, стал лучше верстать и делать адаптив, старался делиться успехами и неудачами в своём телеграмм канале, но в последние время что-то редко это получалось. Надеюсь в 2022 больше изучать и углубиться в программирование, чаще выпускать посты и больше заниматься спортом. Желаю всем хороших праздников, меньше багов и побольше читабельного и красивого кода:)
Небольшой сайт с крутой анимацией перемещения по планетам, вращение планет сделано просто передвигающийся картинкой, но эффект очень красивый, можно почувствовать себя космо-туристом и просто насладиться красивой анимацией, давно была такая идея, но никак руки не доходили, все ссылки прикреплю к посту и всех с наступающим
В этом году я узнал много нового (не только по программированию) Столкнулся с морем трудностей, взял крупный заказ, примерно определил дальнейший путь и понял, что мне нужно ещё много чего учить, хотя за этот год я значительно преуспел: начал учить react и redux, лучше изучил grid, стал лучше верстать и делать адаптив, старался делиться успехами и неудачами в своём телеграмм канале, но в последние время что-то редко это получалось. Надеюсь в 2022 больше изучать и углубиться в программирование, чаще выпускать посты и больше заниматься спортом. Желаю всем хороших праздников, меньше багов и побольше читабельного и красивого кода:)
Ruby Home.
Сверстал небольшой лендинг кампании по аренде жилья в Америке, необычный главный экран: элемент поиска немного выпирает, реализованы табы и селекты для выбора параметров поиска, блок с логотипами превращается в слайдер на мобильных устройствах и планшетах, для позиционирования карточек использовал grid, необычные решения для адаптива блока с иконками были использованы нестандартные решения: пришлось немного изменить верстку в ходе адаптива, но зато на планшетах сетка смотрится очень хорошо, постарался максимально качественно сверстать этот макет, чтобы оценить свои силы, в планах улучшить стартовый шаблон и пройти один марафон по верстке
Сверстал небольшой лендинг кампании по аренде жилья в Америке, необычный главный экран: элемент поиска немного выпирает, реализованы табы и селекты для выбора параметров поиска, блок с логотипами превращается в слайдер на мобильных устройствах и планшетах, для позиционирования карточек использовал grid, необычные решения для адаптива блока с иконками были использованы нестандартные решения: пришлось немного изменить верстку в ходе адаптива, но зато на планшетах сетка смотрится очень хорошо, постарался максимально качественно сверстать этот макет, чтобы оценить свои силы, в планах улучшить стартовый шаблон и пройти один марафон по верстке
Оптимизация сайта.
В видео приведены наглядные примеры по оптимизации скорости загрузки сайта и советы по улучшению производительности. Скорость загрузки напрямую влияет на выдачу вашего сайта в поисковиках, иногда мы напрямую можем влиять на скорость загрузки оптимизируя шрифты, картинки, стили, скрипты, но бывают и случаи, когда нам надо что-то подгрузить из сторонних сайтов: скрипты, статистика, стили и тд. Во втором случае мы ничего не можем поделать, так как мы не влияем на скорость ответа сервера, а вот в первом мы можем значительно изменить показатели загрузки сайта, подробнее в видео:
В видео приведены наглядные примеры по оптимизации скорости загрузки сайта и советы по улучшению производительности. Скорость загрузки напрямую влияет на выдачу вашего сайта в поисковиках, иногда мы напрямую можем влиять на скорость загрузки оптимизируя шрифты, картинки, стили, скрипты, но бывают и случаи, когда нам надо что-то подгрузить из сторонних сайтов: скрипты, статистика, стили и тд. Во втором случае мы ничего не можем поделать, так как мы не влияем на скорость ответа сервера, а вот в первом мы можем значительно изменить показатели загрузки сайта, подробнее в видео:
Any-hover.
Иногда ховеры могут смотреться не очень(особенно на телефонах), но иногда они даже мешают, чтобы исправить эту проблему существует специальный медиа запрос @media(any-hover: hover) на caniuse появилась хорошая поддержка и лишь некоторые браузеры(кто-то ещё пользуется IE?) не поддерживают данное свойство, медиа запрос можно вывести в отдельный сниппет и смело использовать в своих проектах. Это будет очень полезно для кнопок, чтобы при нажатии убрать анимацию наведения на телефонах и заменить ее анимацией нажатия. Подробнее про этот и похожие медиа запросы в статье:
Иногда ховеры могут смотреться не очень(особенно на телефонах), но иногда они даже мешают, чтобы исправить эту проблему существует специальный медиа запрос @media(any-hover: hover) на caniuse появилась хорошая поддержка и лишь некоторые браузеры(кто-то ещё пользуется IE?) не поддерживают данное свойство, медиа запрос можно вывести в отдельный сниппет и смело использовать в своих проектах. Это будет очень полезно для кнопок, чтобы при нажатии убрать анимацию наведения на телефонах и заменить ее анимацией нажатия. Подробнее про этот и похожие медиа запросы в статье:
#нетвойне.
Ребят, думаю каждый знает что произошло 24.02, я долго думал писать или нет. Я проснулся от взрывов, взяв телефон я узнал, что началась война. Поначалу у меня не было чувства страха, а лишь большое непонимание почему это произошло. И по факту неважно кто прав, а кто виноват. Я просто против любой войны и убийства людей. По поводу постов: хотели бы вы чтобы я выпускал сейчас посты или лучше сделать перерыв на неопределенное время? Напишите пожалуйста ниже
Ребят, думаю каждый знает что произошло 24.02, я долго думал писать или нет. Я проснулся от взрывов, взяв телефон я узнал, что началась война. Поначалу у меня не было чувства страха, а лишь большое непонимание почему это произошло. И по факту неважно кто прав, а кто виноват. Я просто против любой войны и убийства людей. По поводу постов: хотели бы вы чтобы я выпускал сейчас посты или лучше сделать перерыв на неопределенное время? Напишите пожалуйста ниже
Крутой 3d слайдер.
Отличный пример кастомизации swiper.js, много различных интересных элементов, которые в совокупности создают особый эффект, очень круто проработан фон и тени, добавлен дым, освещение и мерцание, что добавляет еще больше атмосферности для слайдера, создан крутой 3d эффект для картинок, демо прикреплю к посту, видео идёт всего час, поэтому можете выделить себе время и насладиться просмотром:
Отличный пример кастомизации swiper.js, много различных интересных элементов, которые в совокупности создают особый эффект, очень круто проработан фон и тени, добавлен дым, освещение и мерцание, что добавляет еще больше атмосферности для слайдера, создан крутой 3d эффект для картинок, демо прикреплю к посту, видео идёт всего час, поэтому можете выделить себе время и насладиться просмотром:
