Articles / Bookmarks / Profile of yevgen12 / Habr

@yevgen12

User

Profile Articles 5Posts News Comments 106

pewpew Mar 9 2018 at 11:52

Как написать одностраничное приложение (SPA) с использованием Vue.js

7 min

131K

JavaScript*VueJS*Programming*Website development*

Tutorial

Recovery Mode

Одностраничные приложения (SPA) имеют мнжество преимуществ, таких как скорость, по-настоящему хороший UX, и полный контроль HTML-разметки. Становится всё больше и больше сайтов SPA; всё больше инструментов, которые упрощают процесс разработки SPA. Вы, вероятно уже читали о молодом и перспективном фреймворке Vue.js. Предлагаю вам глубже погрузиться в Vue и на конкретном примере разобраться с простым SPA.

Мы напишем клиент-серверное приложение простейшего блога. Приложение будет отображать список записей а также полный текст каждой отдельной записи. И само собой, всё это будет происходить без перезагрузки страницы.

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

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

+13

Piroru Dec 21 2020 at 14:23

Что нужно знать о популярных JS-фреймворках

22 min

84K

Яндекс Практикум corporate blogJavaScript*ReactJS*SvelteJS*Website development*

Привет! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс.Практикума, Head of Group, Front-end, ABBYY.

Студенты недавно задали мне вопрос: «Что лучше: Angular или React?». Я начал отвечать и понял, что мне понадобится для этого статья. Позже я понял, что и одной статьи не хватит.

О том, какой фреймворк выбрать, я расскажу в другой раз. А в этой статье опишу историю создания фреймворков и их особенности. Выбрать рабочий инструмент статья не поможет. Зато поможет вести споры с другими разработчиками на кухне (если не будет карантина) и в сети. Статья будет полезна новичкам, которые только начинают своё знакомство с фреймворками и библиотеками, и поможет взглянуть на «зоопарк» веб-технологий сверху.

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

+56

113

forgotten Dec 21 2020 at 15:12

Постановка проблемы обратной совместимости

8 min

11K

Designing and refactoring*API*

Как обычно, дадим смысловой определение «обратной совместимости», прежде чем начинать изложение.

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

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

aio350 Sep 9 2020 at 12:42

JavaScript: полное руководство по классам

10 min

102K

JavaScript*Programming*Website development*

Translation

Доброго времени суток, друзья!

В JavaScript используется модель прототипного наследования: каждый объект наследует поля (свойства) и методы объекта-прототипа.

Классов, используемых в Java или Swift в качестве шаблонов или схем для создания объектов, в JavaScript не существует. В прототипном наследовании есть только объекты.

Прототипное наследование может имитировать классическую модель наследования от классов. Для этого в ES6 было представлено ключевое слово class: синтаксический сахар для прототипного наследования.

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

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

cnchub Dec 18 2020 at 17:56

«Летающая табуретка» или идеальный квадрокоптер для перевозки пиццы

5 min

6.1K

Robotics development*MulticoptersThe future is hereMatlab*DIY

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

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

Мы приняли решение построить прототип, на котором сможем попытаться сымитировать динамику и принципы управления, которые необходимы нашему конвертоплану.

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

+17

thenonsense Dec 18 2020 at 19:04

Биом, демоверсия игры на Godot

4 min

6.5K

Godot*Prototyping*Game development*

Собрал небольшую демку для win и linux. Этот экспериментальный прототип фокусируется на игре с видом сверху, и реализации системы бесконечного уровня в движке Godot. Биомашинки в комплекте.

+16

MomoDev Dec 19 2020 at 15:38

Пишем простой Path Tracer на старом добром GLSL

18 min

19K

Game development*Working with 3D-graphics*C++*Programming*

Tutorial

На волне ажиотажа вокруг новых карточек от Nvidia с поддержкой RTX, я, сканируя хабр в поисках интересных статей, с удивлением обнаружил, что такая тема, как трассировка путей, здесь практически не освящена. "Так дело не пойдет" - сказал я и решил, что неплохо бы запилить что-нибудь небольшое из этой темы, да и так, чтобы другим полезно было. Тут как кстати API собственного движка нужно было протестировать, поэтому решил - запилю-ка я свой простенький path-tracer прямо во фрагментном шейдере. Что из этого вышло, думаю вы уже догадались по превью к этой статье

+70

DmitrySpb79 Dec 19 2020 at 16:50

Хабрарейтинг 2020: статистика и рейтинг лучших статей за 2020 год

9 min

29K

System Analysis and Design*Web analytics*Data visualization*Popular scienceSocial networks and communities

Привет, Хабр.

Заканчивается 2020 год, а значит, настало время подвести статистические итоги и составить уже традиционный рейтинг лучших статей Хабра за этот год. Этот рейтинг не является официальным, данные собираются парсером с помощью Python. Сортируя данные по тем или иным параметрам, можно получать разные выборки, что на мой взгляд, даёт довольно неплохие результаты. Для читателей также может быть интересно перечитать какие-то статьи, которые они пропустили в течении года.

Поехали.

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

+95

GaussBreaker Dec 19 2020 at 21:16

Интуитивное объяснение интеграла. Часть I — от умножения натуральных чисел до Ньютона и Лейбница

10 min

63K

Mathematics*Popular science

From sandbox

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

+16

PatientZero Oct 19 2018 at 08:12

Доступно о кватернионах и их преимуществах

13 min

236K

Mathematics*Working with 3D-graphics*Game development*

Translation

От переводчика: ровно 175 лет и 3 дня назад были изобретены кватернионы. В честь этой круглой даты я решил подобрать материал, объясняющий эту концепцию понятным языком.

Концепция кватернионов была придумана ирландским математиком сэром Уильямом Роуэном Гамильтоном в понедельник 16 октября 1843 года в Дублине, Ирландия. Гамильтон со своей женой шёл в Ирландскую королевскую академию, и переходя через Королевский канал по мосту Брум Бридж, он сделал потрясающее открытие, которое сразу же нацарапал на камне моста.

$display$

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

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

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

+83

BasmanovDaniil Jun 20 2013 at 13:47

Кручу-верчу, запутать хочу: углы Эйлера и Gimbal lock

3 min

130K

Unity3D*Algorithms*Game development*

Выставите любой палец левой руки вперед. Давайте, не стесняйтесь, никто не будет над вами смеяться. Это нужно для важного эксперимента. Выставили? Теперь представьте что вы — это ваш палец (ну и бред). Повернитесь под прямым углом направо, затем наверх, и наконец налево. Где вы оказались? Правильно, в том же месте, но уже на спине.

С некоторой натяжкой именно так работает вращение с помощью углов Эйлера. Немного непредсказуемо и неудобно, не правда ли? Углы Эйлера имеют несколько недостатков, но есть одно особенно нехорошее свойство из-за которого вы не захотите с ними связываться. Его имя — Gimbal lock.

В русском языке gimbal lock называют по-разному: шарнирный замок, блокировка осей, складывание рамок. К сожалению, по запросам в поисковике с такими ключевыми словами выдаётся много мусора, а статья в Википедии оставляет желать лучшего, поэтому я сам расскажу вам об этом феномене и предложу как с ним бороться.

Внимание! Заходя под кат вы подвергаетесь риску поломать голову.

Ха! Я ничего не боюсь! Где этот gimbal lock?

+53

Vasilui Jun 4 2014 at 12:45

Изучаем Three.js.Глава 2: Работа с основными компонентами, из которых состоитThree.js-сцена

18 min

53K

JavaScript*API*WebGL*

Tutorial

Translation

Всем привет!
В предыдущей главе мы познакомились с основами бибилиотекиThree.js. Увидели несколько примеров и создали свою первую полноценную Three.js сцену. В этой главе мы немного глубже углубимся в эту библиотеку и попробуем более подробно объяснить основные компоненты, составляющие Three.js сцену. В этой главе вы узнаете о следующем:

какие компоненты используются в Three.js сцене
что можно делать с объектом THREE.Scene()
какая разница между ортогональной и перспективной камерами

Начнем мы с того, что посмотрим, как же можно создать сцену и добавить на нее объекты.

Становится все интересней и интересней...

+20

Zander_ZBH Jan 14 2019 at 10:13

Three.js — делаем controls для космосима или планетария

17 min

11K

JavaScript*WebGL*Game development*

From sandbox

Разрабатывая свой проект на тему космоса, столкнулся с тем что в three.js почему-то нет готового и удобного инструмента управления камерой, подходящего под такие задачи. Конечно я допускаю что просто плохо искал… Но, довольно продолжительный поиск результатов не дал.

OrbitControls — традиционный любимец примеров three.js, не умеет переворачивать камеру вверх ногами, и много разного другого нужного, тоже не умеет.

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

FlyControls — напротив, позволяет делать «бочку» и менять скорость, но… куда же делось вращение камеры вокруг рассматриваемого объекта.

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

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

+13

VitaliSergey Mar 30 2020 at 16:31

Введение в 3D: основы Three.js

8 min

102K

JavaScript*WebGL*Working with 3D-graphics*

Tutorial

Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.

sfi0zy Sep 22 2020 at 12:06

Математика верстальщику не нужна 2: Матрицы, базовые трансформации, построение 3D и фильтры для картинок

19 min

17K

JavaScript*Mathematics*Website development*

Tutorial

В прошлый раз мы говорили о графиках и траекториях для покадровых анимаций, а сегодня речь пойдет про матрицы. Мы разберемся с тем, как строятся базовые трансформации в CSS, SVG и WebGL, построим отображение 3D-мира на экране своими руками, попутно проводя параллель с таким инструментом, как Three.js, а также поэкспериментируем с фильтрами для фотографий и разберемся, что же за магия такая лежит в их основе.

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

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

+16

skillfactory_school Nov 10 2020 at 18:28

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

7 min

21K

Skillfactory corporate blogCSS*HTML*JavaScript*Website development*

Translation

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

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

+28

Old_tutor Nov 28 2020 at 15:50

Как интроверту найти друзей: используем алгоритмы Facebook

4 min

4.9K

Lifehacks for geeksPopular scienceSocial networks and communitiesReading room

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

Соцсети собирают и хранят о нас всевозможную информацию: сайты, которые мы посещаем, данные о поисковых запросах, деиндивидуализированные данные из переписок. Во множество сайтов встроены трекеры Facebook, Twitter, «ВКонтакте». Эти трекеры наблюдают за нашими действиями, чтобы, например, точнее таргетировать рекламу. Но применяются полученные результаты не только для рекламы. Одна из их функций — обнаружение схожих черт между пользователями соцсетей.

Соцсети — часть больших экосистем. Например, «ВКонтакте» и «Одноклассники» находятся в составе Mail.ru Group, а Instagram и WhatsApp принадлежат Facebook. Это значит, что количество собираемых ими данных огромно. Такой массив информации позволяет группировать пользователей в виде графа, где дистанция между ними определяется объединяющими факторами, которые обладают разным «весом».

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

+16

editor_ruvds Nov 28 2020 at 12:15

Как писать статьи в IT-журналы и блоги

17 min

10K

RUVDS.com corporate blogReading roomDisplay advertising*IT careerBiography of geeks

Недавно на нашем ютуб-канале выступил Андрей Письменный, главный редактор Xakep.ru.

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

В этом выступлении он поделится с вами опытом и приемами, которые пригодятся в работе с текстом о технологиях.

Делимся записью эфира и расшифровкой.

+25

TiunovIgor Nov 12 2020 at 19:13

Разработка круговых интерфейсов. Часть 2. Перенос библиотеки с JavaScript на QML

8 min

Interfaces*Graphic design*Qt*JavaScript*

Введение

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

Во-первых, вышла вторая версия библиотеки на JavaScript, в которой реализованы круговые элементы управления.

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

+13

TiunovIgor Jun 17 2020 at 11:03

Разработка круговых интерфейсов

10 min

5.5K

JavaScript*Graphic design*Interfaces*

From sandbox

Введение
Классификация круговых интерфейсов
Принципы проектирования кругового интерфейса
Основы анимации кругового интерфейса
Библиотека классов на JavaScript для реализации круговых интерфейсов

Введение

Круговой интерфейс – это графический интерфейс, элементы которого имеют круглую форму, расположены или анимированы по круговой траектории.

Сложный круговой интерфейс преимущественно состоит из нескольких круговых элементов, имеющих единый центр.
На рисунке 1 представлены примеры абстрактного кругового интерфейса.

Рис. 1 – Примеры круговых интерфейсов

Круговые интерфейсы могут применяться с целью:

разнообразить дизайн проекта или продукта;
обеспечить компактность при визуализации информации;
получить цифровой аналог реальных интерфейсов управления или измерительных приборов.

Данная статья посвящена ключевым аспектам процесса разработки круговых интерфейсов, а именно их классификации, принципам проектирования, основам анимации, а также реализации круговых интерфейсов на JavaScript с помощью специализированной библиотеки классов.

Как написать одностраничное приложение (SPA) с использованием Vue.js

Что нужно знать о популярных JS-фреймворках

Постановка проблемы обратной совместимости

JavaScript: полное руководство по классам

«Летающая табуретка» или идеальный квадрокоптер для перевозки пиццы

Биом, демоверсия игры на Godot

Пишем простой Path Tracer на старом добром GLSL

Хабрарейтинг 2020: статистика и рейтинг лучших статей за 2020 год

Интуитивное объяснение интеграла. Часть I — от умножения натуральных чисел до Ньютона и Лейбница

Доступно о кватернионах и их преимуществах

Кручу-верчу, запутать хочу: углы Эйлера и Gimbal lock

Изучаем Three.js.Глава 2: Работа с основными компонентами, из которых состоитThree.js-сцена

Three.js — делаем controls для космосима или планетария

Введение в 3D: основы Three.js

Математика верстальщику не нужна 2: Матрицы, базовые трансформации, построение 3D и фильтры для картинок

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

Как интроверту найти друзей: используем алгоритмы Facebook

Как писать статьи в IT-журналы и блоги

Разработка круговых интерфейсов. Часть 2. Перенос библиотеки с JavaScript на QML

Оглавление

Введение

Разработка круговых интерфейсов

Оглавление

Введение

Information