decodeURIComponent и decodeURI в JS

decodeURIComponent применяется для обработки отдельных компонентов URI и эффективно декодирует специальные символы, такие как &, =, +, ?. Этот метод подходит для получения точных значений параметров из строки запроса.

decodeURI предназначен для декодирования полных URI. Он сохраняет специальные символы, которые существенны для структуры URI, например & и = в запросах, тем самым поддерживая целостность URI.

Примеры:
// decodeURI сохраняет структуру запроса
console.log(decodeURI("http://example.com/?name=John%20Doe&age=30")); // "http://example.com/?name=John Doe&age=30"

// decodeURIComponent усиленно декодирует, что может изменить структуру
console.log(decodeURIComponent("name=John%20Doe%26age%3D30")); // "name=John Doe&age=30"

Используйте decodeURIComponent, чтобы извлекать точные значения из составных частей URI, и decodeURI, когда необходимо сохранить работоспособность всего URI.

👉 @seniorFront

Neumorphic Rocker Switch

Оригинальный переключатель, свёрстанный из кнопки на HTML и SCSS. Логика переключения реализована в JS.

👉 @seniorFront

​Проработал в IT больше 10 лет. Вот 5 вещей, которые я бы хотел знать, если бы начинал сейчас:

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

2. У вас будет не получаться, вы будете не понимать – и это нормально (и это пройдет со временем, но не совсем)
Со временем станет легче, но это не пройдет. Я прогуливал пары в универе, поэтому у меня остались дыры в фундаментальных знаниях о компьютерной науке, которые я не залатал с опытом. Но это не самое важное. Самое важное, что и в своей работе вы будете иметь пропуски в знаниях. Может быть, не в конкретной работе в конкретной роли на конкретном проекте – это лимитированные знания, проект можно изучить вдоль и поперек, особенно если работать на нем достаточно долго. Но это нормально не знать какие-то вещи о вашей профессии в целом.

3. Не держитесь за плохое место
Бывает такое – плохое рабочее место. Распознать плохое место просто – в конце дня вам хочется завернуться в одеялко и забиться в угол, и самое главное – на работе не с кем об этом поговорить, чтобы улучшить ситуацию. У плохого места бывают разные причины. Иногда это коллектив, иногда начальство, иногда дело может быть в вас – просто не подходите на это место, ошибка найма, и это нормально. Не нормально – держаться за это место.

4. Часто менять работу может быть полезно, но не всем
Я все еще вижу рекомендации для начинающих программистов: меняйте работу почаще. Так, мол, больше опыта наберетесь. Год там, полгода сям, и вот ты через три-четыре года опытный как сеньор помидор. Это может сработать. Но это не для всех.
Есть разные типы людей, по тому, как они умеют концентрироваться и удерживать внимание. Если у вас нет проблем с фокусом, вы легко можете проработать несколько лет на одном месте и изучить все процессы вдоль и поперек – это и цену в текущей компании повысит, и даст возможность в будущем рассказать о том, что узнали, на собеседованиях. Люди недооценивают понимание работы вглубь, а ведь много позиций и компаний, где это ценят.

5. Не упускайте возможности, даже если они кажутся мелкими или незначительными
Карьера в автоматизации тестирования изменила мою жизнь в лучшую сторону. Эта возможность всегда была у меня перед носом. Я не раз задумывался о том, чтобы попробовать, и даже начинал что-то учить, но бросал – мне казалось, что тестирование это несерьезно и вообще это какой-то позор переключаться на тестирование после нескольких лет опыта в веб-программировании (хаха). Оказалось, что я способен сделать серьезную карьеру в этом поле и даже без относительно серьезных усилий. Больших усилий для меня стоило переключиться с работы в баре на работу веб-разработчика.

👉 @seniorFront

Перформанс ревью

Перформанс ревью (performance review) — система оценки компаниями профессиональных качеств сотрудников. Это – популярный и эффективный инструмент, который используют крупные мировые и отечественные бренды, например, Google, Яндекс и Авито.

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

👉 @seniorFront

Team Profiles rotation with Theme Toggle

Стилизовано при помощи Tailwind. Каждая фотография - это input type="radio".

👉 @seniorFront

CSS Animation Effects Tutorial

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

👉 @seniorFront

Проводит нагрузочное тестирование

👉 @seniorFront

Leaping Percentage Loader

Это анимированная svg картинка. Логика смены чисел реализована в JS.

👉 @seniorFront

No script accordion animation

Реализовано на HTML и SCSS. При наведении задействуются CSS трансформации и изменяется значение grid-template-rows.

👉 @seniorFront

CSS Pulse Animation Effects

В этом видео создается анимация пульсации на CSS.

👉 @seniorFront

Blackhole

Создано и анимировано на canvas при помощи WebGL.

👉 @seniorFront

Even or Odd Accessor

Создайте функцию, к которой можно обратиться не только как к функции, но и как к объекту. В обоих случаях передается число. Функция должна проверить, четное ли оно.

Примеры:
evenOrOdd(2); //'Even'
evenOrOdd[2]; //'Even'
evenOrOdd(7); //'Odd'
evenOrOdd[7]; //'Odd'

👉 @seniorFront

Синдром самозванца Vs Излишняя самоуверенность

Есть два зеркальных деструктивных поведения, с которыми мы встречаемся на работе - излишняя самоуверенность и синдром самозванца. На сколько они опасны для руководителя и для самой команды? Как с ними бороться? Ответы в этой статье.

👉 @seniorFront

​Что такое ARIA-атрибуты?

ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний.
Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?».
Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?».

ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов.

Общий синтаксис ARIA-атрибутов — aria-атрибут="значение".
Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему.
<label for="psw">Пароль</label>
<input
type="password"
name="password"
id="psw"
aria-describedby="hint"
>
<span id="hint">Пароль должен содержать не меньше 20 знаков</span>

aria-describedby связывает с помощью одинакового ID два элемента — поле и подсказку из тега <span>. Скринридер озвучит текст подсказки после подписи и основной информации о поле.

👉 @seniorFront

HOME 🏠 & WORK

Анимация реализована при помощи библиотеки Three.js

👉 @seniorFront

​Как сохранить здоровую самооценку в необъятном пруду ИТ

Сейчас выделяют несколько видов сравнения: горизонтальное, восходящее и нисходящее, сравнение с идеализированными образами (в рекламе и соцсетях), сравнения с прошлым или будущим «я». Мы поговорим о восходящем и нисходящем сравнении.

Восходящее социальное сравнение — это сравнение себя с теми, кто лучше или имеет больше успеха. Да, оно мотивирует, но иногда вызывает чувство недостаточности или зависти.

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

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

Иногда балуйте себя нисходящим сравнением
Я практиковал это, будучи преподавателем. На занятиях я говорил ребятам: «Вы в 8–11 классе уже умеете программировать. В вашем возрасте у меня из ачивок был только пройденный Dark Souls. Да, я стою перед вами и рассказываю тему, но вы уже шагнули дальше, чем я в вашем возрасте».
Иногда я готовил школьников к олимпиадам, и видел, как они сравнивают себя только с олимпиадниками и переживают. Но их выбрали из множества учеников, и они уже в суперпродвинутой тусовке. Я напоминал им об этом

Не забывайте о ретроспективе и рефлексии
Я пока не записываю свои достижения, но иногда останавливаюсь и в моменте вспоминаю пройденный путь или успехи моих учеников. У вас за плечами точно есть победы: pet-проекты, опыт и масса знаний. Всё это мы не учитываем, безвылазно находясь в пруду. Выглядывайте наружу и смотрите вокруг. Многие «рыбки» хотели бы оказаться на вашем месте. Сейчас вы уже читаете ИТ-блог, а значит продуктивно проводите время.

Делитесь эмоциями в комментариях: какие эмоции вы испытывали при поиске работы. И не забывайте, что вы потрясающие!

👉 @seniorFront

Как ошибка ChatGPT стоила нам $10 000

В этой статье рассказывается про то, как код, написанный при помощи ChatGPT привёл к багу, который не могли исправить неделю

Произошло следующее: в рамках миграции бэкенда мы переносили модели баз данных с Prisma/Typescript на Python/SQLAlchemy. Это был очень монотонный процесс. Мы обнаружили, что ChatGPT превосходно справляется с этой трансляцией, поэтому использовали его на протяжении почти всей миграции. Мы копипастили генерируемый им код, видели, что всё работает хорошо, пробовали в продакшене, видели, что он тоже работает, а затем продолжали процесс.

👉 @seniorFront

Cuboid Warptunnel Audio Visualizer

Создано и анимировано на canvas и чистом JS.

👉 @seniorFront

Text Hover Animation Effects

В этом видео создается CSS анимация при наведении на текст. Каждая буква - это отдельный span элемент. В JS задается разная задержка запуска CSS transition для каждой буквы.

👉 @seniorFront

Без внятного ТЗ...

👉 @seniorFront