День и ночь

Смена дня и ночи, выполненная с помощью CSS и библиотеки jQuery. Смена дня и ночи происходит при клике на солнце/луну.

#css #js

Как сделать так, чтобы стандартные HTML элементы отображались одинаково во всех браузерах?

Некоторые элементы форм имеют уникальный внешний вид в каждой операционной системе. Например, выпадающий список в macOS внешне выглядит совсем не так, как такой же выпадающий список в Windows.

Свойство appearance позволяет задавать внешний вид одних элементов другим элементам. При этом браузер будет отрисовывать их с учётом текущей операционной системы пользователя и темы оформления.

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

#css

Часы

Все элементы анимированы при помощи CSS, без JS.

#css

.Net Knowledge Book

Автор: Patrick Desjardins
Год издания: 2017

#net #english

Morphing Ball

Анимированная сцена, выполненная с помощью SCSS и библиотеки Three.js.

#css #js

Basic Wind Strip

Анимация небольшой полосы ветра, реализованная с помощью JavaScript.

#js

Delightful React

Автор: Bhargav Ponnapalli
Год издания: 2019

#react #english

Full Moon in Paris

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

#css #js

Секундомер, реализованный с помощью Pug и Stylus, без использования JavaScript.

#css

Clean Code in JavaScript

Автор: James Padolsey
Год издания: 2020

#javascript #english

Star Wars Imperial Army's Product Slider

Адаптивный слайдер карточки продукта, реализованный с помощью Swiper.js.

#js

​Как использовать JavaScript для расстановки элементов на веб-странице

Разбираемся на примере, как упорядочить элементы на странице.

#javascript

Смартфон

Фоторелистичный смартфон, созданный на чистом CSS.

#css

Темы меню

Меню с возможностью смены темы, выполненное с помощью SCSS и JavaScript.

#css #js

Задача

Дана закодированная строка, необходимо вернуть декодированную строку.

Правило кодирования: k [закодированная_строка], где закодированная_строка в квадратных скобках повторяется ровно k раз. k - строго положительное число.

Входные данные: входная строка валидна (нет лишних пробелов, правильные квадратные скобки). Полностью раскодированная строка не содержит цифр.

Ответ

Direction aware hover effect

Эффект подчеркивания ссылок при наведении с учетом направления курсора.

#css #js

Calendar and Clock

Получение даты и времени реализовано на JS. Если зажать кнопку на календаре, то открываются часы.

#js

​Руководство по работе с формами и полями ввода в React

Лучший способ разобраться в любом фреймворкке - создать с его помощью CRUD-приложение. А любое такое приложение имеет форму с разными полями ввода. Работая с формами в React, вы столкнетесь с такими терминами, как "контролируемые и неконтролируемые компоненты". В этой статье автор разобрал суть этих терминов простым английским языком.

#javascript #react

CSS Loaders

Подборка загрузчиков на HTML и SCSS. Для удобства автор сделал увеличение лоадера при наведении.

#css #html