Свой сервис я почти доделал, скоро буду настраивать сервер, бд и тд. Ну как доделал... Конечно еще много работы предстоит, много правок, тестирования, оптимизаций, изменение дизайна, обработку ошибок. Но это уже дорабатывать после запуска. Пусть клиенты тестируют))) У меня денег на тестировщиков нет😆

Приложение работает, много функций, но в продакшен выпускать нельзя, только для своих клиентов, которые уже пользуются Бета версией, пользуются полгода и всем нравится💪 говорят простой дизайн, минималистично все, но удобно☝️

Бета версию я сделал еще в марте. С тех пор люди пользуются. С мая я делал с нуля рефакторинг. Переделал бекенд, фронтенд, сменил фреймворки, базу данных. Подшаманил и сделал лучше в 100 раз, осталось только добить. Новую версию считаю так же Бета, но 2.0 :))

В ноябре, как добавлю сервер и запущу новую версию, в два раза увеличу время на создание видео.

Еще на работе интересная задача. Делаю полноценный графический редактор, как фигма, немного проще😄

Но уже проделал огромную работу. Реализовал:
- Перемещение слоев
- Добавление в группы
- Удаление слоев
- Настройка элементов (смена названий, смена атрибутов, смена назначений)
- Функционал масок
- Добавление обьектов и картинок в редактор
- Настойка слоев (изменение цвета, опасити, размера, поворота, флипа)
- Сохранение элементов после изменений
- Отмена действий (ctrl + z / ctrl + shift + z)
- История изменений

И многое другое

Сейчас реализовываю работу с 3D в редакторе💪

Короче, ребята, программирование - это круто и интересно💪
Жду вас в наших рядах! Постараюсь помочь вам💛

Расширение встроенных объектов JavaScript

Расширение встроенных объектов JavaScript означает добавление новых методов или свойств к уже существующим объектам языка, таким как Array, String и Object.

У меня был пост про прототипы, где я рассказывал, как можно расширить или переопределить методы массивов или объектов.

Почему новичку учить и уметь это делать - не обязательно?

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

Если вам понадобится это в будущем, то на опыте вы поймете что к чему💪

Но в целом это не сложно, берешь глобальный объект и через прототип просто добавляешь новый метод👍

#обучающийПост #JavaScript #prototype

Бьем рекорд 😎👍

Кто хотел бы Общаться с разработчиками за 420.000₽?

Strict режим в JS

Строгий режим в JavaScript введен с целью обеспечения более строгого подхода к написанию кода и обнаружению часто встречающихся ошибок.

Преимущества:

Предотвращение ошибок: В строгом режиме некоторые ошибки, которые в обычном режиме были бы проигнорированы, становятся явными и вызывают исключение.

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

Запрет на "плохие" практики: Некоторые действия, которые JavaScript позволял делать раньше и которые могут привести к ошибкам, в строгом режиме запрещены.

Подготовка к будущим версиям ECMAScript: Строгий режим устраняет некоторые несовместимости, делая ваш код более устойчивым к будущим изменениям в языке.

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

#JavaScript #strict #обучающийПост

Эрик Барон, создатель "Stardew Valley"

Недавно прочитал историю про Эрика. Парень обучаясь на программиста решил для практики создать игру. У него не было опыта, он просто изучал разработку и работал над Пет-проектом. Он самостоятельно занимался всеми аспектами создания игры: от программирования и дизайна до музыки и искусства.

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

"Stardew Valley" была написана на языке программирования C# с использованием игрового движка MonoGame.

Как вам такой Пет-проект? 👍

Рекорд канала💪
Кажется нашел свой формат, На следующей неделе приступлю к написанию сценария HTML видеокурса

Dependency Inversion Principle

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

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

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

#обучающийПост #react #solid

Событие visibilitychange

Событие visibilitychange применяется к объекту document и позволяет отслеживать изменение видимости вкладки браузера. Событие активируется, когда пользователь переключается между вкладками, сворачивает браузер или по какой-либо другой причине окно браузера становится неактивным.

Свойство document.hidden указывает на то, видима ли вкладка в данный момент:

true: вкладка не видима;
false: вкладка видима.

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

#обучающийПост #JavaScript #event #visibilitychange

API (Application Programming Interface) — это набор определений и протоколов для создания и взаимодействия программных приложений между собой. API предоставляет готовые блоки, которые разработчики могут использовать для выполнения определенных функций вместо написания кода с нуля.

API может быть представлено в различных формах:

Веб-API: обычно это набор HTTP-запросов для выполнения операций и структуры ответов (обычно в формате JSON или XML). Например, Twitter API позволяет разработчикам взаимодействовать с большинством аспектов Twitter, включая отправку твитов, чтение списков пользовательских подписчиков и так далее.

Библиотеки и Фреймворки: например, jQuery — это библиотека JavaScript, которая предоставляет API для работы с DOM, обработки событий и выполнения AJAX-запросов.

Операционные системы: ОС, такие как Windows, iOS или Android, предоставляют API, которые разработчики используют для создания приложений для этих платформ.

Базы данных: БД предоставляют API для создания, чтения, обновления и удаления данных.

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

#api #обучающийПост #programming

Разница Cookies, sessionStorage и localStorage

Мы можем хранить информацию прямо в браузере разными способами. Рассмотрим три основных: Cookies, sessionStorage и localStorage.

🍪 Cookies:

Что это:
- Маленькие фрагменты данных, которые сайт может установить на компьютер пользователя.
Особенности:
- Имеют срок действия.
- Отправляются на сервер при каждом запросе, что может замедлить скорость загрузки страницы, если в куки много данных.
- Ограничены размером (обычно до 4КБ).

💼 SessionStorage:

Что это:
- Хранилище для временных данных в рамках одной сессии вкладки/окна.
Особенности:
- Данные хранятся только до закрытия вкладки или окна.
- Не отправляются на сервер.
- Обычно больше объем хранения по сравнению с cookies (около 5-10 МБ в зависимости от браузера).

📦 LocalStorage:

Что это:
- Хранилище для данных без срока действия.
Особенности:
- Данные сохраняются даже после закрытия вкладки или окна и перезапуска браузера.
- Не отправляются на сервер.
- Объем хранения аналогичен sessionStorage.

#обучающийПост #JavaScript #storage

Next.js 14

В свежем релизе Next.js 14 разработчики представили ряд привлекательных обновлений, направленных на ускорение и упрощение процесса разработки веб-приложений.

Turbopack:

- Локальный сервер теперь запускается на 53% быстрее.
- С Fast Refresh код обновляется на 94% быстрее.

Server Actions (Стабильный):

- Прогрессивно улучшенные мутации делают обработку данных на сервере более гибкой.
- Интеграция с системами кэширования и перепроверки данных обеспечивает актуальность информации.

Partial Prerendering (Превью):

- Быстрый статический ответ и последующая динамическая загрузка контента улучшают производительность и пользовательский опыт.

Next.js Learn (Новое):

- Бесплатный курс обучения, включающий темы по App Router, аутентификации, работе с базами данных и многому другому, помогает разработчикам быстро освоиться с Next.js 14​.

#news #next #react #framework #update

По моим наблюдениям, каждый год к концу года количество вакансий по фронтенду/бэкенду на HeadHunter сокращается.

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

Так что если вы ищете работу, не унывайте! Это временное явление, и после Нового года активность на рынке, как правило, возрастает.

Закончил съемку серии по миграции проекта с JS на TS.

TypeScript - всё!

Дальше у нас на очереди React Context

Автору книги «You don’t know JS” после технического собеседования и базового кодинга на JS отказали по причине того, что он недостаточно хорошо с ним справился

Коротко о душных собесах)

У моего друга профильное образование и опыт в больших компаниях 8 лет. На одном из интервью его собесили два мидла с опытом 3-4 года. Собес он не прошел) зато прошел 4 других, в более крупные компании)

Было бы прикольно реализовать такой проект в рамках практики по JavaScript. Загружаем картинку, добавляем фильтры, редактируем, и скачиваем. Далее выкладываем в инсту😄

Думаю сделать это, в формате таком же, как React Новости, только чистый JS, HTML, CSS

После выхода видеокурсов по этим технологиям разумеется

Что думаете?