Веб-разработка с METHED

Частая проблема новичков — изучать разработку по теории и заданиям в стиле Сололёрн Без практических задач, которые приближе к реальным, прочитанная информация по разработке почти не закрепляется. Как следствие — каждый раз приходится восстанавливать то, что уже, вроде бы, прошёл Вроде бы, разобрался в блочной модели, перешёл к флексам, тоже всё норм, дошёл до гридов — забыл основы. С JS то же самое: пока изучаешь здесь и сейчас — всё понятно. Чуть делаешь перерыв — и буквально через неделю уже не помнишь то, что проходил Чтобы таких откатов было поменьше, нужно отрабатывать несколько навыков сразу на одном проекте. Вместо того, чтобы проходить игры вроде Flexbox Foggy и там отрабатывать флексы, лучше взять полноценный макет и работать с ним: от вёрстки, до написания логики на JavaScript или фреймворках Для тех, кто хочет закрепить свои навыки в подобном формате, запускаем практические марафоны по фронтенду До 29 октября можно записаться на один или сразу несколько марафонов Марафон — это от 7 до 10 больших видеоуроков с конкретными задачами: сверстать то-то, написать такой-то скрипт, перенести вёрстку на React На марафонах сможете закрепить знания по вёрстке, JavaScript и React на практике. Вместо теоретических заданий — полноценный проект, который можно положить себе в портфолио Тем, кому нужна поддержка при реализации проекта, на марафонах поможет куратор — он ответит на любые вопросы в чате и проверит задания, которые даются в рамках каждого урока внутри марафона Если записываться на несколько марафонов — сможете проходить их друг за другом до конца ноября Для первых 30 участников — спецусловия 👉 Выбрать марафон и записаться — https://my.methed.ru/about-maraphones Задать вопросы по участию https://t.me/methed_bot

Акция со скидками на курсы продолжается Сегодня на странице появились ссылки на примеры уроков. Хотите посмотреть уроки из курса вёрстки сайтов, JS, React? 👉Заходите на страницу https://methed.tilda.ws/

Ждали лучшего момента и чуть не дождались… В прошлом посте рассказывали в общих чертах о том, что происходило в METHED больше полугода. После того, как в январе не получилось написать вменяемый план школы на год, мы договорились перейти в режим ожидания. Постепенно сократили наборы на курс, постепенно поставили на паузу интенсивы и марафоны. Со временем даже посты в тг-канале перестали выходить. Всё для того, чтобы решить, что же делать дальше. Так проходили недели, и мы всё ждали — что вот наступит тот день, когда придумаем выход. Чтоб снова — поток сил, желание развивать проект, работать с людьми. Ждали, ждали, ждали, ждали… А эта идеальная картинка так и не появлялась, не приходили озарения, ничего не менялось Проект только медленно затухал В июле ждать момента стало невозможно — либо делаем на ходу, либо не делаем уже никак На столе было несколько идей о том, как вернуть драйв от работы со студентами. Формат отличался от того, что было раньше, было страшно, но рискнули — набрали несколько ребят в тестовую группу, о которой никому не говорили Сейчас — готовы набирать первых участников в обновлённый формат официально. По этому поводу готовим большую акцию для всех подписчиков и зрителей, которые хотят наконец разобраться во фронтенд-разработке Обновлённый формат позволил улучшить, и успеваемость, и эмоции от процесса, и, что очень важно, — стоимость всего обучения В закрытом телеграм-канале проведём первый большой набор на курсы по фронтенду с лучшими условиями, которые когда-либо были 👉Присоединяйтесь, чтобы узнать все подробности среди первых, и участвовать в акции https://t.me/+smU5hTekg485NTZi

Ну что, признавайтесь: то думал, что мы закрылись? А мы и закрылись, почти Знаете вот, хочется же, чтобы было много студентов, движ, результаты. Посмотришь на скилбокс, который только ленивый не пинает — и грустновато. Может быть, что-то не так делаем? В прошлом году пробовали как Скиллбокс — что-то совсем не зашло. Качество заметно проседало, и быстро откатывали изменения назад. В начале года сели за план — а он впервые за долгое время не пишется. Потому что больше не хочется этим заниматься Решили, что доведём всех, кто записался на курс, а там будем решать, что делать дальше Время шло, решения не было, самый галвный вариант, который висел — закрыть проект Но попроовали ещё раз — изменили формат, больше индивидуальной работы, реальное ограничение по местам, больше внимания каждому участнику. И внезапно поехло — появились силы, энергия, планы Оказалось, что массовость и куча народу — не наш формат. И копировать других — так себе затея (внезапно, ага) Продолжаем идти своим путём, не ориентируемся на «гигантов». Гигантами становиться не планируем, есть вещи, которые нам важнее количества студентов и оборотов в кассе. И стало лучше и легче, как второй день рождения, хех По этому случаю проведём закрытую акцию с набором на курсы для своих: с новыми условиями и по сниженной стоимости 👉 Все подробности будут в тг-канале https://t.me/+smU5hTekg485NTZi

‍НУЖНО ЛИ ФРОНТЕНДЕРУ ЗНАТЬ NODE.JS ⠀ JavaScript — язык, который изначально был создан для работы в браузере. Для того, чтобы использовать JavaScript не только на клиенте, но и на сервере, существует платформа Node.js. ⠀ Node.js предназначена для запуска JavaScript-код без браузера. На Node.js разрабатывают сайты, программы, мобильные приложения и т.д. ⠀ Если фронтендер владеет Node.js – это классное дополнение к развитию будущей карьеры, т.к. эти знания сделают вас незаменимым и востребованным специалистом, который будет понимать архитектуру веб-проекта. ⠀ Есть ещё несколько весомых аргументов в пользу изучения Node.js ⬇️ ⠀ ✔️ Создание приложений с высокой нагрузкой. Приложение может обрабатывать множество запросов одновременно с помощью асинхронного кода. ⠀ ✔️ Возможность работать с микросервисами. Node.js подходит для разработки микросервисов благодаря модульной структуре приложений. ⠀ ✔️ Разработка сетевых приложений. Идеально для создания чатов, игровых серверов и RESTful API. ⠀ ✔️ Расширение возможностей JavaScript. Можно эффективно управлять ресурсами и применять одинаковые инструменты в разных командах. ⠀ ✔️ Создание приложений со сложной архитектурой. Стало возможно благодаря взаимодействию сайта с базами данных, фреймворками и библиотеками. ⠀ Важно! Для того, чтобы переходить к изучению Node.js необходимо уверенное владение JavaScript, понимание принципов коммуникации между веб-сервером и браузером и базовое владение принципами вёрстки веб-страниц. #methed_про_ит

‍ОСНОВНЫЕ ТЕХНИЧЕСКИЕ ОШИБКИ ОПТИМИЗАЦИИ САЙТА ⠀ Технические ошибки при оптимизации могут повлиять на работоспособность сайта и на его ранжирование. Этого не случится, если научиться вовремя отслеживать недочёты и исправлять их. ⠀ Собрали для тебя ошибки, которые регулярно встречаются даже на топовых ресурсах ⬇️ ⠀ 🔸️ Низкая скорость загрузки. На это влияет большое количество факторов: от выбора CMS до загружаемых изображений. Советуем пользоваться специальными сервисами для проверки скорости, например, Google Pagespeed Insights. ⠀ 🔸️ Неправильно настроенный редирект. Если один и тот же сайт открывается по разным адресам, получается дублирование контента. В результате поисковик считает, что контент не является уникальным, и в результате понижает его позиции в выдаче. Также дубли могут возникать из-за особенностей работы некоторых плагинов или технических работ на сайте. ⠀ 🔸️ Неправильно настроенная микроразметка. Грамотная разметка помогает выделяться сайту в выдаче и считывать поисковым роботам информацию, что вызывает больше доверия к ресурсу. Для работы с микроразметкой С существуют словари и синтаксисы. Словарь содержит набор атрибутов, а синтаксис отвечает за то, как словарь будет применяться. ⠀ 🔸️ Отсутствие счётчиков статистики. Для того, чтобы сайт развивался, важно анализировать действия пользователей и их предпочтения. В этом помогут бесплатные инструменты – Яндекс метрика или Гугл аналитика. ⠀ 🔸️ Отсутствие протокола HTTPS. Он используется для повышения безопасности передачи данных. Очень многие браузеры блокируют доступ к сайтам, не использующих протокол HTTPS и выводят сообщение, что соединение небезопасно и лучше покинуть этот сайт. ⠀ Подытожим: если страница регулярно обновляется, добавляются новые фишки, меняется структура, то на этом фоне могут возникать различные ошибки и это нормально. Разработчику важно вовремя и правильно реагировать и исправлять появляющиеся недочёты. #methed_про_ит

‍КАК HTML ПРЕВРАЩАЕТСЯ В СТРАНИЦУ ⠀ HTML — это язык гипертекстовой разметки. Веб-браузер получает HTML от сервера, интерпретирует его и генерирует интерфейс. Этот процесс называется рендерингом и включает в себя несколько важных этапов ⬇️ ⠀ ▪️ Загрузка HTML-документа. Когда пользователь переходит по ссылке или вводит URL в адресную строку, HTTP делает запрос к серверу, а сервер отправляет HTML-документ. ⠀ ▪️ Парсинг HTML. Браузер создаёт дерево DOM и запрашивает все найденные ресурсы: изображения, скрипты, шрифты и таблицы стилей. ⠀ ▪️ Загрузка внешних ресурсов. На этом этапе загружается CSS, JavaScript и другие внешние ресурсы: CSS-файлы, JavaScript-файлы, изображения, шрифты и т.д. ⠀ ▪️ Парсинг GSS. Это процесс создания CSSOM и его объединение с DOM для создания рендер-дерева, которое содержит видимые элементы страницы и их стили. ⠀ ▪️ Макет. Браузер выполняет расчёт размеров и положение каждого элемента на странице на основе рендер-дерева и правил CSS. ⠀ ▪️ Отрисовка. Преобразование браузером рендер-дерева в пиксели на экране: рисование каждого элемента, включая текст, цвета, изображения, границы и другие стили. ⠀ ▪️ Выполнение JavaScript. Браузер загружает и выполняет скрипты, если HTML-документ содержит теги <script> или ссылки на внешние JS-файлы. Также JS может изменять DOM, CSSOM и влиять на отрисовку страницы в реальном времени. ⠀ ▪️ Обработка событий. После первоначальной загрузки и отрисовки страницы браузер обрабатывает клики, ввод данных, перемещение мыши и другие события, которые выполняет пользователь. ⠀ Важно! HTML является наиболее часто используемой разметкой, и большинство документов в сети хранятся и передаются в формате HTML, поэтому он является основным навыком веб-разработчиков и дизайнеров. #methed_про_ит

‍МАССИВЫ В JAVASCRIPT ⠀ Массив — это объект, который позволяет хранить много значений в одной переменной. Массив в JavaScript – упорядоченная структура данных, где коллекция элементов пронумерована и хранится в том порядке, как ее записали, причём элементов может быть сколько угодно и они могут быть какие угодно. ⠀ Массив применяется, когда нужно сохранить список определенных элементов, а затем получить к ним доступ с помощью одной переменной. ⠀ Каждое значение в массиве имеет свой порядковый номер (индекс). Именно они называются элементами. Первый элемент массива имеет индекс 0, второй – 1, третий – 2 и т.д. ⠀ Особенности массива в JS: ▪️может хранит значения смешанных типов, т.е. он содержит в себе числа, строки и объекты других массивов; ▪️длина массива носит динамический характер, заранее указывать размер массива не надо — он меняется (увеличивается/уменьшается) автоматически; ▪️применяют для содержания нескольких значений в одной переменной. ⠀ Основные методы для работы с массивами JS, которые выполняют определённые модификации или вычисления ⬇️ ⠀ ✔️map() используют для создания нового массива из уже готового, применяя при этом функцию к каждому из элементов первого массива; ✔️reduce() инструмент, который сжимает массив до одного значения, чтобы получить выходное значение, он запускает функцию редуктора для всех элементов массива; ✔️filter() фильтрует элементы по условию, указанному в функции; ✔️forEach используется чтобы пройтись по всем элементам массива и сделать с ними нужные действия; ✔️unshift() добавляет элементы в начало и возвращает новую длину массива; ✔️pop() — удаляет последний элемент и возвращает его значение; ✔️push() добавляет элементы в конец и возвращает новую длину массива. ⠀ Важно! Самый простой способ создать массив в JavaScript – присвоить переменной значение массива. #methed_про_ит

‍ВОПРОС-ОТВЕТ ДЛЯ НАЧИНАЮЩИХ ФРОНТЕНДЕРОВ ⠀ Вопросы на собеседовании – это всегда волнительно, особенно для новичков. Тем более работодатели с каждым годом усложняют эту задачу. ⠀ Ловите шпаргалку, которая может вам пригодиться ⬇️ ⠀ ☑️ Какая разница между сбросом и нормализацией CSS? ✅️ Сброс убирает браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому и делает чистую страницу. Нормализация создаёт единообразные стили для разных элементов, чтобы веб-страница выглядела одинаково во всех браузерах. ⠀ ☑️ Что такое REST и RESTful API? ✅️ REST (Representational State Transfer) — это архитектурный стиль, который используется при проектировании распределенных систем. Является основой для создания RESTful API. RESTful API — это веб-сервис, который использует протокол HTTP для обмена данными. Получает, создаёт, обновляет и удаляет данные на удаленном сервере, используя стандартные HTTP-методы. ⠀ ☑️ С помощью чего в JS реализуется наследование? ✅️ С помощью прототипов. Прототипное наследование - это механизм, который позволяет объектам наследовать свойства и методы других объектов. Каждый объект в JavaScript имеет внутреннюю ссылку на прототип (prototype), которая указывает на другой объект. ⠀ ☑️ Каким способом можно обмениваться кодом между файлами? ✅️ Зависит от среды выполнения JavaScript. В среде барузера где переменные/функции объявлены в глобальной области видимости все скрипты могут на них ссылаться. В качестве альтернативы можно использовать Asynchronous Module Definition (AMD) через RequireJS для модульного подхода. ⠀ ☑️ Что такое всплытие событий? ✅️ Механизм, на котором основано делегирование событий. При наступлении события обработчики сначала срабатывают на самом вложенном элементе, далее на его родителей, затем выше и т.д., вверх по цепочке вложенности. ⠀ ☑️ Что такое поднятие (hoisting) переменных. ✅️ Термин, который используется для объяснения поведения объявлений переменных в коде в том случае когда переменные, объявленные при помощи ключевого слова var, перемещаются в верхнюю часть текущей области. ⠀ Было полезно? Ждём твой лайк 👍 #methed_про_ит

‍5 ПРИЧИН ИЗУЧАТЬ JAVASCRIPT В 2025 ГОДУ ⠀ Сейчас, чтобы конкурировать на рынке труда, разработчик должен быть многозадачным. Часто для создания приложения знания одного языка программирования маловато. Но только если речь не идёт о JavaScript. ⠀ JavaScript — универсальный язык, которому под силу справиться с несколькими задачами от фронтенда до бэкенда. Современный JS – это неотъемлемая часть серверного программирования и он успешно конкурирует с другими языками на рынке. ⠀ Существует ещё несколько веских причин, для того чтобы начать изучать JavaScript ⬇️ ⠀ 🔹️Работает в браузере. Если для других языков нужно скачать редактор кода или кампилятор и настроить среду, то JavaScript – язык интернета по умолчанию. С ним можно запускать и тестировать код в браузере, без специальную среду разработки. Понадобится только веб-браузер и текстовый редактор. ⠀ 🔹️Поддержка сообщества. У JavaScript одно из крупнейших сообществ на платформах StackOverflow, GeeksforGeeks, Hashnode и GitHub. Это значит, что разработчикам предлагаются готовые решения, новые инструменты, профресурсы и опытные наставники. ⠀ 🔹️Карьерный рост. Благодаря своему широкому спектру применения JS пользуется большим спросом в небольших проектах и крупных компаниях. Изучение JS открывает двери карьерному росту от фриланса до высокой должности в ведущих IT-компаниях. ⠀ 🔹️Экосистема. Появление Node.js дало возможность использовать JavaScript не только на стороне клиента, но и на сервере. Именно поэтому можно создавать полные приложения, используя только один язык. ⠀ 🔹️Тренды. Одностраничные приложения (SPA) и прогрессивные веб-приложения (PWA), активно используют JavaScript. А фреймворки и библиотеки React и Vue.js – стандарт для создания сложных пользовательских интерфейсов. ⠀ Подытожим: в 2025 году знание JavaScript – это прямой путь к созданию полнофункциональных, производительных и отзывчивых приложений и безграничные возможности в постоянно развивающейся сфере IT. И если ты ещё не начал изучать JavaScript, сейчас самое время сделать первый шаг. #совевты_от_methed

‍ИСТОРИЯ ПОЯВЛЕНИЯ CSS В середине 90-х разработчикам стало понятно, что создавать сложные приложения с использованием HTML малоэффективно и появилась необходимость разделить содержимое веб-страницы и её оформления. Все понимали, что это значительно улучшило бы управляемость и поддерживаемость веб-контента. ⠀ Именно тогда и появился CSS (Cascading Style Sheets), как стандарт для описания внешнего вида и форматирования веб-страниц. ⠀ Первым концепцию каскадных таблиц стилей в 1994 г. предложил Хокон Виум Ли и представил её сообществу ведущих веб-разработчиков. В 1996 г. во всемирной паутине появилась первая спецификация CSS, известная всем, как CSS1. Она включала в себя базовые стили для текста, шрифтов, цвета и выравнивания. Можно было определять рамки, фоны, цвета текста, задавать расстояние между словами, межстрочные отступы и межсимвольный интервал. А также производить выравнивание текста, таблиц, изображений. ⠀ Уже в 1998 году была опубликована спецификация CSS2. Она добавила новые возможности: фиксированное, абсолютное и относительное позиционирование элементов, z-index, стили для медиа-типов и улучшенную поддержку таблиц. Расширился механизм селекторов и возможность добавлять содержимое, которое не содержится в исходном документе, а также звуковые носители стали определять громкость и голос. ⠀ В начале 2000-х началась разработка CSS3, основанный на CSS2. Он был разделен на модули и стал быстрее и гибче разрабатывать и внедрять новые возможности. CSS3 включает в себя десятки модулей, таких как Flexbox, Grid, анимации, трансформации, градиенты и т.д. ⠀ Сейчас официальной спецификации CSS4 нет, но новые возможности разрабатываются в рамках модулей CSS3 и включают в себя современные инструменты для веб-разработки: переменные (CSS Custom Properties), сложные селекторы, улучшенную типографику и адаптивный дизайн. ⠀ Подытожим: знание CSS – неотъемлемая база любого фронтендера. Это мост между простым HTML-кодом и многофункциональным, эстетичным и привлекательным веб-сайтом. #methed_про_ит

‍5 ПРИЧИН ИЗУЧАТЬ JAVASCRIPT В 2025 ГОДУ ⠀ Сейчас, чтобы конкурировать на рынке труда, разработчик должен быть многозадачным. Часто для создания приложения знания одного языка программирования маловато. Но только если речь не идёт о JavaScript. ⠀ JavaScript — универсальный язык, которому под силу справиться с несколькими задачами от фронтенда до бэкенда. Современный JS – это неотъемлемая часть серверного программирования и он успешно конкурирует с другими языками на рынке. ⠀ Существует ещё несколько веских причин, для того чтобы начать изучать JavaScript ⬇️ ⠀ 🔹️ Работает в браузере. Если для других языков нужно скачать редактор кода или кампилятор и настроить среду, то JavaScript – язык интернета по умолчанию. С ним можно запускать и тестировать код в браузере, без специальную среду разработки. Понадобится только веб-браузер и текстовый редактор. ⠀ 🔹️ Поддержка сообщества. У JavaScript одно из крупнейших сообществ на платформах StackOverflow, GeeksforGeeks, Hashnode и GitHub. Это значит, что разработчикам предлагаются готовые решения, новые инструменты, профресурсы и опытные наставники. ⠀ 🔹️ Карьерный рост. Благодаря своему широкому спектру применения JS пользуется большим спросом в небольших проектах и крупных компаниях. Изучение JS открывает двери карьерному росту от фриланса до высокой должности в ведущих IT-компаниях. ⠀ 🔹️ Экосистема. Появление Node.js дало возможность использовать JavaScript не только на стороне клиента, но и на сервере. Именно поэтому можно создавать полные приложения, используя только один язык. ⠀ 🔹️ Тренды. Одностраничные приложения (SPA) и прогрессивные веб-приложения (PWA), активно используют JavaScript. А фреймворки и библиотеки React и Vue.js – стандарт для создания сложных пользовательских интерфейсов. ⠀ Подытожим: в 2025 году знание JavaScript – это прямой путь к созданию полнофункциональных, производительных и отзывчивых приложений и безграничные возможности в постоянно развивающейся сфере IT. И если ты ещё не начал изучать JavaScript, сейчас самое время сделать первый шаг. #methed_про_ит

‍МАРАФОН "ИНТЕРНЕТ-МАГАЗИН ЗИМНЕГО ОБОРУДОВАНИЯ SKI-PEOPLE" ⠀ Испытать свои силы в вёрстке и с головой погрузиться в мир IT ты сможешь на двухнедельном авторском марафоне от METHED, который пройдёт с 31 марта по 13 апреля. ⠀ Запись доступна по ссылке ⬇️ 👉️ Записаться на марафон ⠀ Марафон подходит ⬇️ 🔹️Начинающим фронтендерам — новые знания + полноценный проект в портфолио. 🔹️Опытным специалистам — повышение мастерства + прокачка навыков и умений. ⠀ На марафоне ты используешь современные инструменты: Figma для дизайна и Vite в качестве сборщика проектов. Современные технологии HTML, CSS и JavaScript/ES6+ позволят создать удобный и понятный интерфейс, динамические элементы, плавную навигацию по сайту, уникальные шрифты и эффективный читаемый код. ⠀ Что будем делать? ⬇️ ▪️Работать со сборщиком проектов Vite. ▪️Вёрстать сайт по макету Figma. ▪️Писать стили для проекта используя SCSS. ▪️ Работать с элементами DOM-дерева. ▪️Отлавливать события пользователя и события браузера с помощью JavaScript и реагировать на них. ▪️Делегировать и использовать деструктуризацию. ▪️Работать с шаблонными строками и интерполяцией. ▪️Создавать удобную структуру проекта с роутингом (Navigo), навигацией и хлебными крошками. ⠀ А также тебя ждут прямые эфиры, лайфхаки и фишки из мира IT, общение с единомышленниками и мощная мотивация. После этого обучения ты точно сможешь сделать правильные выводы, как продвигаться и строить карьеру в IT. ⠀Стоимость марафона при таком масштабе знаний просто символическая и только для наших подписчиков специальное предложение: 1590₽ вместо 4590₽🔥 Зови друзей, переходи по ссылке, присоединяйся к нашей команде и вместе мы создадим увлекательный проект ⬇️ 👉️ Записаться на марафон #о_methed

‍5 ШАГОВ УСПЕШНОГО СТАРТА НА ФРИЛАНСЕ ⠀ Первый старт на фрилансе сложный. Вообще, фриланс не так прост, как о нём думают. Но гибкий график, возможность выбирать проекты и работать из любой точки, где есть интернет, притягивают новичков магнитом. ⠀ Чтобы иметь заказы, а значит и стабильный доход на фрилансе, для начала нужно разобраться, а твоё ли это пальто? ⠀ Итак, если ты готов к самодисциплине и постоянному планированию, самостоятельному поиску клиентов и проектов, отсутствию различных выплат (отпускных, премий и т.д.), общения с коллегами, недопониманию со стороны родных (а такое случается довольно часто), то тогда смело ступай на тропу фриланса. ⠀ А для того, чтобы путь был лёгким, забирай 5 шагов, которые помогут тебе не свернуть в дебри ⬇️ ⠀ 💻 Выбери свою нишу. Проведи анализ конкурентов, посмотри, в какой сфере больше всего требуются специалисты и меньше всего конкуренция. Лучше делать что-то одно хорошо, чем много, но посредственно. ⠀ 💻 Установи разумные цены. Для привлечения первых клиентов стоимость твоей работы вполне может быть невысокой, но тогда обязательно проси отзывы. Когда наберёшься опыта и почувствуешь, что можешь быстро и чётко справляться с задачами, держи цены на уровне рынка. ⠀ 💻 Работай над репутацией. Не срывай сроки, будь на связи с клиентами, прислушивайся к их пожеланиям, даже если тебе они непонятны. Всегда уточняй детали и согласовывай изменения. О вежливости даже говорить не будем – это безусловно. ⠀ 💻 Собирай клиентскую базу. Участвуй в тематических форумах и марафонах. Знакомься, общайся и взаимодействуй с коллегами, даже если ты интроверт. Социум — часть твоего развития. ⠀ 💻 Обучайся финансовой грамотности. Отслеживай доходы/расходы, откладывай часть заработка на подушку безопасности и своё обучение и развитие. Попробуй инвестировать, чтобы был пассивный доход. Помни, что никто не заплатит тебе просто за то, что ты фрилансер. ⠀ Важно! Многие заказчики требуют официального оформления, например, через договор. Поэтому, когда поймёшь, что у тебя получается и надо продолжать фрилансить, оформи ИП или самозанятость. Это отличный шанс зайти в серьёзные проекты на твоих условиях. #methed_про_ит

‍КАК СОВРЕМЕННЫЕ ТРЕНДЫ МЕНЯЮТ ВЕБ-РАЗРАБОТКУ ⠀ В IT-сфере очень важно следить за трендами и новыми технологиями. Это позволяет поддерживать конкурентоспособность, улучшать качество проектов и предлагать клиентам современные решения. ⠀ Основные тренды, которые можно выделить в 2025 году ⬇️ ⠀ 🔸️ Искусственный интеллект (ИИ) и машинное обучение (ML) Ускоряют процесс разработки и написание кода в разы. ИИ. используют для создания адаптивных пользовательских интерфейсов. А помощью ML можно создать интерфейс, который будет автоматически подстраиваться под предпочтения и поведение конкретного пользователя и обеспечивать комфортный опыт взаимодействия. Использование ИИ набирает обороты в российских компаний, потому что значительно снижаются затраты оптимизируются ресурсы. ⠀ 🔸️ Децентрализация. Обеспечивает пользователям контроль над своими данными и безопасностью без участников централизованных посредников. Пользователи смогут легко управлять своими идентификационными данными и цифровыми активами безопасно и конфиденциально. ⠀ 🔸️ Голосовые интерфейсы, 3D-технологии, расширенная реальность (AR), виртуальная реальность (VR). Использование голосовых помощников уже норма, которая позволяет позволяя пользователям выполнять много действий без необходимости вручную вводить данные. А чат-боты на базе AI уже давно решают повседневные задачи, предоставляют консультации и поддержку. Виртуальную реальность применяют в образовательных проектах, онлайн-магазинах и развлекательных сервисах, т.е. везде, где надо взаимодействовать с контентом. ⠀ Новые направления позволяют сфокусироваться на производительности и автоматизации процессов. А также на защите информации и соблюдении международных стандартов, например, GDPR. #methed_про_ит

‍КАКИЕ БЫВАЮТ PUSH-УВЕДОМЛЕНИЯ ⠀ Сейчас вместо sms-ок или электронных писем очень часто приходят push-уведомления. Это такие краткие сообщения, которые всплывают на главном экране мобильного устройства. Их цель — оповестить о твоих действиях или рассказать о предложениях. ⠀ Push-уведомления бывают ⬇️ ▪️ Мобильные — отправляют через приложения на смартфоны или планшеты. ▪️ Браузерные — приходят через интернет-браузерны на компьютеры и мобильные устройства. ▪️ Десктопные — отправляют через специальные программы, например, CRM-системы или мессенджеры. ⠀ При этом push по содержанию могут быть ⬇️ ▪️ Информационными — передают важные новости или уведомления. ▪️ Напоминания — предлагают завершить определённые действия. ▪️ Транзакционными — оповещают о статусе определённых действий, например, оплата, доставка, регистрация и т.д. ▪️ Промо — рассказывают об акциях, скидках, распродажах и т.д. ▪️ Персональными — оcновываются на интересах и поведении пользователей. ⠀ Время отправки также может отличаться: срочные, с важной информацией, прилетают мгновенно; запланированные приходят в определённое время. ⠀ Компании, которые хотят успешно продвигать свой бизнес давно поняли, что push-уведомления хороши для маркетинга по ряду причин: – отлично продвигают товары и услуги (особенно, если есть специальные предложения); – помогают выстроить доверие к бренду; – вовлекают пользователей, которые закрыли вкладку сайта; – напоминают о брошенных корзинах или мобильных приложениях. ⠀ Подытожим: эффективность push-уведомлений в разы превосходит email-рассылку и даже рекламу в Google или Яндекс. Если грамотно подойти к их разработке, то можно привлечь новых клиентов, активизировать старых и неплохо сэкономить на рекламном бюджете. #methed_про_ит

‍ЗАЧЕМ ИСПОЛЬЗОВАТЬ ОТДЕЛЬНЫЕ ДОМЕНЫ ДЛЯ СТАТИЧЕСКОГО КОНТЕНТА ⠀ Статический контент – файлы, которые кэшируются у пользователей и не изменяются на сервере. К ним относятся видео, изображения, шрифты и иконки. ⠀ Обычно статические файлы выносят на отдельный CDN или домен. Это делается для того, чтобы ⬇️ ⠀ ✔️ Разгрузить основной сервер. При таком подходе он обрабатывает только динамический контент. А статические файлы загружаются быстрее с другого сервера. ⠀ ✔️ Применять CDN и кэширование. Помогает устранять задержки и ускорять загрузку на сервисах, где скачивается много контента по всему миру, например, на видеохостингах или в онлайн-кинотеатрах. ⠀ ✔️ Ускорять загрузку сайта. Браузеры могут ограничивать количество одновременных соединений к одному домену (более 6-8). Если статика загружается с другого домена, то браузер может скачивать больше файлов одновременно. ⠀ ✔️ Уменьшать размер cookie. Основной сайт передаёт cookies при каждом запросе. Если статика загружается с отдельного домена без cookies, снижается трафик. ⠀ ✔️ Уменьшать размеры HTTP-запросов. Можно сократить количество пакетов для запроса различных частей страницы. ⠀ Как настроить отдельный домен для статики с применением CDN ⬇️ — создать отдельный домен для раздачи контента с CDN; — заключить договор с CDN-провайдером и сообщить ему, откуда он будет забирать origin-контент; — на сайте изменить домен для статики, которую планируется раздавать через CDN. ⠀ Важно! Настройка отдельного домена нужна, если ты создаёшь сайт с большим количеством медиаконтента и в ситуациях, когда не хочется, чтобы файлы cookie отправлялись на статические ресурсы. Выбор также зависит от конкретной ситуации и целей оптимизации сайта. #methed_про_ит

‍6 ИНСТРУМЕНТОВ ДЛЯ ПРОВЕРКИ ДОСТУПНОСТИ САЙТА ⠀ Если сайт перестаёт работать, велика вероятность потерять клиентов и заработок. А если страница долго не функционирует, её вообще удаляют из поисковой строки. Поэтому важно быстро реагировать на различные перебои в загрузке твоего ресурса. ⠀ Возможность проверять сайт каждую минуту есть не у всех и не всегда. И тогда на помощь приходят специальные сервисы, которые мониторят доступность сайта ⬇️ ⠀ 🔸️ Overseer Контролирует время отклика, длительность, время начала и текущий статус инцидентов, сертификаты SSL, редиректы и срок истечения регистрации домена. Сохраняет информацию в архиве в свободном доступе. Есть бесплатный тариф. ⠀ 🔸️ Monitorus Российский сервис для мониторинга, кроме доступности отслеживает множество параметров: целостность, изменения в файлах сайта, ресурсы сервера, наличие вирусов и подозрительной активности. ⠀ 🔸️ PingWin Здесь помимо мониторинга также можно отслеживать порты и время отклика. Удобный интерфейс и средства уведомления, много параметров проверки. ⠀ 🔸️ UptimeRobot Популярный зарубежный сервис для проверки доступности сайта онлайн с хорошим бесплатным тарифом. Здесь можно отследить полезные для администраторов сайта параметры – например, доступность портов. Есть приложение, которое позволяет отслеживать с телефона. ⠀ 🔸️ Siteuptime Сервис для разработчиков и администраторов. Если сайт сломается, владелец узнает об это раньше, чем клиенты. Автоматически проверяет сайт каждые 2 минуты из разных точек мира. ⠀ 🔸️ Monitor-site Работает в ручном и автоматическом режимах. Автоматическая проверка проводится каждую минуту. Проверка загрузки страницы по протоколам HTTP и HTTPS. ⠀ Регулярная проверка доступности позволяет быстро выявлять и устранять проблемы, минимизируя время простоя сайта. Это особенно важно для бизнеса и продаж. #methed_про_ит

‍БЭКЕНД-ПОНЯТИЯ, О КОТОРЫХ ВАЖНО ЗНАТЬ ФРОНТЕНДЕРУ ⠀ Фронтенд и бэкенд — это два основных аспекта веб-разработки. С фронтендом взаимодействуют обычные клиенты, а бэкенд — нутрянка, которая обрабатывает запросы от фронтенда. ⠀ Знание основ бэкенда важно для любого фронтендера. И есть основные механизмы, которые нужно освоить веб-разработчику ⬇️ ⠀ ▪️ Балансировка нагрузки. Помогает распределять входящие запросы между серверами, чтобы не было перегруза. Именно это обеспечивает стабильную работу приложений, когда ими пользуются огромное количество пользователей. ⠀ ▪️ Контроль частоты запросов. Накладывает ограничения на запросы пользователя, которые он направляет на сервер за определённое количество времени. Это не даёт перегружать сервер и защищает его от хакерских атак. ⠀ ▪️ Сеть доставки контента (CDN) Сохраняет по всему миру копии видео, изображений, текстов и т.д. и быстро доставляют их пользователю с самого ближайшего сервера. Как следствие, ускоряется загрузка сайта. ⠀ ▪️ Кэширование. Хранилище, которое временно сохраняет данные для быстрого доступа, например, ответы АPI или результаты запросов к базе данных. ⠀ ▪️ Шардинг. Разделяет большую базу данных на шарды (мелкие части), которые хранятся на отдельном сервере. Такое разделение упрощает масштабирование и улучшает производительность. ⠀ ▪️ Прокси-сервер. Промежуточный сервер, который действует как посредник между другим сервером и клиентом. Обеспечивает конфиденциальность кэширования запросов или обхода ограничений. ⠀ ▪️ Вебхук. Отправляет из одного приложения уведомления другому приложению в реальном времени при определённых событиях, что обеспечивает обновление данных мгновенно. Удобно, когда нужно уведомить систему о получении платежа. ⠀ Подытожим: знание бэкенда делает веб-разработчика ценным специалистом, позволяет лучше понимать продукт и эффективно взаимодействовать с командой. #methed_про_ит