Кладовка кода

Часто ли у вас возникало желание воспользоваться какой-нибудь возможностью CSS, позволяющей, без лишних усилий, создать элемент-контейнер, поддерживающий прокрутку? CSS, что очень хорошо, даёт нам такую возможность. Я, когда только начинал заниматься фронтенд-разработкой, пользовался для создания прокручиваемых элементов JavaScript-плагинами. Но иногда нужно что-то такое, что позволяет создавать подобные элементы просто и быстро, без привлечения JavaScript. Сделать это можно, воспользовавшись спецификацией CSS Scroll Snap.

Практика использования спецификации CSS Scroll Snap

Здесь я хочу раскрыть основы практического использования этой спецификации. Я сам только недавно разобрался с CSS Scroll Snap, поэтому рассказывать всё это буду, так сказать, «по горячим следам».

18.06.202018.06.2020

Полный сброс: использование начальных значений CSS

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

Дави на кнопку

Скажем, вы задали изображениям свойство float: left по умолчанию:

И потом вам нужно сбросить обтекание изображений с определенными условиями (изображения с классом .recall)… а вы не помните, стоит ли float: none или что-то еще.

15.06.202015.06.2020

Топ плагинов jQuery. Плагин jQuery Cookie

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с практически незаменимым плагином для большинства сайтов. Речь идет о плагине jQuery Cookie. Как вы уже догадались из названия, задача плагина — работа с куками.

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

19.02.202019.02.2020

4 Основные функции ES2015 для разработки Vue.js

От автора: ES2015 (ака ES6) — это текущая спецификация языка JavaScript. Если вы новичок в JavaScript или в последнее время не освежали свои знания в области JavaScript, сообщаем, что в ES2015 появился ряд новых функций, которые делают разработку намного лучше и приятнее.

Для разработки Vue js ES2015 дает много полезных функций, которые могут вам пригодиться. Можете начать с тех, которые относятся непосредственно к Vue.

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

16.01.202017.01.2020

Обещания (promise). Четыре функции, которые вам нужно знать

Обещания помогают сделать код чище, уменьшить количество зависимостей от внешних библиотек и подготовиться к async и await в ES7. Разработчики, которые ругают или не используют их, не знают, что они теряют.

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

15.01.202020.02.2020

Записка по JS, а именно ECMAScript 6.

1. Переменные let

if(true){
    var version1 = 'ES5';
}

if(true){
    let version2 = 'ES6';
}
console.log(version1); // ES5
console.log(version2); // Error

Пример с кнопками:

// Создадим 5 <button></button> в html
let buttons = document.querySelectorAll('button');
// При button.onclick всегда будет "5"
for(var i = 0; i < buttons.length; i++){
    var button = buttons[i];
    button.innerText = i;
    button.onclick = function (e) {
        console.log(i); 
    }
}
// При button.onclick будет 1,2,3,4,5
for(let i = 0; i < buttons.length; i++){
    var button = buttons[i];
    button.innerText = i;
    button.onclick = function (e) {
        console.log(i);
    }
}

01.11.201902.04.2020

Различные виды (сверху, снизу, слева, справа) подчеркивания ссылок на чистом CSS3

Все привет!

Как всегда начнем с html:

<div class="links">
  <h1>Подчеркивание ссылок</h1>
  <p class="left">
    Слева: 
    <a href="#">Вот так</a>, <a class="top" href="#">Можно даже сверху</a>
  </p>
  <p class="center">
    По центру: 
    <a href="#">Красота</a>
  </p>
  <p class="right">
    Справа: 
    <a href="#">Вот так</a>, <a href="#">Или вот так</a>
  </p>
</div>

23.10.201925.10.2019

Уникальные чекбокс-кнопки на CSS

HTML часть

<input type="checkbox" id="pizza" name="food">
<label for="pizza">Пицца</label>
<br>
<br>
<input type="checkbox" id="bread" name="food">
<label for="bread">Хлеб</label>
<br>
<br>
<input type="checkbox" id="pasta" name="food">
<label for="pasta">Паста</label>

17.10.201917.10.2019

Пробуем Ajax запрос в jQuery.

От автора:приветствую вас, друзья. В этой статье мы начнем работать с Ajax запросами в jQuery. Библиотека jQuery предлагает несколько методов для работы с асинхронными запросами, используя которые мы можем обмениваться информацией с сервером без перезагрузки страницы, т.е. асинхронно. Сегодня мы познакомимся с методом ajax в jQuery.

07.10.201908.10.2019

CSS — каскадные таблицы стилей.

В этом выпуске мы поговорим о CSS (каскадных таблицах стилей).

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

И так начнем!

С помощью таблиц стилей можно указать правило отображения тега HTML в браузере.

Таблица стилей — это фактически набор правил, которые применяются к HTML тегам. Каждое правило состоит из селектора и определения.

Селектор — это тэг HTML.

Рубрика: Кладовка кода

Практика использования спецификации CSS Scroll Snap

Полный сброс: использование начальных значений CSS

Дави на кнопку

Топ плагинов jQuery. Плагин jQuery Cookie

4 Основные функции ES2015 для разработки Vue.js

Обещания (promise). Четыре функции, которые вам нужно знать

Записка по JS, а именно ECMAScript 6.

1. Переменные let

Пример с кнопками:

Различные виды (сверху, снизу, слева, справа) подчеркивания ссылок на чистом CSS3

Как всегда начнем с html:

Уникальные чекбокс-кнопки на CSS

HTML часть

Пробуем Ajax запрос в jQuery.

CSS — каскадные таблицы стилей.

Статистика

Дави на кнопку

1. Переменные let

Пример с кнопками:

Как всегда начнем с html:

HTML часть

Статистика

Метки