sundwell.dev | Хроники инди-разработки – Telegram
sundwell.dev | Хроники инди-разработки
693 subscribers
224 photos
105 videos
136 links
Всё про инди от реального человека - девлоги, процесс маркетинга, геймдизайн, разработка и пиксель-арт
Download Telegram
Привет! 👋

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

В будущем я планирую запуск YouTube-канала, где будут скучные стримы с моим обнаженным торсом (не точно 🧐), детальные, интересные уроки, которых действительно не хватает, и разборы проектов, но сначала нужно разобраться с управлением в OBS и элементарным монтажом

Мне реально в кайф помогать другим с обучением и поддержкой, когда я узнаю что-то новое - я прямо ощущаю, как становлюсь умнее, и мне от этого приятно, а ещё приятнее делиться этими знаниями с другими

Буду рад вашим комментариям, критике, вопросам и предложениям по темам для постов. Подписывайтесь и нажимайте на колокольчик, следите за обновлениями!

Всем успехов и поменьше багов! 🐞
6👍1
А <!doctype html> и правда нужен?

Все мы знаем или хотя бы раз слышали, что если вы не укажете <!doctype html>, то произойдет "что-то плохое", браузер что-то там не поймет, и нужно явно указать ему, какое поведение вы от него хотите... и всё? Но где же примеры? Что именно плохого может случиться?

Всего есть 3 режима отображения:
- Quirks Mode, также известный как режим совместимости
- Limited-Quirks Mode, также известный как Almost Standards Mode
- Standards mode, также известный как strict mode или No-Quirks Mode

Вообще, единственная цель <!doctype html> — это активация стандартного режима отображения. Если doctype не указан или указан неправильно, то включится Quirks Mode

Кратко о режимах отображения

Quirks Mode - Режим совместимости с Netscape Navigator 4 и Internet Explorer 5. Грубо говоря, то, что было написано в 90-х годах, будет работать и сейчас, даже если оно неправильно написано, имеет ошибки или каким-то образом нарушает нормы из спецификации веб-формата. Вот пример (https://jsbin.com/sojavojeza/edit?html,output) (также прикрепляю скриншот), когда Quirks Mode изменяет поведение

Limited-Quirks Mode - Этот режим активируется, если указать какую-то конкретную версию html в doctype, например <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (больше примеров). К сожалению, визуальный пример создать не удалось, так как требуется специфическая старая версия браузера. Если кратко, то почти всё в этой версии работает так же, как и в Standards Mode

Standards Mode - Этот режим активируется, если указать <!doctype html>, и он работает так, как все привыкли (если браузер не старый, конечно)

Вы можете проверить, в каком режиме сейчас веб-страница, с помощью document.compatMode. У него есть два значения - BackCompat и CSS1Compat. Если отображается BackCompat, то это режим совместимости, иначе - стандартный режим

Дополнительно:
- https://hsivonen.fi/doctype/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
- https://dom.spec.whatwg.org/#concept-document-quirks

#html
2
__proto__ vs prototype

Сначала разберем, что такое proto и prototype

prototype - это шаблон для создания любого объекта, он присутствует только у функций (function) и классов (class). То есть, когда вы вызываете const myInstance = new MyClass(...), то в myInstance появятся все НЕ статические методы и свойства, которые были описаны в классе MyClass

Например, у нас есть вот такой класс:
class MyClass {
someVariable = 5

static staticVariable = 'static'

sayHello() {
console.log('hello')
}

static staticMethod() {
console.log('I\'m static')
}
}


Если вывести MyClass.prototype, то вот что мы увидим:

constructor: class MyClass
sayHello: ƒ sayHello()


Здесь мы видим все НЕ статические методы, которые будут у всех потомков. Если мы изменим этот прототип вручную динамически, например вот так:

MyClass.prototype.sayHelloTwice = function sayHelloTwice() { console.log('hello hello') }


То у всех объектов, которые были созданы через new MyClass(...) появится метод sayHelloTwice

То же самое касается инстанцирования через функции

function SomeClass() {
...
}

const instantiatedByFunction = new SomeClass()

instantiatedByFunction.sayHello() // Ошибка, TypeError, такого метода нет

SomeClass.prototype.sayHello = () => console.log('hello')

instantiatedByFunction.sayHello() // hello


__proto__ - это прямая ссылка (а точнее геттер и сеттер) на тот же prototype выше, если это возможно. Также есть возможность его изменять, но это уже устаревший подход и крайне не рекомендуется его использовать, вместо этого есть два метода - Object.getPrototypeOf и Object.setPrototypeOf

Вот как можно что-то сломать с помощью неправильного использования __proto__

Возьмем тот же class MyClass, который приведен выше:

const firstInstance = new MyClass()

firstInstance.sayHello() // hello

firstInstance.__proto__.sayHello = () => console.log('CRACKED')

firstInstance.sayHello() // CRACKED

const secondInstance = new MyClass()

secondInstance.sayHello() // CRACKED
```js

Конечно, это все можно проверить с помощью сравнения по ссылке:
```js
firstInstance.__proto__ === MyClass.prototype // true


Если подытожить всё вышесказанное:
1. prototype - это шаблон для создания новых объектов с помощью ключевого слова new
2. __proto__ присутствует только у объектов, которые созданы с помощью new и является прямой ссылкой на prototype родительской функции/класса
3. Не используйте __proto__, используйте вместо этого Object.getPrototypeOf и Object.setPrototypeOf

Материалы:
- https://prateeksurana.me/blog/how-javanoscript-classes-work-under-the-hood
- https://medium.com/dev-proto/understanding-proto-in-javanoscript-c5a42647f04
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto
- https://www.objectplayground.com/ и https://youtu.be/PMfcsYzj-9M

#js
2
sundwell.dev | Хроники инди-разработки pinned «Привет! 👋 Меня зовут Сергей Лямцев, и я уже 5 лет занимаюсь веб-разработкой. В этом канале я буду делиться своими знаниями и опытом в сфере фронтенд-разработки. Здесь вы найдете различные советы, статьи, примеры кода и многое другое В будущем я планирую…»
Нет ТЗ - результат ХЗ

#страхи #советы

Когда я только начинал свою карьеру разработчика, первые два года я всегда хотел идеального описания задач. Чтобы там было написано: "Сделать такую страницу, реализовать 1, 2, 3. Вот детальное описание и граничные кейсы к каждому пункту. Вот кто может просматривать эту страницу, здесь сделать так, здесь иначе, при нажатии на кнопку выполнять 4, 5, 6, ... и так далее."

Страхи в начале карьеры
Если что-то было не так, это меня огорчало и раздражало. Я либо вслепую следовал описанию задачи (каким бы плохим или хорошим оно ни было) и потом переписывал большую часть, либо, если вообще не понимал, шел уточнять детали с проджект-менеджером (или БА) и задавать вопросы.

У меня было несколько страхов по поводу всего этого:

1. Они подумают, что я плохой специалист, который не может разобраться сам.
2. Они будут раздражены, что я бегаю к ним за каждой мелочью и уточнением.
3. Зачем уточнять? Я только потеряю время и потом будут думать, что я недорабатываю.
4. ... и все в таком духе. Уже не помню всего, давно это было.


Изменение взгляда на задачи
Давайте посмотрим на это с другой стороны. Какая главная задача у проекта? У бизнеса? Ответ почти всегда один – заработать деньги. Разберем каждый из пунктов "страхов" выше:

1. Они подумают, что я плохой специалист, который не может разобраться сам.
- Не было времени. У проджект-менеджеров, БА, тестировщиков, разработчиков просто может не быть времени, чтобы полностью описать задачу, каждую деталь. Конечно, это их работа, но... это плюс для вас.
- Нет видения, как у вас. Люди разные, у всех разный опыт. Если у вас опыта в десять раз меньше, чем у другого специалиста, это не значит, что у него есть ваш опыт плюс свой, у него только свой опыт. У вас могут быть такие мысли, которые другому специалисту даже не приходили в голову.
- Лень? Иногда люди могут лениться или не видеть необходимости в деталях. Это не распространено, но возможно.
2. Они будут раздражены, что я бегаю к ним за каждой мелочью и уточнением.
- Нет. Вы не виноваты в том, что кто-то недоописал задачу или пропустил детали. Вы молодец, что пришли и задали вопросы один, два или даже десять раз (хотя это уже перебор).
3. Зачем уточнять? Я только потеряю время и потом будут думать, что я недорабатываю.
- Всё наоборот. Вы экономите время, когда уточняете. Вы экономите не только свое время, но и время тестировщиков, которые будут возвращать задачу на доработку, а также время пользователей проекта. Бизнес теряет деньги, если вы не уточняете.

Влияние на бизнес
Вы можете напрямую влиять на то, сколько бизнес зарабатывает денег. Не только с клиентов, потому что "сэкономленные деньги = заработанные деньги". Вы помогаете бизнесу разными путями, когда задаете вопросы, уточняете детали и общаетесь с другими. Вы помогаете в первую очередь самому себе.

Советы для развития
- Задачи плохо расписаны – распишите их хорошо. Помогите себе, тестировщику и всем другим в будущем. Вы пошли уточнять детали у ПМ/БА? Они запомнят вас как разработчика, который серьезно и ответственно относится к работе. Вы будете на слуху, вас начнут хвалить и обращаться к вам.
- Другой разработчик оставил баг – не нервничайте. Просто создайте задачу, уведомите тестировщика и ПМа, что нашли её. Вы молодец, вас запомнят.
- Дизайн непонятный – не нервничайте, это рабочий процесс. Если это критично, идите к дизайнеру и уточняйте эти моменты. Это ваша работа, и вы не должны злиться или расстраиваться из-за этих мелочей. Всегда есть выход.

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

Я относился к работе как к хобби, но это неправильно. Это работа, и вы ответственны за то, что происходит на работе. Если что-то не нравится – решайте это в свою пользу.
1🔥1
Привет всем читателям (мои 4 фейка, аккаунт девушки и моя мама) 👋

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

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

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

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

Это означает, что здесь будет контент про разработку игр, а не про веб-разработку, метания туда-сюда закончены 💪
🔥7👍1
День 1

Вчера был первый день, когда я начал пробовать разработку игр. Сначала я думал выбрать движок Unity (https://unity.com/), но потом все-таки решил попробовать Godot (https://godotengine.org/), потому что его очень хвалят 🧐 Келин (https://youtu.be/YRUrtVrQz54), shawcat (https://youtu.be/XQ_LpQzbsok)

В Godot используется собственный язык программирования GDScript (поддерживаются и другие, но рекомендуется использовать именно GDScript). Говорят, что он легкий и похож на Python, и это действительно так. К счастью, я уже работал с Python, поэтому мне будет значительно легче освоить GDScript, чем C# в Unity

Я также настроил Clockify (https://clockify.me/) с автотрекингом всех приложений и URL-адресов в браузере (первый скриншот), чтобы точно отслеживать, сколько времени я трачу и на что. Говорят, чтобы стать профессионалом в какой-то сфере, нужно потратить на это 10000 часов, так что буду следить за прогрессом

Кроме того, я настроил программу для создания скриншотов "на историю" – каждые 5 минут делается скриншот экрана. В будущем я смогу что-то с этим придумать, возможно, вставлю это в видео через год-два. Думаю, будет интересно. P.S. Скриншотилка в Clockify платная, но там можно взять 7 дней пробного периода, так что я решил попробовать, дальше посмотрим, как пойдет

Итак, фактически я потратил около 2 часов, из которых половину времени я смотрел видео от Brackeys (https://youtu.be/LOhfqjmasi0) (не все успел досмотреть, так что в понедельник досмотрю и доделаю проект с рыцарем), а вторую половину времени сам пробовал что-то делать в Godot и прикрутил к нему Git

Вот репозиторий с этим (пока что) недоделком - https://github.com/Sundwell/knight-godot

#разработка #godot
🔥5
День 2

Это был очень продуктивный день, примерно ~4 часа "штурма" Godot и завершение того видео от Brackeys

Видео длится немного больше часа (1:17:11), но почему у меня ушло 6 часов? Потому что я всё прорабатывал и старался что-то делать сам, пока моя стратегия просмотра видео-гайдов следующая

1. Если видео короткое (~20 минут), то я смотрю видео, стараюсь максимально всё понять, а затем самостоятельно всё воспроизвести, если что-то не получается - ищу часть в видео, где это делалось, пересматриваю её, и снова пытаюсь дальше всё воспроизвести
2. Если видео длинное, например "Спидран по смене пододеяльника за час" (действительно трудное дело), то я делю видео на какие-то логические части по мере просмотра, и далее всё как в пункте выше: часть прошёл - стараюсь сделать сам

План по изучению самого движка следующий

1. Посмотреть несколько видео-гайдов по Godot (и, конечно, всё это попрактиковать, добавить что-то своё)
2. Начать делать свою небольшую игру с парой механик, если что-то не получается или неясно - искать в документации, в гугле или на том же ютубе

Пока план небольшой и довольно поверхностный, но так всегда - план/вопрос/ответ будет на уровне "знаний", пока знаний маловато, значит и план небольшой

По фактическому прогрессу

1. Завершил базовую часть игры про рыцаря, добавил много нового по сравнению с предыдущим днём: платформы, монетки, базовый враг, перезапуск игры, анимации, звуки и счёт Так много всего потому что это всё делал вместе с Brackeys и он предоставил готовые ассеты, которые очень удобно использовать
2. Досмотрел видео о Godot от Brackeys
3. Весь день ходил и думал о "игре мечты" 👀

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

За пару дней я стал чувствовать себя намного лучше.. вот что значит начать заниматься тем, что действительно нравится, желаю всем найти время, силы и ресурсы, чтобы заниматься тем, чем вы хотели бы 🔥

P.S. прикрепил скриншот трекера и видео демки рыцаря, сбилдил игру для Windows, можете скачать и потыкать, вот ссылка на Google Диск с exe-шником

#разработка #godot
🔥2