​​​Полный курс по Vue.js

Vue.js — это JavaScript-фреймворк, который создал разработчик Эван Ю. В 2012 году Эван работал в Google, где успел попробовать Backbone.js и Angular.

Именно после этого он решил создать собственный фреймворк — сначала просто как пет-проект. И хотя популярность обрушилась на Vue.js ещё в 2015 году, он до сих пор по душе многим разработчиками.

И вот отличный видео-курс, в котором вы рассмотрите работу с Vue.js: https://youtu.be/6wYu4_6hcDY

#фронтенд #vuejs #курс

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

Но она никогда не равна нулю.

​​Как правильно использовать html-элемент dialog вместо самописных решений и встроенных в JS методов alert(), prompt() и confirm()?

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

В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Подробнее о том, как с ним работать, наш читатель рассказал в статье: https://tproger.ru/articles/kak-ispolzovat-html-element

#html #javascript #тренды

​​Для тех, кто пропустил: на днях пакет Everything, охватывающий зависимостями все пакеты в репозитории NPM, чуть не сломал сам NPM.

На праздниках NPM-пакет Everything от разработчика PatrickJS, охватывающий зависимостями все пакеты в репозитории NPM, случайно чуть не сломал NPM под девизом «мы оживили демона».

Ситуацию постарались быстро исправить, но она все равно оказалась очень интересной. Для этого случая даже сделали специальный сайт: https://everything-registry-website.pages.dev/

Как такое стало возможно и к чему привело:

— Один из разработчиков JavaScript-пакетов провёл эксперимент с созданием и размещением в репозитории NPM пакета everything, который охватывает зависимостями все существующие пакеты в репозитории.

— Для реализации подобной возможности пакет everything связан прямыми зависимостями с пятью пакетами @everything-registry/chunk-N, которые в свою очередь привязываются зависимостями к более 3000 пакетов sub-chunk-N, в каждом из которых осуществляется привязка к 800 существующих пакетов в репозитории;

— Размещение пакета everything в NPM привело к тому, что пакет everything стал инструментом для совершения DoS-атак, так как попытка его установки приводит к загрузке миллионов размещённых в NPM пакетов и исчерпанию имеющегося дискового пространства или остановке выполнения сборочных процессов. NPM пакет был загружен 250 раз, но никто не мешает добавить его в зависимости к другому пакету после взлома учётной записи разработчика для совершения диверсии. Кроме того, невольно атаке оказались подвержены некоторые службы и инструменты осуществляющие мониторинг и проверку новых пакетов, размещаемых в NPM.

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

— Примечательно, что удаление самого пакета everything также оказалось заблокированным, так как 9 лет назад в репозитории был размещён тестовый пакет everything-else, в котором была указана строка everything в списке зависимостей. Таким образом, пакет everything после публикации оказался в зависимостях у другого пакета.

Дьявол ещё никогда не заходил так далеко.

#javascript #безопасность #nodejs

​​Реально ли джуну стать мидлом за год? И если да, что для этого нужно сделать? Что стоит прокачать в первую очередь, а что не особо важно?

#обсуждение

​​Flask для начинающих: создаем лэндинг с админ-панелью и возможность редактировать контент

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

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

1 часть — введение и настройка: https://habr.com/ru/articles/783574/
2 часть — создание лэндинга с админ-панелью: https://habr.com/ru/articles/784770/

#python #flask

​​Подборка игр для обучения веб-разработке

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

И вот подборка из бесплатных игр, которые помогут освоить веб-разработку в самых разных её проявлениях:

1. В Elevator Saga вам предстоит управлять настоящим лифтом с помощью JavaScript, разгадывая различные задачки. Игра опенсорс, так что можно покопаться в исходниках: http://play.elevatorsaga.com/

2. В Hex Invaders игрок должен быстро переводить шестнадцатеричное значение цвета на человеческий язык и сбивать пришельцев, чтобы спасти человечество: http://www.hexinvaders.com/

3. Flexbox Froggy — это логическая онлайн-игра, в которой вы должны помочь лягушкам добраться до их кувшинок. Делается это с помощью CSS Flexbox, что очень поможет развить навыки вёрстки: http://flexboxfroggy.com/

4. CSS Diner — отличная игра для знакомства с CSS-селекторами. Игроку даётся стол с посудой, заданный анимированной HTML-формой, и конкретный предмет или предметы, которые нужно взять со стола: https://flukeout.github.io/

#css #игры #javascript

​На собеседовании: Насколько хорошо вы владеете SQL?

Я, желая произвести впечатление:

​​Годнота для начинающих разработчиков на JavaScript: бесплатный 30-дневный челлендж по ванильному JS

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

https://javascript30.com/

#javascript #начинающим

​​Интересная библиотека нарисованных от руки UI-компонентов

На сайте собраны кнопки, слайдеры, шаблоны для видеоплеера и другие элементы для сайтов: https://wiredjs.com/showcase

Выглядит очень интересно. Особенно, если совместить с похожими проектами. Например, chart.xkcd. В итоге получится полностью нарисованный от руки сайт.

#ui #design #инструменты

​​Производительность Joomla на PHP 8.3 достигла показателя в 341 RPS, показав прирост в 30%

Агентство Kinsta обновило данные бенчмарк-тестов популярных CMS и PHP фреймворков. При выборе движков для теста учитывались популярность, количество живых сайтов, доля рынка и тенденции использования. В список попали: WordPress, WooCommerce, Laravel, Drupal, Joomla, Symfony, CodeIgniter, Craft CMS, OpenCart и Statamic.

Результаты тестов производительности показали прирост производительности около 30% для Joomla на PHP 8.3.

Подробнее о результатах можно узнать в статье: https://habr.com/ru/news/785634/

#php

Какие бывают сетевые протоколы?

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

— HTTP: Стандарт обмена данными в сети, используемый при просмотре веб-страниц.
— HTTPS: Защищенный вариант HTTP, обеспечивает конфиденциальность при передаче данных.
— FTP: Передача файлов между устройствами.
— TCP: Обеспечивает надёжность передачи данных в интернете, гарантируя, что информация достигнет адресата в правильном порядке.
— IP: Простой протокол передачи данных, где каждый пакет передаётся независимо, но без гарантий доставки.
— UDP: Предоставляет быструю передачу данных, идеально подходит для потокового видео и онлайн-игр.
— SMTP: Отправка электронной почты без лишних заморочек, обеспечивает надёжную доставку сообщений.
— SSH: Защищённое удалённое подключение к устройствам. Обеспечивает безопасный доступ к удалённым серверам и системам.

#интернет

​​Внимание, найден действительно рабочий способ стать мидлом не за год и даже не за месяц.

Достаточно просто стать не джуном, а сразу мидлом. Think about it.

​​Пишем змейку на JS

Почти двухчасовой гайд по созданию браузерной змейки в ретро стиле на JS + CSS: https://www.youtube.com/watch?v=uyhzCBEGaBY

#javascript #gamedev

​​PHP — это «гадкий утёнок» индустрии. В детстве язык страдал от большого количества недостатков и от ещё большего количества неопытных программистов, которые писали на нем код низкого качества.

Не факт, что PHP сможет исправить свою репутацию. Но возможно, его ругают в основном по инерции, а сам язык здорово развивается и уже имеет мало общего с тем, что он представлял из себя 10 лет назад.

В статье наш читатель рассмотрел преимущества современного PHP: его гибкость, лёгкость интеграции, широкую поддержку сообщества и доступные инструменты для разработки. И рассказал, почему стоит выбирать PHP для веб-разработки, несмотря на неоправданный хейт и кучу мемов: https://tproger.ru/articles/ya-vybirayu-php-dlya-veb-razrabotki-i-vot-pochemu

#php #тренды

​А снимает сеньор

​Скрытые возможности элемента input

Элемент input в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

​​Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений

Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.

Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices

#javascript #nodejs #тестирование #лучшиепрактики

​36th CssChallenge — адаптивные карточки с возможностью переходить по ним. Реализованы с помощью CSS и JavaScript.

Исходники: https://codepen.io/Eliiima70/pen/PoaPgZX

#codepen