Работа с GraphQL с помощью ванильного JavaScript
GraphQL — это язык запросов и серверная среда выполнения для API. Он разработан для того, чтобы сделать API быстрыми, гибкими и удобными для разработчиков. С момента его появления многие API перешли на поддержку GraphQL. Сегодня существуют различные библиотеки для работы с GraphQL, но иногда они могут быть избыточны для проекта.
Вы можете обойтись без лишних зависимостей, положившись на ванильный JS. Вот как это можно сделать:
https://blog.openreplay.com/working-with-graphql-with-vanilla-javascript/
#javascript #api #graphql
GraphQL — это язык запросов и серверная среда выполнения для API. Он разработан для того, чтобы сделать API быстрыми, гибкими и удобными для разработчиков. С момента его появления многие API перешли на поддержку GraphQL. Сегодня существуют различные библиотеки для работы с GraphQL, но иногда они могут быть избыточны для проекта.
Вы можете обойтись без лишних зависимостей, положившись на ванильный JS. Вот как это можно сделать:
https://blog.openreplay.com/working-with-graphql-with-vanilla-javascript/
#javascript #api #graphql
👍5
JavaScript localStorage: что такое и как использовать?
LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.
В статье рассказали, как работает и как использовать localStorage в JS
#js
LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.
В статье рассказали, как работает и как использовать localStorage в JS
#js
👍11
Cборщики (бандлеры) — просто о сложном во Frontend-разработке
Если вы новичок в разработке, то могли пока и не столкнуться с этим важным инструментом. Опытные разработчикии же вряд ли смогут обойтись без сборщика, работая над реальным проектом. Сборщики — это инструменты, которые помогают объединять и управлять модулями и зависимостями в проекте. Они особенно полезны в больших проектах, где есть множество файлов JavaScript, стилей и других ресурсов.
Подробнее о них:
https://tproger.ru/articles/cborshhiki-bandlery-prosto-o-slozhnom-frontend/
#фронтенд
Если вы новичок в разработке, то могли пока и не столкнуться с этим важным инструментом. Опытные разработчикии же вряд ли смогут обойтись без сборщика, работая над реальным проектом. Сборщики — это инструменты, которые помогают объединять и управлять модулями и зависимостями в проекте. Они особенно полезны в больших проектах, где есть множество файлов JavaScript, стилей и других ресурсов.
Подробнее о них:
https://tproger.ru/articles/cborshhiki-bandlery-prosto-o-slozhnom-frontend/
#фронтенд
3 альтернативы GitHub Copilot
GitHub Copilot позволяет нам писать код на основе кода других проектов. Это ускоряет и упрощает разработку. Но сегодня могут быть проблемы с доступом к этому инструменту, да и, возможно, вам захочется попробовать альтернативные инструменты, которые понравятся ещё больше.
Здесь вы увидите 3 реальные альтернативы:
https://blog.openreplay.com/three-alternatives-to-github-copilot-to-keep-an-eye-out-for/
#ии #инструменты
GitHub Copilot позволяет нам писать код на основе кода других проектов. Это ускоряет и упрощает разработку. Но сегодня могут быть проблемы с доступом к этому инструменту, да и, возможно, вам захочется попробовать альтернативные инструменты, которые понравятся ещё больше.
Здесь вы увидите 3 реальные альтернативы:
https://blog.openreplay.com/three-alternatives-to-github-copilot-to-keep-an-eye-out-for/
#ии #инструменты
❤9👍5🤨4
Pinball Physics
Развлекательно-познавательного контента вам в ленту. На codepen есть проект, который представляет собой полноценную игру Pinball, в которую вы можете поиграть, а когда поставите очередной рекорд изучить её код и даже попробовать повторить.
Взгляните сами:
https://codepen.io/lonekorean/pen/KXLrVX
#codepen
Развлекательно-познавательного контента вам в ленту. На codepen есть проект, который представляет собой полноценную игру Pinball, в которую вы можете поиграть, а когда поставите очередной рекорд изучить её код и даже попробовать повторить.
Взгляните сами:
https://codepen.io/lonekorean/pen/KXLrVX
#codepen
👍8🔥2
С локального хостинга в облако: деплоим сайт с Next.js, Django и Kubernetes
Представьте, вы разработали потрясающий сайт и теперь пришло время сделать его доступным для всего мира. Но процесс развёртывания может показаться сложным. Kubernetes вам поможет. Благодаря своим мощным функциям и интеллектуальному управлению контейнерами Kubernetes устраняет сложность развёртывания веб-сайта.
В этом руководстве вы детально пройдёте через процесс развёртывания веб-сайта без особых усилий:
https://dev.to/chetanam/from-localhost-to-cloud-nextjs-django-ssl-github-actions-dns-ultimate-website-deployment-tutorial-34hp
#nextjs #django #kubernetes
Представьте, вы разработали потрясающий сайт и теперь пришло время сделать его доступным для всего мира. Но процесс развёртывания может показаться сложным. Kubernetes вам поможет. Благодаря своим мощным функциям и интеллектуальному управлению контейнерами Kubernetes устраняет сложность развёртывания веб-сайта.
В этом руководстве вы детально пройдёте через процесс развёртывания веб-сайта без особых усилий:
https://dev.to/chetanam/from-localhost-to-cloud-nextjs-django-ssl-github-actions-dns-ultimate-website-deployment-tutorial-34hp
#nextjs #django #kubernetes
🤨8😐4👍2😁1
Руководство по наложению изображений в CSS
Обычно мы создаём наложения в CSS, чтобы получить изображения за текстом, значками или другими изображениями. Это руководство покажет вам, как красиво наносить слои как на фоновые изображения, так и на обычные
Подробнее:
https://blog.logrocket.com/guide-image-overlays-css/
#css #фронтенд
Обычно мы создаём наложения в CSS, чтобы получить изображения за текстом, значками или другими изображениями. Это руководство покажет вам, как красиво наносить слои как на фоновые изображения, так и на обычные
<img> элементы в CSS. Подробнее:
https://blog.logrocket.com/guide-image-overlays-css/
#css #фронтенд
👍4😐2
Forwarded from Мобильная разработка
This media is not supported in your browser
VIEW IN TELEGRAM
В Figma появился режим для разработчиков
Теперь макеты интерфейсов будет ещё удобнее переносить в вёрстку. Команда Figma анонсировала Dev Mode в Figma для получения кода CSS, Swift UI и Compose из макетов. Он пригодится как веб-, так и мобильным разработчикам.
Подробнее о новшестве мы рассказали тут:
https://tproger.ru/articles/figma-dobavila-dev-mode-dlya-veb-razrabotchikov
#дизайн #вёрстка
Теперь макеты интерфейсов будет ещё удобнее переносить в вёрстку. Команда Figma анонсировала Dev Mode в Figma для получения кода CSS, Swift UI и Compose из макетов. Он пригодится как веб-, так и мобильным разработчикам.
Подробнее о новшестве мы рассказали тут:
https://tproger.ru/articles/figma-dobavila-dev-mode-dlya-veb-razrabotchikov
#дизайн #вёрстка
🍾29👍16🍓3👎2💋2💩1
А как вы получили свою первую работу?
Вы долго готовились и ходили по собеседованиям или сразу согласились на первое же предложение? Это было сложно или проще простого?
Поделитесь опытом, а мы опубликуем вашу историю на сайте и её увидят читатели Типичного программиста: https://tproger.ru/articles/kak-vy-poluchili-svoyu-pervuyu-rabotu-rasskazhite-nam-o-svoyom-opyte/
Вы долго готовились и ходили по собеседованиям или сразу согласились на первое же предложение? Это было сложно или проще простого?
Поделитесь опытом, а мы опубликуем вашу историю на сайте и её увидят читатели Типичного программиста: https://tproger.ru/articles/kak-vy-poluchili-svoyu-pervuyu-rabotu-rasskazhite-nam-o-svoyom-opyte/
😁9❤2👍1🤔1💩1🌚1
Как работает Next Image в Next.js
Если вы работали с Next.js, скорее всего, вы сталкивались с компонентом Next Image. Он позволяет оптимизировать изображения, при этом поддерживает современные форматы, такие как webp и avif, а также генерирует несколько версий, адаптированных под различные размеры экранов.
При этом «из коробки» всё работает максимально просто при минимуме кода. Такая простота достигается благодаря внутренней сложности компонента: он состоит из трёх других компонентов React Next Image, API изображений и оптимизатора изображений. Но обо всём по порядку:
https://tproger.ru/articles/veshhi-o-kotoryh-vy-mogli-ne-znat-o-next-image
#nextjs #бэкенд
Если вы работали с Next.js, скорее всего, вы сталкивались с компонентом Next Image. Он позволяет оптимизировать изображения, при этом поддерживает современные форматы, такие как webp и avif, а также генерирует несколько версий, адаптированных под различные размеры экранов.
При этом «из коробки» всё работает максимально просто при минимуме кода. Такая простота достигается благодаря внутренней сложности компонента: он состоит из трёх других компонентов React Next Image, API изображений и оптимизатора изображений. Но обо всём по порядку:
https://tproger.ru/articles/veshhi-o-kotoryh-vy-mogli-ne-znat-o-next-image
#nextjs #бэкенд
👍9💩2
Самый безопасный способ скрыть ключи API при использовании React
Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера.
Подробнее:
https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/
#фронтенд #react
Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера.
Подробнее:
https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/
#фронтенд #react
❤5😐4👎1👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Вредный медведь на GSAP
Классный codepen-проект, который демонстрирует возможности современной вёрстки. Этот медведь будет мешать вам включить лампочку в комнате. Проект примечателен использованием библиотеки GSAP и наличием звуков при совершении действий.
Попытаться включить лампочку или посмотреть код можно здесь:
https://codepen.io/jh3y/pen/dyXBKog
#codepen
Классный codepen-проект, который демонстрирует возможности современной вёрстки. Этот медведь будет мешать вам включить лампочку в комнате. Проект примечателен использованием библиотеки GSAP и наличием звуков при совершении действий.
Попытаться включить лампочку или посмотреть код можно здесь:
https://codepen.io/jh3y/pen/dyXBKog
#codepen
🤨10👍4🤩2🤣2
Как студент стал фронтенд-разработчиком
Если вы думаете, что стать разработчиком легко, то вы ошибаетесь. К сожалению, вас не ждут 100500к рублей в секунду в начале карьеры — найти первую работу может оказаться сложно и главная задача у вас будет получить ценный опыт и закрепить знания для дальнейшего роста.
Пользователь нашего сайта рассказал, как он начал свой карьерный путь в IT, с какими сложностями столкнулся и и что было дальше:
https://tproger.ru/articles/nachalo-moej-karery-retrospektiva/
#историяуспеха
Если вы думаете, что стать разработчиком легко, то вы ошибаетесь. К сожалению, вас не ждут 100500к рублей в секунду в начале карьеры — найти первую работу может оказаться сложно и главная задача у вас будет получить ценный опыт и закрепить знания для дальнейшего роста.
Пользователь нашего сайта рассказал, как он начал свой карьерный путь в IT, с какими сложностями столкнулся и и что было дальше:
https://tproger.ru/articles/nachalo-moej-karery-retrospektiva/
#историяуспеха
🤡15👍4🎉2💩1
Forwarded from Типичный программист
Реально ли сделать движок для игры от первого лица за 265 строк Javascript?
В этой статье автор рассказал, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица с помощью приёма raycasting. Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D.
Вот демка
Вот статья
#gamedev #история #javascript #веб
В этой статье автор рассказал, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица с помощью приёма raycasting. Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D.
Вот демка
Вот статья
#gamedev #история #javascript #веб
👍19❤5🔥3
Топ реальных историй про первую работу: как начиналась карьера в IT у наших читателей
Недавно мы просили читателей Типичного рассказать о том, как они получали первую работу и какие советы дали бы начинающим специалистам, которые сейчас тоже ищут первую работу.
Делимся лучшими реальными историями про первую работу:
— Как таксист в тяжёлой депрессии стал Python-разработчиком
— С завода на завод. Как слесарь стал программистом всего за 8 месяцев
— Как пройти путь от галеры в Новосибирске до релокейта на Филиппины
— Как стать Golang-разработчиком и получить оффер на 100 000 рублей в 20 лет
— Как студент из Красноярска стал фронтенд-разработчиком
#карьера #работа
Недавно мы просили читателей Типичного рассказать о том, как они получали первую работу и какие советы дали бы начинающим специалистам, которые сейчас тоже ищут первую работу.
Делимся лучшими реальными историями про первую работу:
— Как таксист в тяжёлой депрессии стал Python-разработчиком
— С завода на завод. Как слесарь стал программистом всего за 8 месяцев
— Как пройти путь от галеры в Новосибирске до релокейта на Филиппины
— Как стать Golang-разработчиком и получить оффер на 100 000 рублей в 20 лет
— Как студент из Красноярска стал фронтенд-разработчиком
#карьера #работа
👍10❤1🥱1
7 библиотек для анимаций на React
Сегодня интерфейсы становятся всё сложнее. Из-за этого разработчики вынуждены искать всё более удобные инструменты для реализации таких интерфейсов и, в частности, анимаций.
В этой статье вы увидите 7 библиотек для анимаций на React, которые пригодятся вам в следующем вашем проекте:
https://tproger.ru/articles/luchwie-biblioteki-dlya-animacij-na-react/
#фронтенд #react
Сегодня интерфейсы становятся всё сложнее. Из-за этого разработчики вынуждены искать всё более удобные инструменты для реализации таких интерфейсов и, в частности, анимаций.
В этой статье вы увидите 7 библиотек для анимаций на React, которые пригодятся вам в следующем вашем проекте:
https://tproger.ru/articles/luchwie-biblioteki-dlya-animacij-na-react/
#фронтенд #react
👍5
Оптимизация Ruby-приложений: советы и примеры кода
Хотя Ruby является популярным языком программирования для разработки веб-приложений, его производительность может стать проблемой при работе с большими объёмами данных или высокой нагрузке.
В этой статье вы найдёте несколько полезных советов и примеров кода, которые помогут вам создать быстрые и эффективные программы:
https://tproger.ru/articles/optimizaciya-proizvoditelnosti-ruby-prilozhenij-sovety-i-primery-koda/
#ruby
Хотя Ruby является популярным языком программирования для разработки веб-приложений, его производительность может стать проблемой при работе с большими объёмами данных или высокой нагрузке.
В этой статье вы найдёте несколько полезных советов и примеров кода, которые помогут вам создать быстрые и эффективные программы:
https://tproger.ru/articles/optimizaciya-proizvoditelnosti-ruby-prilozhenij-sovety-i-primery-koda/
#ruby
Подборка актуальных вакансий
— Web-аналитик в Открытие
Где: Москва, можно удалённо
Опыт: от 2 лет
— PHP-разработчик в Гринатом
Где: удалённо
Опыт: от 2 лет
— PHP-разработчик в Гринатом
Где: удалённо
Опыт: от 3 лет
— Java-разработчик в Иннотех
Где: удалённо
Опыт: от 3 лет
— Java-разработчик в Открытие
Где: удалённо
Опыт: от 3 лет
— Тестировщик в Гринатом
Где: удалённо
Опыт: от 3 лет
— UX/UI-дизайнер в Гринатом
Где: удалённо
Опыт: от 3 лет
— Middle Golang-разработчик в МТС
Где: удалённо
Опыт: от 3 лет
— Senior Go-разработчик в МТС
Где: удалённо
Опыт: от 3 лет
#вакансии #работа
— Web-аналитик в Открытие
Где: Москва, можно удалённо
Опыт: от 2 лет
— PHP-разработчик в Гринатом
Где: удалённо
Опыт: от 2 лет
— PHP-разработчик в Гринатом
Где: удалённо
Опыт: от 3 лет
— Java-разработчик в Иннотех
Где: удалённо
Опыт: от 3 лет
— Java-разработчик в Открытие
Где: удалённо
Опыт: от 3 лет
— Тестировщик в Гринатом
Где: удалённо
Опыт: от 3 лет
— UX/UI-дизайнер в Гринатом
Где: удалённо
Опыт: от 3 лет
— Middle Golang-разработчик в МТС
Где: удалённо
Опыт: от 3 лет
— Senior Go-разработчик в МТС
Где: удалённо
Опыт: от 3 лет
#вакансии #работа
👎2🐳2👍1
Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS
В эпоху быстрого развития веб-технологий стандарты дизайна быстро меняются. Разработчикам иногда сложно учитывать все новшества при вёрстке.
В этой статье вы увидите простой автоматический способ преобразования конструкций Figma в Next.js-код с помощью Tailwind CSS:
https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/
#figma #css #nextjs #фронтенд
В эпоху быстрого развития веб-технологий стандарты дизайна быстро меняются. Разработчикам иногда сложно учитывать все новшества при вёрстке.
В этой статье вы увидите простой автоматический способ преобразования конструкций Figma в Next.js-код с помощью Tailwind CSS:
https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/
#figma #css #nextjs #фронтенд
🤮8❤4👍3💩2🤡1