Pull to refresh
0
0
Александр @Silvernel

User

Send message

Советы, библиотеки и дополнительные материалы по CSS-анимации

Reading time 25 min
Views 67K
Советы, библиотеки и дополнительные материалы по CSS-анимации

Введение


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

На компьютере был открыт текстовой файл со списком статей и библиотек про веб-разработку. Он постоянно пополнялся новыми данными.

Свернув его, я пошел на улицу в поисках кинотеатра с Deadpool'ом запустил браузер и стал блуждать по окрестностям интернета. Во время прогулки я наткнулся на интересную js-библиотеку по созданию css-анимации, которую добавил в открытый до этого текстовой документ… Как оказалось, по этой теме у меня уже набралось больше 40 ссылок на материалы и библиотеки.
Читать дальше →
Total votes 24: ↑24 and ↓0 +24
Comments 12

Перевод первой части учебника Patterns.dev

Reading time 11 min
Views 14K

Привет! Меня зовут Айнур, и я frontend-разработчик SimbirSoft. Более 6 лет я работаю над коммерческими проектами, создаю и улучшаю интерфейсы, поэтому в работе достаточно часто использую паттерны проектирования. Неоднократно я обращался за идеями и лайфхаками к книге Patterns.dev, которая содержит очень современный взгляд на шаблоны проектирования, рендеринга и производительности JavaScript.

Авторы Patterns.dev:

Лидия Холли — штатный консультант и преподаватель по разработке программного обеспечения, которая в основном работает с JavaScript, React, Node, GraphQL. Она также занимается наставничеством и проводит личные тренинги.

Эдди Османи — технический менеджер, работающий над Google Chrome. Его команды работают над такими проектами, как Lighthouse, PageSpeed ​​Insights, Chrome User Experience Report и другими.

Материал книги будет полезен не только React-разработчикам, но и всем, кто так или иначе интересуется или сталкивается с frontend-разработкой.

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

Источник: https://www.patterns.dev/
Данный адаптированный материал распространяется на условиях лицензии Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

Читать далее
Total votes 7: ↑6 and ↓1 +5
Comments 5

Перевод второй части учебника Patterns.dev

Reading time 5 min
Views 6.5K

И снова всем привет! Судя по реакциям и количеству закладок к переводу первой части книги Patterns.dev, этот материал оказался для вас полезен. Поэтому я решил поделиться переводом второй части.

В ней речь идет про паттерны рендеринга. В случае правильного подбора можно получить более быструю сборку и отличную производительность загрузки при низких затратах на обработку.

Напомню, что авторы Patterns.dev:
Лидия Холли — штатный консультант и преподаватель по разработке программного обеспечения, которая в основном работает с JavaScript, React, Node, GraphQL. Она также занимается наставничеством и проводит личные тренинги.
Эдди Османи — технический менеджер, работающий над Google Chrome. Его команды работают над такими проектами, как Lighthouse, PageSpeed ​​Insights, Chrome User Experience Report и другими.

Материал книги будет полезен не только React‑разработчикам, но и всем, кто так или иначе интересуется или сталкивается с frontend‑разработкой. Это ознакомительная часть перевода учебника https://www.patterns.dev/. Перевод всей второй части учебника можно найти здесь.

P. S.: На данный момент выложено в виде pdf, в дальнейшем планируется полноценная публикация на github для удобства изучения.

P. P. S.: Вторая часть взята из книги: https://www.patterns.dev/, переведена на русский язык. Книга находится под лицензией CC BY-NC 4.0

Данный адаптированный материал распространяется на условиях лицензии Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

Читать далее
Total votes 3: ↑3 and ↓0 +3
Comments 1

Недушные интервью разработчиков

Level of difficulty Easy
Reading time 4 min
Views 17K

По примерным прикидкам за 10 лет работы в Miro провел порядка 500 интервью. Настало время поделиться сакральным опытом «как за час проверить, что чел шарит, и при этом не превратить интервью в душный допрос».

Читать далее
Total votes 57: ↑47 and ↓10 +37
Comments 36

Монады на JS/TS в дикой жизни

Level of difficulty Medium
Reading time 6 min
Views 9.5K

Идея разобраться в теме монад меня привлекала уже очень давно. Сложность описания концепций представляло не только мою личную проблему, но и была потенциальной проблемой для коллег. Ведь хотелось не просто в них разобраться, а работать с ними каждый день. Функциональное программирование неплохо формирует мышление, является очень выразительным и часто лаконичным решением. Ниже идет описание опыта разработки с применением библиотек монад на JS / TS.

Читать далее
Total votes 5: ↑3 and ↓2 +1
Comments 18

Консоль разработчика Google Chrome: десять неочевидных полезностей

Reading time 6 min
Views 227K
Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

image

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.
Читать дальше →
Total votes 88: ↑83 and ↓5 +78
Comments 62

Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript

Reading time 5 min
Views 56K
image
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski

Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).

Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.

Финальное демо
Читать дальше →
Total votes 39: ↑27 and ↓12 +15
Comments 23

Кризис ожирения сайтов

Reading time 30 min
Views 123K
Примечание переводчика: визит под кат этого поста означает большие объёмы потреблённого трафика. И это иронично, если учесть поднятую тему. Но всё сразу встаёт на свои места, если помнить, что в оригинале это было выступление в прошлом ноябре в Сиднее длиной почти в час. Чтение поста занимает куда меньше времени. В форме видеозаписи (1280×720) речь занимает два гигабайта. Пост же занимает всего лишь 12 МиБ. Рекомендуется просмотр на широких мониторах.



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

Выступление совсем не об этом. Я хотел бы поговорить об этом общественном кризисе здоровья, этом ожирении сайтов. Отличные дизайнеры, которые задумываются о вебе как я или даже больше, почему-то делают страницы, которые становятся больше. Речь пойдёт о текстовых в своей основе сайтах, которые по каким-то непостижимым причинам с каждым годом становятся всё больше и больше.
Читать дальше →
Total votes 97: ↑93 and ↓4 +89
Comments 123

Тестируем вёрстку правильно

Reading time 8 min
Views 103K
Makeup — инструмент для комфортного ручного регрессионного тестирования вёрстки

Что не так с тестированием вёрстки


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

Проблема тестирования вёрстки в том, что только живой человек может сказать, хорошо свёрстан блок на странице или нет. Поэтому чаще всего мы тестируем HTML и CSS вручную: проверяем, как будет вести себя блок, если в нем будет слишком много (или слишком мало) текста или дочерних элементов; смотрим, чтобы все возможные варианты отображения блока смотрелись корректно; помним о том, как блоки должны адаптироваться к разным устройствам и разрешениям экрана.
Можем ли мы перестать делать это руками?
Total votes 35: ↑33 and ↓2 +31
Comments 31

Создание подсказок для сайта с помощью EnjoyHint

Reading time 6 min
Views 36K
Друзья мои! Время от времени каждый из нас сталкивается с ситуацией, когда, попав на новый для себя сайт, приходится хорошенько поразмыслить минуту-другую, чтобы понять, как там все устроено. Примерно в таком же положении можно оказаться, обнаружив радикальные (или не очень) перемены во внешнем облике любимых сайтов, будь то last.fm или Кинопоиск. Существуют разные способы примирить пользователей с новым дизайном: от постепенного знакомства с привнесенными новшествами («Попробуйте бета-версию обновленного сайта прямо сейчас!») до создания пошагового гайда по новым возможностям. О последнем варианте мы сегодня и поговорим.

finding a way
Читать дальше
Total votes 20: ↑19 and ↓1 +18
Comments 9

Топ-10 статей по User eXperience для начинающих, чтобы за час понять, что это такое

Reading time 3 min
Views 53K


Моя стратегия разобраться в какой-либо теме — пару часов почитать Хабр. Я решил сэкономить немного времени таких же, как и я, и сделал небольшую подборку полезных и интересных материалов на тему UX. Сразу предупрежу, что получить профессиональный level up с помощью них не получится (для этого есть оффлайновые курсы), но вот вникнуть в тему и получить инсайты — запросто. И да, если есть, поделитесь ссылками на материалы, которые были для вас максимально полезными в свое время.
Читать дальше →
Total votes 28: ↑25 and ↓3 +22
Comments 3

Как я делал веб-версию KeePass

Reading time 6 min
Views 80K
Как-то мне надо было добавить в админку просмотр списка паролей. База хранилась на сервере в формате KeePass (kdbx v2), сервер был на ноде — недолго думая, я взял первый попавшийся пакет и сделал. А потом понадобилось то же самое, но прямо у пользователя в браузере, без сервера. Ничего не нашлось. Первым желанием было форкнуть либу и заменить использование node api, но от первого просмотра кода желание пропало, решил сделать сам.



Под катом расскажу о проблемах, с которыми я столкнулся, и способах их решения
Читать дальше →
Total votes 134: ↑133 and ↓1 +132
Comments 162

Эксперимент: Можно ли создать эффективную торговую стратегию с помощью машинного обучения и исторических данных

Reading time 4 min
Views 28K


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

Давид Монтаг (David Montaque), выпускник Стэнфордского университета и сотрудник компании Palantir Technologies, написал статью, в которой описал создание алгоритмических стратегий для торговли фьючерсами на основе исторических данных. Для предсказания будущей цены и волатильности Монтаг использовал техники машинного обучения. Мы представляем вашему вниманию описание эксперимента и выводы, к которым пришел исследователь.
Читать дальше →
Total votes 24: ↑17 and ↓7 +10
Comments 3

Адаптивное видео как фон шапки сайта

Reading time 3 min
Views 38K
Недавно столкнулся с интересной задачей: в шапку сайта установить видео в качестве фона. Шапка всегда занимает первый экран и установлена по принципу background-position: 50% 0. Суть в том, что на планшете мы видим видео полностью, а на телефоне оно обрезается по краям и снизу остается только центральная часть.


Читать дальше →
Total votes 18: ↑11 and ↓7 +4
Comments 6

Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов

Reading time 14 min
Views 21K
Предлагаю вашему вниманию перевод статьи «Responsive Upscaling: Large-Screen E-Commerce Design» автора Christian Holst.

Революция в адаптивном дизайне не за горами (если уже не случилась!), и даже не смотря на то, что интернет-магазины не взялись на адаптивный дизайн столь же агрессивно, как другие индустрии, все же это становится популярным.

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

  1. Только 18% из 50 ведущих американских интернет-магазинов, которые мы тестировали ранее, в этом году адаптировали свой дизайн под большие экраны (в то время как у 94% этих сайтов дизайн адаптирован под мобильные устройства).
  2. Почти три четверти электронных продаж все ещё совершаются на ПК, а не на мобильных устройствах (смотрите здесь, здесь и здесь).
  3. Около трети этих пользователей приходят с экранов шире 1350 пикселей (смотрите здесь, здесь и здесь). (Примечание: Разумеется, есть разница между шириной экрана и шириной браузерного окна — реальное число пользователей с браузером указанной ширины будет ниже. Мы рекомендуем вам отслеживать размеры браузерного окна в вашей веб-статистике для более полной картины того, насколько значителен этот сегмент для вашего сайта.
Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Comments 2

Как сверстать интерактивные вкладки в email-письме

Reading time 9 min
Views 17K


В нашем блоге мы уже неоднократно рассказывали о создании интерактивных email-рассылок с помощью CSS и HTML. Сегодня мы представляем вашему вниманию адаптированный перевод заметки Джастина Ку о том, как сверстать интерактивные вкладки, которые будут работать в почтовых программах iOS, Android и популярных веб-приложениях.
Читать дальше →
Total votes 27: ↑18 and ↓9 +9
Comments 26

Третий набор в Школу разработки интерфейсов Яндекса. Разбор вступительных заданий и полезные советы

Reading time 10 min
Views 32K
Осталось совсем немного до окончания набора в третью Школу разработчиков интерфейсов, которая в этот раз пройдёт в Москве. Упор в ней будет сделан на практику в формате виде мини-хакатонов. Его мы уже опробовали в прошлом году в Минске и Екатеринбурге. Студенты будут делиться на команды, и уже командно реализовывать проект. Кроме написания самого кода, нужно будет уметь принимать решения, разбираться с возникшими спорными вопросами, разбивать весь процесс разработки на логические итерации. Помогать в этом будут ребята из Яндекса, которые будут работать индивидуально с каждой командой. Занятия начнутся 7 сентября.

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

Вступительное испытание в Школу тоже очень практическое. Мы закончим принимать заявки 16 августа в 23:59. Пока есть еще время справиться с заданиями, мы попросили наших преподавателей немного помочь будущим студентам и на примере прошлогодней анкеты объяснить, какой логикой стоит руководствоваться, решая предложенные задачи, и рассказать, чему они уделяют внимание при их проверке.

image

В этом году структура заданий построена по аналогии с предложенными в прошлом году — так, чтобы мы могли обратить внимание на разные аспекты разработки. Первая задача — на знание верстки, вторая связана с оптимизацией JS-кода, а третья проверяет умение изучать и применять что-то новое. В этот раз поступающим нужно будет разобраться с Audio.API и написать плеер. Под катом вы найдёте не только разборы заданий, но и в целом полезные рекомендации как для начинающих, так и для опытных фронтендеров.
Читать дальше →
Total votes 32: ↑30 and ↓2 +28
Comments 23

Как повысить уверенность в том, что кнопка была нажата живым пользователем на сайте и избавиться от капчи?

Reading time 6 min
Views 35K
Капча всем известна. Также всем известно, что она представляет собой большую проблему и для программистов и для пользователей. Она ни тем ни другим не нравится! Ее приходится использовать по необходимости!

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

Последний предлагаемый метод спорный, но судите сами!
Читать дальше →
Total votes 46: ↑30 and ↓16 +14
Comments 78

JavaScript — шаблоны наследования

Reading time 7 min
Views 58K
Примечание переводчика: Тема наследования в JavaScript является одной из самых тяжелых для новичков. С добавлением нового синтаксиса с ключевым словом class, понимание наследования явно не стало проще, хотя кардинально нового ничего не появилось. В данной статье не затрагиваются нюансы реализации прототипного наследования в JavaScript, поэтому если у читателя возникли вопросы, то рекомендую прочитать следующие статьи: Основы и заблуждения насчет JavaScript и Понимание ООП в JavaScript [Часть 1]

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

JavaScript является очень мощным языком. Настолько мощным, что в нем сосуществует множество различных способов проектирования и создания объектов. У каждого способа есть свои плюсы и минусы и я бы хотел помочь новичкам разобраться в этом. Это продолжение моего предыдущего поста, Хватит «классифицировать» JavaScript. Я получил много вопросов и комментариев с просьбами привести примеры, и для именно этой цели я решил написать эту статью.
Читать дальше →
Total votes 22: ↑15 and ↓7 +8
Comments 35

Microsoft Azure для веб-разработчика — обзор

Reading time 7 min
Views 17K


Привет!

За то время, пока мы писали, что есть для веб-разработчика в нашем облаке Microsoft Azure, а потом писали, что изменилось, произошло достаточно изменений для того, чтобы написать ещё одну статью. :) (вкратце за час можно посмотреть чего нового в докладе XaocCPS с DevCon 2015). Под катом — краткий обзор со ссылками, 10 минут прочтения которого дадут представление о том, что есть на Azure для веб-разработчика.
Читать дальше →
Total votes 21: ↑17 and ↓4 +13
Comments 0

Information

Rating
Does not participate
Location
Мытищи, Москва и Московская обл., Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer
Senior
From 500,000 ₽
TypeScript
React
MobX