Senior Frontend - javascript, html, css
25.7K subscribers
1.27K photos
2.25K videos
689 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
Media is too big
VIEW IN TELEGRAM
Stairway

В этом видео создается бесконечная анимация лестницы на чистом CSS.

👉 @seniorFront
👍41
This media is not supported in your browser
VIEW IN TELEGRAM
Environment Impact Cards

Реализовано на HTML и SCSS. Анимировано библиотекой gsap.

👉 @seniorFront
👍5
Chunky strings

Вам дана строка, состоящая из 'чанков'. Каждый чанк отделен скобками "[" и "]".
В вашей строке все закрывающие скобки удалены. Создайте функцию, которая вернет закрывающие скобки.

Пример:
Input               Restored String
'x' 'x'
'[xy' '[xy]'
'[x[yy' '[x[yy]]'
'[[xyy' '[[xy]y]'
'[[ab[ab' '[[ab][ab]]'
'[c[o[d[e[w[a[rs' '[c[o[d[e[w[a[rs]]]]]]]'


👉 @seniorFront
👎15👍1
Удавка на собесе

Сегодня поговорим про ИТ собесы, от которых меня в последнее время тошнит. Я занимаюсь коммерческой разработкой с 2000-х, поменял более 10 ИТ-компаний и прошел достаточно собесов, чтобы уверенно сформировать личное мнение о качестве подбора персонала в 2024 году. Мой знакомый, владея кадровым агентством в ЕС как-то раз поведал: когда речь идет об ИТ компаниях из СНГ, то это больше история про техническую удавку, если про ИТ-компании из ЕС, то это про софт-скиллы. Что касается Республики Беларусь, то это микс, который зависит от конкретного заказчика. Я больше работал с ЕС и один раз по совместительству с РФ. Пришел я в ИТ по собственному желанию, когда про ИТ мало говорили даже за студенческими партами. Я тогда мало интересовался рынком ИТ и где-то там слышал от сокурсников, что в моем городе появлялись мелкие ИТ-компашки. Что они писали и для кого, я не интересовался вообще.

👉 @seniorFront
👍11
Зачем нужны сборщики ?

Сборщики (или бандлеры) играют критически важную роль в процессе создания современных веб-приложений и сайтов. Они автоматизируют и оптимизируют множество задач, связанных с подготовкой кода к продакшену. Сборщики, такие как Webpack, Rollup, Parcel и другие, обеспечивают эффективное управление зависимостями, минификацию кода, транспиляцию и множество других возможностей. Вот основные причины, по которым сборщики являются неотъемлемой частью современной веб-разработки:

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

Модульность и организация кода
Поддерживают использование модулей ES6, CommonJS и других форматов модулей, что позволяет разработчикам структурировать код более эффективно, делая его читаемым и легко поддерживаемым.

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

Оптимизация производительности

Могут минифицировать и углифицировать JavaScript и CSS, удаляя лишние пробелы, комментарии и сокращая имена переменных. Это уменьшает размер файлов и ускоряет загрузку веб-приложений.

Автоматизация задач
Могут автоматизировать множество рутинных задач, таких как компиляция SASS/LESS в CSS, оптимизация изображений, генерация исходных карт (source maps) для упрощения отладки и другие.

Горячая замена модулей (HMR)

Поддерживают горячую замену модулей (Hot Module Replacement), что позволяет разработчикам видеть изменения в коде в реальном времени без полной перезагрузки страницы, ускоряя процесс разработки.

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

👉 @seniorFront
👍62
Когда лопнет IT-пузырь

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

Сценарий №1. Всех заменит ИИ
Вероятно, вы слышали высказывания главы Nvidia Дженсена Хуанга о том, что больше нет необходимости изучать программирование, поскольку искусственный интеллект заменит большую часть IT-специалистов. Действительно, эту угрозу ощущают немало профессионалов своего дела. Уже сейчас медленно, но верно ИИ проникает во многие рабочие процессы, частично заменяя некоторые позиции.
Однако давайте посмотрим на это с другой стороны. Да, мир постоянно меняется, и мы с вами никак не можем этому помешать. Тем не менее, несмотря на рост уровня автоматизации, многие процессы по-прежнему требуют человеческого участия и глубокого понимания. Создание эффективного ИИ, его тестирование и совершенствование — это задачи, в которых человеческий элемент невозможно полностью заменить.
Как мне кажется, развитие ИИ создаст новые возможности не только для специалистов, занятых в разработке, внедрении и обслуживании этих технологий, но и всех, кто сможет адаптироваться и научится использовать нейросети в свою пользу.

Сценарий №2. Переизбыток специалистов на рынке
Время от времени я просматриваю вакансии на hh.ru. За последние пару лет заметно выросло количество откликов по многим направлениям в IT.
Думаю, есть несколько причин такого ажиотажа. Во-первых, государство поддерживает это направление: во многих учебных заведениях появились или расширились факультеты для подготовки IT-специалистов. Во-вторых, количество онлайн-курсов, которые обещают обучить с нуля и заманивают учеников громкими обещаниями, увеличивается день ото дня. Всё это плодит кучу новичков в сфере, готовых стартануть с меньшей зарплатой и на менее выгодных условиях.
Конкуренция растёт, а зарплаты, которые раньше были стабильно высокими, начинают снижаться. Это может продолжаться в течение нескольких лет, приводя к тому, что даже опытные ребята будут долго искать работу.

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

👉 @seniorFront
👍5👎31🤔1
План действий на 2024 для UX/UI-дизайнера и ссылки на статьи

UI/UX-дизайн (пользовательский интерфейс и пользовательский опыт) — это деятельность по созданию удобных, интуитивно понятных и эстетически привлекательных цифровых интерфейсов для улучшения общего взаимодействия пользователя с продуктом.

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

👉 @seniorFront
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Card animation

Свёрстано и анимировано на HTML и CSS. Логика переключения анимаций реализована в JS.

👉 @seniorFront
👎2
Media is too big
VIEW IN TELEGRAM
Wave Animation Effects

В этом видео создается бесконечная анимация волны на HTML и CSS.

👉 @seniorFront
🔥3👍1
💸 Вакансии для IT'шников
Выбери своё направление

1. Frontend
2. Python
3. Java
4. Тестировщик QA
5. Data Science
6. DevOps
7. C#
8. С/C++
9. Golang
10. PHP
11. Kotlin
12. Swift
Please open Telegram to view this post
VIEW IN TELEGRAM
👎31
This media is not supported in your browser
VIEW IN TELEGRAM
interactive platypus

Анимировано в CSS. Логика перемещения и запуска анимации реализована в JS.

👉 @seniorFront
8
This media is not supported in your browser
VIEW IN TELEGRAM
Pure CSS airplane checkbox

Оригинальный переключатель свёрстанный и анимированный с использованием препроцессоров Pug и Stylus.

👉 @seniorFront
👍152
Media is too big
VIEW IN TELEGRAM
Animated Login Page

В этом видео создаётся анимированная форма входа на HTML и CSS.

👉 @seniorFront
Разбираем как решать задачи на LeetCode

Примеры решений
Пояснения

Выбери своё направление:

1. Python
2. JavaScript
3. Java
4. C#
5. Golang
6. C/C++
7. PHP
8. Kotlin
9. Swift
👍2👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Split screen before/after

Автор разместил две картинки, к одной из которых применил фильтр grayscale и CSS clip-path для обрезки изображения. Значение свойства clip-path изменяется в JS.

👉 @seniorFront
👍6🔥21
Получите средний символ

Вам будет дано слово. Ваша задача - вернуть средний символ слова. Если длина слова нечетная, верните средний символ. Если длина слова четная, верните 2 средних символа.

Пример:
getMiddle("testing") = "t"

👉 @seniorFront
🤔5
Вышел TypeScript 5.6

В этой статье описаны последние изменения в TypeScript.

Краткий список изменений:
— Новые синтаксические проверки на нулевые/истинные значения
— Методы-помощники итератора и проверки на строгость
— Приоритетная проверка регионов в редакторах
— Гибкое поведение --build

👉 @seniorFront
👍3👎1🔥1
Зачем нужны сокеты ?

Сокеты — это программные интерфейсы (API), позволяющие обеспечивать взаимодействие между приложениями по сети. Они используются для создания сетевых соединений для обмена данными между клиентом и сервером или между узлами в сети. Вот основные причины, по которым сокеты являются важным инструментом в разработке сетевых приложений:

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

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

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

Гибкость и контроль
Предоставляют разработчикам большую гибкость и контроль над тем, как устанавливаются и управляются сетевые соединения. Разработчики могут определять, какие протоколы использовать (TCP, UDP и др.), как обрабатывать ошибки и потерю пакетов, а также как оптимизировать производительность для конкретных требований приложения.

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

👉 @seniorFront
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Forest Encounter

Свёрстано и анимировано на чистых HTML и CSS.

👉 @seniorFront
👍10