Направление текста в CSS

Благодаря свойству writing-mode в CSS есть возможность менять направление написания текста. Это свойство является универсальным и позволяет одновременно задавать значения свойств direction и block-progression.

Свойство writing-mode можно применить ко всем элементам, кроме групп строк таблицы, групп колонок таблицы, строк таблицы, колонок таблицы и контейнеров ruby base, ruby annotation.

Синтаксис

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

#css

Погода

Все анимации созданы c использованием библиотеки TweenMax. Логика переключения погоды реализована в JS.

#js #frontend

Map в JavaScript

Map — это тип коллекции, элементы которого имеют свой ключ. Она немного схожа с Object, однако в качестве ключа можно принять любой тип данных

Методы и свойства:
new Map() – создаёт коллекцию.
map.set(key, value) – записывает по ключу key значение value.
map.get(key) – возвращает значение по ключу или undefined, если ключ key отсутствует.
map.has(key) – возвращает true, если ключ key присутствует в коллекции, иначе false.
map.delete(key) – удаляет элемент по ключу key.
map.clear() – очищает коллекцию от всех элементов.
map.size – возвращает текущее количество элементов.

Отличия от обычного объекта Object:
- Что угодно может быть ключом, в том числе и объекты.
- Есть дополнительные методы, свойство size.

Пример использования:
let map = new Map();
map.set("1", "str1");
map.set(1, "num1");
alert(map.get(1)); // "num1"

#js

Переписываем Tailwind компоненты на ванильном CSS

Мало кто любит, когда их любимые CSS-фреймворки называют бесполезным мусором. Но статьи про то, как переписать компоненты этих фреймворков на чистом CSS, похоже, любят многие. В этой статье мы перепишем компоненты Tailwind.

Читать далее

#css #en

Лучшие стратегии разработки фронтенда в 2022 году

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

#frontend

Читать далее: https://habr.com/ru/company/ruvds/blog/582474/

CSS Border Animation

Светящиеся границы создаются при помощи псевдоэлементов, которые анимируются при помощи CSS.

#css #frontend

Друзья, у нас есть канал по поиску работы для FrontEnd специалистов.

Подключайтесь - https://t.me/rabotafrontend

Наш "ночной" чат по Javascripty: https://t.me/joinchat/a8aDKNJCcWExMmEy

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

#css

Друзья, наши знакомые тестировщики открыли новый канал с вакансиями: https://t.me/qajoboffer. Если кто-то задумывался над стартом в IT в QA - вам туда.

Hopdot Loader - прелоадер в виде перекатывающихся точек. Анимация реализована с помощью GSAP.

#css #js

Наш чат по Javascript: https://t.me/joinchat/a8aDKNJCcWExMmEy

Что будет выведено в консоль?

Credit Card Form - адаптивная форма для кредитной карты с функцией форматирования чисел, проверки и автоматического определения типа карты. Реализована с помощью VueJs.

#css #js

Sale label - 4 примера реализации движущейся этикетки для рекламы распродажи на чистом CSS.

#css

​Что за черт, JavaScript

JS - отличный язык. У него простой синтаксис, большая экосистема и, что гораздо важнее, огромное сообщество.

В то же время мы все знаем, что JavaScript довольно забавный язык, в котором есть хитрые вещи. Некоторые из них быстро превращают нашу повседневную работу в ад, а некоторые заставляют хохотать. Давайте рассмотрим некоторые из них.

#js

Galaxy

Вся сцена реализована на canvas. Частицы создаются и анимируются при помощи библиотеки THREE.js.

The React Workshop

Автор: Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot
Год издания: 2020

#react #english