Pull to refresh
0
@JorJeGread⁠-⁠only

User

Send message

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Reading time6 min
Views36K

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

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

Читать далее
Total votes 7: ↑5 and ↓2+3
Comments8

Быстрый, резкий, как пуля дерзкий. Как работать над перфомансом сайта, чтобы нравиться пользователям и Гуглу

Reading time10 min
Views10K

Привет! Меня зовут Андрей Якобчук, я ведущий фронтенд-разработчик в Muse Group. Мы постоянно работаем над ускорением клиентской части наших сайтов. К тому же Гугл с его метриками Core Web Vitals с каждым годом придаёт всё большее значение отзывчивости и стабильности интерфейса сайтов и понижает в ранжировании те, которые считает неудобными для пользователя. В статье я расскажу о том, какие подходы мы используем для измерения и мониторинга перфоманса сайтов, а также дам рекомендации, как можно улучшить ваш проект. 

Читать далее
Total votes 9: ↑7 and ↓2+5
Comments15

Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации

Reading time6 min
Views23K

В богатой экосистеме Тинькофф есть лайфстайл-сервисы. Купить билеты на различные мероприятия - в кино, театры, на концерты, спортивные события можно на https://www.tinkoff.ru/entertainment/, а также в мобильном приложении.

Меня зовут Вадим и я расскажу вам, как мы это делали в команде Развлечений в Тинькофф Банке.

Читать далее
Total votes 54: ↑54 and ↓0+54
Comments30

Обход графа: поиск в глубину и поиск в ширину простыми словами на примере JavaScript

Reading time5 min
Views202K
Доброго времени суток.

Представляю вашему вниманию перевод статьи «Algorithms on Graphs: Let’s talk Depth-First Search (DFS) and Breadth-First Search (BFS)» автора Try Khov.

Что такое обход графа?


Простыми словами, обход графа — это переход от одной его вершины к другой в поисках свойств связей этих вершин. Связи (линии, соединяющие вершины) называются направлениями, путями, гранями или ребрами графа. Вершины графа также именуются узлами.

Двумя основными алгоритмами обхода графа являются поиск в глубину (Depth-First Search, DFS) и поиск в ширину (Breadth-First Search, BFS).

Несмотря на то, что оба алгоритма используются для обхода графа, они имеют некоторые отличия. Начнем с DFS.
Читать дальше →
Total votes 12: ↑11 and ↓1+10
Comments1

Карманная книга по TypeScript. Часть 1. Основы

Reading time7 min
Views63K

Обратите внимание: для большого удобства в изучении книга была оформлена в виде прогрессивного веб-приложения.



С сегодняшнего дня мы начинаем серию публикаций адаптированного и дополненного перевода "Карманной книги по TypeScript".


Каждое значение в JavaScript при выполнении над ним каких-либо операций ведет себя определенным образом. Это может звучать несколько абстрактно, но, в качестве примера, попробуем выполнить некоторые операции над переменной message:


// Получаем доступ к свойству `toLowerCase`

// и вызываем его

message.toLowerCase()

// Вызываем `message`

message()

На первой строке мы получаем доступ к свойству toLowerCase и вызываем его. На второй строке мы пытаемся вызвать message.


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


  • Является ли переменная message вызываемой?
  • Имеет ли она свойство toLowerCase?
  • Если имеет, является ли toLowerCase вызываемым?
  • Если оба этих значения являются вызываемыми, то что они возвращают?

Ответы на эти вопросы, как правило, хранятся в нашей памяти, поэтому остается только надеяться, что мы все помним правильно.

Читать дальше →
Total votes 35: ↑30 and ↓5+25
Comments18

Yum, шпаргалка

Reading time4 min
Views741K


Шпаргалка по работе с пакетным менеджером Yum (Yellowdog Updater, Modified), который используется в популярных Linux дистрибутивах: RedHat, CentOS, Scientific Linux (и других). В целях экономии места вывод команд не представлен.

Оглавление


Команды
Опции Yum
Пакет Yum-Utils
Конфигурационные файлы
Плагины
Работа через прокси
Читать дальше →
Total votes 30: ↑25 and ↓5+20
Comments20

20 небольших, но вдохновляющих вызовов веб-разработчику

Reading time7 min
Views21K
Специально к старту нового потока курса «Frontend-разработчик» делимся переводом подборки с 20 проектами для освоения фронтенда. Эта подборка хорошо подходит, если вы хорошо знакомы с какой-то областью разработки ПО и хотите глубже копнуть во фронтенд. Также она прекрасно подходит людям, которые не хотят начинать знакомство с фронтендом со стандартных проектов. Проекты довольно небольшие, и у каждого указан уровень сложности. С помощью этих проектов вы ознакомитесь с Tone.js — обёрткой над Web Audio, освоите необычно мягкую смену темы со светлой на темную, и наоборот, а почти в конце ждёт самое вкусное — управляемая голосом векторная графика SVG.


Приятного чтения!
Total votes 42: ↑35 and ↓7+28
Comments18

Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее

Reading time8 min
Views44K

Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions. На дворе 2020 год, а мы продолжаем обсуждать «нововведения» ES6-синтаксиса и преимущества MobX над Redux. Существует много причин использовать Redux в своем проекте, но так как я не знаю ни одной, расскажу о том, почему мы выбрали MobX.

Почему?
Total votes 79: ↑75 and ↓4+71
Comments242

Кто такие шизоиды, где они обитают, и почему вам может быть полезно о них узнать

Reading time35 min
Views144K

Основные стереотипы о шизоидах в одной картинке

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

Сам этот характер довольно тяжело описать одновременно коротко и корректно. Некоторые называют их «гиками», «интровертами», «чудаками», «ботаниками», «хикканами», «эксцентричными», «нердами», «компьютерными гениями»[1, стр. 231], и все эти характеристики в той или иной мере имеют отношение к, собственно, шизоидам, но ни одна из них не является определяющей.

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

Большая часть литературы, посвящённой шизоидам, имеет клиническую направленность и описывает достаточно тяжёлые случаи шизоидизации, а в рамках этого текста я хотел бы рассказать о здоровых шизоидах, коих среди нас присутствует достаточно для того, чтобы их особенности имели значение в контексте трудовых отношений, управления и маркетинга.
Читать дальше →
Total votes 170: ↑163 and ↓7+156
Comments351

Эффект реалистичного перелистывания страниц на JS

Reading time4 min
Views25K
Представляю вашему вниманию — один из возможных вариантов реализации довольно забавного приема, для создания эффекта реалистичного перелистывания страниц.



Демо и документация
Github
Плагин для React

Подобный эффект я реализовывал данным давно, еще в университете и на Delphi. Получилось вполне достойно, правда времени я потратил тогда очень много. Сейчас, во время самоизоляции, стало интересно реализовать что-то подобное на JS, для PC и мобильных устройств.

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

Написано все на Typescript. Не использовались ни какие сторонние библиотеки. Зависимостей нет.

Ключевые особенности библиотеки


  • Работает как с простыми изображениями, с отрисовкой на canvas, так и с html блоками — используя css трансформации
  • Довольно гибкая система конфигурации и простое API
  • Поддерживает мобильные устройства
  • Автоматическая смена ориентации между портретным и ландшафтным режимом
Читать дальше →
Total votes 34: ↑31 and ↓3+28
Comments14

Перевод книги Эндрю Ына «Страсть к машинному обучению» Главы 1 — 14

Reading time24 min
Views59K

Некоторое время назад в моей ленте в фейсбуке всплыла ссылка на книгу Эндрю Ына (Andrew Ng) "Machine Learning Yearning", которую можно перевести, как "Страсть к машинному обучению" или "Жажда машинного обучения".


image<img src="<img src="https://habrastorage.org/webt/ds/rc/ct/dsrcctfottkedkf7o1hxbqsoamq.png" />" alt="image"/>


Людям, интересующимся машинным обучением или работающим в этой сфере представлять Эндрю не нужно. Для непосвященных достаточно сказать, что он является звездой мировой величины в области искусственного интеллекта. Ученый, инженер, предприниматель, один из основателей Coursera. Автор отличного курса по введению в машинное обучение и курсов, составляющих специализацию "Глубокое обучение" (Deep Learning).

Читать дальше →
Total votes 40: ↑40 and ↓0+40
Comments3

Публикуем дизайн-библиотеки компонентов VKUI в Figma

Reading time3 min
Views9.8K

Библиотеки в дизайн-инструментах — это важная часть дизайн-системы. Мы считаем, что дизайнеры должны работать с элементами, которые максимально приближены к реализации в коде. Поэтому в библиотеках мы собрали для них самые актуальные компоненты, которые отражают все те же состояния, что доступны при разработке.


На Github уже опубликован исходный код компонентов на React — следуя примеру наших разработчиков, теперь мы делимся библиотеками компонентов в Figma.


Читать дальше →
Total votes 18: ↑18 and ↓0+18
Comments5

Современный курс по Node.js в 2020

Reading time4 min
Views110K


Дорогие товарищи инженеры, сообщество Метархия представляет вашему вниманию современный курс по Node.js, который включает глубокий разбор всех возможностей и аспектов платформы. Основной упор делается на то, как создавать надежные высоконагруженные сервера приложений и API без привязки к конкретному фреймворку и даже протоколу, т.е. абстрагировать бизнес-логику в отдельный слой. К лекциям прикреплено множество примеров кода, демонстрирующих гибкую структуру приложений и архитектурные приемы, в том числе работу с СУБД через слой доступа к данным, создание интерактивных приложений на вебсокетах, обеспечение безопасности, Graceful shutdown, межпроцессовое взаимодействие, предотвращение утечек памяти, масштабирование и кластеризацию при помощи процессов и потоков. На текущий момент в курсе 38 лекций (около 35 и ½ часов видео), 37 репозиториев с примерами кода, 4 PDF со слайдами. Перед основной частью курса по Node.js нужно сначала освоить хоть частично курс по асинхронному программированию.

Читать дальше →
Total votes 40: ↑40 and ↓0+40
Comments15

Знание и состояние

Reading time6 min
Views9.2K

Сердце любого современного сайта или браузерного приложения (что SPA, что PWA, что любые другие три буквы) — это его State, или состояние.


Мы можем сколько угодно спорить о том, что лучше — React, Vue, Svelte, Angular, можем продолжать пользоваться jQuery, но в действительности это не так важно. Это та часть нашего приложения, которое мы видим — его “мышцы“ и “кожа”. Но то, как вы думаете — какими терминами оперируете, какие механики используете для даже визуализации в голове того, как в вашем приложении “текут” данные — все это идет из его скелета. Из state manager-а.


Помните, пару лет назад у нас была усталость от JavaScript-а? Сейчас я вижу у огромного количества людей усталость от state manger-ов. Redux? Да, да and да. RxJS? Тоже. MobX? Если он такой простой — блин, почему у него есть в документации страница западни.html?


Ответ “почему многим так тяжело” есть, но сначала надо точно сформулировать проблему.


Выбирая state manger — мы выбираем образ мышления. Вариантов сейчас много, но самые популярные подходы бьются на 3 группы:

Читать дальше →
Total votes 21: ↑20 and ↓1+19
Comments9

Разбираемся с управлением памятью в современных языках программирования

Reading time7 min
Views61K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Demystifying memory management in modern programming languages» за авторством Deepu K Sasidharan.

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

Углублённое изучение концептов управления памятью позволяет писать более эффективное ПО, потому как стиль и практики кодирования оказывают большое влияние на принципы выделения памяти для нужд программы.
Читать дальше →
Total votes 27: ↑24 and ↓3+21
Comments23

Что такое grep и с чем его едят

Reading time6 min
Views657K
Эта заметка навеяна мелькавшими последнее время на хабре постами двух тематик — «интересные команды unix» и «как я подбирал программиста». И описываемые там команды, конечно, местами интересные, но редко практически полезные, а выясняется, что реально полезным инструментарием мы пользоваться и не умеем.
Небольшое лирическое отступление:
Года три назад меня попросили провести собеседование с претендентами на должность unix-сисадмина. На двух крупнейших на тот момент фриланс-биржах на вакансию откликнулись восемь претендентов, двое из которых входили в ТОП-5 рейтинга этих бирж. Я никогда не требую от админов знания наизусть конфигов и считаю, что нужный софт всегда освоится, если есть желание читать, логика в действиях и умение правильно пользоваться инструментарием системы. Посему для начала претендентам были даны две задачки, примерно такого плана:
— поместить задание в крон, которое будет выполняться в каждый чётный час и в 3 часа;
— распечатать из файла /var/run/dmesg.boot информацию о процессоре.

К моему удивлению никто из претендентов с обоими вопросами не справился. Двое, в принципе, не знали о существовании grep.

image

Поэтому… Лето… Пятница… Перед шашлыками немного поговорим о grep.
Читать дальше →
Total votes 188: ↑174 and ↓14+160
Comments144

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

Reading time2 min
Views41K
image

Алан Кей — это магистр Йода для ИТишников. Он стоял у истоков создания первого персонального компьютера (Xerox Alto), языка SmallTalk и концепции «объектно-ориентированного программирования». Он уже много высказывался о своем взгляде на образование в сфере Computer Science и советовал книги тем, кто хочет углубить свои познания:


Недавно на Quora опять подняли эту тему и обсуждение вышло на первое место на Hacker News. Предлагаю вашему вниманию «новый» список суперстарых и фундаментальных книг по программированию и мышлению программиста от Алана Кея.

Lisp 1.5 Programmers Manual

by John McCarthy, 1962

image

Книга — абсолютный чемпион и пожизненный лидер рейтинга всех списков книг от Алана Кея. Этой версии языка уже нет, но книга — великолепна.

ещё восемь раритетов:
Читать дальше →
Total votes 37: ↑35 and ↓2+33
Comments74

Собираем окружение для современного TDD на JavaScript + VS code

Reading time2 min
Views12K
TDD уже давно не является чем-то диковинным: на хабре можно найти об этом подходе сотни статей, а каждый новичок знает, какую книгу об экстремальном программировании ему нужно прочитать.

image

Многие мои коллеги тоже используют TDD. Они добавляют тест, пишут код, рефакторят, повторяют. Процесс вроде одинаковый, но у одних он занимает одну минуту, а у других пять. И дело не в том, что вторые медленнее думают. Просто у первых есть набор хитростей, позволяющих оптимизировать работу с тестами.
Читать дальше →
Total votes 30: ↑27 and ↓3+24
Comments5

Чемпионат по программированию: разбираем задачи для фронтенд-разработчиков

Reading time12 min
Views36K
На днях победители чемпионата по программированию, который завершился в начале лета, получили заслуженные призы. Для этого мы позвали их, а также всех остальных финалистов из топ-20 каждого направления в московский офис Яндекса. Ещё раз поздравляем тех, кто сумел выйти в финал.

Тем временем мы подготовили разбор задач чемпионата, которые предлагались фронтенд-разработчикам. Это задачи из квалификационного этапа. Напоминаем, что чемпионат проводился по четырём направлениям: бэкенд, фронтенд, машинное обучение и аналитика.

A. Градусник пробок


Условие


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

Читать дальше →
Total votes 32: ↑30 and ↓2+28
Comments1
1
23 ...

Information

Rating
Does not participate
Registered
Activity