Как стать автором
Поиск
Написать публикацию
Обновить
0
@JorJeGread⁠-⁠only

Пользователь

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

Сложнейшая проблема компьютерных наук: центрирование

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров37K

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:

display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого.

Ещё можно использовать сетку:

display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Также не спрашивайте, почему выражение justify-content стало justify-items.
Читать дальше →

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

Время на прочтение5 мин
Количество просмотров241K
Доброго времени суток.

Представляю вашему вниманию перевод статьи «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.
Читать дальше →

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

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

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



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


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


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

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

message.toLowerCase()

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

message()

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


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


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

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

Читать дальше →

Yum, шпаргалка

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


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

Оглавление


Команды
Опции Yum
Пакет Yum-Utils
Конфигурационные файлы
Плагины
Работа через прокси
Читать дальше →

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

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


Приятного чтения!

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

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

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

Почему?

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

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

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

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

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

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

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

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

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



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

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

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

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

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


  • Работает как с простыми изображениями, с отрисовкой на canvas, так и с html блоками — используя css трансформации
  • Довольно гибкая система конфигурации и простое API
  • Поддерживает мобильные устройства
  • Автоматическая смена ориентации между портретным и ландшафтным режимом
Читать дальше →

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

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

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


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


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

Читать дальше →

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

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

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


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


Читать дальше →

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

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


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

Читать дальше →

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

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

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


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


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


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


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

Читать дальше →

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

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

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

Углублённое изучение концептов управления памятью позволяет писать более эффективное ПО, потому как стиль и практики кодирования оказывают большое влияние на принципы выделения памяти для нужд программы.
Читать дальше →

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

Время на прочтение2 мин
Количество просмотров41K
image

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


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

Lisp 1.5 Programmers Manual

by John McCarthy, 1962

image

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

ещё восемь раритетов:
Читать дальше →

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

Время на прочтение2 мин
Количество просмотров12K
TDD уже давно не является чем-то диковинным: на хабре можно найти об этом подходе сотни статей, а каждый новичок знает, какую книгу об экстремальном программировании ему нужно прочитать.

image

Многие мои коллеги тоже используют TDD. Они добавляют тест, пишут код, рефакторят, повторяют. Процесс вроде одинаковый, но у одних он занимает одну минуту, а у других пять. И дело не в том, что вторые медленнее думают. Просто у первых есть набор хитростей, позволяющих оптимизировать работу с тестами.
Читать дальше →

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

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

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

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


Условие


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

Читать дальше →
1
23 ...

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность