Что такое и зачем нужен <div>

В вёрстке есть очень удобный HTML-тег — <div>. С его помощью обозначают блок, который не оформлен сам по себе, но может задавать оформление и структурировать веб-страницу.

Изначальная задача этого тега — собрать в кучу другие теги, чтобы получилось что-то единое, с чем можно работать как с одним объектом. Тег <div> появился в стандарте HTML3 в 1995 году, и на тот момент это было мощным решением: верстальщики получили возможность применять стили сразу к группе тегов.

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

С появлением <div> все перешли на блочную вёрстку, которая работает так:

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

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

В чем проблема div и почему некоторые разработчики ругают такую вёрстку, рассказываем в статье: https://v.thecode.media/l7oe8

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

https://v.thecode.media/vyrov

#разбор_Код

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

Эту задачу дают школьникам, когда они начинают проходить логику и связь между событиями. Дети в ней часто ошибаются, но, оказывается, и взрослые тоже — а всё потому, что взрослые не успевают хорошо всё обдумать. Теперь задачка.

У нас есть 5 исходных тезисов:

• В одном ведомстве некоторые работают секретными агентами.
• Маша — секретный агент.
• Саша никогда не был за границей.
• Все секретные агенты были за границей.
• Федя работает с Сашей.

Теперь скажите про каждую фразу ниже, правда это или ложь:

• Саша — секретный агент.
• Маша была за границей.
• Федя работает в секретной службе.

🔥 — если решили правильно с первого раза, не подглядывая в решение.

Что такое кросс-платформенная разработка

Кросс-платформенная разработка — это когда мы один раз пишем универсальный код, который потом превращается в приложение и на iOS, и на Android. Работает это так:

1. Один раз пишем кросс-платформенный код.
2. При компиляции выбираем, для какой платформы адаптировать код.
3. Кросс-платформенный фреймворк сам меняет свои команды на те, которые приняты на выбранной платформе.
4. Итоговый код пригоден для запуска на выбранной платформе.

Можно поставить сразу две галочки и скомпилировать код сразу под iOS и Android — в этом случае фреймворк по очереди преобразует универсальные команды в нужный код и мы получим сразу два приложения.

В мобильной разработке есть два кросс-платформенных фреймворка — React Native и Flutter. Они написаны на разных языках и работают по-разному.

#полезнознать_Код

Недавно мы стали разбираться с массивами в Python и начали со списка. Настало время продолжения и торжественного выхода кортежа.

https://v.thecode.media/2e3uu

#разбор_Код

Какими были ваши первые дни на проекте? С какими трудностями столкнулись? Расскажите🤔

Как проходит первый день программиста в новом проекте?

Программист входит в офис, готовый покорять мир кода, и оказывается перед массивом задач, которые кажутся неприступными. Он вспоминает все свои навыки, думает: «Ну что, пора сделать первый коммит и сразить всех своим кодом!»

И тут из-за угла выходит старый программист, смотрит на него и говорит: «Добро пожаловать! Здесь мы сначала читаем исходный код проекта в течение трёх дней, а потом начинаем писать комментарии к нему!»

https://v.thecode.media/96bkq

#подборка_Код

Задача про умножение с нестандартным решением

Эту задачу можно решить умом, а можно — грубой силой: https://v.thecode.media/ekqvu

Какой вариант выберете вы?

❤️— как программист
🔥— грубой силой

#лучшее_Код #задача_Код

Новости мира технологий на этой неделе

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

В Европе провели первую хирургическую операцию с использованием Apple Vision Pro. Операция была на позвоночнике, и очки дополненной реальности носил не хирург, а операционная медсестра, чтобы отслеживать все этапы. По словам хирурга, гарнитура превратила её в человека с десятилетним опытом.

Компании OpenAI и Figure представили умного робота-гуманоида Figure 01, который может полноценно общаться с людьми. Его встроенные камеры фиксируют данные вокруг и отправляют их в визуально-языковую модель. Робот понимает человеческую речь, отвечает голосом на вопросы об окружающем пространстве и очень точно взаимодействует с предметами.

SpaceX провела третий испытательный полёт сверхтяжёлой ракеты-носителя Starship. Полёт длился 50 минут, снижение началось после достижения высоты 230 км. При входе в атмосферу Starship сильно нагрелся, начал разрушаться, потерял связь и упал в океан в районе Мексиканского залива.

Вы ничего не пропустили 🙂

Дайджест статей за неделю

IP-телефония — это телефонная связь, которая работает через интернет. Разобрались, как это происходит и в чём отличия от звонков по Zoom.

Начали обстоятельно разбираться с массивами в Python и первый подробный рассказ посвятили спискам.

После этого не менее подробно изучили кортежи и сравнили их со списками.

Продолжили разговор о новинках в CSS, которые появились в 2023 году.

Обсудили с фулстек-разработчиком, в чём состоит его работа, с чего начать и какие перспективы.

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

Любим вас и тоже ждём настоящей весны!
Ваш «Код» 🫶

— Зайди на сайт…
— Это не сайт, а одностраничник!
— Ну, тогда, вообще-то, это лендинг.
— Ну хоть не портал…

Разбираемся с одностраничниками, лендингами, сайтами и порталами: https://v.thecode.media/d87u8

#разбор_Код

Расшифруйте GPT.

Только неправильные ответы.

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

https://v.thecode.media/lmh5c

#разбор_Код

Подключаем скрипты правильно

Одни подключают скрипты в начале HTML-страницы, другие — как они понадобятся, а третьи всё складывают в конце.

Рассказываем, кто прав и почему: https://v.thecode.media/xz3ff

#лучшее_Код #разбор_Код

УБЕРИ РУКУ С МЫШКИ!

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

#полезнознать_Код

Помните, Илон Маск нарисовал угловатую Теслу? Над ним тогда все смеялись, а потом он взял и выпустил автомобиль.

Мы сделали так же: нарисовали несуществующую гору, а потом р-р-р-раз — и выпустили задачку про неё. И про двух альпинистов-программистов.

Сможете справиться?

https://v.thecode.media/y74vo

#задача_Код

Что такое медиазапросы

Медиазапросы — это наборы правил, которые задают разные аспекты вёрстки в зависимости от размеров и свойств экрана браузера. Они появились в CSS3 в 2012 году, а сегодня их поддерживают все современные браузеры.

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

Если упростить, всё работает так:

1. Медиазапрос смотрит на условие, которое прописал разработчик, и проверяет, выполняется оно или нет. Например, ширина экрана меньше 500 пикселей.
2. Если условие выполняется — медиазапрос делает то, что написано внутри него: меняет шрифты, отступы и фон.
3. Если не выполняется — не происходит ничего. Но может сработать условие другого медиазапроса, и тогда сработает уже он.

Медиазапросов на странице может быть сколько угодно, главное, чтобы разработчик понимал, какой из них за что отвечает.

Как делаются медиазапросы и где применяются, читайте в нашей статье: https://v.thecode.media/ta4nh

Держите простой лайфхак:

1. Находите интересный гаджет в интернете, которого у вас нет.
2. Убеждаете себя, что это вам точно нужно и без этого прям никак.
3. Покупаете.
4. Через неделю-две он отправляется в коробку с тем, что выкинуть жалко, но чем пользоваться невозможно.

Мы так сделали 5 раз подряд и написали статью о гаджетах для айтишника, о которых вы пожалеете: https://v.thecode.media/nqxq6

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

#подборка_Код

Кто кого младше?

На работе программисты выяснили, что Вова старше Дениса, но младше Жанны. Алекс не старше Вовы. Если так, что что из этого верно?

1. Жанная самая старшая
2. Алекс и Жанна одного возраста
3. Вова и Денис одного возраста
4. Денис младше Жанны

Пишите цифры в комментариях, а правильный ответ ищите по ссылке: https://v.thecode.media/hfp67

#задача_Код

Что такое сокет

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

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

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

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

#полезнознать_Код