Сообщество - Лига программистов
Добавить пост

Лига программистов

1 538 постов 11 434 подписчика

Популярные теги в сообществе:

Помощь в скачивании файла с csdn.net

Помогите скачать файл с китайской сети csdn.nethttps://download.csdn.net/download/a812417530/86341626

Мечта о своей игре

Добрый вечер. Не буду томить и сразу начну.

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

В бородатые времена, было что-то подобное, называлось Flash Guitar Hero. Написанная на флэше, в которую можно было играть на сайте, либо скачать себе на ПК и играть без интернета.


Казалось, я уже дорос до того, что бы написать игру. Но, спойлер - нет, не дорос.

И я не программист, кстати.


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

Есть midi-файл, распарсив его, я получаю очень много информации:

Сами ноты:

[

{

"durationTicks": 1, //длинна ноты

"midi": 96,  //струна, на которой находится нота

"time": 2.016804  //секунда, на которой звучит нота

}, {

"durationTicks": 1,

"midi": 97,

"time": 2.016804

},

...

]

BPM:

[{

"bpm": 119, //bpm, собственно

"ticks": 0  //тик (он потом конвертируется в секунду), на которой меняется bpm

},

{

"bpm": 99,

"ticks": 768

},

...

]


Ну а дальше, дело за малым, я решил выбрать JQuery,  так как немного понимаю его.

var notesJSON = "notes.json";

var bpmJSON = "bpm.json";


$.getJSON(notesJSON, {format: "json"}).done(function(data) {

$.each(data, function(index,value) {

var TimeToPX = value['time']*762+50; //конвертирую секунды в пиксели

var height = parseInt(value['durationTicks'])+parseInt(109);

$('.notes').append('<div class="note"></div>');

var notesHeight = $('.notes .note:last-child').attr('data-px');

$('.notes').css({'height': parseInt(notesHeight) + parseInt(50)+'px'});

});

});


Поясняю:

var TimeToPX //конвертирую секунды в пиксели (шизик, да)

var height  //делаю высоту у нот


$.getJSON(bpmJSON, {format: "json"}).done(function(data) {

$.each(data, function(index,value) {

var ppq = 192;

var bpm = value['bpm'];

var bpmppq = bpm * ppq / 60;

var ticks = value['ticks'];

var speed = (289400 / bpm) *100;

var bpmtime = ticks / bpmppq;

song.addEventListener('timeupdate', function () {

var songStart = parseFloat(song.currentTime);

if (songStart > bpmtime) {

var notesHeight = $('.notes .note:last-child').attr('data-px');

var translate = parseInt(notesHeight) + parseInt(50);

$('.notes').animate({bottom: '-'+translate+'px'}, speed, 'linear');

}

}, false);

});

});


Тут все понятно. Все переменные для той самой конвертации тиков в секунды.

Переменная speed "прокручивает" блок с нотами в низ с той скоростью, которую мы распарсили из bpm.json. И которая меняется когда надо.


Так а что в итоге? А то, что, как я понимаю, JQuery не подходит для этого, на андроиде жутко все тормозит, как будто я запустил ПК-ашный Киберпанк на Редми 6. Но вот на Айосе тянет все отлично.

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

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

А можем вообще вместе ее доделать.


Живой пример того, что я сделал - http://z33376pn.beget.tech/gh/ - играть можно только на телефоне. Нажав на play в левом верхнем углу. Но посмотреть, как движутся ноты, можно на любом устройстве.


Пример другой игры на JS без тормозов:

https://github.com/jyschwrtz/JS-Hero


А вот пример того, что хочется получить в идеале:

https://github.com/henryzt/Rhythm-Plus-Music-Game

Показать полностью

Как зайти в IT после 30+(40+)? (взгляд изнутри)

Intro


Периодически на ресурсе можно встретить авторские истории в стиле: “Как я стал разработчиком на Х в 30 лет” или “Как я перешел в IT на позицию Y в 40 лет” и т.д.

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


Работая в IT (software development) больше 25 лет в разных компаниях (западные, до 10к. человек) на менеджерских позициях, я наблюдал кого компании ищут, как происходит отбор, как кандидаты себя ведут на интервью и как они меняются попадая в команду, кто в итоге остается, а кто нет.

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


В этой статье я бы хотел поделиться опытом наблюдений этого процесса, как все выглядит “с другой стороны стола для интервью”. И чуть более подробно рассказать о том, как выглядит IT индустрия изнутри, как новичку проще сориентироваться и примерно понять “мое / не мое”, и если “мое”, то как выбрать направление куда двигаться с чего начинать, и как не допустить типичных ошибок.



Scope Definition


Для кого это?

Зачем люди вообще идут в IT? Цели у каждого, конечно же, могут быть разные.

И логично, что от цели и причин будут зависеть и весь остальной выбор и следующие шаги.


Но я бы хотел сфокусироваться на 2-х самых популярных и прагматичных целях, которые можно встретить:

1. Возможность работать удаленно (актуально для тех, у кого в месте их проживании не очень хорошо с доступной работой offline. Актуальность особенно выросла в период локдауна во время ковида);

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



Т.е. В первую очередь этот рассказ именно для новичков в IT, для тех, кто думает о сравнительно быстрой смене профессии и рассматривает работу в найме IT как вероятную альтернативу.


С чего начать?

Общий большой план может выглядеть примерно так:

1. Выбираем позицию(роль) на которую хотим пойти;

2. Изучаем минимально необходимый объем материала (+получаем первый тестовый опыт);

3. Выбираем компанию;

4. Проходим собеседования;

5. Пытаемся удержаться;

6. …

7. Profit?


(Пункты 1-3 могут быть в разной последовательности, т.к. все действительно зависит от стартовых условий.)



Задайте себе простые вопросы:

1. Я уже знаю кем точно хочу быть и чем заниматься?

2. Или может я уже что-то умею и/или хочу на чем-то специализироваться?

3. Или может есть компания, в которую я хотел бы попасть и не важно кем?


(если уже что-то известно, то от этого и проще отталкиваться)


Важно:

Эмпирически, минимально-реальное время на первоначальное обучение - это месяцев 3-6.

И с вами уже могут начать разговаривать на собеседованиях.


Но это если ориентироваться на full-time (полный рабочий день) на обучение. Если планируете оставаться на текущей работе и учиться параллельно, то на обучение может потребоваться год или два.


Но как обычно, нюансы в деталях.



Поэтому чуть подробнее по пунктам.



Кем быть? (О ролях)

-Кем ты хочешь быть в IT?

-Не знаю, а кем можно?

(реальный диалог)



Сложно сделать выбор, когда непонятно из чего выбирать.

Когда говорят об IT, то самые популярные позиции которые на слуху - это “программисты” и “тестировщики” (которых еще ошибочно называют QA)


Но конечно же, мир IT гораздо шире.

В целом IT сейчас это больше про “информацию” и ее обработку, чем про технологии как таковые.


Процесс разработки. Как это происходит и кто участвует?

Софтверные компании крутятся вокруг информационных систем (неких программных продуктов, своих или заказных, не важно) и на всем жизненном пути системы, для ее поддержки требуются разные роли.


Процесс разработки (инициализация)

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

(Если прежде вы занимались чем-то подобным, то перейти в IT может быть сравнительно просто, потребуется, в основном, обновить знания, связанные с IT спецификой).


Процесс разработки (реализация)

Дальше идет собственно сам этап разработки.

Именно здесь появляются все те роли, которые участвуют в непосредственном создании новой системы.


В целом, общий процесс разработки выглядит примерно так:

- бизнес аналитики работают с заказчиками/пользователями, собирают первоначальные требования и обосновывают экономические выгоды (часто это роль на стороне заказчика и вы можете ее занять в ИТ департаменте своей текущей организации, например, медицинского или государственного учереждения),

- системные аналитики превращают требования в описания проектировок,

- UI/UX дизайнеры рисуют пользовательские интерфейсы,

- архитекторы, на основе общих проектировок, создают технические описания реализации, (архитектуры) и реализуют базовые вещи: основные интерфейсы/компоненты/фреймворк/базу данных и т.д.,

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

- тестировщики проверяют соответствие реализации требованиям,

- документировщики оформляют пользовательскую документацию, системные сообщения и переводы,

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


Процесс разработки (поддержка)

Когда система уже готова и запущена в продукции, дополнительно появляются роль

- Специалиста поддержки (1st line support, 2nd line support) - которые обрабатывают заявки от пользователей (проблемы, вопросы, улучшения) и помогают/направляют на разработку


Процесс разработки (дополнительные роли)

Еще добавьте

- всевозможных узких специалистов/консультантов которые нужны только в конкретном проекте (блокчейн, GDPR, искусственный интеллект, BigData, эксперты предметных областей и т.п.),

- возможных social специалистов, вроде Mental Health specialist (что-то среднее между психологом и коучем который следит чтобы в проекте никто не перегорел - обычно он один на организацию)


Оберните сверху всевозможными

- менеджерами процессов,

- дополнительными службами управления качества и

- безопасностью,


И вы получите представление как может выглядеть современная проектная команда в IT разработке.



Так что же выбрать?

Вот во всем этом вы где себя видите???


Это важный вопрос, т.к. если нет точного понимания то ответы могут быть:

- “Не знаю, но вот точно не <название_роли>, потому, что <причина>!”

- “Не знаю, но вот это, <название_роли>, кажется интересным и я бы попробовал”

- “Просто не знаю”. (А что проще? Или что я смогу научиться делать?)



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

В идеальном варианте, нормальное распределение: 1 человек = 1 роль.

Но довольно часто бывает, что в конкретном случае (проекте/компании) выделенная роль не требуется вовсе или требуется в ограниченном виде (или компания просто пытается сэкономить).

Тогда роли начинают объединять.

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

И это одна из причин почему можно услышать мнение что “в IT надо очень много знать и уметь делать кучу разнообразных вещей”


Если сразу нет каких-то предпочтений и хочется выбрать с позиции “минимального времени на обучение”, то по наблюдениям самый низкий порог эффективного вхождения (из популярных ролей), это роли:

1. Поддержка пользователей (1st/2nd line Support specialist)

2. Тестировщик

3. Программист



Что изучать? (О скилах)


Условно все навыки можно на hard skills (технические) и soft skill (не технические).


И вот здесь в большинстве историй начинают подробно рассказывают как развивали именно hard skills (какую взяли технологию, книгу, какой курс посмотрели и какой сделали свой проект).

Хотя это как раз и не важно. Вернее не настолько важно, как может думаться.


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


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


Что касается развития hard skills как таковых, то для всех кто не "программист / администратор” процесс первоначального обучения достаточно straightforward (прямолинейный):

для аналитиков есть их BABOK, для 1-st line суппорта - ITIL, для тестировщиков - ISTQB, для QA и прочего качества - CMMI, ISO, IEEE, для менеджеров PMI/Agile, и т.д.)


А вот для программистов и администраторов все гораздо сложнее и не тривиально.

Потому что это уже ТЕХНОЛОГИИ!


(Т.к. в комментариях встречал много сообщений про интерес именно к программированию, то расскажу о своих наблюдениях именно о технологиях в программировании).



Технологии (как выбрать?)

Технологии. Их много, они разные и везде требуются разные наборы (technology stack). Знать все не получится физически и для специализации приходится выбирать что-то одно (иначе в долгосрочной перспективе будет проседание по зарплате), а еще они имеют свойство быстро устаревать и каждый год, как грибы, вырастают новые.


Конечно, если хочется быть на переднем крае (on the bleeding edge), или в модерновом стартапе, то да, важно следить за трендами и вовремя переключаться.

В остальных случаях это не так критично, т.к. технологии меняются часто в целом, в индустрии.

А вот в конкретных компаниях/проектах все может быть совсем не так.


Т.к. при переходе в IT потом придется где-то работать, то эффективным может быть для начала посмотреть, какие сейчас есть актуальные вакансии и что там перечислено? (совпадающие названия и будут теми технологиями которые сейчас “популярны / востребованы”)

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



Технологии (как начать изучение)

Ок, допустим смогли определить с какой технологии попробовать,

что дальше, с какой книги/курса начинать изучение, так, чтобы это было эффективно?


И тут нет “серебряной пули” (идеального решения). Т.е. для начала можно пробовать любую доступную книгу/курс/ресурс для новичков (где есть слова for dummies, за 24 часа, 30 дней, или любую другую - для начала это не принципиально).


Важные критерии на этом этапе:

1. Понимать, что там написано (т.е. чтобы сам язык был доступным для понимания)

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


На этом этапе первичная цель - просто начать что-то изучать, попробовать что-то сделать и оценить ощущения:

1. Было ли легко разобраться? Или наоборот приходилось продираться?

2. Было ли интересно разбираться? Или безразлично?


Потом, для сравнения, попробовать другую технологию и сравнить ощущения.


В идеале - найти то, что будет доставлять удовольствие от процесса (или, как минимум, легко изучаться).

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


И если работа вас “не прет”, то продолжать конечно же можно, просто может быть чуть сложнее.



Технологии (продолжение обучения)

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


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

Хотя конечно эта грань “я уже умею достаточно хорошо программировать, чтобы работать или еще нет?” во многом субъективна и условна.



Есть и вполне объективные критерии именно на знания (не навыки), которые одинаково могут признаваться и коллегами и компаниями.

Это официальные сертификации. А курсы для подготовки так же можно рассматривать как вариант обучения.

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

Это как некое внешне авторитетное подтверждение, что знания в конкретной предметной области / технологии более-менее выровнены.



(продолжение следует)

Показать полностью

Вопросы про IT

Вопросы от нуба который хочет попробовать влиться в айти.

Вопросы про IT IT, Программирование, Программист, Вопрос

Реально ли это сделать человеку без профильного образования?

Какой язык стоит учить для начала?

Какие языки востребованы?

Где набрать опыт и стаж?

Можно ли за год-два самообучения расчитывать на 30-40 тысяч?

Средний город почти миллионик.

Показать полностью

Конфликт в devtodev завершился в пользу сотрудников, благодаря их активности и вмешательству профсоюза

Конфликт в devtodev завершился в пользу сотрудников, благодаря их активности и вмешательству профсоюза IT, Увольнение, Работа, Профсоюз

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

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


В день публикации нашей статьи с профсоюзом связались представители компании и сообщили о своём намерении провести выплаты в ближайшее время.


На данный момент выплачены все задолженности по известным нам случаям, и поэтому трудовой конфликт в компании devtodev можно считать завершённым в пользу сотрудников (в случае, если кто-то ещё не получил положенные выплаты, обязательно сообщите нам об этом). Поздравляем всех с этой небольшой, но важной победой!


Замечательно, что devtodev оказалась из тех компаний, которые дорожат своей репутацией в IT-сообществе, и дело ограничилось оглаской ситуации через ресурсы профсоюза. Зачастую это работает быстрее и эффективнее, чем жалобы в государственные инстанции. Но бывают и случаи, где не работает ни первое, ни второе. И тогда профсоюзам приходится использовать наиболее мощные средства давления из своего арсенала, такие как забастовки разных видов в рамках законодательства ТК РФ. Конечно, не во всех случаях и это возможно, особенно тогда, когда речь идёт о бывших работниках. Но иногда их можно восстановить в должности через суд, а также есть и другие методы воздействия. Для особо упёртых работодателей разрабатывается целая профсоюзная кампания, с петициями, флешмобами, массовыми исками и т.д. Сплочённый коллектив активистов способен на многое.


Ещё недавно это всё казалось немыслимым в благополучной IT-отрасли, но на фоне нарастающего кризиса количество трудовых конфликтов неуклонно растёт. И отрадно видеть, что растёт и количество работников, понимающих необходимость объединения и активных коллективных действий в борьбе за свои права. Именно в таких случаях компаниям приходится следовать не только своим интересам, но и учитывать обязательства перед сотрудниками. Иначе при отсутствии у работников достаточных рычагов давления происходят печальные истории, аналогичные ситуации с Game Insight, где руководство в погоне за сиюминутной наживой чувствует полную безнаказанность и игнорирует права тех, кто приносит им прибыль.


Наш профсоюз будет и дальше помогать работникам в защите наших общих трудовых прав и интересов. И наша организация открыта для всех, кто готов в этом участвовать (заявка на участие в работе профсоюза IT).

Показать полностью

Ответ на пост «Немного IT юмора»

В гамаке почему-то и с английской раскладкой работает, и с русской🤔

Как использовать математические функции CSS

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Перевод статьи: How to Use CSS Math Functions: calc, min, max, clamp
Автор: Alex Ivanovs

Примечание: примеры кода лучше всего просматривать на codepen. Приятного чтения!

Логические функции CSS calc(), clamp(), min() и max() поддерживаются всеми современными веб-браузерами. Но, несмотря на то, что они легко доступны, простой поиск на GitHub говорит нам о том, что внедрение этих функций идет медленно. Давайте выясним.

Я знаю, что вы могли подумать: "Математика?! Фу, с глаз моих долой". Но спросите себя — хватит ли у вас силы воли противиться удовлетворению от идеально выровненных вложенных друг в друга контейнеров?

Знаете, после того, как я написал статью о различных хитростях CSS (она была подобрана несколькими публикациями), я увидел, что на сайт приходит трафик по таким ключевым словам, как «как центрировать элемент div», что забавно, потому что я никогда не упоминал об этом в статье конкретно. Но это показывает, что разработчикам нужен доступ к быстрым фрагментам кода, которые можно легко реализовать повторно.

Таким образом, это будет предпосылкой для этого урока.

Update: Мне удалось написать подробное руководство по центрированию элементов в CSS.

Я сосредоточусь на теме математических функций CSS в контексте достижения различных результатов компоновки. Например, Как создать адаптивный контейнер с помощью нескольких строк CSS, как добавить адаптивный padding и как заставить сайдбар вести себя как сайдбар.

Давайте взглянем.

calc()

Функция calc() поддерживает четыре арифметические операции: сложение (+), вычитание (-), умножение (*) и деление (/). Эта функция в основном используется для расчета динамической ширины и высоты контейнера для создания адаптивного layout.


Пример кода:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

И вот такой результат:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

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

Давайте рассмотрим конкретный пример использования display: flex;. Наша цель — создать рядом 3 элемента, зависящих от ширины контейнера (100%). Мы также хотим добавить отступ в 30 пикселей между каждым элементом, и, конечно же, нам необходимо, чтобы они были отзывчивыми!

Пример кода:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), и там вы сможете изменить размер экрана, чтобы увидеть, как это работает.

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Поскольку мы хотим иметь отступ в 30px между каждым элементом, мы вычитаем 90 пикселей из ширины контейнера (100%) и делим его на 3, чтобы указать, сколько элементов у нас есть.

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

min()


Функция min() используется для установки наименьшего допустимого значения. Она принимает два разных значения, разделенных запятой, и поддерживает арифметические выражения.

Допустим, вы указали font-size: min(25px,1vw); — в этом примере font-size никогда не будет больше 25 пикселей и будет уменьшаться до 1vw в зависимости от размера viewport.

Мы также можем использовать min() для управления шириной элементов контейнера.

Пример кода:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана.

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

В этом контексте div элемент внутри нашего контейнера не может превышать 800 пикселей в ширину, несмотря на то, что контейнер имеет максимальную ширину 1000 пикселей.

max()


Функция max() позволяет нам сделать прямо противоположное. Из двух значений, которые мы указываем внутри max() — большее из них будет иметь приоритет.


Пример кода:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана  на меньший, чтобы посмотреть, что произойдет.

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Как видите, контейнер соблюдает width: 100%;, но не опускается ниже указанной отметки 200 пикселей, так как это самое большое значение для контейнера.

Функция max() особенно полезна при применении адаптивных margins. Как правило, когда вы используете множество мелких элементов в макете, они загромождают экран после изменения размера. С помощью max() мы можем установить приоритет для определенного margin, чтобы учесть ширину контейнера.


Пример кода:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана на меньший, чтобы посмотреть на это в действий.

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Как видите, несмотря на изменение ширины viewport, кнопки всегда сохраняют свои поля в 4 пикселя.

clamp()


Функция clamp() используется для определения допустимого диапазона различных значений элемента макета: minimum, preferred и maximum. Чаще всего clamp() используется для установки диапазона допустимых значений в типографике, чтобы создать эффект fluid typography.

По сути, это кульминация функций min() и max().

Например:


font-size: clamp(1rem, 4vw + 1rem, 4rem);

И вот как это выглядит:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

В этом контексте, мы стилизуем наш заголовок h2 с минимальным значением 1rem, максимальным 4rem и устанавливаем предпочтительный размер 4vw (единицы viewport) + 1rem. Как вы уже заметили, из приведенного выше демо, по мере изменения области просмотра изменяется и размер шрифта заголовка.

На этом мы заканчиваем знакомство с наиболее широко поддерживаемыми математическими функциями в CSS.

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

Создание адаптивного sidebar с помощью Grid


Можете ли вы реализовать полнофункциональный адаптивный sidebar всего двумя строками CSS? Конечно.


Для этого демо мы создадим адаптивный sidebar, используя display: grid; и настроим отзывчивость с помощью grid-template-columns. В частности, мы будем использовать функции fit-content и minmax() для установки наших ограничений.


Пример кода:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана, чтобы посмотреть, что произойдет.

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Давайте разберемся, что здесь происходит.


Сначала, мы применяем fit-content, чтобы объявить предпочтительный размер нашего sidebar. Значение, которое мы указываем здесь, будет либо увеличивать боковую панель (в зависимости от размера viewport), либо уменьшать ее на небольших экранах. Все время учитывая количество контента, которое у вас есть на боковой панели.


После этого мы применяем minmax(), потому что мы не хотим, чтобы боковая панель перекрывалась областью контента на странице. В нашем случае для параметра установлено значение 55vw, которое будет использоваться для мобильного дисплея, и 35ch, которое будет использоваться для больших viewports. И, наконец, мы применяем the Grid-specific fraction unit, чтобы заполнить пространство, когда это позволяет viewport.

Применение адаптивного Gap для Flexbox Layouts


Это аналогичный пример адаптивного padding, который мы рассматривали ранее. Но для этого демо мы используем flexbox и свойство gap вместе с clamp().


Пример кода:

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте поиграть с размером.

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Указав gap: clamp(5px, 1vw, 25px); мы говорим браузеру адаптировать gap между каждой колонкой в зависимости от размера viewport. Итак, если размер окна превышает 1vw — gap увеличивается до 25 пикселей, тогда как маленький viewport уменьшит его до 5 пикселей (например, на мобильных устройствах).


Кстати, вы могли заметить, что я использовал интересное свойство для центрирования блоков, это place-content: center;. Это сокращенное свойство, которое поддерживает позиционирование содержимого в различных направлениях. Подробнее об этом можно прочитать на MDN.

Can I Use: Поддержка тут как тут


Если мы посмотрим на данные Can I Use для математических функций — поддержка явно есть. IE их не поддерживает, но мы также знаем, что IE прекращает работу. В июне 2022 года, если быть точным.

Как использовать математические функции CSS CSS, Frontend, IT, Программирование, HTML, Гифка, Длиннопост

Использование математических функции CSS с переменными


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


Я не следую style guide и не работаю над фреймворком.


Но вполне возможно использовать объявления переменных для достижения еще больших результатов, особенно для сложных структур layout.

Заключение


Были бы вы рады попробовать некоторые из этих концепций в своем следующем проекте?


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

Спасибо за прочтение этой статьи!

Наш телеграм https://t.me/havaevau_webstudy

Показать полностью 16

Готовы к Евро-2024? А ну-ка, проверим!

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

А если не любите полагаться на случай и сразу отправляетесь за техникой Hisense, не прячьте далеко чек. Загрузите на сайт и получите подписку на Wink на 3 месяца в подарок.

Готовы к Евро-2024? А ну-ка, проверим! Футбол, Тест, Евро 2024, Болельщики, ВКонтакте (ссылка)

Реклама ООО «Горенье БТ», ИНН: 7704722037

Алгоритмы – вот настоящий хлеб программиста

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


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

Алгоритмы – вот настоящий хлеб программиста Профессия, Программирование, Саморазвитие, Длиннопост

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

Если сравнивать терминаторов, то между ними есть огромные различия. Арни умеет только то, что в него вложили. А T-1000 способен гибче подстраиваться под функции. Более слабая модель очень консервативна, а сильная умеет больше благодаря гибкости.


Способности программиста напрямую зависят от гибкости мышления. Когда я писал диплом, то искал самую разную информацию. Среди прочего нашел очень полезную книгу: «Искусство программирования» Дональда Кнута, прочитал я оттуда буквально несколько десятков страниц и выудил интересный алгоритм спуска по дереву и составлению узлов графа. Тогда для меня это было невероятное открытие, и я смог быстро решить задачу классификации. А после этого внедрил этот алгоритм в свою самописную CMS Sitebill, которая, кстати сказать, до сих пор работает и этот алгоритм является одним из ключевых в системе.


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

Это замечательная история. Только мне так понравился этот алгоритм, что я потом практически во всех своих сложных задачах использовал только его, с некоторыми вариациями. Сил на изучение даже этой штуки ушло очень много.


Но на секундочку, я прочитал десять страниц, а в книге около 700 страниц в первом томе из четырех! Представляете, 1% информации, из этой книги обеспечил мне возможность алгоритмического мышления на следующие 17 лет работы.


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


Опыт постепенно копился. Клиенты моей CMS тоже росли. Если раньше они довольствовались простым каталогом на сайте, чтобы рекламу крутить. То постепенно им стало необходимо создавать организационные структуры для разделения доступа своих риэлторов, выделение наставников, руководителей, администраторов и все это с разными правами.


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


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


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


Вывод


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


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


Тут мне могут возразить опытные разработчика, например, на React’е: «Уж нам-то ничего не угрожает, мы вон чего умеем ваять, никакие конкуренты не помешают». Однако, часто эти программисты превращаются в экспертов одного фреймворка и за пределами этого любимого инструмента ровным счетом ничего не могут сделать. Например, абсолютно не понимают Angular и боятся его как огня.


Настоящую силу программист обретает, когда осознает простую истину – решение задачи с помощью четкого алгоритма, вот та добавочная стоимость, которую он приносит в этот мир, а вовсе не знание отличий Python от PHP.

Показать полностью 1
Отличная работа, все прочитано!