Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2👀2🤬1
Фронтенд — это просто вёрстка
Фронтенд-разработка — это просто вёрстка интерфейсов, где не нужно кодить, где ты просто создаешь HTML-макет и применяешь туда всякие примочки по типу CSS-стилей или небольших JS-скриптов для красоты. Я часто встречаю такое мнение от начинающих веб-разработчиков, которое вызывает у меня слезу ностальгии. Ведь именно так я и думал, когда открывал для себя веб-разработку. Мне приятно наблюдать, как новички говорят о том, что во фронтенде всё легко, радуясь тому, что у них получилось сделать всплывающее окошко или даже сверстать целый лендинг с формой обратной связи без «заумного» программирования и им этого будет достаточно, чтобы создавать крутые сайты! В этот момент, хотел бы я им сказать: «Как же вы ошибаетесь…», но понимаю, что могу отбить у этих людей желание разбираться глубже, раскрыв полную картинку происходящего.
Буквально лет 5 назад я думал, что останусь просто HTML-верстальщиком, оживляя макеты из фигмы, а всем остальным за меня будут заниматься «умные» программисты, которые любят копаться во всяких паттернах, алгоритмах и т.д. Но к сожалению, такое могло бы прокатить где-то в году 2012-м, когда веб-разработка была хаотична и требований к сайту было меньше. Сейчас вёрстка интерфейса — это скорее лишь 40% работы фронтендера, остальное — проектирование логики и работа с данными приложения, где нередко приходится использовать как раз таки «заумные» паттерны, алгоритмы и принципы программирования.
Но если сейчас тебе нравится оживлять макеты, делая из картинок отзывчивые интерфейсы (именно это меня и привлекло когда-то в HTML-вёрстке), то не стоит бояться идти дальше и изучать новые технологии. В интернете куча бесплатной информации, поэтому найди подходящий для себя roadmap и вперёд покорять вершины!
Фронтенд-разработка — это просто вёрстка интерфейсов, где не нужно кодить, где ты просто создаешь HTML-макет и применяешь туда всякие примочки по типу CSS-стилей или небольших JS-скриптов для красоты. Я часто встречаю такое мнение от начинающих веб-разработчиков, которое вызывает у меня слезу ностальгии. Ведь именно так я и думал, когда открывал для себя веб-разработку. Мне приятно наблюдать, как новички говорят о том, что во фронтенде всё легко, радуясь тому, что у них получилось сделать всплывающее окошко или даже сверстать целый лендинг с формой обратной связи без «заумного» программирования и им этого будет достаточно, чтобы создавать крутые сайты! В этот момент, хотел бы я им сказать: «Как же вы ошибаетесь…», но понимаю, что могу отбить у этих людей желание разбираться глубже, раскрыв полную картинку происходящего.
Буквально лет 5 назад я думал, что останусь просто HTML-верстальщиком, оживляя макеты из фигмы, а всем остальным за меня будут заниматься «умные» программисты, которые любят копаться во всяких паттернах, алгоритмах и т.д. Но к сожалению, такое могло бы прокатить где-то в году 2012-м, когда веб-разработка была хаотична и требований к сайту было меньше. Сейчас вёрстка интерфейса — это скорее лишь 40% работы фронтендера, остальное — проектирование логики и работа с данными приложения, где нередко приходится использовать как раз таки «заумные» паттерны, алгоритмы и принципы программирования.
Но если сейчас тебе нравится оживлять макеты, делая из картинок отзывчивые интерфейсы (именно это меня и привлекло когда-то в HTML-вёрстке), то не стоит бояться идти дальше и изучать новые технологии. В интернете куча бесплатной информации, поэтому найди подходящий для себя roadmap и вперёд покорять вершины!
👍2🔥2🤬1👀1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный свитчер на чистом CSS
В общем, наткнулся я на этот мем в очередной раз и решил, а почему бы не сделать что-то подобное на чистом CSS? Недолго думая, я открыл codepen, нашел что-то подходящее в Figma Community и начал верстать. Оказалось не так уж и сложно, возможно кто-то может реализовать это иначе, но я решил пойти по пути наименьшего сопротивления. В общем с результатом и исходным кодом вы можете ознакомиться здесь. А я в свою очередь планирую переодически делиться с вами своими наработками на codepen. Даже оригинальное название для рубрики этой придумал – #песочница😎
В общем, наткнулся я на этот мем в очередной раз и решил, а почему бы не сделать что-то подобное на чистом CSS? Недолго думая, я открыл codepen, нашел что-то подходящее в Figma Community и начал верстать. Оказалось не так уж и сложно, возможно кто-то может реализовать это иначе, но я решил пойти по пути наименьшего сопротивления. В общем с результатом и исходным кодом вы можете ознакомиться здесь. А я в свою очередь планирую переодически делиться с вами своими наработками на codepen. Даже оригинальное название для рубрики этой придумал – #песочница
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍1🤬1
This media is not supported in your browser
VIEW IN TELEGRAM
Как всё успевать?
Именно такой вопрос я задаю себе, когда ложусь спать. Читая различные истории так называемых айтишников, я часто вижу, как они, помимо своей основной работы, успевают заниматься своими пет-проектами, изучать новые технологии, при этом и про отдых не забывают. И нормально себя чувствуют! Как? Как они это делают? Почему я после работы хочу лишь лечь на кровать и не вставать? Может дело в мотивации? Или это лень? Ведь сама работа не слишком-то и напряжная, я занимаюсь тем, чем хочу заниматься. Но при этом сил на то, чтобы начать делать что-то своё параллельно попросту нет.
А у вас есть силы работать после работы? Буду рад, если поделитесь своими секретиками 👉👈
Именно такой вопрос я задаю себе, когда ложусь спать. Читая различные истории так называемых айтишников, я часто вижу, как они, помимо своей основной работы, успевают заниматься своими пет-проектами, изучать новые технологии, при этом и про отдых не забывают. И нормально себя чувствуют! Как? Как они это делают? Почему я после работы хочу лишь лечь на кровать и не вставать? Может дело в мотивации? Или это лень? Ведь сама работа не слишком-то и напряжная, я занимаюсь тем, чем хочу заниматься. Но при этом сил на то, чтобы начать делать что-то своё параллельно попросту нет.
А у вас есть силы работать после работы? Буду рад, если поделитесь своими секретиками 👉👈
🗿3👍2❤1🤬1
This media is not supported in your browser
VIEW IN TELEGRAM
scroll-snap-type — свойство, которое позволяет добавить интересный эффект прокрутки блоков без JavaScript. Всё, что нужно сделать — это указать тип прокрутки контейнера и тип выравнивания у дочерних элементов. Поддерживается во всех современных браузерах последних версий.
Пример использования 👈
#cssфичи
Пример использования 👈
#cssфичи
🔥5👍1🤬1👀1
Бывают моменты, когда тебе ставят новую задачу, ты оцениваешь её определённым уровнем сложности и выставляешь себе условный дедлайн. И в рандомный момент вдруг начинается какая-то жесть, ты понимаешь, что ты не справишься к обусловленному сроку, потому, что ЭТА ХРЕНОВИНА НЕ РАБОТАЕТ И Я НЕ МОГУ ПОНЯТЬ ПОЧЕМУ! Ты можешь потратить не один день на попытки понять, почему это так. Ты просто не видишь ошибки, ты отдебажил всё, что можно и не понимаешь как решить эту проблему. И как объяснить руководству, почему ты не успел закончить задачу, когда ты сам не понимаешь причины? Начинается полный тильт. Но одним прекрасным утром, в очередной раз, когда ты открываешь свой код, тебе внезапно приходит мысль «А что, если…» и после небольшого мозгового штурма, ты закрываешь свой вопрос за час. Просто в момент приходит осознание того, что решение оказывается всегда было перед носом. И в эту секунду, я обычно испытываю противоречивые чувства, с одной стороны — радость, а с другой — угнетение, ведь ты столько времени потратил, чтобы решить эту
Please open Telegram to view this post
VIEW IN TELEGRAM
🤬3😢2👀1
This media is not supported in your browser
VIEW IN TELEGRAM
Многие из вас сталкивались с такой ситуацией, когда вам нужно было ввести проверочный код в поле, а оно такооое волшебное и само переключается после ввода символа на другой инпут, и при копировании вставляет в каждую ячейку цифру. В общем, я решил поделиться с вами решением того, как это можно реализовать на чистом JavaScript.
А где ссылочка на превью и код? Да вот же она —✨ ссылочка ✨
#песочница
А где ссылочка на превью и код? Да вот же она —
#песочница
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1🤬1👀1
Не могу жить без TypeScript ❤️🔥
Когда я только начинал заниматься фронтенд–разработкой, моим основным языком программирования был JS и меня он более чем устраивал. Конечно, я тогда слышал про TypeScript, но мне казалось, что это что–то сложное и вообще мне ненужное. Но когда я устроился на работу в ГоуТур, мы с командой приняли общее решение использовать в своём проекте именно TS, т.к. на тот момент нас было аж четверо фронтендеров и работу нужно было как–то приводить к одному общему стилю написания кода. Пускай меня тогда и пугала перспектива перехода на новый язык, но когда я углубился в его суть и почитал парочку статей, я загорелся идеей его изучать. В итоге, спустя больше года разработки проекта, я теперь не могу представить свою работу без него. Когда мне приходится писать какой–то JavaScript код, у меня сразу появляется чувство неполноценности. Ощущение, что я делаю какой–то неправильный или даже небезопасный код. Поэтому любой мой пет–проект теперь начинается с установки TypeScript. Почему? Он делает код предсказуемым и систематичным, что в свою очередь и даёт так называемую «безопасность». Ты описываешь все данные, с которыми работаешь, указываешь какой у них должен и может быть тип, исключая на этом этапе все возможные ошибки этого рода. За это я и полюбил TypeScript. В этом и есть его суть. Я очень рад, что познакомился и не побоялся изучать этот язык. Ведь теперь мне этот страшный и сложный код кажется понятным, опрятным и надёжным!
Когда я только начинал заниматься фронтенд–разработкой, моим основным языком программирования был JS и меня он более чем устраивал. Конечно, я тогда слышал про TypeScript, но мне казалось, что это что–то сложное и вообще мне ненужное. Но когда я устроился на работу в ГоуТур, мы с командой приняли общее решение использовать в своём проекте именно TS, т.к. на тот момент нас было аж четверо фронтендеров и работу нужно было как–то приводить к одному общему стилю написания кода. Пускай меня тогда и пугала перспектива перехода на новый язык, но когда я углубился в его суть и почитал парочку статей, я загорелся идеей его изучать. В итоге, спустя больше года разработки проекта, я теперь не могу представить свою работу без него. Когда мне приходится писать какой–то JavaScript код, у меня сразу появляется чувство неполноценности. Ощущение, что я делаю какой–то неправильный или даже небезопасный код. Поэтому любой мой пет–проект теперь начинается с установки TypeScript. Почему? Он делает код предсказуемым и систематичным, что в свою очередь и даёт так называемую «безопасность». Ты описываешь все данные, с которыми работаешь, указываешь какой у них должен и может быть тип, исключая на этом этапе все возможные ошибки этого рода. За это я и полюбил TypeScript. В этом и есть его суть. Я очень рад, что познакомился и не побоялся изучать этот язык. Ведь теперь мне этот страшный и сложный код кажется понятным, опрятным и надёжным!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3❤2🤬1👀1
Хочу поделиться с вами парочкой советов, которые помогут вам сделать ваше React–приложение более чистым и понятным. Это лишь базовые рекомендации, а не чёткие правила, и всегда есть исключения, но лично я использую все эти приёмы в своей работе постоянно 🚬
#полезное
#полезное
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍2🤬1👀1
This media is not supported in your browser
VIEW IN TELEGRAM
object-fit — свойство, которое позволяет вместить изображение в любой контейнер с сохранением пропорций. Всё, что нужно сделать, это задать необходимый размер родительскому контейнеру, а тег img растянуть на 100% по ширине и высоте, после чего указать данное свойство со значением «contain».
Пример использования👈
#cssфичи
Пример использования
#cssфичи
Please open Telegram to view this post
VIEW IN TELEGRAM
👀4❤2🤬1
Когда ты только погружаешься в любую из IT-сфер, после обучения ты начинаешь задумываться, что пора бы уже и начать искать работу. Но вот беда, как правило на этом этапе ты сталкиваешься с тем, что тебе нечего показать будущему работодателю. Поэтому я решил собрать небольшой список идей для портфолио джуниора фронтенд-разработчика, из которого, возможно, кто-то подчерпнёт что-то интересное и для себя.
#полезное
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5🤬1👀1
This media is not supported in your browser
VIEW IN TELEGRAM
Я устал, я ухожу… в отпуск
В последнее время, я чувствовал, что сильно измотан. Моя голова каждый вечер дико кипела после работы, а когда я закрывал ноутбук, мне хотелось просто лечь на диван и ничего не делать. Поэтому я решил, что пора ребутить мозги и взял себе отпуск на 2 недели. Вы только представьте 2 НЕДЕЛИ БЕЗ ПРОГРАММИРОВАНИЯ! Не нужно думать о дедлайнах, о каких-то фичах, багах и прочих рабочих моментах. Так что начиная с завтрашнего дня я планирую как следует отдохнуть и по минимуму садиться за комп. Дышать свежим воздухом, ходить в кино, смотреть сериалы и кушать разные вкусности. Именно об этом я и мечтал последние несколько месяцев. Кто знает, может даже удастся собрать друзей поиграть в настолки!☺️
В последнее время, я чувствовал, что сильно измотан. Моя голова каждый вечер дико кипела после работы, а когда я закрывал ноутбук, мне хотелось просто лечь на диван и ничего не делать. Поэтому я решил, что пора ребутить мозги и взял себе отпуск на 2 недели. Вы только представьте 2 НЕДЕЛИ БЕЗ ПРОГРАММИРОВАНИЯ! Не нужно думать о дедлайнах, о каких-то фичах, багах и прочих рабочих моментах. Так что начиная с завтрашнего дня я планирую как следует отдохнуть и по минимуму садиться за комп. Дышать свежим воздухом, ходить в кино, смотреть сериалы и кушать разные вкусности. Именно об этом я и мечтал последние несколько месяцев. Кто знает, может даже удастся собрать друзей поиграть в настолки!
Please open Telegram to view this post
VIEW IN TELEGRAM
👀4🗿2🤬1