WEB-dev | Веб-разработка


Гео и язык канала: Россия, Русский
Категория: Технологии


Канал для веб-разработчиков.
Здесь тебя ждут интересные ссылки и статьи.
Хочешь прокачаться как FrontEnd-разработчик? Заходи, мы только тебя и ждали
Реклама - @ReginaGolik

Связанные каналы

Гео и язык канала
Россия, Русский
Категория
Технологии
Статистика
Фильтр публикаций


Хочешь узнать о мире фронтенда изнутри? Интересно почитать о поиске первой работы в IT? Хочешь перебороть синдром самозванца или перестать выгорать?

Об этом и не только на канале Как приручить фронтенд. Переходи по ссылке и подписывайся, чтобы ничего не пропустить 😉


Burger Button - еще один вариант анимации для кнопки открытия меню. Выполнено на jQuery и SCSS.


Что такое DOM? Как добавить новый элемент в документ. Часть 5.

Давайте взглянем на этот пример:

Причины, по которым я люблю WEB-dev:

Сейчас у меня есть тег . Но я хочу добавить список причин под этим тегом с использованием JavaScript. Создадим элемент с помощью document.createElement():

let unorderedList = document.createElement("ul");

Добавим этот элемент в документ, используя метод appendChild()

document.body.appendChild(unorderedList);

Добавим элементы внутри элемента с помощью createElement(). Также применим textConten:

let listItem1 = document.createElement("li");
listItem1.textContent = "Это интересно";
let listItem2 = document.createElement("li");
listItem2.textContent = "Это полезно";

Применим метод appendChild():

unorderedList.appendChild(listItem1);
unorderedList.appendChild(listItem2);

В следующей части мы рассмотрим, как менять CSS с помощью JS. Поставь “огонь”, чтобы она вышла быстрее.
Предыдущие части читай по тегу
 
#webdev_dom
#webdev_статьи


FAQ - аккордеон, реализованный на html + scss + js. Если не знаешь, как создать такой аккордеон - сохраняй себе и используй.

#webdev_полезное
#webdev_codepen


Что такое DOM? Значение объектной модели документа в JavaScript. Часть 4.

querySelectorAll()

Этот метод находит все элементы, соответствующие селектору CSS, и возвращает список всех этих узлов.

Вспомним пример из предыдущей части:

Города России

    Москва
    Казань
    Самара
    Омск


Если бы мы хотели найти все элементы в нашем примере, мы могли бы использовать имя тега, чтобы найти все дочерние элементы .

let items = document.querySelectorAll(“li”)

Если мы хотим вывести в консоль все элементы , мы можем использовать цикл forEach():

items .forEach((item) => {
    console.log(item);
})

 Этот код выведет нам такой список:

Москва
Казань
Самара
Омск

В следующей статье мы рассмотрим, как добавить новый элемент в html. Поставь “огонь”, чтобы она вышла быстрее.
Предыдущие части читай по тегу
 
#webdev_dom
#webdev_статьи


Vertical menu - вертикальное боковое меню с интересным эффектом при наведении. Реализовано на html + scss + js.

#webdev_полезное
#webdev_codepen


Что такое DOM? Значение объектной модели документа в JavaScript. Часть 3.

querySelector()

Вы можете использовать этот метод для поиска элементов с любым селектором CSS.

Давайте создадим такой пример DOM:

Города России

    Москва
    Казань
    Самара
    Омск


Если бы мы хотели получить элемент h1, мы могли бы использовать имя тега внутри querySelector():

document.querySelector(“h1”)

Если бы мы хотели получить класс “list”, мы бы использовали “.list” внутри querySelector():

document.querySelector(“.list”)

Точка перед “list” говорит компьютеру, что перед ним название класса. Если бы вы хотели получить элемент по его id, вы бы использовали # перед именем:

document.querySelector(“#cities”)

В следующей статье мы рассмотрим еще один метод. Поставь “огонь”, чтобы она вышла быстрее.

Предыдущие части читай по тегу
 
#webdev_dom
#webdev_статьи


Видео недоступно для предпросмотра
Смотреть в Telegram
Checkbox group - чекбоксы, стилизованные под плитку. Реализовано на html + scss, никакого js. Можете вставить свои картинки и кастомизировать под себя.

#webdev_полезное
#webdev_codepen


Slick slider - один из самых популярных слайдеров на jQuery. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффекты перехода и многое другое. Сохраняй ссылку и используй, когда захочешь установить слайдер на свой сайт.

#webdev_полезное
#webdev_библиотеки


Что такое DOM? Значение объектной модели документа в JavaScript. Часть 2.

Как выбрать элементы в документе

Существует несколько различных методов выбора элемента в HTML-документе.

В этой серии мы сосредоточимся на трех методах, первый из них getElementById()

В HTML id используются в качестве уникальных идентификаторов для элементов. Это означает, что у вас не может быть одного и того же id для двух разных элементов.

Это неверно:

Это первый элемент ‘p’
Это второй элемент ‘p’

Вы должны убедиться, что id уникальны:

Это первый элемент ‘p’
Это второй элемент ‘p’

В JS мы можем получить элемент, сославшись на его id.

document.getElementById("para1")

Этот код получает элемент с id “para1”.

В следующей статье мы поговорим о другом методе. Поставь “огонь”, чтобы она вышла быстрее.

Предыдущие части читай по тегу
 
#webdev_dom
#webdev_статьи


Simple CSS Waves - оживи свой сайт спокойными залипательными волнами. Реализовано без каких-либо библиотек. Несколько svg в твоем html коде и анимация на css. 

#webdev_примеры
#webdev_codepen


Что такое DOM? Значение объектной модели документа в JavaScript. Часть 1.

Если вы только начали изучать JS, возможно, вы слышали о DOM. Но что это такое на самом деле?

Что такое DOM?

DOM расшифровывается как Объектная модель документа. Звучит сложно, но на самом деле все гораздо проще. DOM рассматривает HTML-документ как дерево узлов. Каждый узел - это HTML-элемент.

Наш документ называется корневым узлом и содержит один дочерний узел -  элемент . Элемент содержит два дочерних элемента - и .

Как у , так и у есть собственные дочерние элементы. На картинке вы видите как раз такое дерево.

Мы можем получить доступ к этим элементам документа и внести в них изменения с помощью JS.

Про то, как работать с DOM с помощью JS читай в следующей части. Поставь “огонь”, чтобы она вышла быстрее.
 
#webdev_dom
#webdev_статьи


Видео недоступно для предпросмотра
Смотреть в Telegram
Переживаешь, что пользователь уйдет с сайта, не дождавшись полной загрузки? Посмотри на коллекцию прелоадеров Collection of CSS3 Animated Pre-loaders и установи один из них на свой сайт. Они такие залипательные, что пользователь и не подумает уйти со страницы. Все реализовано на html + css, jQuery на примере используется только для слайдера.

#webdev_примеры
#webdev_codepen


Почему стоит использовать SVG-картинки и как их анимировать. Часть 5.

Вот некоторые преимущества использования CSS-подхода к анимации SVG:

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

Но есть и недостатки CSS-анимации, например:

Вы не можете создавать сложные физические эффекты, которые сделали бы анимацию более реалистичной.
Если вы корректируете время, требуется много перерасчетов.
Графика CSS и SVG на мобильных устройствах иногда требует странных костылей.

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

Хотя обучение работе с масштабируемыми векторными графическими изображениями может занять у вас некоторое время, это инвестиции, которые окупятся с учетом всех преимуществ SVG.

Предыдущие части читайте по тегу
 
#webdev_svg
#webdev_статьи


Ты владеешь слепой печатью на английском? Если нет - обязательно перейди к Keyboard Hero и потренируйся. Яркий тренажер отучит тебя смотреть на клавиатуру во время печати. Ты можешь даже посмотреть, как это реализовано, если тебе станет интересно (а там ничего сложного, чистый js). 

#webdev_примеры
#webdev_codepen


Почему стоит использовать SVG-картинки и как их анимировать. Часть 4.
 
SVG может быть анимирован несколькими способами:
 
SMIL - спецификация анимаций SVG
​WebGL
CSS animation
 
Давайте рассмотрим последний вариант.
 
Анимация CSS используется для того, чтобы избежать перегрузки вашего сайта большими библиотеками для анимации иконок.
 
Чтобы увидеть пример CSS анимации, посмотрите на анимированную яичницу. Как вы можете видеть, здесь используется синтаксис ключевых кадров для анимации (keyframes). Это реализуется путем установки начальной позиции элемента (0%), средней (50%) и конечной позиции (100%). Для достижения плавной анимации начальные и конечные значения равны. 
 
 
В следующей части поговорим о достоинствах и недостатках CSS анимации.
Предыдущие части читайте по тегу
 
#webdev_svg
#webdev_статьи


CSS mouse-out transition effect - интересный hover-эффект. Используйте его для кнопки и пользователь обязательно обратит на нее внимание.

#webdev_codepen
#webdev_примеры


Почему стоит использовать SVG-картинки и как их анимировать. Часть 3.
 
В предыдущих частях ты узнал о преимуществах SVG, в этой части мы обещали рассказать о недостатках.
 
Не стоит использовать SVG, если тебе нужно изображение с высокой детализацией. Чем больше мелких деталей, тем больше начинает весить файл.
 
Например, есть две SVG-карты Америки. Вторая более подробная, чем первая. Более высокий уровень детализации стоил почти пятикратного увеличения размера файла – 33 КБ по сравнению со 147 КБ.
 
Если изображение линейное и содержит несколько цветов – SVG - лучшее решение. Однако, если детали важны и их много, PNG или JPEG могут оказаться более подходящими.
 
В следующей части расскажем о том, как анимировать SVG-картинки.
Предыдущие части читай по тегу
 
#webdev_svg
#webdev_статьи


CSS Hamburger - гамбургер меню на CSS. Добавьте эти несколько строк на свой сайт и получите красивый эффект для кнопки открытия меню.

#webdev_codepen
#webdev_примеры


Почему стоит использовать SVG-картинки и как их анимировать. Часть 2.

В предыдущей части мы начали обсуждать преимущества использования SVG-графики. Вот следующие:

2. Масштабируемость
Качество SVG-изображения не зависит от его размера. Ты можешь растянуть его на весь экран или сжать до размера маленькой иконки. В обоих случаях ты получишь картинку отличного качества.

3. Небольшой размер файла
Размер SVG определяется цветами, слоями и эффектами и не зависит от размера изображения. В отличие от растровых изображений (PNG, JPG)

4. Многочисленные возможности редактирования и анимации
В отличие от растровых изображений, векторные можно редактировать непосредственно в текстовом редакторе. Ты даже можешь редактировать цвета или размеры SVG напрямую в CSS. А значит, можешь и анимировать SVG. О том, как это сделать ты узнаешь в одной из следующих частей.

А в следующей части поговорим о недостатках SVG.
Если ждешь следующую часть, жми на “огонь”. Предыдущие части читай по тегу

#webdev_svg
#webdev_статьи

Показано 20 последних публикаций.

207

подписчиков
Статистика канала