Окей, некоторых людей да, но не ваш компьютер.

Мне часто приходится выступать в роли ментора: в офисе (для junior разработчиков) на курсах (для совсем начинающих) И в связи с этим приходится читать много javascript кода написанного неопытными разработчиками. Также, схожий код часто встречается у разработчиков с другим основным языком (не JavaScript). Я собрал подборку простых кусков кода, которые по моему мнению можно более красиво и понятно(не всегда) переписать. Это не значит, что код, в примерах ниже, плохой и так писать неверно. Я лишь предлагаю альтернативы.…

В этой статье мы рассмотрим  и атрибуты HTML, которые помогут ускорить двухфакторную аутентификацию пользователей. Обычная форма Когда вы реализуете двухфакторную аутентификацию для веб-приложения, возможно, вам потребуется форма для ввода пользователем однократного пароля, который вы собираетесь отправить. Примерно следующий HTML: <form action="/sessions/check-2fa" method="POST">  <label for="token">Please enter the code you were sent: <input type="text" name="token" id="token"…

#пост_знакомство ⠀ Всем привет👋 Меня зовут Погребняк Максим, я профессиональный js-разработчик и Front-end ментор. И сегодня я расскажу некоторые факты о себе: ⠀ - моя карьера разработчика началась с курсов по Front-end; ⠀ - имею степень магистра и мое высшее образование слабо связано с IT; ⠀ - успел поработать в разных компаниях: веб-студия, аутсорс, продукт и стартап; ⠀ - кроме JavaScript писал на PHP, Python и Golang; ⠀ - сейчас работаю в компании Sixt | 6Systems; ⠀ - более 4х лет работаю ментором на разных курсах по программированию в Киеве: savvy-it-school, prog.kiev.ua, Beetroot academy, webacademy; ⠀ - веду телеграмм канал по Front-end (ссылка в описании профиля); ⠀ - постоянно учусь и читаю профессиональную литературу; ⠀ - изучаю англиский по статьям, книгам и фильмам; ⠀ - просыпаюсь в 6-30 каждый день, и 4 дня в неделю начинаю утро с тренировки💪 ⠀ Теперь вы немного узнали обо мне🙂. Мне тоже интересно узнать что-то о вас. Напишите в комментариях о себе: откуда вы и ваш род деятельности, мне будет интересно…

З появою стандарту HTML5 ми почали більше дбати про доступність та семантику вебсторінок.  Більшість розробників надають перевагу тегам  і , та зовсім не використовють .   Чому так? Це одна з вічних таємніць веброзробки, як і «чому це white-space: nowrap, а не white-space: no-wrap» і «чому CSS "gray" темніший колір, ніж "darkgray"». Тег  — це не лише стаття в газеті чи допис в блозі. Це окрема сутність, яку можна повторно використовувати в іншому контексті. У спеціфикації щодо…

Перестановка двух переменных обычно требует временной переменной или алгоритма обмена XOR, как показано в примере № 2. Мы рассмотрим два типа условий и 5 типов методов замены двух переменных в JavaScript. Примеры #2 and #3 применимы, если переменная является типом number; Остальные методы работают со всеми типами, такими как: string, number, object, array и.т.д Давайте разберем 5 различных способов обмена двумя переменными в JavaScript. Вот первый. # 1 Использование временной переменной Вышеупомянутый метод…

В CSS существуют ключевые слова по умолчанию для различных значений. В этой статье я расскажу о трех из них: initial (начальном), inherit (наследуемом) и относительно новом, unset (неустановленном). Вы, вероятно, с ними сталкивались , но, понимаете ли разницу между этими значениями до конца? Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей и наследования в CSS. Какие именно различия между ними? Сегодня мы разберем эти три ключевых слова, чтобы раз и навсегда понять…

HTML-ссылки создаются с помощью элементов . Ссылки представляют собой связь между двумя ресурсами, одним из которых является текущий документ. По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега . Этот атрибут может принимать следующие значения: _blank — открывает ссылку в новой вкладке или окне. Это определяется локальными настройками пользователя, в большинстве браузеров это новая вкладка  _self —…

Спрашивая данный вопрос на собеседованиях, начинающие и даже некоторые опытные разработчики путают эти, казалось бы, базовые понятия. Scope – область видимости Область видимости определяет, есть ли у вас доступ к переменной. До введения let и const область видимости в JavaScript определялась функцией (у var функциональная область видимости). Переменные объявленные вне функции записывались в глобальную область видимости.

В верстке мы повсеместно используем CSS свойство margin для внешних отступов и горизонтального выравнивания. Вероятно вы встречали, или использовали и отрицательные margin.

Существует несколько способов скрыть элемент в CSS, но они отличаются тем, как они влияют на доступность, анимацию, производительность и обработку событий. Анимация Некоторые опции скрытия CSS – это все или ничего. Элемент либо полностью видим, либо полностью невидим, и между ними нет промежуточного состояния. Другие, такие как прозрачность, могут иметь диапазон значений, поэтому возможна интерполяция CSS-анимации. Доступность Каждый метод, описанный ниже, будет визуально скрывать элемент, но он может или не…

Эти функции в CSS позволяют сравнивать значения выражений и представлять одно из них. Они расширяют наши возможности по созданию динамических макетов и созданию более гибких компонентов. min() Позволяет установить наименьшее значение из списка выражений, разделенных запятыми, в качестве значения свойства CSS. Например следующий код:

При верстке веб-страниц често приходится решать следующую задачу:

Современная спецификация JavaScript, поддерживает синтаксис стрелочных функций, операторы spread и rest, модули и классы. Эти и другие инструменты делают JavaScript гибким и выразительным языком программирования. Развитие языка не стоит на месте и разработчики постоянно вносят новые предложения. В этой статье мы рассмотрим 3 новых оператора: ?., ?? и |>. Некоторые из них уже пришли в язык, и поддерживаются браузерами, а некоторые доступны только с использованием Babel и TypeScript. Оператор опциональной по…

Традиционно, если вы хотите создать ссылку на часть страницы, вы должны указать свой URL, затем хеш (#) и затем идентификатор (якорь) этой конкретной части. Но это не всегда возможно, особенно если вы ссылаетесь на веб-сайт, к исходному коду которого вы не имеете доступа. Сегодня мы поговорим о возможности создать функционал якоря, не имея его на самом деле на веб странице. Функция прокрутки до фрагмента добавляет поддержку для указания фрагмента текста в фрагменте URL. При переходе по URL-адресу с таким фрагментом…

В этом видео я рассказываю о 6 методах извлечения данных из HTML формы с помощью JavaScript. ⏱ Таймкоды:

01:21 Метод #1: Найти каждое поле через селектор
05:19 Метод #2: Найти все поля одним селектором
09:07 Метод #3: Получить из HTML элемента формы по ключам name
12:33 Метод #4: Получить из свойства elements формы
15:08 Метод #5: Через конструктор FormData
16:50 Метод #6: Через цикл for...of

Телеграмм канал WiseJS: https://t.me/frontend_tips

💻  Код с примеров:

Метод #1 – https://jsfiddle.net/mz8tsxrj/1/
Метод #2 – https://jsfiddle.net/mz8tsxrj/2/
Метод #3 – https://jsfiddle.net/mz8tsxrj/3/
Метод #4 – https://jsfiddle.net/mz8tsxrj/4/
Метод #5 – https://jsfiddle.net/mz8tsxrj/5/
Метод #6 – https://jsfiddle.net/mz8tsxrj/6/

Элемент script позволяет включать в свои документы скрипты выполняемые на стороне пользователя. Так же, данный тег, используют для включения блоков данных. Блоки данных могут выглядеть следующим образом: