Как стать автором
Обновить
5
0
Антонина Листопадова @AntoninaList

Frontend

Отправить сообщение

JavaScript: 7 полезных мелочей

Время на прочтение4 мин
Количество просмотров23K
Автор заметки, перевод которой мы сегодня публикуем, говорит, что в JavaScript, как и в любом другом языке программирования, можно обнаружить множество маленьких хитростей, предназначенных для решения самых разных задач, как простых, так и довольно сложных. Некоторые из подобных приёмов широко известны, а другие, не такие распространённые, могут приятно удивить тех, кто о них не знает. Сейчас мы рассмотрим 7 полезных приёмов программирования на JavaScript.


Читать дальше →
Всего голосов 42: ↑38 и ↓4+34
Комментарии20

Восемь золотых правил Шнейдермана помогут вам создать лучший интерфейс

Время на прочтение8 мин
Количество просмотров15K


Восемь золотых правил Шнейдермана помогут вам создать лучший интерфейс


Следуйте «Восьми золотым правилам дизайна интерфейса» Бена Шнейдермана, если вы хотите создавать великолепные, производительные и не вызывающие разочарований пользовательские интерфейсы. Apple, Google и Microsoft являются одними из самых успешных компаний, чьи хорошо продуманные продукты отражают правила Шнейдермана. Характеристики, полученные из золотых правил Шнейдермана, могут быть признаны в различных руководствах по пользовательскому интерфейсу, разработанных корпоративными гигантами, такими как упомянутые выше компании. Визуальное воплощение этих правил становится еще более очевидным в создаваемых ими популярных интерфейсах. Эта статья научит вас улучшать свою работу, интегрируя 8 золотых правил.
Читать дальше →
Всего голосов 18: ↑14 и ↓4+10
Комментарии16

Как жалобы перенастраивают ваш мозг на негатив [и влияют на здоровье]

Время на прочтение5 мин
Количество просмотров70K

Предисловие: Ссылку на оригинальную статью я увидел в комментарии здесь, на Хабре (к сожалению, не могу его найти чтобы указать автора и сказать спасибо). Статья имеет значение не только для тех, кто жалуется (кто же в этом признается?), но и тем, кому жалуются. Не все знают английский язык, поэтому я решил ее перевести.



[В квадратных скобках — мои примечания.]


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

Читать дальше →
Всего голосов 84: ↑63 и ↓21+42
Комментарии107

Ускоряем JavaScript-код с использованием типа данных Set

Время на прочтение6 мин
Количество просмотров27K
Автор материала, перевод которого мы сегодня публикуем, говорит, что уверен в том, что многие JavaScript-разработчики пользуются, в основном, такими типами данных, как Number, String, Object, Array и Boolean. В большинстве случаев этого вполне достаточно. Но если нужно сделать код как можно более быстрым и масштабируемым, применение этих типов данных не всегда оправдано.



В этом материале мы поговорим о том, как, пользуясь типом данных Set, предоставляющим возможность работать с коллекциями уникальных значений, сделать код быстрее. Особенно это актуально для кода крупномасштабных проектов. У типов Array и Set много общего, но использование типа данных Set способно дать программисту такие возможности, ярко проявляющиеся во время выполнения программ, которых нет у типа Array.
Читать дальше →
Всего голосов 61: ↑42 и ↓19+23
Комментарии19

Как мы тестировали drag&drop в HTML5

Время на прочтение6 мин
Количество просмотров7.6K
Так или иначе, все сталкивались с ситуациями, когда в банальной обстановке вдруг происходило что-то необычное. Примерно такой случай произошел с нами при тестировании нового приложения на проверенном сто раз окружении. Сюрпризом для нас стало использование некоторых возможностей HTML5 в работе front-end’а, а точнее невозможность стандартными средствами Selenium WebDriver автоматизировать тестирование drag&drop операций. Об этом опыте мы хотим рассказать.


Читать дальше →
Всего голосов 11: ↑10 и ↓1+9
Комментарии2

Ответственный подход к JavaScript-разработке, часть 1

Время на прочтение12 мин
Количество просмотров30K
Цифры говорят нам о том, что рост объёмов JavaScript-кода плохо влияет на производительность веб-проектов. Если так будет продолжаться и дальше, то уже очень скоро при загрузке средней страницы будет передаваться как минимум 400 Кб JS-кода. И это — всего лишь объём передаваемых данных. Как и другие текстовые ресурсы, JavaScript-код практически всегда передаётся в сжатом виде. Пожалуй, сжатие — это единственное, что обычно делается правильно при передаче кода с сервера на клиент.

image

К сожалению, в то время как уменьшение времени передачи неких ресурсов вносит серьёзный вклад в то, что мы называем «производительностью», сжатие никак не влияет на то, сколько времени у браузера уйдёт на разбор и обработку скрипта после того, как он будет полностью загружен.
Читать дальше →
Всего голосов 35: ↑30 и ↓5+25
Комментарии19

Var, let или const? Проблемы областей видимости переменных и ES6

Время на прочтение13 мин
Количество просмотров105K
Области видимости в JavaScript всегда были непростой темой, особенно в сравнении с более строго организованными языками, такими, как C и Java. В течение многих лет области видимости в JS особенно широко не обсуждались, так как в языке попросту не было средств, которые позволяли бы существенно повлиять на сложившуюся ситуацию. Но в ECMAScript 6 появились некоторые новые возможности, которые позволяют разработчикам лучше контролировать области видимости переменных. Эти возможности в наши дни уже очень хорошо поддерживают браузеры, они вполне доступны для большинства разработчиков. Однако новые ключевые слова для объявления переменных, учитывая ещё и то, что старое ключевое слово var никуда не делось, означают не только новые возможности, но и появление новых вопросов. Когда использовать ключевые слова let и const? Как они себя ведут? В каких ситуациях всё ещё актуально ключевое слово var? Материал, перевод которого мы сегодня публикуем, направлен на исследование проблемы областей видимости переменных в JavaScript.


Читать дальше →
Всего голосов 38: ↑30 и ↓8+22
Комментарии41

Сборка БЭМ-проекта при помощи Webpack

Время на прочтение9 мин
Количество просмотров19K

В статье речь пойдет о сборке БЭМ-проектов с помощью бандлера Webpack. Я покажу один из примеров конфигурации, не нагружая читателей лишними сущностями.


Материал подойдет тем, кто только начинает знакомство с БЭМ. Сначала коснемся теоретических аспектов методологии, а в разделе «Практика» я покажу, как их можно применить.

Читать дальше →
Всего голосов 17: ↑17 и ↓0+17
Комментарии2

С чего лучше начать проект или как сделать так, что бы не было потом мучительно больно

Время на прочтение8 мин
Количество просмотров25K

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

Читать дальше →
Всего голосов 22: ↑19 и ↓3+16
Комментарии5

Основы движков JavaScript: общие формы и Inline кэширование. Часть 2

Время на прочтение3 мин
Количество просмотров8.9K
Всем привет! Курс «Безопасность информационных систем» стартует уже через 2 недели, поэтому сегодня мы хотим опубликовать вторую часть статьи, публикация которой приурочена к его запуску. Прочитать первую часть можно тут. Итак, начнем.

Inline Caches (ICs)

Основной идеей, которая стоит за формами, является концепция inline кэшей или ICs. Они являются ключевым компонентом быстрой работы JavaScript! Движки JavaScript используют ICs для запоминания информации о том, где найти свойства объектов, чтобы уменьшить количество затратных поисков.


Читать дальше →
Всего голосов 23: ↑21 и ↓2+19
Комментарии0

Как я организовал хранение фотографий

Время на прочтение9 мин
Количество просмотров136K
Привет Хабр! Каждый из нас хранит какую-нибудь информацию, некоторые для этого используют секретики и лайфхаки. Лично я люблю понажимать кнопку фоторужья и сегодня хотел бы поделиться своим опытом хранения информации, к которому я шёл-шёл и пришёл.



Сразу предупрежу: под катом нет «серебряной пули», которая умножит на 0 проблему хаоса в файлах на ваших устройствах. И даже ни строчки про нейросети, распознавание чего-либо кем-либо и прочие нанотехнологии. Под катом — немного текста и дубовая табличка, которую ещё и заполнять придётся вручную =) Но которая работает.
Читать дальше →
Всего голосов 96: ↑89 и ↓7+82
Комментарии276

12 приемов работы с JavaScript, которых нет в большинстве туториалов

Время на прочтение6 мин
Количество просмотров45K


Когда я начал изучать JavaScript, то первым делом составил список приемов, которые помогали мне экономить время. Я подсмотрел их у других программистов, на разных сайтах и в мануалах.

В этой статье я покажу 12 отличных способов улучшить и ускорить свой JavaScript-код. В большинстве случаев они универсальны.
Читать дальше →
Всего голосов 70: ↑45 и ↓25+20
Комментарии88

Книга «React быстро. Веб-приложения на React, JSX, Redux и GraphQL»

Время на прочтение9 мин
Количество просмотров16K
image Привет, Хаброжители! Оригинальное издание вышло осенью 2017 года, но до сих пор считается лучшей книгой для знакомства с React. Автор постоянно обновляет и дорабатывает код к книги в репозитории Github.

Предлагаем в посте ознакомится с отрывком «Состояния и их роль в интерактивной природе React»

Если бы вам пришлось прочитать в этой книге всего одну главу — стоило бы выбрать именно эту! Без состояний компоненты React остаются не более чем усовершенствованными статическими шаблонами. Надеюсь, вы разделяете мой энтузиазм, потому что понимание концепций этой главы позволит вам строить намного более интересные приложения.

Читать дальше →
Всего голосов 8: ↑8 и ↓0+8
Комментарии0

Chrome расширения для веб-разработки и работы с GitHub

Время на прочтение3 мин
Количество просмотров13K


Привет всем. Хочу поделиться с вами некоторыми из расширений для Хрома, которые я использую при разработке, анализе сайтов, в работе с GitHub и просто в повседневной жизни. Уверен, что для большинства читателей, список этих расширений не будет открытием, но те, кто узнает о них впервые и установит, несомненно будут наслаждаться работой с новыми инструментами.
Читать дальше →
Всего голосов 16: ↑14 и ↓2+12
Комментарии5

Простое Yii2 приложение для отправки почты

Время на прочтение4 мин
Количество просмотров27K
Посмотрев, как ловко принтер в офисе отправляет письма от кого угодно куда угодно, решил реализовать простой отправитель писем. Из подручных инструментов оказались Yii 2 фреймворк со встроенным в него модулем swiftmailer, виртуальная Ubuntu на VirtualBox (можно и без нее, если установить php и web-сервер локально).

Итак, начнем.
Читать дальше →
Всего голосов 14: ↑4 и ↓10-6
Комментарии12

Анализ и оптимизация React-приложений

Время на прочтение22 мин
Количество просмотров38K
Люди, вроде меня, которые борются за высокую производительность сайтов, часто тратят на это много времени. Поэтому сейчас я собираюсь раз и навсегда решить проблему низкого быстродействий веб-ресурсов, интерфейс которых написан на React. А именно, я предлагаю всем, кто это читает, сегодня же прекратить пользоваться React.



Автор материала, перевод которого мы сегодня публикуем, конечно же, шутит. Здесь речь пойдёт о том, как оптимизировать производительность React-приложений. Кстати, прежде чем начать, подумаем о том, зачем вообще нужна оптимизация сайтов. Пожалуй, можно сказать, что нужна она для того, чтобы сайтом могло бы пользоваться больше людей, чем до оптимизации.
Всего голосов 34: ↑32 и ↓2+30
Комментарии4

Кастомизируем select на чистом css

Время на прочтение4 мин
Количество просмотров97K
Как-то вечером я убивал время, читая статьи в интернете, и наткнулся на вот этот хабропост пользователя Cyapa, где расписано, как кастомизировать select на чистом css. В процессе просмотра данного решения нашел несколько весьма неудобных моментов, которые постарался исправить в своем решении этой задачи. Итак, приступим.
Читать дальше →
Всего голосов 14: ↑12 и ↓2+10
Комментарии12

Как сэкономить ресурсы в браузере и не сломать веб. Доклад Яндекса

Время на прочтение9 мин
Количество просмотров13K
Несмотря на рост производительности устройств, веб становится всё более требовательным к памяти и процессору. Правильный рендеринг и умное распределение ресурсов по вкладкам — важная часть решения этой проблемы. Константин Крамлих PurplePowder посвятил своё выступление на конференции «Я Frontend» алгоритмам, которые улучшают производительность и экономят ресурсы как в проекте Chromium, так и в Яндекс.Браузере.

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

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


— Меня зовут Костя, я руководитель группы разработки внутренних компонентов в команде Яндекс.Браузера. В Браузере я чуть больше пяти лет, занимался разными вещами: от всего декодирования в браузере, всех HTML5-видео, до отрисовки, рендеринга и других подобных процессов.

Всего голосов 35: ↑34 и ↓1+33
Комментарии32

Разбираемся с асинхронностью в JavaScript [Перевод статьи Sukhjinder Arora]

Время на прочтение8 мин
Количество просмотров35K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding Asynchronous JavaScript» автора Sukhjinder Arora.


Читать дальше →
Всего голосов 25: ↑22 и ↓3+19
Комментарии11

Эффекты фильтров SVG. Часть 2. Контурный текст при помощи feMorphology

Время на прочтение10 мин
Количество просмотров7.4K

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:


Эффекты фильтрации SVG


  1. Эффекты фильтрации SVG. Часть 1. SVG фильтры 101.
  2. Эффекты фильтрации SVG. Часть 2. контурный текст при помощи feMorphology
  3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer.
  4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
  5. Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap



Во второй части серии об SVG-фильтрах Sara Soueidan знакомит нас с фильтром feMorphology и приводит несколько примеров его использования для создания интересных эффектов.


Всего голосов 18: ↑18 и ↓0+18
Комментарии4

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Зарегистрирована
Активность