Сообщество - Web-технологии

Web-технологии

522 поста 5 808 подписчиков

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

14

Новый подход в разработке веб приложений — HTMX

После появления jQuery, захватившего практически всю веб-разработку, прошло уже довольно много времени, сейчас уже мало кто использует эту библиотеку, кто-то перешёл на разработку на чистом JS, кто-то на React и Vue, и вот пару лет назад появилась новая идея, сравнимая по простоте с jQuery, это HTMX.


Теперь взаимодействие с сервером можно описывать декларативно в HTML атрибутах, создавая быстрые веб-приложения без JavaScript кода.


Автор этой небольшой библиотеки переписал со своей командой из 4 человек свой сервис, созданный на React и Django, и получил уменьшение кода на 67% при той же функциональности, при этом команда из двух фронтендеров, одного бэкендера, и одного фуллстека, превратилась полностью в фуллстековую.


Я тоже начал использовать htmx.js в своей работе, теперь можно выкинуть много ванильного JS кода, заменив его на декларативщину HTMX, сложно устроенные интерфейсы становятся простыми и более функциональными.


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


https://htmx.org/

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

Выпадающее меню на css

Здравствуйте уважаемые, очень нужна помощь. На основе первого примера с сайта https://html5book.ru/mnogourovnevoe-vypadayushee-menu/

делаю 4х уровневое выпадающее меню. В связи с большим количеством планируемых пунктов нужно укоротить меню до 200-300px и сделать прокрутку. Кому не лень, гляньте пожалуйста код по ссылке и скажите, как его поправить. Сам пытался пихать overflow-y, у меня ничего не вышло

6

Убираем спагетти-код

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


У такого подхода к программированию есть несколько проблем:


• поддерживать такой код сложно, потому что нужно постоянно проверять, во всех ли местах мы внесли нужные изменения;

• расширять функциональность сложно, так как легко запутаться, какую именно часть кода мы расширяем или оптимизируем;

• читать такой код трудно, потому что один и тот же код встречается много раз.


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

А если всё работает как нужно, значит, настало время переписать код в нормальном виде. Для этого нам понадобится некоторое подобие объекта, но не на основе класса, а созданное вручную.

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Делаем красивые пуши для вашего сайта в стиле MacOS



Новый тип переменной: объект


У переменной типа «объект» есть одна отличительная особенность: она состоит как бы из двух частей — свойства и значения, и здесь всё то же самое — у объекта меняются только значения свойств. Поясним на примере языка JavaScript.


Сделаем переменную-объект, у которой будет два свойства — имя и возраст:

var person = {
name: "Миша",
age: 35
}

Чтобы поменять имя, нужно написать название переменной и через точку указать название свойства, которое хотим изменить:

person.name = "Илья";
person.age = 31;

Свойств у объекта может быть сколько угодно:

var person = {
name1: "Миша",
name2: "Саша",
name3: "Лена",
age1: 35,
age2: 21,
age3: 19
}

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

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

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



Собираем дубли


Пройдёмся по нашему старому коду из прошлой статьи и соберём все одинаковые переменные, которые отличаются только цифрами:


• List(1,2,3,4)

• Mask(1,2,3,4)

• element_Id_(1,2,3,4)

• number_Id_(1,2,3,4)

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


Свернём эти 16 переменных в один большой объект:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Теперь, зная только номер колонки, мы можем обратиться к объекту, маске и количеству задач в колонке. Сначала это может показаться громоздким, но на самом деле сокращает наш финальный объём программы в 4 раза.


Чтобы избавиться от дублей в коде, используют циклы или выносят повторяющийся код в отдельную функцию. На самом деле вариантов больше, но основные — эти.



Используем цикл


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

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Сделаем то же самое в цикле, используя нашу большую переменную-объект. Для этого мы организуем цикл от 0 до 3 (потому что нумерация элементов массива начинается с нуля) и по очереди проверяем все значения:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Код сократился в 4 раза, читать стало проще, и всё меняется в одном месте. Красота.



Делаем отдельную функцию


У нас есть вот такой огромный кусок кода, который делает одно и то же, только с разными элементами.

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост
Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Здесь 4 раза задаётся обработчик нажатия клавиш в поле ввода у каждой колонки. Очевидно, что проще вынести повторяющийся код в отдельную функцию и вызывать её по мере необходимости:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Что дальше


Мы только что убрали почти весь спагетти-код из нашего проекта. Почти — потому что у нас осталось два неопрятных фрагмента:


1. Когда мы 4 раза подряд объявляем колонки, которые отличаются только номером и названием.

2. У нас остались 4 обработчика нажатий, которые делают одинаковые вещи — вызывают одну и ту же функцию с разными параметрами.

Оба фрагмента можно оптимизировать, например, с помощью jQuery.


Попробуйте сделать это сами, пока это не сделали мы

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

9 признаков плохой вакансии в ИТ

Пост для тех, кто читает вакансии в ИТ-компаниях и думает, что там всё классно.


Иногда уже по тексту вакансии можно понять, что работать в компании будет сложно. Мы просмотрели разные вакансии в ИТ и собрали 9 признаков того, что в реальности всё окажется хуже, чем в объявлении.

9 признаков плохой вакансии в ИТ IT, Программист, Программирование, Вакансии, Web, Веб-разработка, Frontend, Web-программирование, Работа, Длиннопост

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



А теперь к делу


1. Слишком странный набор навыков

В компанию требуется JavaScript-разработчик со следующими навыками:

• JavaScript + HTML;
• знание Microsoft Excel;
• составление отчётов в 1С;
• уверенное владение системой автоматизации СДЖУ-85.

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


Ещё есть поверие: если в вакансии написано «1С», то это будет то, с чем вы будете возиться 90% времени.


Как норм: скучный, понятный, пусть даже модный стек технологий, который кочует из одной вакансии в другую. Ну вот надо людям в каком-то году React, а в другом — Vue. Окей, но пусть это будет стандартный стек этого года, а не безумный микс.



2. Участие в техподдержке


Ваши рабочие задачи:

• написание и отладка кода;
• разработка новых систем;
• помощь при работе с клиентами, иногда — ответы на вопросы пользователей.


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


Как норм: поддержкой занимается поддержка.



3. Высокий темп разработки


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

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


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



4. Десятилетний стартап


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

Что здесь не так: если стартапу больше трёх лет и он всё ещё стартап, то с продуктом явно что-то не то: либо нет клиентов, либо нет квалифицированных разработчиков, либо ребята не знают значения слова «стартап». В любом случае за это время там накопится технический долг, на разгребание которого понадобится ещё 10 лет. Хотите ли вы в таком участвовать — хорошо бы решить заранее.


Как норм: компания, которая работает уже 10 лет, скорее всего, уже имеет штат HR-специалистов, которые будут обрабатывать входящие вакансии. Это признак, что хотя бы процесс найма у компании поставлен.



5. Обязательное участие в корпоративных мероприятиях


Наша компания — как семья. У нас высокая культура внутри компании, поэтому мы ожидаем от каждого кандидата, что он будет принимать участие во всех корпоративных мероприятиях и будет активно вовлечён в профильные активности.

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



6. Горизонтальное управление, никакой иерархии, решает команда


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

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


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



7. Руководитель лично вовлечён


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


Как норм: «вы будете работать в команде такой-то над такими-то задачами».



8. Оперативные ответы в любое время


Будущий сотрудник должен:

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


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


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



9. Несоответствие опыта и развития отрасли


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

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



Это не панацея


К сожалению, нет идеальных компаний: везде есть какие-нибудь трудности, загоны и отдельные вонючки, которые будут всё портить.


Часто нормальные внешне вакансии ведут в проклятые компании, и никак, кроме как по отзывам, ты это не узнаешь (или на личном опыте).


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


Как это всё научиться отлавливать? Достоверно не знаем. Но с опытом становится легче.

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

Как производить своё расширение в Scratch?

В Скретче нет кнопки "Сделать расширение", но можно сделать GUI с помощью программы Git!

Скачать Git тут:

https://git-scm.com/downloads

Код Гитхаба тут:

Есть редактор, в котором есть кнопка "Искать расширение"!

Как производить своё расширение в Scratch? Скретчинг, Scratch, Расширение, Блок, Дополнение, Видео, YouTube

E羊icques: A Scratch mod with a custom aspect ratio that can load an extension from URL

https://sheeptester.github.io/scratch-gui/

URL Настройки:

Как производить своё расширение в Scratch? Скретчинг, Scratch, Расширение, Блок, Дополнение, Видео, YouTube

E羊icques: URL settings

https://sheeptester.github.io/scratch-gui/flags.html

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

Новое CSS свойство accent-color. Как избавиться от проблем со стилизацией чекбоксов, радио-кнопок и прочих элементов

В CSS с недавних пор было анонсировано новое свойство accent-color, и сегодня мы как раз хотим про него вам рассказать.


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

Поскольку свойство наследуемое, его можно применить на корневом уровне:


Пример:

:root {
accent-color: chocolate;
}

Так же можем применить к конкретному элементу:

.submit-form {
accent-color: purple;
}
input[type="checkbox"] {
accent-color: #6ad3ff;
}

❗️ Ну и вишенка на торт. Согласно ресурсу caniuse свойство уже поддерживается всеми основными браузерами.



Наш канал, с полезными мануалами и статьями, мастхэв сервисами и готовыми решения на CSS, Javascript

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

Media Station X для LG Netcast

Здравствуйте друзья, кто в теме - такая засада, установил на смарт LG 2012 года Media Station X последней версии и теперь он запускается с ошибкой сервера. Нужна предыдущая версия проги, там все работало как надо, но найти нигде не могу. Может у кого есть, буду благодарен

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

Так говорил греческий судовладелец, миллиардер Аристотель Онассис. Миллиардеры, конечно, живут немножко иначе, но этот принцип вполне распространяется и на «простых смертных». Давайте посчитаем, какую выгоду вы получаете.

Посчитать

13

28 расширений VS Code для разработки документации

Собственно, это плагины для VS Code, без которых техническим писателям и разработчикам документации жить можно, но сложно. В подборке — линтеры, форматирование, работа с git, проектирование API, подготовка схем и милота для удобной разработки.

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Здесь мы вам даем еще больше полезностей: полезные сервисы и фишки, мануалы и статьи готовые решения на CSS, Javascript и не только



Линтеры


Markdownlint

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Самый популярный линтер для разметки Markdown. Подсвечивает распространенные проблемы.


Как пользоваться



Markdown All in One

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Поддержка разметки Markdown в Visual Studio Code. Форматирование таблиц, оглавление, рендеринг в HTML.


Как пользоваться



LTeX – LanguageTool grammar/spell checking

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Проверка орфографии и стилистики английского и русского языка по правилам LanguageTool.


Как пользоваться



Code Spell Checker + Russian - Code Spell Checker

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Проверка опечаток в английском и русском тексте и коде. Находит опечатки даже в названиях переменных в коде. Можно использовать расширение совместно с LTeX.


Как пользоваться



Proselint


Расширение линтера англоязычной прозы Proselint. Создатели сервиса вдохновлялись Чаком Палаником, Марком Твеном, Джоржем Оруэллом и другими писателями.


Как пользоваться



Textlint

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение open source сервиса Textlint, написанного на JS.


Как пользоваться



Vale

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Семантический линтер с возможностью задавать свои правила, настройки и конфигурации проверок на то, что вам нужно.


Как пользоваться



Форматирование и форматы


Prettier - Code formatter

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение помогает так хорошо отформатировать текст в Markdown, что на него не ругается линтер.


Как пользоваться



OpenAPI (Swagger) Editor

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение для редактирования, форматирования спецификации OpenAPI (Swagger) в YAML или JSON.


Как пользоваться



MdTableEditor

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение исключительно для таблиц Markdown. Подсвечивает строки, столбцы и добавляет кнопки для операций с таблицами на командную панель.


Как пользоваться



GitHub Markdown Preview

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Предварительный просмотр файлов Markdown в формате и стилистике GitHub.


Как пользоваться



Markdown Checkboxes

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

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


Как пользоваться



PlantUML

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширенная поддержка PlantUML.


Как пользоваться



Asciidoc

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение поддерживает предварительный просмотр в реальном времени, подсветку синтаксиса и cниппеты для формата AsciiDoc.


Как пользоваться



reStructuredText Language

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение для полноценной работы с языком разметки reStructuredText.


Как пользоваться



Работа с системой контроля версий


GitLens

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

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


Как пользоваться



Git Graph

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Визуализирует весь таймлайн с коммитами и ветками. Позволяет работать с git через интерфейс.


Как пользоваться



Git Project Manager

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение позволяет открывать новое окно с репозиторием git из окна VS Code и быстро переключаться между репозиториями.


Как пользоваться



Удобство и милота


Markdown Emoji

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост


🚀(здесь ссылка)



HTTP/s and relative link checker

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Поиск битых ссылок в Markdown-тексте.


Как пользоваться



Settings Sync

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Синхронизирует настройки и конфигурации VSCode. Для синхронизации используется Github Gist.


Как пользоваться



PDF

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение конвертирует файлы Markdown в файлы PDF, HTML, PNG, JPEG.


Как пользоваться



Markdown Paste

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение делает скриншоты и сразу же ссылки на них в файлах Markdown.


Как пользоваться



Word Count

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Подсчет символов в документе.


Как пользоваться



Auto Close Tag

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Добавляет закрывающий тег.


Как пользоваться



Rainbow bracket

Каждой паре всех видов скобок расширение дает свой цвет радуги. Красным цветом подсвечены незакрытые скобки.


Как пользоваться



Live Server


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


Как пользоваться



Material Theme Icons

Иконки к файлам и папкам.


Как пользоваться

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