Forwarded from Frontend по-флотски 👨💻
Что нового из CSS я уже использую в продакшене? 🛁
Я всё время пишу про новые CSS фичи, но большинство из них ещё не готово к использованию в реальных проектах, сегодня хочу поделиться, какими современными CSS фичами я пользуюсь в продакшене
1. Псевдоселектор :has — мощный селектор для выбора родительского элемента, который содержит в себе конкретный дочерний элемент (87.43% на caniuse)
2. display: contents — перестаёт отображать элемент, как будто его не существует в DOM, очень удобно для адаптива (95.83% на caniuse)
3. Псевдоселектор :is — удобно для сокращения повторящихся вложенностей для конкретного селектора (96.91% на caniuse)
4. Псевдоселектор :where — для меня это альтернатива для :is, но с нулевой специфичностью (92.82% на caniuse)
5. Псевдоселектор :focus-within — удобно стилизовать контейнер, который содержит инпут с фокусом (95.81 на caniuse)
Я всё время пишу про новые CSS фичи, но большинство из них ещё не готово к использованию в реальных проектах, сегодня хочу поделиться, какими современными CSS фичами я пользуюсь в продакшене
1. Псевдоселектор :has — мощный селектор для выбора родительского элемента, который содержит в себе конкретный дочерний элемент (87.43% на caniuse)
2. display: contents — перестаёт отображать элемент, как будто его не существует в DOM, очень удобно для адаптива (95.83% на caniuse)
3. Псевдоселектор :is — удобно для сокращения повторящихся вложенностей для конкретного селектора (96.91% на caniuse)
4. Псевдоселектор :where — для меня это альтернатива для :is, но с нулевой специфичностью (92.82% на caniuse)
5. Псевдоселектор :focus-within — удобно стилизовать контейнер, который содержит инпут с фокусом (95.81 на caniuse)
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN Web Docs
:has() - CSS | MDN
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a…
Generate a Random Number in Range With JavaScript/Node.js
https://futurestud.io/tutorials/generate-a-random-number-in-range-with-javascript-node-js
#coding
#javascript
https://futurestud.io/tutorials/generate-a-random-number-in-range-with-javascript-node-js
#coding
#javascript
futurestud.io
Generate a Random Number in Range With JavaScript/Node.js
Future Studio provides on-demand learning & wants you to become a better Android (Retrofit, Gson, Glide, Picasso) and Node.js/hapi developer!
7 Awesome Vue.js 3 Plugins and Libraries to know in 2023
https://vueschool.io/articles/vuejs-tutorials/7-awesome-vue-js-3-plugins-and-libraries-to-know-in-2023/
#coding
#javascript
#vue
https://vueschool.io/articles/vuejs-tutorials/7-awesome-vue-js-3-plugins-and-libraries-to-know-in-2023/
#coding
#javascript
#vue
vueschool.io
7 Awesome Vue.js 3 Plugins and Libraries to know in 2023 - Vue School Articles
Are you looking to build awesome Vue.js applications in 2023? We've put together a list of seven incredible Vue 3 plugins and libraries that can help you add exciting features and functionality to your applications without writing lots of code.
How to execute multiple promises sequentially in JavaScript ?
https://www.geeksforgeeks.org/how-to-execute-multiple-promises-sequentially-in-javascript/
#coding
#javascript
https://www.geeksforgeeks.org/how-to-execute-multiple-promises-sequentially-in-javascript/
#coding
#javascript
GeeksforGeeks
How to execute multiple promises sequentially in JavaScript ? - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
Good Ways To Organize Large Vue.js Project
https://medium.com/@nile.bits/good-ways-to-organize-large-vue-js-project-a38e557c9876
#coding
#javascript
#vue
https://medium.com/@nile.bits/good-ways-to-organize-large-vue-js-project-a38e557c9876
#coding
#javascript
#vue
Medium
Good Ways To Organize Large Vue.js Project
It can be difficult to keep a large Vue.js project structured, but there are a number of tactics you can employ to do so. Here are some…
Vue 3 i18n: Building a multi-language app with locale switcher
https://lokalise.com/blog/vue-i18n/
#coding
#javascript
#vue
https://lokalise.com/blog/vue-i18n/
#coding
#javascript
#vue
Lokalise Blog
Vue 3 i18n: Building a multi-language app with locale switcher - Lokalise Blog
Vue i18n is a key process needed to localize your Vue 3 apps and websites. Learn how to set up a Vue app with i18n support in this guide.
A Comprehensive Guide to Vue Localization
https://phrase.com/blog/posts/ultimate-guide-to-vue-localization-with-vue-i18n/
#coding
#javascript
#vue
https://phrase.com/blog/posts/ultimate-guide-to-vue-localization-with-vue-i18n/
#coding
#javascript
#vue
Forwarded from Веб-страница
Работа с 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
Forwarded from Frontender's notes [ru]
🚀Использование Ionic и Vue 3 для создания мобильных приложений
В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor.
Читать...
В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor.
Читать...
Forwarded from Frontender Libs - обзор библиотек JS / CSS
Vue Vine
Vue Vine - легковесная библиотека для управления состоянием и асинхронными операциями в приложениях Vue.js. Ее основной концепцией является использование винов (Vines) для описания и выполнения асинхронных операций. Vue Vine предоставляет чистый и декларативный API для управления данными и обновления состояния приложения. Она интегрируется хорошо с компонентами Vue.js и позволяет упростить разработку асинхронных операций, обеспечивая чистоту и модульность кода.
👉 @sWebDev
Vue Vine - легковесная библиотека для управления состоянием и асинхронными операциями в приложениях Vue.js. Ее основной концепцией является использование винов (Vines) для описания и выполнения асинхронных операций. Vue Vine предоставляет чистый и декларативный API для управления данными и обновления состояния приложения. Она интегрируется хорошо с компонентами Vue.js и позволяет упростить разработку асинхронных операций, обеспечивая чистоту и модульность кода.
👉 @sWebDev
Что значит текст max call stack size exceeded в консоли?
Текст "max call stack size exceeded" в консоли означает, что было достигнуто максимальное количество вызовов функции в стеке вызовов JavaScript. Стек вызовов - это механизм, который используется для отслеживания выполнения функций. Каждый раз, когда функция вызывается, она помещается в стек вызовов. Когда функция заканчивает свое выполнение, она удаляется из стека вызовов.
Когда функция вызывает саму себя рекурсивно без остановки, то каждый новый вызов функции добавляется в стек вызовов, и если количество вызовов становится слишком большим, то возникает ошибка "max call stack size exceeded". Это происходит потому, что стек вызовов имеет ограниченный размер и не может бесконечно увеличиваться.
Чтобы решить эту проблему, нужно переписать код таким образом, чтобы рекурсивные вызовы функции прекращались на определенном условии. Например, можно добавить условие, которое проверяет, достигнуто ли максимальное количество вызовов функции, и если да, то прекратить рекурсивные вызовы. Также можно использовать циклы вместо рекурсии, чтобы избежать проблемы с переполнением стека вызовов.
👉 @frontendInterview
Текст "max call stack size exceeded" в консоли означает, что было достигнуто максимальное количество вызовов функции в стеке вызовов JavaScript. Стек вызовов - это механизм, который используется для отслеживания выполнения функций. Каждый раз, когда функция вызывается, она помещается в стек вызовов. Когда функция заканчивает свое выполнение, она удаляется из стека вызовов.
Когда функция вызывает саму себя рекурсивно без остановки, то каждый новый вызов функции добавляется в стек вызовов, и если количество вызовов становится слишком большим, то возникает ошибка "max call stack size exceeded". Это происходит потому, что стек вызовов имеет ограниченный размер и не может бесконечно увеличиваться.
Чтобы решить эту проблему, нужно переписать код таким образом, чтобы рекурсивные вызовы функции прекращались на определенном условии. Например, можно добавить условие, которое проверяет, достигнуто ли максимальное количество вызовов функции, и если да, то прекратить рекурсивные вызовы. Также можно использовать циклы вместо рекурсии, чтобы избежать проблемы с переполнением стека вызовов.
👉 @frontendInterview
Forwarded from TechRocks
Начните использовать Prettier правильно
#tools
Возможно, вы, как и я, установили расширение Prettier, включили форматирование при сохранении, разочаровались, когда код начал при сохранении прыгать, и отключили расширение. К сожалению, мне потребовалось много времени, чтобы начать использовать Prettier правильно. Цель этой статьи — помочь вам избежать моих ошибок.
Читать статью
#tools
Возможно, вы, как и я, установили расширение Prettier, включили форматирование при сохранении, разочаровались, когда код начал при сохранении прыгать, и отключили расширение. К сожалению, мне потребовалось много времени, чтобы начать использовать Prettier правильно. Цель этой статьи — помочь вам избежать моих ошибок.
Читать статью
Forwarded from Node.JS [ru] | Серверный JavaScript
👨💻Начало работы с Webpod: упрощенное решение для деплоя вашего веб-сайта
В этой статье автор расскажет как Webpod позволяет эффективно и быстро развернуть веб-сайт на сервере, позволяя больше сосредоточиться на кодировании и меньше на настройке.
Читать...
В этой статье автор расскажет как Webpod позволяет эффективно и быстро развернуть веб-сайт на сервере, позволяя больше сосредоточиться на кодировании и меньше на настройке.
Читать...
How to Deploy Strapi MySQL on a Traditional Hosting Provider
https://dev.to/strapi/how-to-deploy-strapi-mysql-on-a-traditional-hosting-provider-25l4
#coding
#js
#strapi
https://dev.to/strapi/how-to-deploy-strapi-mysql-on-a-traditional-hosting-provider-25l4
#coding
#js
#strapi
DEV Community
How to Deploy Strapi MySQL on a Traditional Hosting Provider
This article explains to deploy a Strapi MySQL on a traditional hosting provider. Author: Abdulwahab...
Forwarded from Node.JS [ru] | Серверный JavaScript
👾Пишем умный поиск по коду с Open AI
В этой статье мы рассмотрим технологию, которая лежит в основе ChatGPT — эмбеддинги, и напишем простой интеллектуальный поиск по кодовой базе проекта.
Читать...
В этой статье мы рассмотрим технологию, которая лежит в основе ChatGPT — эмбеддинги, и напишем простой интеллектуальный поиск по кодовой базе проекта.
Читать...
Forwarded from Библиотека пхпшника | PHP, Laravel, Symfony, CodeIgniter
Опишите жизненный цикл HTTP-запроса?
Жизненный цикл HTTP-запроса в PHP можно разделить на следующие этапы:
1. Инициация запроса: Когда клиент отправляет HTTP-запрос на сервер, он инициирует процесс обработки запроса. В PHP это может быть инициировано, например, через браузер или с помощью команды curl в командной строке.
2. Маршрутизация: После получения запроса сервер должен определить, какой код или файл должен обрабатывать этот запрос. В PHP это может быть определено с помощью файла .htaccess или механизма маршрутизации, такого как маршрутизатор в фреймворке.
3. Обработка запроса: Когда PHP определяет, какой код или файл должен обработать запрос, он запускает этот код или файл. Этот этап включает выполнение кода, чтение и обработку данных, выполнение операций с базой данных и другие операции, необходимые для обработки запроса.
4. Генерация и отправка ответа: После обработки запроса PHP генерирует данные, которые должны быть отправлены обратно клиенту. Это может включать в себя генерацию HTML-страницы, отправку изображений, создание и отправку JSON-ответов и т. д. Затем PHP отправляет созданный ответ обратно на клиентскую сторону.
5. Завершение обработки запроса: После отправки ответа PHP завершает обработку запроса, освобождает ресурсы, которые были использованы во время обработки, и завершает свое выполнение.
#вопросы_с_собеседования
Жизненный цикл HTTP-запроса в PHP можно разделить на следующие этапы:
1. Инициация запроса: Когда клиент отправляет HTTP-запрос на сервер, он инициирует процесс обработки запроса. В PHP это может быть инициировано, например, через браузер или с помощью команды curl в командной строке.
2. Маршрутизация: После получения запроса сервер должен определить, какой код или файл должен обрабатывать этот запрос. В PHP это может быть определено с помощью файла .htaccess или механизма маршрутизации, такого как маршрутизатор в фреймворке.
3. Обработка запроса: Когда PHP определяет, какой код или файл должен обработать запрос, он запускает этот код или файл. Этот этап включает выполнение кода, чтение и обработку данных, выполнение операций с базой данных и другие операции, необходимые для обработки запроса.
4. Генерация и отправка ответа: После обработки запроса PHP генерирует данные, которые должны быть отправлены обратно клиенту. Это может включать в себя генерацию HTML-страницы, отправку изображений, создание и отправку JSON-ответов и т. д. Затем PHP отправляет созданный ответ обратно на клиентскую сторону.
5. Завершение обработки запроса: После отправки ответа PHP завершает обработку запроса, освобождает ресурсы, которые были использованы во время обработки, и завершает свое выполнение.
#вопросы_с_собеседования