Программирование, т. 7

Бтв в чем плюс юзать ref={}? раз уж разговор пошел

Вот так читаешь телегу с js а там кроме слов angular , redux нет низуя и суез чисто из другого мира с его йода анимацией

еееееееееееее vuejs, ууууууу

Бтв в чем плюс юзать ref={}? раз уж разговор пошел

Реальных плюсов почти нет. Поначалу даже жопа горела, но потом привык. Ну приятно что можно делать реф ссылку на любой кусок и обращаться к нему напрямую в любом месте, получая дом ноду, вместо того чтобы каждый раз писать ReactDOM.findDOMNode(this).querySelector('.hui'). Но в тоже самое время каждый раз когда хочется обратиться к компоненту надо быть уверенным что есть ref ссылка на него. В общем реф это более такой декларативный подход, который является как бы основой реакта (в то время как findDOMNode это больше в сторону старых добрых jQuery).

Вот так читаешь телегу с js а там кроме слов angular , redux нет низуя и суез чисто из другого мира с его йода анимацией

Если взять десяток дефолтных мидл-сеньер разрабов с 3-5 годами опыта (и базовыми пруфами того что они не верблюды), то почти все они будут легкозаменимы друг другом. Ну сидит чел, ну пилит интерфейс с кучей компонентов, подключает API и так далее. Почти все сложности сводятся к тому чтобы не сойти с ума с иерархией кучи компонентов и их взаимосвязями. Почти все компоненты что они пилят по сути дела примитивны. Получаем данные из пропсов (от родителей или контейнера с апи), отображаем данные в декларативном шаблоне рендера, присобачиваем пару-тройку простеньких handler'ов для переключения флагов, чтобы где-то что-то менялось в интерфейсе, и бац, у тебя готов йоба интерфейс! Это по сути дела та же верстка сайтов, но на 1 уровень выше, когда тебе каждый компонент еще приходится снабжать простенькой жс логикой. В итоге если отбросить в сторону тему с взаимосвязями (где начинается вся эта вакханалия с редаксами и подобным трешем), то реального скилла для всего этого не требуется. В 98% случаев у тебя никогда не будет такого количества данных, чтобы твоя страница начала помирать из-за того что ты где-то что-то не оптимизировал на фронтенде допустим.

А вот как дело доходит до чего-то нетривиального (анимации, хитровыебанные лэйауты требущие вылизанного css, всякие там сложные чарты, мудреные интеракции где какие-то действия могут триггерить кучу других вещей) то внезапно 9/10 таких разрабов садятся в лужу, ибо на "сухих" знаниях тут не выехать. Не важно насколько ты умен и сколько книг ты прочитал, если ты не потратил сотен жопочасов страдая с анимациями/сложным css/d3 чартами, то хуй у тебя чего получится.

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

буквально вчера узнал что 

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

https://jsfiddle.net/pmey7syk/1/

буквально вчера узнал что 

 

Math.floor(index / this.state.itemsInGridRow) === Math.trunc(index / this.state.itemsInGridRow) 

 

Лолнет

Floor до нижнего значения (причем без учета модуля)

Trunc именно убирает все после точки

ля, так вот в чем разница. Я был уверен что убрать все знаки после точки => сделать меньшее целое

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

 

suez, какие шаги нужно предпринять чтобы тоже так бацать?( мб есть какие советиусы

SHAG VLEVO SHAG VPRAVO - RASSTREL

нужно тупо сидеть хуярить вещи

не понимаешь как - садишься и изучаешь (и думаешь головой заодно что и как изучать)

 

Нужна паста вроде "завтра ищешь в интернете книжку..."

"...dive into 1c"

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

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

"...dive into 1c"

Завтра ищешь в интернете книжку Dive into 1C:Enterprise. Похуй если ничего не поймешь. Затем оплачиваешь подписку ИТС, идешь наhttps://users.v8.1c.ru/ и изучаешь библиотеку стандартных подсистем от корки до корки. Потом зубришь, именно, сука, вызубриваешь конвертацию данных, чтобы от зубов отскакивало. Когда создашь свою первую базу, по пути изучив бухгалтерский учет, управленический учет, регламентированый учет, налоговый учет, финансовый учет, зарплату и управление персоналом, бюджет муниципального образования, бюджет поселения, экономику предприятия, бухгалтерию автономного учреждения, бухгалтерию бюджетного учреждения, бухгалтерию государственного учреждения, бухгалтерию сельскохозяйственного предприятия, бухгалтерию строительной организации, бухгалтерию элеватора и комбикормового завода, ERP и CRM, скачиваешь и устанавливешь любой сервер баз данных, рекомендую MS SQL. Как переделаешь базу, чтобы выдавала по крайней мере 5 запросов в секунду, можешь идти дальше - тебя ждет увлекательный мир хайлоада. Оборотно-сальдовые ведомости, счета учета расчетов с поставщиками, расчет начисленных и уплаченных страховых взносов на обязательное пенсионное страхование застрахованных лиц и страховом стаже застрахованного лица. Отсос хиккующих выблядков / просто неудачников типа пхп или сисярп/джава-хуесосов, которые сосут хуй по жизни не заставит себя ждать и уже через пол года ты будешь получать такие суммы, что любой бухгалтер будет течь при заполнении твоей справки 2-НДФЛ.

 

 

Весь js код для этого реордеринга уложился в ~90 строчек. Причем половина кода делает построение клона сетки, где все элементы расположены с position absolute и расставлены с помощью transform: translate, чтобы потом можно было просто поменять эти самые координаты транслейта и элементы сдвинутся с css анимацией без какого-либо геморроя.

Самая интересная часть была с тем, чтобы детектить что передвигаемый блок находится в рамках хитбокса одной из зон. То есть я не делал 2d Collision Detection, сравнивания циферки этого блока со всеми остальными (ибо пиздец затратно), вместо этого я вначале написал функцию, которая на основе индекса элемента (и переменной itemsInGridRow) определяла где этот самый элемент должен был находится, и затем я тупо написал функцию, которая делала все с обратной логикой (ну там понятное дело не настолько все прямолинейно, но оказалось просто пиздец как легко).

Вот собственно эти 2 метода (код я еще не рефакторил, завтра буду этим заниматься):

  calcItemAbsPosition = (index) => {
    const { width, height } = this.firstPreviewRect;
    const x = (width + this.previewSideGap) * (index % this.state.itemsInGridRow);
    const y = (height + this.previewVertGap) * Math.floor(index / this.state.itemsInGridRow);
    return { x, y };
  }

  determineDraggedIndex = (x, y) => {
    const { width, height } = this.draggedPreviewRect;
    const halfW = width / 2;
    const halfH = height / 2;
    /* eslint-disable */
    if (x < (halfW * -1) - 1 ||
        x > this.itemsRect.width + (halfW) + 1 - width ||
        y < (halfH * -1) - 1 ||
        y > this.itemsRect.height + halfH + 1 - height) {
      return;
    }
    const xIndex = Math.round(x / (width + this.previewSideGap));
    const yIndex = Math.round(y / (height + this.previewVertGap)) * this.state.itemsInGridRow;
    return xIndex + yIndex;
  }

бля нехуя тема

 

напомни у тебя какая зарплата щас? 

Долго пилил? много кода вышло?

 

бля просто охуеть круто

5500 сгд, 237к дерева по текущему курсу (правда бессмысленно конвертировать, но привычку не побороть)

Сегодня в 3 часа дня сел пилить, в 6.45 все было готово (это я еще 2 раза ходил пожрать между делом).

Большую часть времени убил на расстановку элементов, вылизывание css чтобы все отображалось как надо во всех возможных сценариях + наверное 30-60 минут тупо сидел и думал как это все сделать, пока не дошло что надо пилить реверс-функцию, и когда её запилил то ахуел от того, насколько это просто было.

 

Года два назад писал на c++ свою копию игры Hearthstone, тоже поебался немного с подобной историей. Там необходимо было карты в руке и на столе располагать на определённой позиции, которая в свою очередь зависит от 1) положения карты среди других карт 2) от количества карт. Причём они должны не телепортироваться туда, а спокойно сдвигаться. В итоге придумал концепцию "желаемых xy координат" у каждой карты и захуячил вот это:

wantedX=(SCREEN_WIDTH/2)-60+25*i-25*(playerCardsCurrent-i+1); для карт в руке

wantedX=(SCREEN_WIDTH/2+45)+55*i-55*(playerTableCurrent-i+1); для карт на столе

И каждый игровой цикл карта смещалась на небольшое расстояние в сторону своего желания

Сейчас я уже не вспомню, на основе чего я рассчитывал эти цифры, но это работало  

Так все и делают, на сколько двигать каждый тик считают от tick delta через lerp. Карты двигающиеся куда надо это строк 100 на плюсах.

 

 

 

Весь js код для этого реордеринга уложился в ~90 строчек. Причем половина кода делает построение клона сетки, где все элементы расположены с position absolute и расставлены с помощью transform: translate, чтобы потом можно было просто поменять эти самые координаты транслейта и элементы сдвинутся с css анимацией без какого-либо геморроя.

Самая интересная часть была с тем, чтобы детектить что передвигаемый блок находится в рамках хитбокса одной из зон. То есть я не делал 2d Collision Detection, сравнивания циферки этого блока со всеми остальными (ибо пиздец затратно), вместо этого я вначале написал функцию, которая на основе индекса элемента (и переменной itemsInGridRow) определяла где этот самый элемент должен был находится, и затем я тупо написал функцию, которая делала все с обратной логикой (ну там понятное дело не настолько все прямолинейно, но оказалось просто пиздец как легко).

Вот собственно эти 2 метода (код я еще не рефакторил, завтра буду этим заниматься):

  calcItemAbsPosition = (index) => {
    const { width, height } = this.firstPreviewRect;
    const x = (width + this.previewSideGap) * (index % this.state.itemsInGridRow);
    const y = (height + this.previewVertGap) * Math.floor(index / this.state.itemsInGridRow);
    return { x, y };
  }

  determineDraggedIndex = (x, y) => {
    const { width, height } = this.draggedPreviewRect;
    const halfW = width / 2;
    const halfH = height / 2;
    /* eslint-disable */
    if (x < (halfW * -1) - 1 ||
        x > this.itemsRect.width + (halfW) + 1 - width ||
        y < (halfH * -1) - 1 ||
        y > this.itemsRect.height + halfH + 1 - height) {
      return;
    }
    const xIndex = Math.round(x / (width + this.previewSideGap));
    const yIndex = Math.round(y / (height + this.previewVertGap)) * this.state.itemsInGridRow;
    return xIndex + yIndex;
  }

бля нехуя тема

 

напомни у тебя какая зарплата щас? 

Долго пилил? много кода вышло?

 

бля просто охуеть круто

5500 сгд, 237к дерева по текущему курсу (правда бессмысленно конвертировать, но привычку не побороть)

Сегодня в 3 часа дня сел пилить, в 6.45 все было готово (это я еще 2 раза ходил пожрать между делом).

Большую часть времени убил на расстановку элементов, вылизывание css чтобы все отображалось как надо во всех возможных сценариях + наверное 30-60 минут тупо сидел и думал как это все сделать, пока не дошло что надо пилить реверс-функцию, и когда её запилил то ахуел от того, насколько это просто было.

 

Года два назад писал на c++ свою копию игры Hearthstone, тоже поебался немного с подобной историей. Там необходимо было карты в руке и на столе располагать на определённой позиции, которая в свою очередь зависит от 1) положения карты среди других карт 2) от количества карт. Причём они должны не телепортироваться туда, а спокойно сдвигаться. В итоге придумал концепцию "желаемых xy координат" у каждой карты и захуячил вот это:

wantedX=(SCREEN_WIDTH/2)-60+25*i-25*(playerCardsCurrent-i+1); для карт в руке

wantedX=(SCREEN_WIDTH/2+45)+55*i-55*(playerTableCurrent-i+1); для карт на столе

И каждый игровой цикл карта смещалась на небольшое расстояние в сторону своего желания

Сейчас я уже не вспомню, на основе чего я рассчитывал эти цифры, но это работало  

 

пездец, нобелевскую ему

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

 

@@suez, я помню ты писал что стилизовать селект2 это та еще муть, и запилил кастомный селект2 с бледжеком ...

Он еще немного необычно появлялся вроде с 3d анимацией. У тебя той демки или анимации появления не осталось?

 

https://codepen.io/suez/pen/aaba459d89eff7390ab9d17886aab3d5

Ты видимо об этом

Там внутри супердревний код

Сейчас у меня в uikit/Dropdown/ лежит 5 разных вариаций (SelectDropdown, MultiSelect, MenuDD, ButtonDD, SortDD)

Там просто ад сколько кода и вариантов кастомизаций.

че за сеньер который первый раз ставит пхп

а с чего ты взял что впервые?
ничего не мешает гореть каждый раз с таска, годами.