Найти в Дзене
Основы JavaScript: Изучаем элементы DOM! (Часть 2)
От автора: в этой статье мы узнаем все о том, как обходить элементы DOM в JavaScript, а также вносить в них изменения. Мы продолжаем тему, начатую в статье Изучаем DOM! (Часть 1). Итак, начнем! Обход DOM Когда мы проходим DOM, мы по сути перемещаемся по нему. Мы работаем с родительскими дочерними и одноуровневыми свойствами, чтобы применить JavaScript к элементам DOM. Мы будем использовать новый пример, который приведен ниже: <!DOCTYPE html> <html> <head> <title>Traversing the DOM</title> </head> <body> ...
132 читали · 6 лет назад
Create React App — способ сделать приложение раздутым
От автора: когда Create React App впервые был запущен в июле 2016 года, для новичков он считался лучшим способом начать работу с React. В те дни новичкам предлагалось создать приложение React с Webpack с нуля или загружать один из множества шаблонов. Появление Create React App стало глотком свежего воздуха. Годы спустя мы застопорились в прогрессе, так как мы стремимся делать вещи проще и проще в использовании. Наше бесконечное желание оптимизировать и добавлять функции сделало Create React App неудобным в использовании и пугающим для большинства новичков (и некоторых опытных пользователей)...
6 лет назад
Junior full stack веб-разработчик: полный план развития
Кто же такой full stack веб-разработчик, и с чем его едят? Понятные ответы на непонятные вопросы, обязательные к прочтению. Маст хэв! Независимо от вашего пути и карьерных целей, есть некоторые вещи, которые должен знать каждый разработчик. Frontend Чем занимается Full stack веб-разработчик? Этим: Разберем подробнее каждое из направлений. HTML / CSS Ожидается, что младший full stack веб-разработчик будет хорошо ориентироваться в таких темах: После того, как у вас появятся базовые знания, рассмотрите более продвинутые вещи: Фреймворки Следующий этап – знакомство с CSS-фреймворками...
1323 читали · 6 лет назад
Мастер JavaScript: что там с this?
От автора: печально известное ключевое слово this — одна из вещей в JavaScript, которые, кажется, смущает разработчиков больше всего. Часто this кажется непредсказуемым и нелогичным, и, безусловно, не действует как в большинстве других языков программирования. Если вы когда-либо ломали голову из-за this JavaScript, вы определенно не одиноки. const thisGuard = { firstName: 'Barnie', rank: 'this-guard', identify() { console.log(`Hi, I'm ${this.firstName}, and I'm a ${this.rank}`); }, }; // Что будет выведено через 1 секунду? setTimeout(thisGuard...
6 лет назад
Как у вас обстоят дела с figure в HTML 5?
От автора: элементы figcaption и figure в HTML 5 предназначены для создания значимой структуры разметки, что обеспечивает описательную метку для части контента, которая имеет отношение к текущему документу, но не жизненно важна для его понимания. Чтобы получить более конкретную информацию, давайте рассмотрим эти элементы отдельно. Элемент figure Часто рассматриваемый как элемент для изображений или диаграмм, figure может содержать любой контент (фрагменты кода, цитаты, аудио, видео и т. д.), который выделяется в основном содержимом документа, но не является критически необходимой информацией...
100 читали · 6 лет назад
Серверный или клиентский рендеринг на вебе: что лучше использовать у себя в проекте и почему
Разработчикам часто приходится принимать решения, которые повлияют на всю архитектуру приложения. Веб-разработчикам важно выбрать правильное место для реализации логики и рендеринга приложения. Это может быть непросто, так как сайт можно создать разными путями. При выборе подхода для рендеринга нужно понимать разницу между возможными вариантами, чтобы не прогадать с производительностью. Сегодня мы разберёмся, в чём заключается эта разница. Терминология Отображение: Производительность: Серверный рендеринг При серверном рендеринге в ответ на запрос на сервере генерируется весь HTML страницы...
256 читали · 6 лет назад
Манипуляции с DOM на чистом JavaScript
Как правило, когда нужно выполнить какие-либо действия с DOM, разработчики используют jQuery. Однако практически любую манипуляцию с DOM можно сделать и на чистом JavaScript с помощью его DOM API. Рассмотрим этот API более подробно: В конце вы напишете свою простенькую DOM-библиотеку, которую можно будет использовать в любом проекте.Шпаргалка по современному JavaScripttproger.ru DOM-запросы В материале представлены лишь основы JavaScript DOM API. Все подробности и детали доступны на Mozilla Developer Network...
6 лет назад
CSS-in-JS и статический рендеринг
От автора: CSS-in-JS может предоставить огромные преимущества для удобства обслуживания. Но для больших статически визуализируемых веб-сайтов использование простого CSS все еще имеет смысл. Все больше и больше разработчиков переходят на CSS-in-JS, включая такие громкие имена, как Microsoft, Atlassian и … конкурс песни Евровидение! И хотя я не всегда был большим поклонником CSS-in-JS, даже я признаю его преимущества: Это позволяет вам легко обмениваться переменными между JavaScript и CSS (просто не забывайте разделять их)...
6 лет назад
CSS Hyphenation — перенос слов в 2019 году
От автора: недавно я работал над веб-сайтом, который использовал большие заголовки (имеется в виду размер шрифта), а также был доступен на немецком языке. Это означает, что часто на нем встречались довольно длинные слова, и они часто не помещались в контейнер. Если ничего не делать, это «сломало бы» макет, так как появилась бы горизонтальная полоса прокрутки. Итак, я перечитал статью, которую написал почти четыре года назад о работе с длинными словами и реализовал окончательное решение. Казалось, что это все еще отлично работает, но с этим подходом были некоторые проблемы...
117 читали · 6 лет назад
CSS-градиент
CSS-градиент представляет собой переходы от одного цвета к другому. Градиенты создаются с помощью функций linear-gradient() и radial-gradient(). Градиентный фон можно устанавливать в свойствах background, background-image, border-image и list-style-image. Как сделать градиент в CSS Поддержка браузерами IE: 10.0 Firefox: 16, 3.6 -moz- Chrome: 26.0, 10.0 -webkit- Safari: 6.1, 5.1 -webkit- Opera: 12.1, 11.1 -o- iOS Safari: 7.1 Opera Mini: — Android Browser: 4.4, 4.1 -webkit- Chrome for Android: 44 1...
440 читали · 6 лет назад
Что нового планируется в JavaScript на 2019 год
От автора: в течение последних нескольких лет JavaScript постоянно развивался благодаря новым функциям. Если вам интересно узнать, что ждет нас в следующей версии JavaScript 2019, этот пост для вас! Прежде чем начать разговор о последних функциях, важно понять, как новые идеи становятся частью языка JavaScript. Процесс введения новых функций языка JavaScript Если коротко, спецификация языка, которая управляет JavaScript, называется ECMAScript. Группа Ecma International, которая рассматривает и принимает изменения в спецификации языка — Технический комитет 39 или TC39...
6 лет назад