Frontend + Web-программирование

С этим тегом используют

IT Программирование Javascript IT юмор Веб-разработка Web Программист HTML Все

92 поста сначала свежее

Web.Study

2 года назад

Web-технологии

React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript⁠⁠

React — это библиотека JavaScript для создания пользовательского интерфейса.

Это официальное определение React. Но что если вы не знаете, что такое JavaScript? Что если вы не разработчик? Смогли бы вы тогда понять, что такое React?

Однозначно ДА. Именно поэтому я и написал эту статью на тему: Что такое React на самом деле? Что такое React.js (или ReactJS)? Для чего используется React? Почему React так популярен? Какие проблемы можно решить с его помощью?

Эта статья — введение в React для начинающих. И это первое, с чего стоит начать, прежде чем детально изучить React. Я объясню основные идеи React на пальцах (и с помощью картинок). Нет опыта работы с JavaScript? Не беда! Если у вас есть базовые знания HTML (например, HTML-тегов), эта статья должна вам понравиться.

Не нужно быть опытным разработчиком, чтобы понять суть React

Ниже я это вам докажу, но сначала краткое содержание поста:

1. Что такое DOM?

2. DOM API

3. Больше сложностей!

4. Основные идеи React

5. Компоненты

6. Декларативный интерфейс

7. Обновления реактивного DOM’а

8. Создаем свой первый React-компонент

9. Компоненты компонуемые

10. Компоненты можно использовать несколько раз

11. Компоненты независимы

12. Декларативное и императивное программирование

13. Заключение

Кстати, здесь мы рассказываем не только про React для новичков

Что такое DOM?

React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript Программирование, IT, Javascript, Web-программирование, Frontend, Веб-разработка, React, Pikaweb, Длиннопост

Когда вы вводите адрес вашего любимого сайта в строку браузера, ваш компьютер устанавливает связь с другим компьютером где-то очень далеко. Его еще называют «сервер». Как правило, ваш компьютер запрашивает какую-то информацию, а сервер отвечает:

Ваш компьютер: Эй, что там такого классного в этом рандомном сайте learnreact.design?
Сервер: Подожди немного, мне надо кое-что проверить. Пип. Пип.

В ответе сервера вы в основном увидите три составляющие: HTML, CSS и JavaScript.

HTML перечисляет содержимое страницы и описывает её структуру. Сколько заголовков и абзацев? Какие изображения должен увидеть пользователь? Содержится ли эта кнопка и это текстовое поле в одном блоке?

Используя эту информацию, браузер создает то, что называется… DOM!

Так, стоп, DOM это… дерево? Да, это дерево! Как ни странно, многое в компьютере выглядит, как дерево. Давайте, как-то назовем нашего древесного друга… хм, как насчет Domo?

Домо — это, как натурщица в престижной художественной студии «Браузер». Его работа — позировать перед художником, который пишет портрет (или, возможно, миллионы портретов).

В реальной жизни DOM означает Document Object Model (Объектная модель документа). Это действительно модель — модель документа (также известная как страница). Она принимает позу. Браузер рисует портрет. Портреты — это то, что мы видим на странице: текстовые поля, абзацы, изображения и так далее. Работа разработчика похожа на работу режиссера, который говорит Domo, что надеть и какую позу принять. Все это определит, как в итоге будут выглядеть портреты.

Если вы используете браузер с компьютера, чтобы проверить, как выглядит DOM, щелкните правой кнопкой мыши на этой самой странице и выберите «Посмотреть код». Можете ли вы разобраться в том, что находится во вкладке «Элементы»?

DOM API

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

Помните: Для того, чтобы изменить то, что находится на странице, надо обновить DOM. Художник не сможет рисовать новые портреты, пока Domo не изменит свою позу.

Как заставить Domo принять новую позу?

Просто с ним поговорить. Он послушает. Интересно, что у ушей Domo есть название — DOM API.

Чтобы управлять DOM, разработчик пишет код на JavaScript, который взаимодействует с API DOM, и, в свою очередь, обновляет содержание страницы.

Больше сложностей!

Прямое общение с Domo было стандартным подходом к веб-разработке в течение многих лет, особенно когда контент был в основном статичным. Разработчик мог добавить интерактивность к статическим страницам, немного написав на JavaScript.

Но с появлением SPA (Single Page Application), таких как Gmail и Google Maps, пользователи стали ожидать гораздо большего. Вместо статических страниц им уже нужны интерактивные, быстрые и адаптивные приложения.

Код, необходимый для создания приложений, становится всё больше и сложнее. Часто это требует взаимодействия многих членов команды.

Традиционный подход перестал работать: слишком сумбурно и неэффективно всегда напрямую общаться с Domo.

Основные идеи React

Позвольте представить вам супергероя, React:

С React разработчикам больше не нужно разговаривать напрямую с Domo. React действует как посредник между разработчиком и Domo. Он сглаживает углы при общении и ускоряет процесс создания портретов.

React также называют «ReactJS» или «React.js», но «React» — это официальное название.

React состоит из кода JavaScript. Он построен таким образом, что в большинстве случаев нет необходимости непосредственно работать с DOM API. Вместо этого мы пишем более простой код, в то время как React обрабатывает разговор с DOM за кадром.

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

• Компоненты

• Декларативный интерфейс

• Обновления реактивного DOM’а

Если эти термины звучат пугающе, без паники! Как и обещал, я буду использовать простой язык и картинки, чтобы помочь вам разобраться. Поверье, это не так сложно!

Просто читайте дальше!

Компоненты

Компоненты — это главная особенность React. Основная идея состоит в следующем: разделяй и властвуй. Если задачу целиком трудно понять, мы разбиваем её на более мелкие задачи, решаем их по одной, а затем объединяем результаты.

Построение приложения на React почти всё построено на работе с компонентами: мы разбиваем приложение на компоненты, находим лучшие компоненты для работы, подгоняем их друг под друга, создаем новые компоненты из уже существующих и т.д.

Сегодня такие инструменты для веб-дизайна, как Framer и Figma (и символы в Sketch), также основаны на компонентах. Они очень похожи на React-компоненты, но последние более гибкие и мощные. Фактически, создатели инструментов дизайна вдохновлялись компонентами из разработки ПО. Как только компонент создан, мы можем создать несколько его копий. Мы можем использовать его для создания других компонентов. Если мы изменяем компонент, всё, что включает в себя этот компонент, будет обновляться автоматически.

У компонентов в React есть два важных свойства:

Компоненты компонуемые. Они предназначены для повторного использования. Мы можем сделать новый компонент с помощью других компонентов.

Компоненты независимы друг от друга. Если мы изменим код в одном месте, то другие компоненты не сломаются.

Если вам это кажется абстрактным, не волнуйтесь! Скоро я покажу вам несколько примеров и подробно объясню эти свойства.

Декларативный интерфейс

Декларативное vs. императивное программирование

Работая напрямую с DOM API, нам пришлось бы указывать, какой элемент изменять в нужное время, в нужном порядке. То есть пришлось бы подробно объяснять Domo, как расположить голову, руки и ноги для каждого портрета.

Звучит утомительно и чревато ошибками! Так почему бы просто не сказать Domo, что мы хотим, вместо того, чтобы объяснять, как позировать? На самом деле, именно так строится пользовательский интерфейс на React. Разработчик делает эскиз того, что он хочет, а React объясняет Domo, как позировать.

Поскольку создаваемые нами приложения динамичны, нам часто хочется, чтобы Domo довольно быстро менял позы. Мы рисуем много эскизов и передаем всю эту стопку React. React складывает эти эскизы вместе и получается флипбук — небольшая книжка с картинками, при перелистывании которых создается иллюзия движения. Динамический пользовательский интерфейс выходит в свет!

Говоря техническим языком, если код определяет, как мы хотим, чтобы это было сделано, это императивное программирование; если он определяет, что мы хотим, это декларативное программирование. При прямой работе с DOM API применяется императивное программирование, при работе с React — декларативное.

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

Виртуальный DOM

Декларативное программирование на React не только облегчило жизнь разработчика, но и предложило возможности для оптимизации производительности.

Когда у React есть все эскизы заранее, он может их отсортировать, удалить любую копию и убедиться, что Domo и художник делают как можно меньше работы.

Эти эскизы называются виртуальный DOM. Виртуальным DOM’ом управлять гораздо быстрее, чем DOM’ом. Большую часть времени разработчики работают с виртуальным DOM’ом вместо того, чтобы напрямую работать с DOM’ом. React делает всю грязную работу по управлению таким медленным DOM’ом.

Обновления реактивного DOM’а

Что может быть круче? Представьте себе, что вы можете оставить плейсхолдер в эскизах, чтобы они представляли различные вариации одной и той же позы. Таким образом, если кто-то попросит портреты Domo в другой шапке, нам не нужно будет снова общаться с React. Мы можем просто сесть и позволить React изменить портрет за нас.

Шапка — это данные, определяющие динамическое содержимое пользовательского интерфейса. Нам просто нужно связать элементы интерфейса с их соответствующими данными. Когда данные меняются, React автоматически обновляет соответствующие элементы DOM для нас, то есть DOM «реагирует» на любые изменения соответствующих данных. Не нужно больше отслеживать данные. Не нужно беспокоиться о том, когда обновлять DOM. Он просто обновляется автоматически (с помощью React).

Именно так React и получил свое название. Интерфейс, построенный с помощью React, реагирует. Идея такого интерфейса значительно упрощает разработку интерфейса.

Создаем свой первый React-компонент

Теперь давайте рассмотрим на практике то, что мы теперь знаем, и создадим несколько реальных React-компонентов. Чтобы вам было легче понять, я опустил некоторые детали в коде (в частности, JavaScript). Цель состоит в том, чтобы вы поняли суть React, не погрязнув в синтаксисе JS. Если вам удобно читать код на JavaScript, можете проверить реальные исходные тексты.

Итак. Допустим, мы хотим помочь Domo создать онлайн-магазин шапок.

Компоненты компонуемые

Мы можем разделить интерфейс на несколько частей:

• Заголовок: заголовок сверху

• Главная: основная область контента

• Футер: футер в конце страницы

Эта декомпозиция в коде может выглядеть так:

Похоже на HTML, правда? Кроме тегов, которые начинаются с заглавной буквы: <Header>, <Content> и <Footer>. Это не стандартные теги HTML. Они кастомные.

Что это за кастомные теги? Как мы сообщим React, что заголовок состоит из тега заголовка, большого количества элементов списка и поисковой строки?

Давайте создадим компонент Header!

Теперь компонент Header содержит два кастомных тега: <SearchBar> и <ShoppingCart>. Что внутри?

Помните первое важное свойство React-компонентов? Они компонуемые. Это означает, что мы можем использовать компоненты для создания других компонентов — именно это мы только что и сделали.

Теперь задание для вас:

Допустим, мы также хотим добавить SearchBar в футер. Что бы вы сделали? Отредактируйте код ниже:

Примечание:

• Убедитесь, что теги находятся внутри <footer>

• Прокрутите вверх, чтобы проверить код Header

• Попробуйте добавить другие теги

У вас получились две строки поиска? Значит вы поняли суть!

Компоненты можно использовать несколько раз

«Составной» означает способность создавать компонент, используя другие компоненты в качестве его составных частей. Это очень похоже на то, как всё происходит в природе, за исключением одного важного момента: когда мы используем компонент в другом компоненте в React, он все равно «прикрепляется» к оригинальному компоненту. Когда исходный компонент изменяется, все его производные меняются вместе с ним.

Измените ниже текст на кнопке в коде SearchBar:

Что-нибудь заметили? Панель SearchBar на обновленных Header и Footer. Так? Это очень похоже на то, как работают компоненты в таких программах дизайна, как Framer и Figma.

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

Компоненты независимы

Помните? React-компоненты независимы. Это значит, что если мы изменим один компонент, то другие компоненты (которые его не включают) всё равно будут вести себя так же, как и раньше.

При изменении компонента SearchBar меняются только заголовок и футер. Кажется, что это просто (и, возможно, даже очевидно). Но это фундаментальная идея в программной инженерии, и она прошла долгий путь, чтобы сделать разработку ПО управляемой.

Декларативное и императивное программирование

Теперь давайте перейдем к двум другим суперсилам React: декларативному интерфейсу и обновления реактивного DOM’а.

Уже выбрали шапку для Domo? Если нет, просто кликните по одной из шапок на рабочем столе. Шапка на голове Domo меняется, так?

В этом интерфейсе клик по элементу в таблице обновит данные «выбранной шапки». Так как мы связали DomoWithHat с «выбранной шапкой», шапка на Domo автоматически изменится. Помните? Обновления реактивного DOM’а.

Здесь вы видите код для компонента DomoWithHat.

В коде выше нам просто нужно определить, что мы хотим (Domo и шапка в div), и «подключить» данные («type = {hat}»). Когда данные элемента hat меняются (пользователь выбирает шапку), интерфейс обновляется автоматически. Нам не нужно беспокоиться о том, когда и как обновить DOM. Нам даже не нужно следить за данными. Нам нужно только набросать эскиз, т.е. код, приведенный выше. Вот они, две другие суперсилы React: декларативный пользовательский интерфейс и обновления реактивного DOM’а.

Заключение

Поздравляю! Вы закончили урок по React. Он был о том, зачем нам вообще нужен React. Вот три основных плюса, которые делают React таким мощным: компоненты, декларативный интерфейс и обновления реактивного DOM’а.

На самом деле, готов поспорить, что даже некоторые опытные разработчики React (например, я!) не очень хорошо понимают эти понятия.

А вы?

Показать полностью 20

[моё] Программирование IT Javascript Web-программирование Frontend Веб-разработка React Pikaweb Длиннопост

Web.Study

2 года назад

Web-технологии

28 однострочных решений в Javascript, которые помогут тебе не ломать голову⁠⁠

Дорогу осилит идущий, а код напишет пишущий

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

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

В этом посте мы собрали для вас (а по большей части для начинающих) 28 однострочных решений самых разных задачек, которые помогут вам не ломать голову.

А еще мы обитаем в телеграме

1. Получите случайное логическое значение

Эта функция вернет логическое значение (true или false), используя метод Math.random(). Вероятность того, что это правда или ложь, составляет 50/50.

28 однострочных решений в Javascript, которые помогут тебе не ломать голову Программирование, IT, Javascript, Web-программирование, Frontend, Веб-разработка, Длиннопост

2. Проверьте, является ли указанная дата рабочим или выходным днем.

3. Проверьте, является ли число четным или нечетным

4. Удалите все повторяющиеся значения в массиве

5. Проверьте, является ли переменная массивом

Чистый и простой способ проверить, является ли переменная массивом.

6. Генерация случайного числа между двумя числами

Это примет два числа в качестве параметров и сгенерирует случайное число между этими двумя числами!

7.Генерировать случайную строку (уникальный идентификатор)

8. Замена двух переменных местами ||

Деструктурирующее присваивание, которое меняет местами значения переменных

9. Рассчитать количество дней между двумя датами

Чтобы рассчитать количество дней между двумя датами, мы сначала находим абсолютную величину между двумя датами, а затем делим ее на 24 * 60 * 60 * 1000 = 86400000, что равно миллисекундам за один день, и в конце округляем результат и верни это.

🔥 Вы можете использовать Math.round или Math.floor вместо Math.ceil.

10. Различные способы объединения нескольких массивов

13. Использование заглавной буквы в строке

14. Проверьте, находится ли текущая вкладка в поле зрения/в фокусе

Этот простой вспомогательный метод возвращает значение true или false в зависимости от того, находится ли вкладка в поле зрения или в фокусе.

16. Проверьте, находится ли элемент в данный момент в фокусе

Мы можем проверить, находится ли элемент в данный момент в фокусе, используя свойство document.activeElement.

17. Проверьте, поддерживает ли текущий пользователь сенсорные события.

18. Прокрутка вверх страницы

19. Получить параметры запроса из URL

Чтобы получить параметры запроса, мы должны сначала разделить URL на «?» а затем замените «=» на «:» и «&» на «,».

20. Получить значение куки-файла браузераПолучите значение файла cookie, обратившись к нему с помощью document.cookie

21. Очистить все файлы cookie

Вы можете легко очистить все файлы cookie, хранящиеся на веб-странице, открыв файл cookie с помощью document.cookie и очистив его.

22. Создать случайный шестнадцатеричный код

23. Получить минимальное и максимальное значение массива

24. Проверьте, состоит ли строка из повторяющейся последовательности символов.

25. Удалить ложные значения из массива

26. Разделите массив на основе условия

27. Объединить массивы

28. Поставить таймер

О привет, если ты дочитал, то ты зайка

Показать полностью 25

[моё] Программирование IT Javascript Web-программирование Frontend Веб-разработка Длиннопост

Web.Study

2 года назад

Web-технологии

5 фактов о this. Коротко⁠⁠

Фронты, повидавшие жизнь и не одно собеседование, знают что HR-ы любят заебывать кандидата вопросами по this. А те, кто только в начале своего джедайского пути, теперь знайте это.

Оставим тут шпаргалку для вас с основными тезисами. Пользуйтесь и капайте дальше.

👉 В глобальном контексте this ссылается на window

👉 При 'use strict' this в функции = undefined а без 'use strict' ссылается на window

👉 Если функция вызывается как метод объекта, то этот объект становится значением this

👉 Внутри setTimeout this ссылается на window

👉 В обработчиках событий this ссылается на элемент который вызвал событие

Наш телеграм с полезностями

[моё] Программирование IT Web-программирование Frontend Веб-разработка Текст Мат

Web.Study

2 года назад

Web-технологии

Перебираем классы в HTML-элементе. Объясняем как это делать⁠⁠

Так есть же функция toggle()?

Да, в самом Жабаскрипте есть такая функция, но она позволяет переключаться только между 1-2 классами.

А что делать, когда нужно переключаться между 3 и более классами? Давай разбираться

Наш красивый и полезный канал:3

Перебираем классы в HTML-элементе. Объясняем как это делать Программирование, IT, Javascript, HTML, Frontend, Web-программирование, Веб-разработка, Гифка, Длиннопост

Скажем, у вас есть три класса HTML, и элемент DOM должен иметь только один из них одновременно:

<div class="state-1"></div>
<div class="state-2"></div>
<div class="state-3"></div>

Теперь ваша задача — вращать их. То есть циклически перебирать классы HTML-элемента. Когда происходит какое-то событие, если на нем есть элемент state-1, удалите state-1и добавьте state-2. Если он есть state-2, удалите это и добавьте state-3. В последнем состоянии удалите его и вернитесь к state-1.

Примечательно, что здесь речь идет о классах 3+. В DOM есть .classList.toggle()функция, даже та, которая принимает условное выражение в качестве второго параметра, но она в первую очередь полезна в ситуации включения/выключения двух классов, а не циклического переключения между классами.

Почему? Есть ряд причин. Изменение имени класса дает вам много возможностей для изменения стиля элементов в DOM, а подобное управление состоянием является краеугольным камнем современной веб-разработки. Но если быть точным, в моем случае я хотел сделать анимацию FLIP , где я бы изменил макет и запускал анимацию движения между различными состояниями.

Будьте осторожны с существующими классами! Я видел некоторые идеи, которые перезаписывали .className, что недружественно по отношению к другим классам, которые могут быть в элементе DOM. Все это «безопасный» выбор для циклического прохождения классов таким образом.

Подробный оператор if/else для циклического перебора классов

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

if (el.classList.contains("state-1")) {
el.classList.remove("state-1");
el.classList.add("state-2");
} else if (el.classList.contains("state-2")) {
el.classList.remove("state-2");
el.classList.add("state-3");
} else {
el.classList.remove("state-3");
el.classList.add("state-1");
}

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

Мы могли бы использовать константы, по крайней мере:

const STATE_1 = "state-1";
const STATE_2 = "state-2";
const STATE_3 = "state-3";
if (el.classList.contains(STATE_1)) {
el.classList.remove(STATE_1);
el.classList.add(STATE_2);
} else if (el.classList.contains(STATE_2)) {
el.classList.remove(STATE_2);
el.classList.add(STATE_3);
} else {
el.classList.remove(STATE_3);
el.classList.add(STATE_1);
}

Но это не сильно отличается или лучше.

RegEx от старого класса, увеличение состояния, затем повторное добавление

Этот исходит от Таба Аткинса . Так как мы знаем формат класса, state-Nмы можем искать его, выдергивать число, использовать небольшую троицу для его увеличения (но не выше самого высокого состояния), а затем добавлять/удалять классы как способ циклического прохождения. их:

const oldN = +/\bstate-(\d+)\b/.exec(el.getAttribute('class'))[1];
const newN = oldN >= 3 ? 1 : oldN+1;
el.classList.remove(`state-${oldN}`);
el.classList.add(`state-${newN}`);

Найдите индекс класса, затем удалите/добавьте

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

const classes = ["state-1", "state-2", "state-3"];
const activeIndex = classes.findIndex((c) => el.classList.contains(c));
const nextIndex = (activeIndex + 1) % classes.length;
el.classList.remove(classes[activeIndex]);
el.classList.add(classes[nextIndex]);

У Кристофера была хорошая идея сделать технику добавления/удаления короче. Оказывается, это одно и то же…

el.classList.remove(classes[activeIndex]);
el.classList.add(classes[nextIndex]);

// Does the same thing.
el.classList.replace(classes[activeIndex], classes[nextIndex]);

У Mayank была похожая идея для циклического переключения классов путем поиска класса в массиве, только вместо использования classList.contains(), вы проверяете классы, находящиеся в настоящее время в элементе DOM, с тем, что находится в массиве.

const states = ["state-1", "state-2", "state-3"];
const current = [...el.classList].find(cls => states.includes(cls));
const next = states[(states.indexOf(current) + 1) % states.length];
el.classList.remove(current);
el.classList.add(next);

Варианты этого были наиболее распространенной идеей. Вот Jhey и вот Mike Wagz, которые настраивают функции для движения вперед и назад.

Каскадные операторы замены

Говоря об этом replaceAPI, у Криса Кало была умная идея , когда вы связываете их с orоператором и полагаетесь на тот факт, что он возвращает true/false, работает он или нет. Итак, вы делаете все три, и один из них будет работать!

el.classList.replace("state-1", "state-2") ||
el.classList.replace("state-2", "state-3") ||
el.classList.replace("state-3", "state-1");

Николо Рибаудо пришел к такому же выводу.

Просто пролистайте номера классов

Если вы предварительно настроили предварительную настройку 1, вы можете циклически переключаться между классами 1-3 и добавлять/удалять их на основе этого. Это от Тимоти Леверета , который перечисляет еще один подобный вариант в том же твите.

// Assumes a `let s = 1` upfront
el.classList.remove(`state-${s + 1}`);
s = (s + 1) % 3;
el.classList.add(`state-${s + 1}`);

Вместо этого используйте data-*атрибуты

Атрибуты данных имеют одинаковую силу специфичности, поэтому у меня нет проблем с этим. На самом деле они могут быть более понятными с точки зрения обработки состояния, но, что еще лучше, у них есть специальный API , которым приятно манипулировать. У Мунаввара Фироза была идея , которая сводится к одной строчке:

el.dataset.state = (+el.dataset.state % 3) + 1

Конечный автомат атрибутов данных

Вы можете рассчитывать на то, что Дэвид Хуршид подготовит конечный автомат:

const simpleMachine = {
"1": "2",
"2": "3",
"3": "1"
};
el.dataset.state = simpleMachine[el.dataset.state];

Вам почти наверняка понадобится функция

Дайте себе немного абстракции, не так ли? Многие идеи были написаны таким образом, но пока я переместил его, чтобы сосредоточиться на самой идее. Здесь я оставлю функцию. Это от Андреа Джаммарки , в котором уникальная функция для циклического переключения классов настраивается заранее, а затем вы вызываете ее по мере необходимости:

const rotator = (classes) => ({classList }) => {
const current = classes.findIndex((cls) => classList.contains(cls));
classList.remove(...classes);
classList.add(classes[(current + 1) % classes.length]);
};
const rotate = rotator(["state-1", "state-2", "state-3"]);
rotate(el);

Я слышал от Кайла Симпсона, у которого была такая же идея, почти персонаж за персонажем.

А вот демонстрационная ручка со всем кодом для каждого примера. Они пронумерованы, поэтому, чтобы проверить еще один, закомментируйте тот, который не закомментирован, и раскомментируйте другой пример:

https://codepen.io/chriscoyier/pen/xxXeXPN

Показать полностью

[моё] Программирование IT Javascript HTML Frontend Web-программирование Веб-разработка Гифка Длиннопост

Web.Study

2 года назад

Web-технологии

Использование CSS-селектора :has() на примерах⁠⁠

Как вы знаете в CSS существует псевдокласса :has(). С его помощью можно изменить родительский элемент, содержащий определённый дочерний элемент либо элемент, следующий за ним. Пока ничего непонятно, да? Давай посмотрим на практике

Из-за того, что на Пикабу нормально вставить код без потери отступов не получается, я залил эту статью в телегу. Поэтому, если вам нужно скопировать код, то перейдите к этому посту

Как использовать CSS-селектор :has()?

Рассмотрим следующий HTML-код с двумя родственными элементами с классом everybody. Как бы вы выбрали тот, у которого есть потомок с классом a-good-time?

Использование CSS-селектора :has() на примерах Программирование, IT, CSS, Frontend, Web-программирование, Веб-разработка, Гифка, Длиннопост

С CSS-селектором :has() это можно реализовать следующим образом:

Это выбирает первый экземпляр .everybody и применяет к нему animation. В этом примере целью является элемент с классом everybody. Условием является наличие потомка с классом a-good-time.

Но :has() гораздо больше возможностей. Вот некоторые из них.

Выбрать anchor, которые не имеют прямого потомка SVG:

Выбрать label, у которых есть родственный input:

Выбрать documentElement, в котором некое состояние присутствует в DOM:

И так далее.

Совместимость :has() с браузерами

Не стоит забывать и о совместимости. Поскольку данный псевдокласс является нововведением, его, к сожалению, поддерживают не все браузеры:

CSS-селектор :has() на практике

Это реализация без единой строчки на JavaScript. Для начала можете посмотреть и самостоятельно протестировать пример, который реализован в CodePen:

Теперь рассмотрим его подробнее. Итак, CSS-псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но при этом активировать его необязательно.

Красивая плавность в примере заключается в создании набора кастомных свойств на основе сглаживающей кривой (easing curve). В нашем случае это:

Затем, чтобы применить это, нам нужны правила, которые обновляют пользовательское свойство --lerp для :hover или :focus для каждого элемента или блока. Код ниже предназначен для выбора пяти блоков с комбинацией родственных комбинаторов (+) и :has().

Последнее, что нужно сделать, это применить всё к самим блокам. Поскольку блоки выложены с помощью flexbox, можно использовать значение --lerp, чтобы изменить flex каждого блока, и translation для каждого элемента:

А вот сами значения --lerp сгенерированы с помощью утилиты GSAP для распределения значений с помощью сглаживающей кривой.

Показать полностью 11

[моё] Программирование IT CSS Frontend Web-программирование Веб-разработка Гифка Длиннопост

Web.Study

2 года назад

Лига программистов

14 мастхэв плагинов в Visual Studio⁠⁠

В жизни я многое повидал и перепробовал с десяток плагинов для Visual Studio: и мастхэв, и безделушки, и кривые , и косые.

А ведь качественные плагины частенько приходят на помощь при работе с кодом (особенно новичку). Именно поэтому я делюсь с вами 14-ю полезными расширениями в VS.

Наш балдежный канал по front-end

14 мастхэв плагинов в Visual Studio Программирование, IT, Программист, CSS, Javascript, Веб-разработка, Веб-дизайн, Web-программирование, Frontend, Visual Studio, Длиннопост

JetBrains ReSharper

Непрерывно анализирует код, находит ошибки и проблемы в структуре кода. Что еще есть: безопасное изменение кодовой базы, мгновенный поиск и навигация по всему решению, соответствие стандартам оформления кода. MustHave-плагин для любого программиста.

Add New File

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

Side Scroller

Плагин добавляет горизонтальную прокрутку с помощью колесика мыши в редактор кода Visual Studio. Для этого зажмите клавишу Shift.

ZenCoding

Это аналог плагина EMMET, адаптированный под Visual Studio. Плагин позволяет быстро генерировать HTML-разметку, используя синтаксис CSS. Также в комплект входит генератор Lorem Ipsum, генератор Lorem Pixel, генератор PlaceHold.it.

Syntax Highlighting Pack

Плагин добавляет дополнительную подсветку синтаксиса и поддержку сниппетов для многих языков программирования, включая Clojure, Go, Jade, Lua, Swift, Ruby и прочие.

HTML Snippet Pack

Плагин позволяет более продуктивно работать с разметкой HTML (генерация, автозакрытие тегов). Отлично дополняет ранее объявленный ZenCoding.

Editor Enhancements

Плагин добавляет такую функциональность как HTML/URL encoding, трансформация и сортировка выделенного участка текста, хеширование по различным алгоритмам.

File Icons

Добавляет привлекательные иконки для различных типов файлов, которые не может распознать Visual Studio.

File Nesting

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

Image Optimizer

Плагин добавляет возможность оптимизации изображений прямо из Visual Studio. Оптимизировать можно JPEG (MozJPEG компрессия), PNG (Zopfli компрессия), обычные и анимированные GIF. Также можно сохранить изображение в виде строки base64 dataURI.

Open Command Line

Плагин добавляет поддержку консолей различных типов, включая cmd, PowerShell, Bash и другие.

Bundler and Minifier

Плагин позволяет реализовывать связывание и минификацию файлов JavaScript, CSS, HTML.

Web Compiler

Расширение позволяет компилировать файлы LESS, Sass Stylus, JSX, ES6 и CoffeeScript.

CSS Tools

Плагин добавляет улучшения для CSS-редактора в Visual Studio, такие как превью обозначенного шрифта или картинки, подсказки для цветов, Drag 'n drop некоторых элементов и другие.

Показать полностью 14

[моё] Программирование IT Программист CSS Javascript Веб-разработка Веб-дизайн Web-программирование Frontend Visual Studio Длиннопост

Web.Study

2 года назад

Web-технологии

Адаптивная вёрстка: что это, а главное зачем⁠⁠

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

Если вы забьете болт на адаптивность, то будьте готовы к тому, что ваш сайт будет открываться криво у какого-нибудь Антона из Пензы с телефоном 5-летней давности с не самым актуальным разрешением.

Сегодня уже редко когда необходимо реализовывать разную вёрстку под разные экраны, поэтому уметь правильно адаптировать одни и те же элементы архиважно. О том, как это делать и на что в первую очередь нужно обращать внимание мы рассказали в этом посте.

Наш уютный канал в телеграме

Адаптивная вёрстка: что это, а главное зачем Программирование, IT, CSS, Javascript, Web-программирование, Веб-дизайн, Frontend, Длиннопост

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

Частичное решение: делаем всё гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем с адаптивной вёрсткой.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:

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

- Hiding and Revealing Portions of Images;

- Creating Sliding Composite Images;

- Foreground Images That Scale With the Layout.

На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:

Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.

<h1 id="logo">
<a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/>
</a> </h1>

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

img {max-width: 100%;}

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100%.

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

Ещё один способ: отзывчивые изображения

Вы можете использовать Picturefill для того чтобы сделать изображения чувствительными к изменениям размера экрана.

Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:

<script src="picturefill.js"></script>

Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( "picture" ); перед первым тегом script.

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

<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">

Атрибут sizes используется для того, чтобы указать сколько места будет занимать изображение. Подробнее о значениях sizes и srcset здесь.

Для более явного контроля над изображениями существует элемент picture.

Интересная фича для iPhone

В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:

Для решения данной проблемы используется тег meta:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

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

Например, у вас есть главный файл со стилями, который задает #wrapper, #content, #sidebar, #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

style.css (основной):

/* Основные стили, которые будут унаследованы дочерней таблицей стилей */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Структурные элементы */
#wrapper{
width: 80%;
margin: 0 auto;
background: #fff;
padding: 20px;
}
#content{
width: 54%;
float: left;
margin-right: 3%;
}
#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}
#sidebar-right{
width: 20%;
float: left;
}

mobile.css (дочерний):

#wrapper{
width: 90%;
}

#content{
width: 100%;
}

#sidebar-left{
width: 100%;
clear: both;

/* Дополнительные стили для нового дизайна */
border-top: 1px solid #ccc;
margin-top: 20px;
}

#sidebar-right{
width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}

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

О других особенностях адаптивной верстки в CSS в статье о нетривиальных моментах разработки фронтэнда на CSS.

Адаптивная вёрстка с помощью медиазапросов CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width, то стили будут проигнорированы. max-width делает противоположное.

Пример:

@Media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

@Media screen and (max-width: 600px) {
.aClassforSmallScreens {
clear: both; font-size: 1.3em;
}
}

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width:

@Media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}

@Media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}

@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}

Также значения медиазапросов можно комбинировать:

@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
<link rel="stylesheet" media="print" href="print.css"/>

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();

// Если ширина меньше 600 px, используется таблица стилей для мобильного
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"});
} else if(newWindowWidth > 600){
// Если ширина больше 600 px, используется таблица стилей для десктопа
$("link[rel=stylesheet]").attr({href : "style.css"});
}
}
});
</script>

Низкий поклон всем тем, кто дочитал. Вы герои

Показать полностью 5

[моё] Программирование IT CSS Javascript Web-программирование Веб-дизайн Frontend Длиннопост

Web.Study

2 года назад

Лига программистов

Почему ваш веб-сайт должен весить меньше 14 КБ?⁠⁠

Оригинал https://endtimes.dev/why-your-website-should-be-under-14kb-i...

Чем меньше веб-сайт, тем быстрее он грузится, и это неудивительно.

Удивительно то, что страница на 14 КБ может грузиться гораздо быстрее, чем страница на 15 КБ, даже на 612 мс быстрее, хотя разница между страницами на 15 КБ и 16 КБ минимальна.

Так происходит из-за алгоритма медленного старта TCP.

Что такое TCP?

Transmission Control Protocol (TCP) — это способ использования Internet Protocol (IP) для надёжной передачи пакетов данных; иногда его также называют TCP/IP.

Когда браузер запрашивает ваш веб-сайт (или изображение, или таблицу стилей), он выполняет запрос при помощи HTTP.

HTTP построен поверх TCP, один HTTP-запрос обычно состоит из множества пакетов TCP.

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

Когда мы работаем с веб-сайтами, важно знать, прибыли ли все данные, в противном случае фрагменты веб-страницы будут потеряны. Существуют и другие способы применения веба, например, стриминг видео, но в данном случае это неважно.

TCP — это расширение IP, позволяющее браузеру и серверу веб-сайта сказать друг другу, какие пакеты успешно получены.

Сервер отправляет несколько пакетов, затем ожидает ответа от браузера, сообщающего, что он получил пакеты (это называется подтверждением приёма, acknowledgement, или ACK), затем отправляет ещё несколько пакетов, а если он не получил ACK, то может отправить пакеты повторно.

Что такое медленный старт TCP?

Медленный старт TCP (TCP slow start) — это алгоритм, используемый серверами для определения того, сколько пакетов можно отправить за раз.

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

Ширина канала (bandwidth) — это объём данных, который можно передать по сети за единицу времени. Обычно она измеряется в битах в секунду (бит/с). В качестве аналогии можно привести задачу про воду и трубы: ширина канала — это количество воды, которое может выливаться из трубы в секунду.

Ваш сервер не знает, с каким объёмом данных может справиться соединение, поэтому сначала он отправляет небольшое надёжное количество данных, обычно 10 пакетов TCP.

Если эти пакеты успешно добираются до посетителя сайта, то его компьютер передаёт подтверждение приёма (ACK), сообщающее об успешном получении пакетов.

Затем сервер отправляет новые данные, на этот раз удваивая количество пакетов.

Этот процесс повторяется до утери пакетов, когда сервер не получит ACK. (После этого сервер продолжает отправлять пакеты, но с меньшей частотой.)

Откуда же взялась величина 14 КБ?

Медленный старт TCP большинства веб-серверов начинает с отправки 10 пакетов TCP.

Максимальный размер пакета TCP составляет 1500 байтов.

Этот максимум определяется не спецификацией TCP, а стандартом Ethernet.

В каждом пакете TCP 40 байтов используются под заголовок — 16 байтов для IP и дополнительные 24 байта для TCP.

То есть на каждый пакет TCP остаётся 1460 байтов. 10 x 1460 = 14600 байтов, или приблизительно 14 КБ!

То есть если вы сможете уместить свой веб-сайт (или хотя бы его критически важные части) в 14 КБ, то сэкономите посетителям кучу времени, необходимого для передачи данных туда и обратно между ними и сервером веб-сайта.

А вы знали про правило 14 КБ?

Показать полностью 1

IT Программирование Электроника Http Web-программирование Frontend Длиннопост

Посты не найдены

1 2 3 4 5 6 7 8 9 10 11