Pull to refresh
21
1.6
Send message

Деплоим сайт в облако за рубль в месяц

Reading time10 min
Views13K

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

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

Привет, Хабр! Меня зовут Саша, в этой статье я расскажу, как задеплоить в облако статический веб-сайт с помощью объектного хранилища стоимостью около 1₽/мес. А также — настроить красивый домен. Подробности под катом.
Читать дальше →
Total votes 46: ↑46 and ↓0+46
Comments37

Анимация в браузерах и как с ней работать

Level of difficultyMedium
Reading time10 min
Views4.9K

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

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

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

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

Вороной, Манхэттен, рандом

Level of difficultyEasy
Reading time34 min
Views16K

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

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

Осторожно, очень много картинок!

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

Tinder ушёл… да здравствует $hyoo_match

Level of difficultyEasy
Reading time6 min
Views69K

Здравствуйте, меня зовут Дмитрий Карловский и недавно у меня случился тиндергейт. Но вот беда, Match Group уходит из России, забирая с собой Tinder. С чего же нам теперь кринжевать? Но, как известно, свято место пусто не бывает, так что я запилил свой дейтинг без геймификации и монетизации:

🔥 Tinder ушёл... встречай  match.hyoo.ru - сервис знакомств, которому выгодно, чтобы ты нашёл себе пару и свалил в закат.
Никаких фейков, мёртвых душ, рекламы и вымогательства денег. Поделись с друзьями - пусть тоже найдут свою половинку 💞

Далее будет небольшой обзор индустрии дейтинга и рассказ о том, чем $hyoo_match принципиально отличается от всего этого дерьма.

Найти, наконец, свою половинку
Total votes 187: ↑141 and ↓46+95
Comments605

Собеседование на позицию Data Scientist: 20 типичных вопросов

Reading time7 min
Views47K

Проверка знаний на собеседованиях — обычная практика. И мы сейчас не о глупых «Где вы видите себя через 5 лет?», а о нормальных вопросах по специальности. Специально к старту нового потока курса Data Scientist, в этой статье мы собрали топ-20 вопросов, которые задают дата-сайентистам, чтобы проверить их уровень знаний. Все это реальные вопросы на реальных собеседованиях в российских компаниях. Но нас попросили не упоминать названия, чтобы не давать соискателям лишнего преимущества. Некоторые вопросы простые, другие — посложнее. Не будем затягивать, поехали.

Читать далее
Total votes 16: ↑13 and ↓3+10
Comments4

10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

Reading time3 min
Views97K

Кроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного


Я собрал список из десяти отличных репозиториев на Github, которые помогут вам существенно расширить свои знания.


image


А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
Читать дальше →
Total votes 76: ↑69 and ↓7+62
Comments8

Туториал по Unreal Engine. Часть 10: Как создать простой FPS

Reading time12 min
Views135K
image

Шутер от первого лица (first-person shooter, FPS) — это жанр, в котором игрок использует оружие и смотрит на мир глазами персонажа. FPS-игры чрезвычайно популярны, что видно по успеху таких франшиз, как Call of Duty и Battlefield.

Unreal Engine изначально был создан для разработки FPS, поэтому вполне логично использовать его для создания такой игры. В этом туториале вы научитесь следующему:

  • Создавать Pawn с видом от первого лица, который сможет двигаться и осматриваться вокруг
  • Создавать оружие и привязывать его к Pawn игрока
  • Стрелять пулями с помощью трассировки прямых (также известной как трассировка лучей)
  • Наносить урон акторам
Читать дальше →
Total votes 21: ↑21 and ↓0+21
Comments6

Создание красивых процедурных зданий с помощью Blueprint

Reading time6 min
Views10K

Введение


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

Это здание было создано всего из одного модуля, автоматически скопированного в Construction Blueprint. Идея заключается в том, чтобы материал не требовал практически никакого ввода данных вручную. Для всего здания используется только один материал (за исключением окон). Его функции используют для управления рандомизацией цвета вершин и позиции пикселей в мировом пространстве.


Единственный модуль — всё, что нам нужно


Никакого размещения вручную или скриптами. Вся рандомизация выполняется в материале

Описываемый в этом туториале материал:

  • Имеет слой зависящей от высоты грязи, которая покрывает объект только до указанной абсолютной высоты
  • Выбирает цвет объектов для каждого этажа и сегмента случайным образом
  • Немного смещает позиции мелких объектов, тоже случайным образом
  • Позволяет пользователю выбрать 2 цвета для стен, а также величину их разрушенности

Total votes 11: ↑11 and ↓0+11
Comments3

Текстурирование, или что нужно знать, чтобы стать Художником по поверхностям. Часть 3. PBR и материалы

Reading time13 min
Views83K
В прошлой части тутора мы разобрали принцип работы масок, что такое «текстура», и что абсолютно для всего используются каналы — параметры пикселя. Теперь рассмотрим всеми любимый PBR И соберем текстуры для создания мокрого грязного асфальта.

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

Также, если что-то совсем будет не понятно — очень прошу сообщить об этом, чтобы я мог раскрыть эту тему более подробно.

Часть 1. Пиксель здесь
Часть 2. Маски и текстуры здесь
Часть 3. PBR и Материалы — вы ее читаете.
Часть 4. Модели, нормали и развертка здесь.
Часть 5. Система материалов здесь.

Читать дальше →
Total votes 13: ↑12 and ↓1+11
Comments14

Профессиональная деформация дата саентистов

Reading time14 min
Views36K


“Если в ваших руках молоток, все вокруг кажется гвоздями”


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

Давайте посмотрим.
Total votes 81: ↑72 and ↓9+63
Comments36

Псевдослучайность нам поможет: подборка инструментов генерации ассетов для игры

Reading time3 min
Views7.2K

Отгремели выстрелы минувшего Ludum Dare 44, но тяга делать игры, оттачивать свое мастерство ещё не покидает меня, да и думаю многих. Проглядывая главную страницу онлайн-мероприятия, я наткнулся на интереснейший пост, где автор задался вопросом составления инструментария, помогающего разработчикам (командам) создавать свои игровые шедевры. В статье автор задался целью собрать в один список набор инструментов, псевдо-случайным образом генерирующих различные ресурсы для вашей игры, начиная от фиксированной палитры цветов, заканчивая простейшей chiptune-like фоновой музыкой и спрайтами персонажей.


Заставка случайной игры на LD 44


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

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

Svelte 3: Переосмысление реактивности

Reading time4 min
Views31K
Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.


Читать дальше →
Total votes 27: ↑25 and ↓2+23
Comments288

Thinking with Portals: создаём порталы в Unreal Engine 4

Reading time32 min
Views19K
image

В этой статье я расскажу, как создавать порталы в Unreal Engine 4. Я не нашёл никаких источников, подробно описывающих такую систему (наблюдение сквозь порталы и проход через них), поэтому решил написать собственную.

Что такое портал?


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

Примеры порталов в играх (GIF)


Antichamber (2013 год) и Portal (2007 год)


Prey, 2006 год

Из трёх игр самой известной, вероятно, является Portal, однако лично меня всегда восхищала Prey и именно её я мечтал скопировать. Однажды я попробовал реализовать собственную версию в Unreal Engine 4, но не особо преуспел, потому что в движке не хватало функционала. Тем не менее, мне удалось провести вот такие эксперименты:


Однако только в новых версиях Unreal Engine мне наконец-то удалось добиться нужного эффекта:

Total votes 33: ↑31 and ↓2+29
Comments13

Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

Reading time5 min
Views14K
Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.
Читать дальше →
Total votes 29: ↑28 and ↓1+27
Comments11

Английский для собеседований в IT-компании: что нужно для старта карьеры?

Reading time6 min
Views156K

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


Читать дальше →
Total votes 45: ↑40 and ↓5+35
Comments33

Что выгоднее открыть разработчику: ИП или ООО? Небольшой Чек Лист

Reading time9 min
Views61K


Традиционный вопрос фрилансеров-разработчиков при расширении (легализации) своей деятельности – что выбрать между ИП и ООО? Признавая важность темы, хочу сказать, что несмотря на особенности этих организационно-правовых форм, их нельзя назвать ключевыми для достижения желаемого результата. Главное в любом бизнесе всё-таки та ценность, которую вы создаёте для потребителей, и умение её донести. 


Зачем вообще разработчику создавать ООО или регистрироваться в качестве ИП?

Читать дальше →
Total votes 51: ↑44 and ↓7+37
Comments172

Практические советы по повышению производительности HTML и JavaScript

Reading time2 min
Views31K


Тема улучшения производительности сайтов и приложений всегда должна находиться на радаре у хорошего веб-разработчика. В одних случаях грамотная работа позволяет сэкономить вычислительные ресурсы, в других — сильно улучшить опыт работы с приложениями для всей аудитории пользователей, как это на днях случилось с Wikipedia. А часто и все сразу.

Скорость работы веб-приложений условно зависит от трех составляющих: 1) как устроена сетевая инфраструктура, через которую доставляются данные и код, 2) как работает браузер и 3) как, собственно говоря, написан ваш код, который браузер должен исполнять.

Все три компоненты постоянно улучшаются и оптимизируются. Например, в сетевом стеке определенные общие улучшения несет переход на HTTP 2.0. С точки зрения браузеров, все производители постоянно работают над улучшением своих движков. В случае Chakra в Microsoft Edge, помимо общего повышения производительности работы с JavaScript, мы добавляем поддержку специализированных средств вроде Asm.js и SIMD.js, призванных повысить эффективность кода в специфичных сценариях (в Firefox и Google Chrome — аналогично).

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

Наши коллеги Дорис Чен и Джон-Дэвид Далтон подготовили целый курс с практическими советами по улучшению производительности вашего кода на HTML и JavaScript. Вы можете посмотреть его на соответствующей странице в Microsoft Virtual Academy или под катом в виде отдельных роликов.

Читать дальше →
Total votes 21: ↑15 and ↓6+9
Comments1

Три принципа производительности в JavaScript, делающие Bluebird быстрым

Reading time7 min
Views17K

Компания Reaktor поделилась в своём блоге принципами и примерами оптимизации JavaScript-кода, применёнными в библиотеке промисов Bluebird, созданной их сотрудником Petka Antonov (Петкой Антоновым).

Читать дальше →
Total votes 48: ↑46 and ↓2+44
Comments3

300 потрясающих бесплатных сервисов

Reading time11 min
Views1.6M


Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly.com Domain: Конструктор веб-сайтов.
  • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
  • Withoomph: Мгновенное создание логотипов (англ.).
  • Hipster Logo Generator: Генератор хипстерских логотипов.
  • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
  • Invoice to me: Бесплатный генератор счета.
  • Free Invoice Generator: Альтернативный бесплатный генератор счета.
  • Slimvoice: Невероятно простой счет.

Читать дальше →
Total votes 341: ↑325 and ↓16+309
Comments107

40 туториалов для создания векторных иллюстраций

Reading time6 min
Views248K
В посте собрана подборка обучающих уроков по созданию векторной графики. На мой взгляд большинство материалов покажутся интересными для новичков только начинающих постигать векторное искусство. Но думаю, что специалисты также смогут найти для себя полезные уроки.

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

Итак, поехали:

Приступая к работе


1. Изучение векторной иллюстрации за 10 шагов



В этом уроке объясняется, каким образом создавать векторные иллюстрации используя Adobe Illustrator. Приводится объяснение ключевых параметров и инструментов, которое дополняется советами экспертов.

Читать дальше →
Total votes 36: ↑35 and ↓1+34
Comments8

Information

Rating
1,168-th
Registered
Activity