NoJS — Делаем калькулятор на чистом HTML and CSS. Без Javascript!

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

Demo https://quarknerd.github.io/noJS/calc.html

Jest - фреймворк для тестирования в JavaScript

Фреймворк разработан для проверки правильности работы любого JavaScript кода.

Особенности:
👉 Не требует дополнительных настроек
👉 Тесты выполняются параллельно
👉 Простая установка
👉 Работает с проектами, использующими Babel, TypeScript, Node, React, Angular, Vue и т.д
👉 Удобный API

Сайт: https://jestjs.io/

The Impossible Lightbulb

Лампочка, которую невозможно включить: открывается дверь и злой мишка снова ее выключает. Анимация реализована с помощью GSAP.

https://codepen.io/jh3y/pen/dyXBKog

Свойство flex-direction

Свойство flex-direction указывает, как гибкие элементы размещаются в flex-контейнере – вертикально или горизонтально. Это свойство также определяет, будут ли эти гибкие элементы отображаться по порядку или в обратном порядке.

Подписывайтесь на канал 👉@coddy_academy

#css

Хотел что-то изменить в жизни? 
Задумался о новой работе или оплатил обучающие курсы? Обрадовался окончанию пандемии и открытию границ?

Не хочу тебя обнадеживать, лучше забудь обо всем.
Сам прошёл через несколько кризисов, но все они покажутся нам цветочками.
Но не переживай, у меня все ещё хуже.

Я владею стартапом по робототехнике, делаю мобильные игры и пытаюсь сохранить на плаву несколько школ программирования для детей.

Подписывайся на канал!
Пишу хронику выживания, ищу интересных людей и планирую выйти победителем к концу года.

GitHub Dark Mode Toggle

​Переключатель тёмной темы, реализованный на CSS и JS

https://codepen.io/chintuyadav/pen/yLaaVYa

#codepen #css #js

Почему я ненавижу турбо-страницы от Яндекса

Яндекс запустил свою версию "ускоренных страниц" под названием “Турбо” в далеком 2017 году. Это был эксперимент, но прошло уже 5 лет, и я вижу в этой технологии больше проблем, чем их решения.

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

JavaScript: инструменты сборки и автоматизации.

1. Grunt - инструмент для автоматизации повторяющихся и трудоёмких задач. Cуществует более 6000 плагинов.

2. Gulp - определяет задачи в JavaScript как функции, также GUl автоматизирует задачи, предлагая более 2700 плагинов, обеспечивает прозрачность и контроль над процессом.

3. Brunch.io - быстрый и простой, инструмент автоматически создаёт карту JS-файлов с CSS, что упрощает процесс отладки.

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

5. Browserify - позволяет разработчикам ПО использовать модули NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.

6. Yeoman - служит для разработки веб-приложений и позволяет создавать новые проекты, не забывая об обслуживании уже существующих. Существует более 6200 плагинов.

Не можете продлить нужный сервис, оплатить хостинг или получить деньги из-за рубежа?

Ребята из rk.finaxe.ru тоже столкнулись с данной проблемой и запустили сервис, в котором граждане РФ могут оформить онлайн карту Visa или Mastercard в банке Казахстана.

Для чего это нужно:
— Оплата любых зарубежных сервисов и покупок
— Получение денег из-за рубежа
— Использование в путешествиях

Весь процесс проходит онлайн, от вас потребуется только загранпаспорт, даже вставать с дивана не понадобится!

Оформить заявку и ознакомиться с FAQ можно в боте:
https://yangx.top/Robokazakh_bot

Как создать радиальный градиент в CSS?

Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

#css

Haiku Animator - инструмент для создания анимации.

Позволяет создавать высокоточные анимации на временной шкале для приложений и веб-сайтов.

Особенности:
👉 Временная шкала
👉 Открытый исходный код
👉 Работает со всеми основными браузерами и интегрируется с любым веб-кодом с поддержкой React, Vue и Angular.
👉 Анимация с помощью кода
👉 Кроссплатформенность
👉 Управление версиями

Оф.Сайт: https://www.haikuanimator.com/
Git: https://github.com/HaikuTeam/

Ответ на вчерашний вопрос.

Изменение прозрачности фонового изображения CSS

С CSS и CSS3 можно сделать много интересных вещей, но установка непрозрачного фона CSS не входит в их число. Однако существует очень много творческих подходов, которые могут помочь добиться эффекта изменения прозрачности фонового изображения CSS. Оба приведенных ниже метода имеют отличную поддержку браузеров вплоть до Internet Explorer 8.

Подробнее

Собеседование middle frontend разработчика

00:00-02:20 - Интро
02:20-4:17 - Что такое ивент луп
04:17-07:32 - Micro и macro tasks
07:32-12:39 - Очереди micro и macro тасок
12:39-19:00 - requestAnimationFrame
19:00-24:38 - Что такое TypeScript и зачем он нужен
24:38-34:30 - Типизируем функцию map
34:30-38:36- Оптимизация web страниц
38:36-44:05 - Async/defer
44:05-49:58 - React hooks плюсы и минусы
49:58-54:50 - Как нужно обновлять стейт в react
54:50-56:04- Как понимают изменение состояния mobx/vue
56:04-1:01:16 - Плюсы и минусы подхода mobx и redux
1:01:16-1:03:00- Как оптимизировать rerender’в в компонентах
1:03:00-1:05:57- useLayoutEffect vs useEffect
1:05:57- 1:16:21 - forceUpdate в функциональных компонентах и использование ref для сохранения референса на функцию
1:16:21-1:16:56 - ErrorBoundary
1:16:56-1:27:12 - map и filter через reduce
1:27:12-1:51:20 - Пишем функцию curry
1:51:20-1:54:19 - Финальный фидбэк и заключение