Фронтенд

До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице.

В статье сравниваем традиционные методы и новые функции Chrome, с помощью которых можно анимировать свойство видимости и изменение размера элемента.

Я интегрировал видео анимацию, которая перематывается в зависимости от положения скролла, для лендинга детского парка развлечений - wizardia.land

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

Стек проекта: nuxt 3 (ts) / tailwindcss

Идея нашего руководства состояла втом, чтобы создать «вау» эффект для новых пользователей. Для этого оно обратились к 3д художнику, чтобы он намоделил нам видео с красивой переливающейся сферой посередине и последующим ее взрывом с разлетающимся конфетти и тематическими элементами. После того, как оказалось, что само по себе видео выглядит не так впечатляюще, они решили, что оно не должно воспроизводится сразу, а должно перематываться при скроллинге страницы - и тут все началось.

Содержание - вкратце по тупым ошибкам, которые я совершил.

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

Ссылка на конечный результат для тех, кто спешит: https://codepen.io/simzikov/pen/zYgojrb. Остальных прошу читать далее.

Поговорим про введение в TypeScript и то, как с помощью него мы можем сделать наше программирование и наш код на JavaScript более надежными и прогнозируемыми. 

Меня зовут Александр Чернов, я фронтенд-разработчик в Альфе, веду подкаст ТИНОИД, обожаю плавание и влюблён в веб- и фронтенд-разработку.

Что такое киоск? Это ограничение набора приложений, которые доступны пользователю. Иными словами — замена лаунчера по умолчанию. Когда доступно только одно приложение, нельзя открыть браузер, другие приложения и даже залезть в настройки. Вообще ничего не доступно. Это как защита от нецелевого использования, так и от дурака…

Давайте сделаем киоск режим для нашего приложения на планшете. Через сервис KNOX Configure это делается быстро и без программирования. Ниже расскажу об этом на примере сервиса для бронирования переговорных.

Angular — это мощный инструмент для создания сложных веб-приложений. Но, как и в любом другом фреймворке, возникают свои сложности. Одна из таких проблем — это частые перезапуски тяжелых функций в шаблонах, что сильно бьет по производительности. Если приложение начинает тормозить, значит пора задуматься об оптимизации. И здесь на помощь приходит Memoize Pipe, способный спасти ваш интерфейс от лишних вычислений.

Сегодня мы рассмотрим тему управления памятью в JavaScript — и речь пойдет не о классическом сборщике мусора, а о возможностях с WeakRef и FinalizationRegistry. Эти инструменты помогают работать со слабыми ссылками и асинхронной финализацией объектов, открывая дорогу к более тонкой работе с памятью.

Если вам надоело, что объекты висят в памяти дольше, чем нужно, и хочется управлять ресурсами без лишних утечек — эта статья для вас. Начнем!

Это руководство посвящено написанию чистого и удобного кода на JavaScript и TypeScript. Мы рассмотрим лучшие практики работы с функциями, переменными и методами, чтобы ваш код был не только эффективным, но и понятным как вам, так и другим разработчикам. Статья будет полезна для новичков, которые хотят улучшить свои навыки кодирования.

Angular теперь поддерживает TypeScript isolatedModules начиная с версии Angular 18.2. Благодаря этой поддержке мы сможем заметить увеличение производительности до 10% во времени сборки для production на своих проектах.

Продолжаем публиковать выдержки из бесплатного курса по разработке в Р7 офис

Что такое макросы?

Макросы — это набор инструкций или команд, которые выполняются автоматически. Они позволяют автоматизировать рутинные задачи и упростить работу с программами. В контексте редактора макросов в Табличном редакторе Р7-Офис, макросы предоставляют возможность автоматически выполнять повторяющиеся операции, такие как форматирование, вставка текста или изменение структуры документа.

Макросы - это так же небольшие скрипты, которые используются для облегчения повседневной работы с различными типами документов. Макросы Р7 используют синтаксис JavaScript и нотацию скриптов API Р7 Document Builder.
Есть несколько причин, по которым Р7 использует JavaScript для макросов:

Недавнее объявление о блоке @let в Angular вызвало бурное обсуждение в сообществе разработчиков, одни считают его ценным дополнением, другие видят в этом ненужное усложнение.

Публикуется первая глава бесплатного курса основы разработки для Р7 . Дополнительные материалы можно найти вот тут

Особенности разработки в MS Office (Excel)

Базовым средством автоматизации в офисном пакете Microsoft Office, в течение длительного времени (С 1996 года по настоящее время) является скриптовый язык VBA (VisualBasic for Application). C 2007 года VBA не лицензируется для других разработчиков. Согласно статьи в Википедии , посвященной VBA, этот язык является неким упрощенным подмножеством языка VisualBasic.

Рассмотрим некоторые особенности VBA, которые потом будут являться основой для средств автоматизации в Р7:

На протяжении трех лет мы в команде разрабатываем онлайн-игру для самих себя. Сначала, во времена ковида, она отчасти заменила нам офлайн-корпоративы, а сейчас, уже став традицией, дополняет живые встречи. Начинали с простенькой настолки в вебе с картой и кубиками, а сейчас делаем кастомную изометрическую 3D-игру с видом сверху на ThreeJS. В этой статье я поделюсь процессом эволюции игры с точки зрения разработки и геймдизайна, а также расскажу о задумке, мотивации и ресурсах на разработку и о том, как побудить коллег общаться друг с другом, работая из разных точек мира и разных таймзон.

Меня зовут Артём, я фронтенд-разработчик, занимаюсь всякого рода импровизациями. Если нужно построить что-то экспериментальное в короткий срок — это ко мне.

О проектировании микросервисной архитектуры с использованием фреймворка Single SPA и технологиях, связанных с его использованием.

JavaScript по традиции известен как однопоточный язык. Т.е код выполняется последовательно, и одновременное выполнение нескольких задач может быть проблематичным. Если код сталкивается с тяжелыми вычислительными задачами, это может привести к задержкам и замедлению интерфейса юзера. Поэтому один поток не для каких-либо интенсивных вычислений или обработки больших объемов данных.

Чтобы обойти эти ограничения, были введены Web Workers — они позволяют выполнять JS-код в фоновом потоке, параллельно с основным. Однако, все сложилось так, что простой обмен данными между основным потоком и воркерами через postMessage имеет свои ограничения и может быть недостаточно хорошим для некоторых задач.

Здесь помогают SharedArrayBuffer и Atomics.

Привет, Хабр! Меня зовут Данил. Я frontend-разработчик департамента корпоративных систем ЛАНИТ, который очень любит порядок в коде. На мой взгляд, именно выразительность и чистота кода позволяют ему лучше работать и дольше жить.

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

В этой статье я делюсь своим способом упорядочивания папок и файлов для проектов на React/Next. Я fullstack разработчик с 10+ лет опыта коммерческой разработки, множество стартапов разработал в различных командах, и несколько стартапов разработал в одиночку, в т.ч. своих собственных.

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

Привет! Сегодня мы поговорим про flexbox в css. Это очень важная тема, в которой должен разбираться каждый фронтенд-разработчик или верстальщик. Я покажу вам как flexbox работает на реальных примерах. А в конце статьи покажу лайфхаки, которыми сам постоянно пользуюсь на работе.

Регулярно имею дело с собеседованиями: как прохожу, так и провожу их. Накопив опыт, решил поделиться мнением, что с техническими собеседованиями не так. Разберу частые ошибки собеседующих и расскажу как, а главное зачем можно улучшать процесс технических интервью.

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