Anticodeguy
651 subscribers
841 photos
171 videos
1 file
330 links
Technomad & systems thinker exploring paths to freedom and prosperity

https://stan.store/anticodeguy
Download Telegram
С небольшим запозданием, но всё же приятно получить заслуженный сертификат о защите проекта на курсе продуктового менеджмента от одной из сильнейших IT-команд на российском онлайн-ритейл рынке!
👍72
Чтобы понять, что такое Bootstrap, нам нужно погрузиться в основы сайтостроения и разобраться в том, а как вообще они пишутся и как создавались ещё в те времена, когда не было всех современных фреймворков, конструкторов и других инструментов, позволяющих создавать сайты за считанные минуты.

Когда мы вводим в браузере адрес сайта, происходит обращение к серверу, где лежат файлы этого сайта. Такой сервер называется хостингом, думаю, тебе знакомо это понятие. Это место, где «хостится» сайт или где размещены файлы этого сайта, которые нужно загрузить для его отображения в браузере. И, как правило, ключевым файлом, который отвечает за отображение сайта, является файл index.html.

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

Представь, что ты покупаешь какую-нибудь несложную мебель себе домой. Привозишь её, разворачиваешь инструкцию по сборке, где написано, какие действия нужно совершить, что куда прикрутить для того, чтобы получился тот самый предмет интерьера, который задумывал производитель и в том виде, как он был представлен в магазине. В браузере заложена инструкция, с которой он сверяется при чтении index.html и в соответствии с этой инструкцией собирает для нас страничку сайта (нашу мебель), которую мы увидим после того, как процесс загрузки завершится и браузер всё соберёт воедино.

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

И не забудь поставить реакцию к посту – мне это очень важно 👍 🔥 💩
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
HTML изначально был создан в конце 80-х годов прошлого века для того, чтобы обмениваться научно-технической документацией.

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

Но уже тогда в нем были дескрипторы или сейчас их называют теги (не путать с #хэштегами).

<TITLE>Название (титул)</TITLE>
<LISTING>Список</LISTING>
<H1>Заголовок первого уровня</H1>

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

Так вот в этом документе с помощью дескрипторов (тегов) создана определённая структура, которая говорит браузеру о том, каким образом ему нужно отображать тот или иной контент.

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

Ставь реакцию 👍 🔥 💩 и пиши в комментариях, насколько понятно (или непонятно) я объяснил, как браузер интерпретирует HTML-разметку.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Сегодня будет практический пост, из которого ты сможешь понять, как же создаются сайты, когда их пишут руками.

Мы сделаем простейшую страничку ‘Hello world!’ – это, как правило, в любом курсе программирования такой стартовый проект, тебе нужно написать программу, которая будет выводить два слова с приветствием миру. Собственно, этим и займёмся.

Всё, что тебе понадобится, это блокнот. Можешь сделать это в любом, даже в стандартном блокноте (Notepad) в твоей операционной системе. Нужно создать новый файл и написать в нём следующую структуру.

<!DOCTYPE html>
<html>
<head>
<title>Простейший сайт webKrafter</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

Теперь нужно сохранить этот файл как HTML. Назови его, например website.html и сохрани куда-нибудь (хоть на рабочий стол).

Теперь ты можешь просто открыть этот файл – он должен открыться сразу в браузере и ты увидишь страничку, которая только что была создана твоими собственными руками. Наверху на вкладке ты увидишь заголовок их шапки документа и сам текст Hello World.
🔥7👍2
Давай разберём, из чего состоит код HTML-разметки в мини-сайте, который мы с тобой сделали в прошлом посте.

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

Дальше открывается непосредственно сам тег (дескриптор) HTML и всё, что внутри, до его закрытия с наклонной палочкой, входит в состав этого HTML документа. То есть теги в основном ставятся с двух сторон (есть исключения), оборачивая контент внутри. Примерно так же, как со скобками – если открыли, значит должна быть закрывающая.

Контент внутри тега HTML состоит из двух частей. <head></head> или голова: а здесь всё, что касается предварительного описания странички. В примере тут у нас есть единственный тег <title></title>, в котором мы пишем заголовок страницы.

И вторая часть этой структуры – <body></body>, тело – непосредственно содержимое документа, то, что будет отображаться в браузере. Здесь мы добавляем тег <p></p> (Paragraph), который обозначает параграф или отдельный абзац, в котором мы пишем наше предложение.

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

Ставь реакцию 👍 🔥 💩 и пиши в комментариях свои вопросы.
👍61
Альтернативы Firebase

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

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

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

Итак, я сегодня предлагаю тебе рассмотреть эти инструменты в своём арсенале на случай, если вдруг тебе также понадобятся аналоги Firebase: это Supabase.com и Nhost.io. Они в какой-то степени могут быть лучше Firebase, по стоимости либо по функциональности. В частности, позволяют реализовать вот эту функцию вызова внешнего API без всяких танцев с бубном, то есть это штатная функциональность сервиса.

Итак, две новых закладочки в перечне no-code инструментов. Я думаю, что пора будет скоро делать собственную библиотеку с ними…
👍6
🤓 Очередная страшилка про ИИ и угрозу всему человечеству

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

Вчера некоммерческий институт Future of Life опубликовал открытое письмо (вот ссылка на оригинал), подписанное сильными мира сего, включая Илона Маска, Стива Возняка и других видных экспертов. Хотя я не понял, когда эти два товарища стали вдруг экспертами по ИИ, ведь один запускает ракеты в космос и электромашинки на дороги, а другой засветился у истоков основания Apple, ну да хрен с ними. Привожу кратко ключевые тезисы из этого письма в моём вольном переводе с сохранением смысла. К чему же призывают эксперты…

— Остановить неподконтрольное развитие ИИ и невозможность его понять
— Даже создатели не смогут предсказать, как он себя поведёт
— Уже сейчас есть угроза заменить людей на базовых задачах. Опасение – что же будет дальше по мере развития.
— Хотим ли мы позволить ИИ наполнять информационное поле пропагандой и ложной информацией (вспоминаем папу римского в белом пуховике)
— Должны ли мы автоматизировать работу, в том числе которая приносит нам удовлетворение
— Должны ли мы развивать разум, который может нас превзойти числом, интеллектом, перехитрить и в итоге заменить нас
— Должны ли мы принимать риск потерять контроль над цивилизацией
— Решение по подобным вопросам нельзя давать на откуп владельцам технологических компаний (которые сейчас занимаются развитием ИИ)
— Мы хотим быть уверенными в том, что эффект от развития и применения ИИ будет позитивный и управляемый
— Обучение новых моделей должно проводиться под наблюдением независимых экспертов и с соблюдением специально разработанных для этого протоколов

Напиши, что думаешь по этому поводу, в комменты.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Итак, про вчерашний пост с петицией притормозить обучение новых версий нейросетей

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

Я уже писал раньше, что Илон Маск был одним из ранних инвесторов в Open AI, создателя ChatGPT. Но он оттуда вышел слишком рано и теперь, думаю, покусывает себе локоточки за такую оплошность, так как мог бы прибавить к своему капиталу с десятки, если не больше, миллиардов. Да ещё и остаться в стороне от передовой с новыми прорывными технологиями. Конечно, лучше притормозить такую потерю…

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

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

А так я бы хотел посмотреть своими глазами, как человек, очень гибкий и адаптивный, будет приспосабливаться к новому миру с ИИ, где тот занимает какую-то значимую позицию. Что-то мне подсказывает, что мы сможем справиться с этим вызовом не хуже, чем до этого справлялись со всеми остальными.
👍7
Поделюсь ещё несколькими фантазиями Midjorney на тему того, как ИИ будет рулить человечеством.
😁4🔥3👍1
Прошлыми постами мы немного отвлеклись от создания простейшего сайта. Теперь возвращаемся к этой теме.

Если у тебя получилось сделать свой первый сайт, то ты можешь заметить, что выглядит он обычно, это белый фон и на нём написан текст чёрными буквами. И это совершенно не похоже на те сайты, которые мы посещаем каждый день и видим на просторах сети Интернет. Итак, каким же образом сайт становится красивым, аккуратным, адаптивным и выглядит впечатляюще на всех устройствах?

Для этого существует несколько приемов. Во-первых, нужно правильно выстроить структуру сайта. Если ещё раз посмотреть на предыдущий пост, в котором я объяснял, что означает каждый блок, то можно заметить, что у него есть определённые части, заголовок, параграф, само тело контента. Так вот, таких структурных элементов в HTML существует достаточно много и комбинируя их различным способом можно создать нужный тебе макет или каркас, который уже будет наполняться контентом.

А этот каркас и контент в свою очередь нужно стилизовать, применив к нему определённые свойства, влияющие на отображение в браузере. Для это были придуманы, так называемые таблицы стилей или CSS (СиЭсЭс), который как раз используется для того, чтобы дать браузеру понять, каким образом нужно отображать элемент. В том числе можно задать такие простейшие свойства, как цвет шрифта, его размер, выравнивание и другие вещи, которые мы привыкли видеть, например в текстовых редакторах.

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

Далее расскажу о том, как обычно эти стили настраиваются и причём тут вообще Bootstrap.
👍5
🖌 Как настраиваются стили на сайтах

Для того, чтобы аккуратно и настраивать стили было придумано несколько приемов, которые упрощают это. Стили можно указывать непосредственно в дескрипторах в качестве свойств. Выглядит это так: <body style="background-color:back;">. То есть прямо в тег добавляется свойство style (стиль внезапно) и в нём перечисляются стили, которые нужно применить к контенту внутри этого тега.

Более грамотным решением считается указание стилей в отдельном блоке или даже в отдельном файле. Для уникальных тегов, типа <body>, стили можно настроить, просто указав само название тега, потому что он встречается в любом HTML только один раз, так заложено в структуре.

А вот если нужно настроить стили для текстовых параграфов, которых может быть не один десяток на странице, одним указанием тега не обойтись. Здесь приходят на помощь идентификаторы и классы. Мы можем присвоить любому тегу класс, например, <p class=”red-text”> и в отдельном блоке настроить стили для этого класса, задав шрифту, например, красный цвет. Таким образом все параграфы на странице с таким классом будут покрашены в красный. Это очень удобно, потому что, если мы захотим поменять цвет у этих абзацев, это нужно будет сделать только в одном месте и один раз.

Ну и, наконец, можно выносить стили вообще в отдельный файл, который подгружается независимо. Это, кстати, намного удобнее в плане поддержки кода. Когда у тебя все стили собраны в одном месте и тебе не нужно менять сам основной документ разметки, можно просто отредактировать сам табличку стилей и добиться нужного результата.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Глядя на количество реакций к прошлым постам, я понимаю, насколько тебе скучно неинтересно читать про всю эту техническую лабуду. И знаешь что? Мне на самом деле тоже: это одна из причин, по которой я в своё время ушёл из программирования и начал вплотную заниматься системным анализом.

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

А в системном анализе при схожих задачах нужно заниматься графиками, диаграммами, рассматривать различные варианты, проводить исследования, что намного веселее интереснее и увлекательнее.

Но ровно по совокупности этих двух причин, скуки от классического программирования и интереса к созданию систем с помощью различных диаграмм и графиков, я пришёл в no-code разработку. Он как раз и позволяет с помощью различных интерактивных элементов программировать и это ровно то, что делают, no-code инструменты, оставляя за кулисами вот эти скучные написания кодов, свойств, создания структур, которые на каждом сайте будут выглядеть действительно одинаково в базовом смысле. Я не говорю про наполнение контентом, я говорю про каркас, то есть каждом документе будет вот это <html>, <head>, <body> и так далее. То есть каждый раз делаешь, по сути, одно и то же и у тебя отличается только контент.

Да, сейчас программисты меня закидают яйцами за это и будут спорить с пеной у рта о том, что программирование – это намного глубже, там всё очень сложно, там много творчества и так далее. И знаешь что, я действительно всё это знаю, проходил на своей шкуре, писал на PHP, JavaScript, создавал сложные программные системы абсолютно с нуля.

Но теперь я смотрю на это в другой ипостаси, с точки зрения no-code разработки и, по крайней мере, для меня это намного увлекательнее и разнообразнее.
👍13❤‍🔥2
Теперь давай вернёмся к созданию сайтов

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

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

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

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

Примерно так и работает фреймворк Bootstrap (или любой другой фреймворк для построения frontend-части). Это, пожалуй, первый уровень упрощения: такие готовы библиотеки, которые можно использовать при разработке сайтов. А дальше я расскажу, как можно выйти на следующий уровень этого упрощения и сделать удобнее даже работу с самим фреймворком Bootstrap.
👍7❤‍🔥2