Он был разработан за очень короткий срок, изменил мир интернета и стал одним из самых популярных языков программирования в мире. В декабре JavaScript исполняется 30 лет. Вспоминаем самые интересные факты о нём.
React привносит новые крутые фишки, которые могут оказать существенное влияние на процесс разработки. В этой статье мы подробно рассмотрим ключевые изменения.
Чтобы точно ответить на этот вопрос — собрали целый вебинар — для всех, кто хотел перейти в айти, попробовать Frontend или просто разобраться, что это такое.
Успех проекта по разработке во многом зависит от полноты и точности технического задания. Ошибки на этапе составления и утверждения ТЗ могут очень сильно сказаться на сроках и бюджете.Мы разработали чек-лист, который автоматически просчитает, насколько качественное ТЗ у вас получилось, и укажет на критично важные пункты, которых не хватает.
В этой подборке онлайн-курсов по фронтенду мы сравнили предложения популярных школ по нескольким параметрам и отобрали лучшие актуальные предложения для обучения на frontend-разработчика с нуля.
color это название анимации. Вы можете использовать любое имя для вашей анимации. Вставьте этот код в свой редактор и поэксперементируйте с цветами и временем.
В качестве альтернативы использования процентов, вы можете использовать ключевые слова from и to , где: from это значение начинающееся с 0% to это значение заканчивающееся на 100%. Например, оба примера выводят один и тот же результат:
animation-timing-function определяет кривую скорости анимации. Может иметь следующие значения:ease - анимация начинается медленно, затем быстро, затем медленно заканчивается (по умолчанию), linear - анимация с одинаковой скоростью от начала и до конца, ease-in - анимация с медленным началом, ease-out - анимация с медленным концом, ease-in-out - анимация с медленным началом и концом, cubic-bezier(n,n,n,n) - позволяет вам определять собственные значения в функции cubic-bezier.
Свойство animation-iteration-count определяет количество повторов анимации. Infinity - бесконечно количество раз. Если вы используете 0 или отрицательное число для animation-iteration-count, то анимация никогда не начнется.
animation-direction указывает, как ключевой кадр должен быть применен. Значениями могут быть: normal - значение по умолчанию, что значит, что оно выполняется от 0 % до 100%. reverse - анимация выполняется в обратном направлении от 100 % до 0%. alternate - анимация выполняется вперед, затем обратно, затем снова вперед. alternate reverse - анимация сначала выполняется в обратном направлении, затем вперед, затем снова в обратном направлении.
3D Трансформация похожа на 2D Трансформацию:rotateX(), rotateY() и rotateZ() вращают элемент в 3-х мерном пространстве вокруг соответствующих осей и с заданным градусом.
Методы 3D сдвига позволяют вам передвигать элементы горизонтально (translateX), вертикально (translateY) и к или от экрана (translateZ), используя любые единицы длины (px, em, %, и т.д.). Положительные значения сдвигают элемент к зрителю, а отрицательные – от него.
Сдвиг элемента похож на косвенное позиционирование - он не влияет на поток документа. Сдвинутый элемент оставит свое положение в потоке и появится только для перемещения.
Перспектива определяет глубину воспроизведения 3D сцены. Представляйте себе перспективу, как расстояние от зрителя до объекта. Чем больше значение, тем больше расстояние и меньше интенсивность визуального эффекта. При определении свойства perspective для элемента, перспективный вид получают именно дочерние элементы, а не сам элемент.
Испытывайте эти свойства на практике, внедряйте в свои проекты, чтобы оживить их. Также мы можем реализовать анимации через JavaScript, что я и планирую изучать дальше и делиться полученными знаниями с Вами.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":1,"reposts":0,"views":107,"hits":726,"reads":null,"online":0},"dateFavorite":0,"hitsCount":726,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1259896/478589-klyuchevye-kadry-i-animaciya-v-css-svoistva-animacii-3d-transformacii-sdvig-i-perspektiva","author":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764914158,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764914158,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":477185,"customUri":null,"subsiteId":1259896,"title":"При обучении на Front-end, изучая CSS и HTML, как понять что ты уже готов к JavaScript?","date":1659718254,"dateModified":1659718254,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"973c6d20-ccbf-5e2e-aab6-477a5ed38d4a","width":720,"height":417,"size":39499,"type":"jpg","color":"37845e","hash":"","external_service":[]}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"
Чтобы JavaScript не был сложен, запутан и недостижим. Давайте сегодня разберем, что лучше понять, перед тем как приступить к JS?
Важно понимать, что JavaScript, напрямую взаимодействует и связан с HTML и СSS. Поэтому не изучать их не получится никак. В работе, Front-end разработчик, постоянно работает с элементами HTML и СSS.
Итак, первое что нужно понимать — это все основы HTML и СSS. Уровня: «когда ты смотришь на любой макет и понимаешь, что можешь его сверстать». И не просто сверстать, а применив технологии и простые решения. А для того, чтобы твой код был чистым и правильным, важно знать технологии Grid, Flexbox, блочную модель, псевдоклассы, псевдоэлементы, комбинаторы, позиционирование, адаптив, анимацию и так далее, и понимать где всё это лучше применять и как эффективнее, используя продвинутые приёмы.
И прежде чем перейти к практике, к вёрстке макетов, нужно понимать теорию. А вот закреплять теорию, как можно больше практикуясь и делать это регулярно!
Чтобы программирование не показалось вам хаосом, чтобы вы не разочаровались и не поняли что это якобы не ваше, важно начинать путь изучения структурно и постепенно. В таком порядке, вы начнёте мыслить как разработчик.
Главное не останавливайтесь в развитии, следите за новыми инструментами, идеями, и успех Вас точно будет ожидать! Не бойтесь ошибок, не опускайте руки, хоть будет и сложно в самом начале пути.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":1,"favorites":6,"reposts":0,"views":93,"hits":426,"reads":null,"online":0},"dateFavorite":0,"hitsCount":426,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1259896/477185-pri-obuchenii-na-front-end-izuchaya-css-i-html-kak-ponyat-chto-ty-uzhe-gotov-k-javascript","author":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764914158,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764914158,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":3}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":473141,"customUri":null,"subsiteId":1259896,"title":"Какая разница в max/min — width(height) и просто width(height)?","date":1659211704,"dateModified":1659211704,"blocks":[{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"973c6d20-ccbf-5e2e-aab6-477a5ed38d4a","width":720,"height":417,"size":39499,"type":"jpg","color":"37845e","hash":"","external_service":[]}}}]}},{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"
Это руководство для новичков, которые как и я в начале своего пути освоения CSS и ищут самые простые объяснения в примерах.
Статья будет полезна, если ты уже приступил к практике и верстаешь свои первые проекты. Понимаю как важны такие простые разборы, поэтому решила по шагам показать как работает свойства на практике.
Как сказал htmlbook, а я дополню и разъясню. Width и height - устанавливает ширину и высоту блочных или заменяемых элементов. Ширина и высота не включает толщину границ вокруг элемента, значение отступов и полей.
Выражается свойство в %, пикселях (px), дюймах (in), пунктах (pt) и так далее. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родителя.
И как раз с помощью приставки max или min, мы можем задать максимальную или минимальную ширину или высоту элемента. А если значение ширины и высоты (width,height) больше или меньше значения max(min)-width(height), то ширина элемента принимается равной максимальному заданному значению.
Чтобы было еще легче понять, запомните эти моменты:
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Если мы хотим, чтобы какой-то блок и содержимое в нем занимало фиксированную ширину или высоту мы добавляем max(min).","Свойство max(min)-width(height) указанное еще и в % делает макет отзывчивым и адаптивным."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Разница между ними в том, что когда ты ставишь width, то у тебя фиксированная ширина, а когда ты ставишь max-width, то блок с таким свойством будет при уменьшении экрана тоже уменьшаться, это сделано для адаптивности. Вот вам пример на двух блоках ( в примере используем px, так будет удобнее увидеть разницу):
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, nesciunt. Vero blanditiis dolor alias nesciunt aliquam facilis vitae pariatur odit molestias odio non excepturi, repellat, praesentium et, suscipit nostrum! Nulla repellat vel autem dicta pariatur recusandae eum voluptatibus eveniet officiis ullam, exercitationem nesciunt quidem inventore vero quibusdam molestiae! Ducimus doloremque recusandae, error, totam soluta quas quidem culpa illum itaque repellendus quia animi minus iste harum vel ut corporis facere alias, sint tenetur. Eos, optio dolor ea omnis illo ullam cumque officiis rerum totam inventore dolores tenetur accusantium voluptas enim et doloremque temporibus, voluptates similique laudantium nisi veritatis voluptatum! Unde, maiores.
\n
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, nesciunt. Vero blanditiis dolor alias nesciunt aliquam facilis vitae pariatur odit molestias odio non excepturi, repellat, praesentium et, suscipit nostrum! Nulla repellat vel autem dicta pariatur recusandae eum voluptatibus eveniet officiis ullam, exercitationem nesciunt quidem inventore vero quibusdam molestiae! Ducimus doloremque recusandae, error, totam soluta quas quidem culpa illum itaque repellendus quia animi minus iste harum vel ut corporis facere alias, sint tenetur. Eos, optio dolor ea omnis illo ullam cumque officiis rerum totam inventore dolores tenetur accusantium voluptas enim et doloremque temporibus, voluptates similique laudantium nisi veritatis voluptatum! Unde, maiores.
Тут важно понимать, что если внутри блока не будет содержимого, мы ничего не увидим, автоматически заданные свойства будут равны 0, поэтому и наполнили блок текстом, а далее стилизуем два этих блока, задаём им ширину и цвет :
На этом примере мы видим, что если размер ширины страницы будет меньше чем 1500px, блок 2, в котором указана максимальная ширина (max-width) будет уменьшаться, стараясь соответствовать размеру страницы, а блок 1 с обычной шириной остается всё того же размера. Высота работает точно также.
Картинка без установления свойств ширины, так как ее размер по умолчанию больше и не помещается полностью, она уходит за рамки окна.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Без установления свойств ширины или высоты.","image":{"type":"image","data":{"uuid":"91873cf2-a848-52c1-9062-2d7e9644ae18","width":1878,"height":886,"size":326040,"type":"jpg","color":"e1cbba","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Устанавливаем ширину:
"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"img {\n\twidth: 30%;\n}","lang":""}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Теперь картинка занимает ширину окна, которую мы задали.","image":{"type":"image","data":{"uuid":"df73bd28-b8da-5291-876e-7ee7beb619ee","width":585,"height":398,"size":106679,"type":"jpg","color":"464517","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"
Таким образом, мы можем задать любую ширину или высоту картинки или блока, которая нам нужна по проекту. А если вы хотите, чтобы на странице был блок, который должен увеличиваться или уменьшаться, но только до определенного размера, используйте max и min. Копируйте код в примерах, экспериментируйте со значениями, и больше практики на старте! Удачи.
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":0,"favorites":2,"reposts":0,"views":59,"hits":2965,"reads":null,"online":0},"dateFavorite":0,"hitsCount":2965,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/id1259896/473141-kakaya-raznica-v-max-min-widthheight-i-prosto-widthheight","author":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764914158,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":1259896,"name":"FRONT-END INFO","nickname":null,"description":"Hi there 👋, I'm Liza I'm FrontEnd Developer 👍 I like to write code ⚡ I like to write articles for https://t.me/lizafrontend","uri":"","avatar":{"type":"image","data":{"uuid":"28d75f76-a7e6-5fae-b7d9-d3145d5b8b87","width":466,"height":558,"size":19126,"type":"jpg","color":"a9a6a7","hash":"07332b297064e4c1","external_service":[]}},"cover":null,"achievements":[{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 31 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":5455236,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5455236"},{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4187613,"userId":1259896,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4187613"}],"lastModificationDate":1764914158,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"reactions":{"counters":[{"id":1,"count":4}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};
![\"nature\"](\"image.jpg\")
","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"