Рубрика «Разработка веб-сайтов» - 53

Хочу поделиться своей интересной находкой, которая помогла мне наконец осуществить свою маленькую мечту. Объединить все свои рабочие инструменты единым стилем. И не просто стилем, а хорошо продуманным, выверенным и целостным. Что мне помогло этого добиться? Это палитра Nord, портированная для большинства современных и не очень редакторов, терминалов и не только. Если вам не чужда подобная мечта, прошу под кат.

Твое рабочее окружение в нордическом стиле - 1

Читать полностью »

Утечки памяти похожи на сущности, паразитирующие на приложении. Они незаметно проникают в системы, поначалу не принося никакого вреда. Но если утечка оказывается достаточно сильной — она способна довести приложение до катастрофы. Например — сильно его замедлить или попросту «убить».

Практическое руководство по борьбе с утечками памяти в Node.js - 1

Автор статьи, перевод которой мы сегодня публикуем, предлагает поговорить об утечках памяти в JavaScript. В частности, речь пойдёт об управлении памятью в JavaScript, о том, как идентифицировать утечки памяти в реальных приложениях, и о том, как с бороться с утечками памяти.
Читать полностью »

Небольшая история о неадекватном заказчике и нахождении уязвимости на сайте за 1 минуту.

image

Не ожидал, что именно эта история станет моей первой статьей на Хабре. Пишу пока горячо!

Все что Вы прочитаете далее — это не призыв к действию или попытка кого — либо скомпрометировать.
Читать полностью »

С момента своего возникновения веб-приложения прошли долгий путь. Мы знаем, какую важную роль играет в вебе JavaScript и какие безграничные возможности есть у нас при выборе фреймворков и технологий. Каждый фреймворк имеет свои достоинства и недостатки, но почти во всех используются какие-то основные методологии. Такие инструменты как create-react-app, next.js, vue-cli и другие действительно полезны для начального формирования проекта и его структуры, но в остальном вы вольны создавать приложение в соответствии со своими предпочтениями и требованиями проекта.

В статье собран список принципов, которые будут полезны при создании веб-приложений с помощью React и Vue. Они помогут вам задать нужное направление и упорядочить разработку. Большинство этих принципов применимо к созданию любого ПО, но всё же список предназначен именно для веб-приложений.
Читать полностью »

30 марта 2020 года разработчики Stack Overflow дали посетителям сайта возможность пользоваться бета-версией тёмной темы. Материал, перевод которого мы публикуем, посвящён рассказу о том, как создавалась тёмная тема Stack Overflow.

Создание тёмной темы для Stack Overflow - 1


Баннер на Stack Overflow, который позволяет включить тёмную тему

Меня зовут Аарон Шеки. Я — руководитель отдела дизайна Stack Overflow. Я участвую в разработке дизайна компонентов интерфейса, лежащих в основе новых возможностей проекта.

Для начала — немного иронии. Лично я не являюсь любителем тёмных тем интерфейсов.

Я часто вижу, что уровень контраста тёмных интерфейсов оказывается слишком низким. В оформлении таких интерфейсов сложно использовать полный спектр цветов. То же относится и к имитации объёма с использованием теней, и к применению других визуальных эффектов. Когда я читаю светлый текст, расположенный на тёмном фоне, у меня устают глаза. С явлениями вроде симультанного контраста сложно иметь дело и при использовании светлых тем, а если применяется тёмная тема — то всё лишь усложняется.

Но я — тот человек, усилиями которого на Stack Overflow появилась тёмная тема.

Та работа, о которой я хочу рассказать, никогда не была направлена именно на разработку тёмной темы, несмотря на то, что многие пользователи уже давно просили оснастить ресурс такой темой. Но в ходе продвижения к тёмной теме нам пришлось решить множество задач. В частности — был модернизирован фронтенд-код Stack Overflow, была улучшена доступность контента. Работая над тёмной темой, мы получили стимул к более широкому использованию в проекте нашей дизайн-системы.

Можем ли мы и дать пользователям тёмную тему, и попутно открыть дорогу к улучшению доступности проекта? Мы ответили на этот вопрос положительно, сделав всё то, о чём я сейчас расскажу.
Читать полностью »

Часто самое интересное на митапах начиналось, когда несколько человек увлеченно спорили вокруг какой-то темы, а ты мог включиться с вопросом или добавить свои “пять копеек” опыта.

Мы с Алексеем anzem Землянским и Григорием eyeofhell Петровым подумали перенести эту механику в онлайн. Хотим попробовать 11 апреля в 11 часов по Москве — в формате интерактивной ютуб-трансляции и открытых дискуссий в зуме* за эфиром. Надеемся, у вас найдется полтора часа на протестировать формат с нами.

Онлайн-холивар: новый формат обмена опытом. В эту субботу - 1

В качестве темы для первого холивара взяли TDD.
Читать полностью »

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

Знаю, многие меня в этом желании не поддержат. И не без причины! Исторически сложилось так, что звуки в интернете использовались крайне неудачно и некрасиво:

  • В ранние дни веба некоторые страницы проигрывали фоновую MIDI-музыку.
  • Всплывающие мошеннические окна используют звуки для достижения своих нехороших целей. Они, с помощью звуков, стремятся привлечь внимание пользователей и сделать обман более правдоподобным.
  • Звук присутствует и в автоматически запускающихся видео (ну это совсем кошмар).

Правда, я уверен в том, что совсем отказываясь от звука — это как если вместе с водой выплеснуть и ребёнка. Звуки могут делать акценты на действиях пользователя, они способны усиливать обратную связь. Звук может немного скрасить выполнение неких скучных действий. Если звуки на веб-страницах применяют со вкусом, они способны улучшить впечатления пользователя от проекта, сделав его более «осязаемым» и реальным.

Пакет use-sound: звуковые эффекты в React-приложениях - 1

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

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

Так как звуки в веб используются крайне редко, их применение может оказать большое влияние на восприятие сайта пользователями. Это — нечто вроде секретного оружия разработчика, применение которого способно привести к удивительно большому позитивному влиянию на определённые проекты.
Читать полностью »

Всем привет! Мы рады представить вам первое крупное обновление WebStorm в этом году. В новой версии вы найдете много новых возможностей и долгожданных улучшений, включая поддержку Vuex и новую опцию для запуска Prettier при сохранении файлов.

webStorm-2020-1-released

Скачать 30-дневную пробную версию WebStorm 2020.1 на сайте или с помощью Toolbox App. Полную версию могут использовать обладатели действующей подписки на WebStorm или All Products Pack, а также бесплатно студенты и разработчики опенсорсных проектов.

А сейчас давайте рассмотрим основные улучшения подробнее.Читать полностью »

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

Если веб-проект обладает высокой производительностью — это вносит вклад в его позитивное восприятие пользователями. А если пользователям понравилось работать с ресурсом — они имеют свойство возвращаться. Например, в этом исследовании показано, что 88% онлайн-клиентов менее склонны возвращаться на ресурсы, при работе с которыми они столкнулись с какими-то неудобствами. Эти неудобства вполне могут быть вызваны проблемами с производительностью.

Именно поэтому в деле веб-разработки важны инструменты, помогающие находить узкие места производительности и измерять результаты улучшений, вносимых в код. Подобные инструменты особенно актуальны в JavaScript-разработке. Здесь важно знать о том, что каждая строка JavaScript-кода может, в потенциале, заблокировать DOM, так как JavaScript — это однопоточный язык.

Измерение производительности JavaScript-функций - 1

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

Если вы полагаете, что некоторые вычисления слишком тяжелы для выполнения их в главном потоке, то вы, возможно, решите переместить их в сервис-воркер или в веб-воркер.
Читать полностью »

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

Каковы сходства и различия массивов в JavaScript и в PHP?

Одно дело — умение писать код. И совершенно другое — понимание внутренних механизмов используемых языков.

Вы правда знаете о том, что такое массивы? - 1

Ответ на этот единственный вопрос даёт мне целое море сведений о собеседуемом. Ведь почти в каждом распространённом языке есть массивы. Легко выдвинуть предположение, в соответствии с которым массивы в разных языках — это, более или менее, одно и то же. Многие программисты так и делают.

Это — некорректное предположение, ведущее к множеству мелких ошибок, к написанию нерационально устроенного кода, к невозможности эффективно пользоваться сильными сторонами языка.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js