Jump to content

Full-R

User
  • Posts

    109
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by Full-R

  1. Не работает. Атрибуты в теге width и height идут в px без обозначения величины, а устанавливаются они через context: /* initialise canvas */ let ctx = g.getContext('2d'); ctx.canvas.width = 320; //g.closest('body').offsetWidth; ctx.canvas.height = 320; //g.closest('body').offsetHeight; Если мы через атрибут style указываем width и height холст тянется как презик при натягивании и качество рендеринга падает. vw работает по формуле: (100 * (100px)) / window.innerWidth Я переписал движок анимации с px на vw и чуть позже перегоню остальные величины вроде em, pt, pc и так далее тоже. // Returns metrics and value of given CSS propertie numberCSS: (v) => { let u = [ 'Q', 'cap', 'ch', 'ic', 'lh', 'rlh', 'px', 'ex', 'em', '%', 'in', 'cm', 'mm', 'pt', 'pc', 'deg', 'vmax', 'vmin', 'vh', 'vw', 'vi', 'vb', 'rem', 'ch', 'rad', 'grad', 'turn', 'dppx', 'x', 'dpcm', 'dpi', 'khz', 'hz', 's', 'ms' ]; let c = 0; for( let i of u ) { if( v.includes(i) ) { if( i === 'px' ) { return [ (100 * +v.replace(i, '')) / self.innerWidth, 'vw' ]; // px to vw } return [ +v.replace(i, ''), i ]; } else { if( c++ === 34 ) { if( i === 'px' ) { return [ (100 * (v - 0)) / self.innerWidth, 'vw' ]; // px to vw } return [ v - 0, null ]; } } } }, У меня перед праздниками тугая башка и я ни как не могу понять как статичный холст по window resize отмасштабировать как vw. Например canvas contenxt был 320x320 при разрешении экрана 1920x1080, а окно уменьшили и холст должен уменьшиться тоже. Есть идеи какой формулой воспользоваться? Vw и Vh вообще-то могут появиться сами, но кто это сделает нам быстро в браузер? Поэтому хочется просто масштабер наваять на event.
  2. Не могу отмасштабировать canvas элемент у которого contenxt использует для центрюги пикселы, а у меня интерфейс на view port юнитах. Есть ли способ версткой вогнать canvas по масштабу при уменьшении размера окна? Сейчас все элементы нормально плющатся. Есть идея перегонять px в vw а потом ставить event на resize чтобы context вправил себе мозги, но это не очень удобно со всех сторон. Мастера, есть ли другой способ сделать это версткой? Вот ссылка на задачу: Rebuild (revolvercmf.ru)
  3. Разница еще и в том что смакс не запрещает частичный OOCSS и гибче а не от престарелых яндексов
  4. Я стал UI\UX программистом на той ноте что научился создавать полноценное и масштабируемое приложение из HTML, ECMAScript и CSS которое устанавливается в два клика\тапа на Windows и Android(MacOS и iOS проверить не на чем к сожалению; если у вас есть возможность - пожалуйста посмотрите работает ли инсталлятор)ю На этой ноте я перестал быть сраным верстальщиком постоянно за*иж*нным дизайнерами и программерами и моя мечта создать что-то классное и новенькое сбылась. В фреймворк RevolveR я вложил 5 лет работы и весь 10 летний опыт разработки под web. 8 лет назад я создавал приложения на strict xHTML и RDFa в режиме XML application из Drupal, но теперь все гораздо проще и легче. За пять лет я написал около 4х магабайт своего кода включая полный back-end и полный front-end без единого third party решения для framework и сейчас он самый эффективный и быстрый. Появляется такое понятие как энергоэффективность и экологичность программирования. Это нужно учесть. Поскольку рефакторить очень дорого и ниша не заполнена советую всем по возможности начать свои проекты с нуля и получить место под солнцем на новых решениях. А места пока есть и поезд еще не ушел. Ни кому не рассказывайте как вы научитесь работать и не делайте глупостей в виде статей обучения работе чтобы вас не жрали создатели курсов пьющие нашу кровь и ворующие наши деньги. Они заполняют нишу говнокадрами, которых уже слишком много и стало тесно. Я работал с такими людьми как Microsoft, Linux foundation и Google для разработки нового направления в web. Это web 4.0. Для тех кто хочет вырасти из пеленок фронта рекомендую брать в программу View Port Units и отказываться от JavaScript фреймворков вроде Angular, Vue и React. Лучше пишите на чистом strict ECMAScript. Зарплаты обещают быть очень офигенными. Также нужно брать в программу развития PWA и уметь писать исключения для кэшей и handler установщика. Отказ от media queries обязателен сразу же. Это сейчас самое оптимальное направление разработки основанное на синтетическом программном дизайне, который полностью реализуется на CSS. Даже SVG не особо обязательно, но так же рекомендуется. Возрождаются традиции flash в комплексе с совместимым SEO. Не уходите в направление Java разработки и вы не проиграете важное в жизни время на освоение технологии. Имея базу fron-end уже можно разрабатывать годные приложения без нужды ковыряться в Андроидах и париться с компиляцией под iOS. Рекомендуется сразу привыкнуть не обращать внимания на разрешение экрана и писать такой дизайн который будет адекватно скалиться. Также советую не брать Node JS на сервер так как она порождает говнокодеров и плохих программистом из-за наличия большого числа готовых модулей. А с точки зрения подхода к разработке проигрывает со всеми своими сраными сборщиками и транспиляторами Python и тому же PHP. JIT вообще очень плохо работает на данный момент и это сказалось на качестве работы проектов под PHP 8. Исправить разработчики перепотребление памяти и медленную работу скрипта не смогут. Выделенный сервер это к сожалению тоже не лечит. В общем не берите NodeJS - не будьте говнарями и изучайте базы данных. Время Big Data и нужно понимать почему NoSQL не подходит. Возьмите SMACCS а не BEM. Сейчас такая тема что большинство готовых CMS не подойдут из-за устаревкших подходов к верстке и неправильных библиотеках встроенных в систему. Как минимум вы просто не сможете нормально адаптировать админки под приложение, а это ключевой момент удобства для пользователя. Так что вот вам записка куда развиваться чтобы вам не скучно было. А то что-то форум подох, а в интернетах одни педики реактивные со своими недокурсами. Добавлены виджет курсов валют и криптовалют. Репозиторий переехал в новую ветку для версии 2.x. Full-Rx/RevolveR-CMF: RevolveR Contents Management Framework v.2.x (github.com)
  5. RevolveR CMF достигла версии 2.0 и теперь поддерживает PHP 8. Из нового - View Port Units based Progressive Web Application(VPU-PWA) интерфейс, который позволяет добавить домен с установленным RevolveR CMF на рабочий стол Android смартфона и работает как полноценное приложение. Тема оформления теперь содержит CSS 4 переменные для настройки оттенков и имеет 4 режима отображения для разного времени суток со звуками. Теперь стало проще модифицировать шаблон, а для того чтобы получить уникальное оформление достаточно поменять переменные цветовых схем в отдельном файле и уметь немного верстать. Появилась встроенная поисковая система Pick с полноценным индексатором внешних ресурсов. Я интегрировал чат с функциями обмена текстовыми и голосовыми сообщениями. Доработан встроенный в ядро форум, а также появился функционал интернет магазина(варианты оплаты пока не подключен так как я выбираю хороший сервис для оплаты онлайн). В ядре появился RKI(RevolveR Kernel Interface). Это модель объединения всех функций ядра в один интерфейс. Понемногу добавляем объектного подхода к реализации архитектуры. Системные требования: PHP 7.4-8.0, 20Mb памяти сервера, MySQL 5.6-8.0. Рекомендуемая конфигурация: Unix Server на PHP 7.4 + Zend OpCache с 128Mb выделенной под Zend OpCache памяти. Пока не рекомендуется использовать PHP 8 так как он ведет себя нестабильно, медленнее работает и потребляет больше памяти сервера. RevolveR CMF на данный момент самый экономичный и развитый с точки зрения оснащения Open Source Contens Management Framework. Всего менее чем 4 Мб кода обеспечивают полную функциональность сайта сообщества из коробки. Для развертывания подходит любой Linux или Windows хостинг с памятью 64Mb и менее. Работает framework быстро и поддерживает Big Data, а трехуровневое кэширование позволяет не беспокоиться о высоких нагрузках. Скачать: Full-Rx/RevolveR-framework: RevolveR contents management framework (github.com) О релизе: RevolveR CMF v.2.0.0.0 с поддержкой PHP 8
  6. Да я про то что он теперь живучка, которая постепенно обновляется :)
  7. Посмотрите вот здесь. Есть свойство CSS clamp().
  8. Сделал переключение цвета в ночной режим автоматически с 20:00 до 8:00. Работает противоположный часовой пояс для стимуляции жизни 🙂 Что можно улучшить? Тема теперь написана полностью на CSS variables и она является частью framework. Теперь можно почти не верстая получить свое оформление поменяв variables(их 40 для настройки цветов и оттенков). Я не могу себе позволить делать бесплатные разнообразные шаблоны так как это мой хлеб(система и так бесплатная). Если кому надо пусть сами верстают и все переделывают под себя. Я думаю вынести эти vars в базу данных и сделать color picker'ы для того, чтобы настраивать дизайн. p.s.: форум какой-то мертвый стал.
  9. Я убрал из стилей все статические величины. Больше нет ни каких PX, EM, PT и так далее. У прототипа VPU интерфейса работают только view port юниты и проценты. Шрифты выполнены также в VPU. Вот скриншоты работы прототипа при разных размерах окна браузера и в разрешениях 1024x768 и 1600x900. Также VPU интерфейс будет отлично смотреться на экранах 4k и 8k. Теперь сайты не будут слишком мелкими или вылазящими за пределы окна браузера с горизонтальной прокруткой. Считаю, что интерфейсы основанные на View Port юнитах являются будущим верстки в свете непрерывного роста разрешений экрана устройств просмотра, а также великолепно оптимизируются под мобильные устройства. Пора media queries на свалку истории.
  10. Меня очень огорчило, что с приходом транзистивного HTML 5 у нас теперь нет иконок валидно для HTML, но я до сих пор проверяю верстку валидатором. Качество валидатора меня тоже сильно огорчило. Я не единожды нахожу ошибки парсера валидатора, который показывает что у меня в документе ошибка. Открываю исходный код и делаю поиск строки с предполагаемой проблемой, а там все в порядке. Что-то слоупоки сдали нынче, что даже валидатор не хочет валидировать. А вы чекаете свои поделки валидатором? Я вот до сих пор(уже лет 9)зелененький и ровный.
  11. Я оптимизировал верстку, но на CSS зависли 80 иконок для интерфейса в SVG завернутые в base_64. Применять их пока некуда, но может пригодятся. Вот что у меня получилось по результатам: Я не знаю как победить Google Page Insights - он как будто игнорирует все хорошие манеры оптимизации специально. У меня сделан preload на графику и lazy load одновременно, а Google штрафует меня за анимацию загрузки контента и готовности DOM. Это не справедливо. В то же время GT Metrix, который использует тот же page insights показывает показатели 98%. Подскажите что еще можно оптимизировать?
  12. Пора бы для такого CSS grid использовать.
  13. Я доработал идею дизайна и верстки без использования media queries исключительно на view port units. Вот что получилось: https://revolvercmf.ru/ У сайта как таковой мобильной версии нет. Я просто использовал CSS 3 calc() и CSS 4 variables. Получилось не плохо и дизайн смотрится идентично на разных разрешениях экрана. PX и EM в архитектуре дизайна не используются вообще, а кроме того не использован сложный flex-box. Используются %, vw и vh. Прошу оценить верстку, интерфейс и дизайн(это основная тема оформления моего open source contents management framework). Вот статья про VPU scalable interface на английском: https://revolvercmf.ru/en-US/vpu-intreface-scale-factor/
  14. Интерфейс обогатился на touch и mouse move menu вместо гамбургера. Запустил сайт сообщества. Кому интересно - можете зарегистрироваться и пользоваться форумом или завести блог(русский язык доступен из меню регистрации или в меню пользователя). Обзорчик системы на английском: https://revolvercmf.ru/en-US/revolver-cmf/
  15. Оттолкнитесь от этого: console.log(translate('test')) Слишком много говнокода, который мешает понимать. Да и поделка дерьмовенькая, хотя интересная.
  16. Здравствуйте. Есть движок БД и для него нужно провести аудит. Конкретно интересует следующее. Стоит ли удалять смайлы, как последовательность символов в функции: // Cleanup outer SQL protected static function escapeOuter( string $s ): string { return preg_replace( ['/(\/\*\s*\w*\s*(?!.\/\*))/si', '/(\-\-\s*\w*\s*(?!.\-\-))/si', '/(or\s*\w*\s*=\s*\w(?!.*or)|\|\|\s*\w*\s*=\s*\w(?!.\|\|))/si', '/[\x{10000}-\x{10FFFF}]/u'], [';', ';', '', '\xEF\xBF\xBD'], str_replace( ['#', '+--', '--+', '"', "\x1a", '%', 'qq ', '--', '/*!', '*/'], ['♯', '', ';', '"', '\\Z', "\%", '--', '/*!', '*/'], trim($s) ) ); } За это отвечает: '/[\x{10000}-\x{10FFFF}]/u' => '\xEF\xBF\xBD' . Можно ли как-то получить сниппетом диапазон смайлов emoji? DataBaseX.zip
  17. В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries. Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса. Поскольку дизайн полностью масштабируется под размер окна и не нужны ни какие костыли и сетки, я хочу добавить в свой фреймворк такую опцию, как автоматическая генерация Android приложения, которое бы работало на Web View. У нас уже везде webkit и можно было бы сделать заготовку приложения, которая бы скрывала строку ввода адреса браузера, но оставляла возможность поменять URL, на который обращается приложение. Я не пишу под андроид и мне бы очень не помешал пример такого приложения с возможностью на сервере через PHP поменять иконку и URL. Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web. Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx). Видео обзор системы: Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x Группа на facebook тут: https://www.facebook.com/groups/331465761595917 Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества. Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки. Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления. Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например. Давайте покумекаем, как мы можем это использовать для современных интерфейсов, чтобы сэкономить себе время на создание верстки и дизайна. Мне кажется моя идея выгорает хотя бы экономией времени и денег на создании мобильного приложения.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy