This media is not supported in your browser
VIEW IN TELEGRAM
A moment of pure CSS
Создано без использования JS. Анимации реализованы при помощи CSS keyframes.
https://codepen.io/ivorjetski/pen/yLjeqgb
#css
@javascriptv
Создано без использования JS. Анимации реализованы при помощи CSS keyframes.
https://codepen.io/ivorjetski/pen/yLjeqgb
#css
@javascriptv
❤15👍7🔥3
Тренды UX/UI дизайна на 2024 год
Больше, чем детские ланч-боксы. Бенто-боксы.
Бенто-боксы — это суть упакованной еды в японской культуре. Они хорошо известны своей способностью хранить продукты в организованном виде и сохранять чистоту.
Мы никогда не узнаем, кто придумал это, однако бенто-боксы отлично выглядят как на экране, так и в сумке.
Bento UI — очередная дизайнерская тенденция, которая начала набирать популярность на таких платформах, как Dribbble и Behance, и была замечена миллионами дизайнеров. Однако концепция “модульного” дизайна началась с панелей управления для сайтов. Это включает в себя панели управления продажами и финансами, например PayPal, аналитику, наподобие Google Ads, и многое другое.
Помните Windows Phone и Lumia? В общем-то, интерфейс, который они использовали, был ранними версиями Bento UI. Позже Microsoft также внедрили эту концепцию в меню запуска Windows на рабочем столе в Windows 8.
В то время как Bento UI использовался по всей индустрии, он приобрел мгновенную популярность, когда Apple решили впервые использовать бенто-сетку. Изначально они использовали ее на страницах мобильных приложений для iPhone, но вскоре расширили применение для презентаций мероприятий Apple.
📌Подробнее
@javascriptv
Больше, чем детские ланч-боксы. Бенто-боксы.
Бенто-боксы — это суть упакованной еды в японской культуре. Они хорошо известны своей способностью хранить продукты в организованном виде и сохранять чистоту.
Мы никогда не узнаем, кто придумал это, однако бенто-боксы отлично выглядят как на экране, так и в сумке.
Bento UI — очередная дизайнерская тенденция, которая начала набирать популярность на таких платформах, как Dribbble и Behance, и была замечена миллионами дизайнеров. Однако концепция “модульного” дизайна началась с панелей управления для сайтов. Это включает в себя панели управления продажами и финансами, например PayPal, аналитику, наподобие Google Ads, и многое другое.
Помните Windows Phone и Lumia? В общем-то, интерфейс, который они использовали, был ранними версиями Bento UI. Позже Microsoft также внедрили эту концепцию в меню запуска Windows на рабочем столе в Windows 8.
В то время как Bento UI использовался по всей индустрии, он приобрел мгновенную популярность, когда Apple решили впервые использовать бенто-сетку. Изначально они использовали ее на страницах мобильных приложений для iPhone, но вскоре расширили применение для презентаций мероприятий Apple.
📌Подробнее
@javascriptv
👍10❤7🔥2🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
📚 Book reviews - Верстка реализована при помощи CSS Grid. Анимации созданы библиотекой gsap.
https://codepen.io/BlogFire/pen/RwMwjMP
@javascriptv
https://codepen.io/BlogFire/pen/RwMwjMP
@javascriptv
👍28🔥5❤3👎1😱1
This media is not supported in your browser
VIEW IN TELEGRAM
Удачно впишется в сайт с любым дизайном
@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Figtree", sans-serif;
}
body {
display: grid;
place-content: center;
min-height: 100vh;
background: #000;
}
.container {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 1em;
width: 800px;
height: 500px;
transition: all 400ms;
}
.container:hover .box {
filter: grayscale(100%) opacity(24%);
}
.box {
position: relative;
background: var(--img) center center;
background-size: cover;
transition: all 400ms;
display: flex;
justify-content: center;
align-items: center;
}
.container .box:hover {
filter: grayscale(0%) opacity(100%);
}
.container:has(.box-1:hover) {
grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
}
.container:has(.box-2:hover) {
grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
}
.container:has(.box-3:hover) {
grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}
.container:has(.box-4:hover) {
grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
}
.container:has(.box-5:hover) {
grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
}
.box:nth-child(odd) {
transform: translateY(-16px);
}
.box:nth-child(even) {
transform: translateY(16px);
}
.box::after {
content: attr(data-text);
position: absolute;
bottom: 20px;
background: #000;
color: #fff;
padding: 10px 10px 10px 14px;
letter-spacing: 4px;
text-transform: uppercase;
transform: translateY(60px);
opacity: 0;
transition: all 400ms;
}
.box:hover::after {
transform: translateY(0);
opacity: 1;
transition-delay: 400ms;
}
https://codepen.io/petrovpetr/pen/rNRXrNw
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤6🔥5
Современная фронтенд-разработка: мир HTML, CSS, JavaScript и популярных фреймворков
Фронтенд-разработка — это динамично развивающаяся дисциплина, которая занимается созданием и улучшением интерфейса веб-приложений. Разработчики в этой области применяют различные технологии для улучшения дизайна, удобства использования и производительности веб-страниц. В этой статье мы отправимся в путешествие по освоению фронтенд-разработки. Начнем с основополагающих элементов — HTML, CSS и JavaScript, — а потом перейдем к популярными фронтенд-фреймворкам, таким как React и Vue.js.
HTML: скелет страниц
HTML (HyperText Markup Language) — это основной язык разметки для создания веб-страниц. Он используется для определения структурных элементов и организации контента. Базовая структура HTML-страницы выглядит следующим образом:
📌 Читать
@javascriptv
Фронтенд-разработка — это динамично развивающаяся дисциплина, которая занимается созданием и улучшением интерфейса веб-приложений. Разработчики в этой области применяют различные технологии для улучшения дизайна, удобства использования и производительности веб-страниц. В этой статье мы отправимся в путешествие по освоению фронтенд-разработки. Начнем с основополагающих элементов — HTML, CSS и JavaScript, — а потом перейдем к популярными фронтенд-фреймворкам, таким как React и Vue.js.
HTML: скелет страниц
HTML (HyperText Markup Language) — это основной язык разметки для создания веб-страниц. Он используется для определения структурных элементов и организации контента. Базовая структура HTML-страницы выглядит следующим образом:
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥4❤3
Проверь себя!
/**
* Нужно написать функцию, которая принимает число N и возвращает функцию,
* вызов которой первые N раз возвращает 'yes', а потом – 'no'.
*/
function canGetCount(n) {
// code here
}
const getOne = canGetCount(2);
getOne() === 'yes'
getOne() === 'yes'
getOne() === 'no'
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥5❤2🥰1😁1
Использование динамического импорта вместо обычных операторов импорта может значительно уменьшить размер пакета JavaScript.
Ну а чем меньше пакет, тем быстрее загружается страница.
Всё это возможно потому, что в JavaScript существует функция асинхронного импорта. Она позволяет загружать пакет, только когда его вызывают.
Это особенно актуально для зависимостей, которые используются только при определенном событии, например при нажатии на кнопку.
Теперь вы можете загружать их только тогда, когда они вам нужны.
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31❤5🔥4🤔2
npm install moment --save
Объект
moment
в Moment.js является изменяемым. Это означает, что такие операции, как add
, subtract
или set
, изменяют исходный объект moment
. При первом использовании Moment.js для многих могут быть непривычны сценарии наподобие этого:var a = moment('2016-01-01');
var b = a.add(1, 'week');
a.format();
"2016-01-08T00:00:00-06:00"
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16👎15❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Folded Paper Login Form - Форма входа в систему в виде сложенной бумаги, реализованная на чистом CSS.
https://codepen.io/hexagoncircle/pen/XWJGQqy
@javascriptv
https://codepen.io/hexagoncircle/pen/XWJGQqy
@javascriptv
👍10🔥4❤1👎1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Вышел новый плагин для Figma, который позволяет превращать дизайны в полноценные работающие приложения на SwiftUI.
Использовать Trace можно бесплатно.
▪ Попробовать
@javascriptv
Использовать Trace можно бесплатно.
▪ Попробовать
@javascriptv
🔥17👍6❤1🥰1
Недавно в TypeScript’е появилось новое ключевое слово
using
. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally
. Но мы можем использовать
using
не только, когда открываем файл или подключение к базе данных — это как Undo/Redo
только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:- создали объект, удалили
- показали спиннер и скрыли, когда получили данные
Причем отмена удобно происходит в самом конце функции, даже если мы используем
async/await
.Вот простой пример, как можно использовать
using
, чтобы показывать/скрывать спиннер в React коде:useEffect(() => {
(async () => {
using manager = new LoadingManager(setIsLoading);
await Promise.resolve().then(() => console.log("promise.resolve"));
})();
}, []);
/**
* Класс, который управляет состоянием спиннера
*/
class LoadingManager {
constructor(private setIsLoading: (value: boolean) => any) {
this.setIsLoading(true);
console.log("constructor");
}
[Symbol.dispose]() {
this.setIsLoading(false);
console.log("disposer")
}
}
// В консоли будет выведено в следующем порядке
// constructor
К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде
try/finally
.@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤2🔥2👏2
Если вы используете бесплатную IntelliJ IDEA Community Edition, то из поддержки JS и CSS там только весьма скудная
syntax highlighting only
подсветка синтаксиса, но есть простой способ её улучшить.В этом нам поможет плагин TextMate Bundles https://plugins.jetbrains.com/plugin/7221-textmate-bundles, который уже встроен в современных версиях IDEA. В этом плагине уже встроены бандлы для JavaScript и CSS, причём, с достаточно неплохой подсветкой синтаксиса. Загвоздка в том, что эта подсветка не работает из коробки, т.к. её перекрывает та самая
syntax highlighting only
подсветка.Чтобы всё заработало, идём в
Settings > Editor > File Types
и удаляем File name patterns
для CSS (syntax highlighting only)
и JavaScript (syntax highlighting only)
. Тоже самое можно проделать и для SQL (syntax highlighting only)
.Пример было/стало для JavaScript на картинке
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥4❤1👎1
Начнём с того, что для сравнения JavaScript приводит обе стороны равенства к одному типу.
Также вспомним, что если число начинается с 0, JS предполагает, что оно написано в восьмеричном формате, и выполняет необходимые преобразования.
И в этом всё дело, 018 — недопустимое восьмеричное число (в 8-ричной системе цифры от 0 до 7). А раз в числе 018 есть восьмёрка, то JavaScript теперь рассматривает его как обычное десятичное, то есть равное 18. Получается, что
'018' == 18
— выражение является истинным.При этом 017 — допустимое восьмеричное число, поэтому JS представляет его как 8-ричное число 15, потому что 1×8¹ + 7×8⁰ = 15. А строку '017' он рассматривает как десятичное число, в результате чего получается 17. Но 15 не равно 17, поэтому второе выражение неверно.
Такие вот дела, ох уж это автоприведение типов
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍44🔥6❤3😁2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Интересная идея; можно сделать что-то похожее — и будет, что показать на собесе.
Solar system — анимация описания планет солнечной системы. Проект реализован с помощью CSS и JavaScript.
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍6❤2
Проект состоит из 3 файлов: HTML-страницы, CSS-стилей и JS-скрипта.
По-моему, неплохой способ прокачать свой скиллы веб-разработки
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥5❤4🤩1
Проект, с которым вы научитесь создавать современные веб-сайты с эффектом параллакса и макетами в виде коробочек-бенто.
Этот курс охватывает все: от стильного дизайна пользовательского интерфейса до принципов mobile-first, укрепляя ваши навыки работы с
React.js и Tailwind CSS
.▪Github
▪Обучающее видео
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов Chrome Dev Tools 💡
Знаете ли вы, что в Chrome Dev Tools можно легко фильтровать запросы по временным рамкам? ✨
@javascriptv
Знаете ли вы, что в Chrome Dev Tools можно легко фильтровать запросы по временным рамкам? ✨
@javascriptv
👍23❤2🔥1
Мне одному кажется, что Caps Lock — самая бесполезная клавиша? Вдобавок можно нажать её в самый неподходящий момент, скажем, при вводе пароля и не заметить. В идеале при написании JS добавить блок предупреждения пользователя о нажатии Caps Lock.
Чтобы отслеживать, включен ли Caps Lock, мы используем метод
getModifierState
:document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
const capsLockOn = keyboardEvent.getModifierState('CapsLock');
if (capsLockOn) {
// предупредить о нажатии Caps Lock?
}
});
Для подробного ознакомления с
getModifierState
давайте заглянем в доки W3C :dictionary EventModifierInit : UIEventInit {
boolean ctrlKey = false;
boolean shiftKey = false;
boolean altKey = false;
boolean metaKey = false;
boolean modifierAltGraph = false;
boolean modifierCapsLock = false;
boolean modifierFn = false;
boolean modifierFnLock = false;
boolean modifierHyper = false;
boolean modifierNumLock = false;
boolean modifierScrollLock = false;
boolean modifierSuper = false;
boolean modifierSymbol = false;
boolean modifierSymbolLock = false;
};
Как видим,
getModifierState
позволяет получить множество сведений о клавиатуре пользователя во время событий, ориентированных на нажатие клавиш. Полезная штука, используйте)
@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥6❤3