Get Date & Time For a Given Timezone with Javascript
https://usefulangle.com/post/382/javascript-get-date-time-for-timezone
#coding
#javascript
https://usefulangle.com/post/382/javascript-get-date-time-for-timezone
#coding
#javascript
UsefulAngle
Get Date & Time For a Given Timezone with Javascript
Date & time for a given IANA timezone (such as America/Chicago, Asia/Kolkata etc) can be found by using the Date.toLocaleString() method.
Forwarded from Frontend по-флотски 👨💻
This media is not supported in your browser
VIEW IN TELEGRAM
View Transition API позволяет анимировать flex и grid позиционирование 🧑🎓
С его помощью ты сможешь делать плавные переходы align-content и justify-content, всего в пару строчек JS
С его помощью ты сможешь делать плавные переходы align-content и justify-content, всего в пару строчек JS
function setRandomAlignments() {
document.body.style.alignContent = positions[getRandomInt(3)]
document.body.style.justifyContent = positions[getRandomInt(3)]
}
document.body.addEventListener('click', e => {
if (!document.startViewTransition)
setRandomAlignments()
else
document.startViewTransition(() => {
setRandomAlignments()
})
})
CodePen (работает в хроме начиная со 111 версии, 63.55% по caniuse)Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from FrontEndDev
Возможности JS и TS, о которых многие не знают
Теггированые шаблонные литералы,
https://my-js.org/blog/js-ts-features
Теггированые шаблонные литералы,
Promise.allSettled, globalThis, WeakRef, явное определение неиспользуемых переменных и многое другое.https://my-js.org/blog/js-ts-features
This media is not supported in your browser
VIEW IN TELEGRAM
Набор повторно используемых компонентов на Radix UI и Tailwind CSS, которые вы можете использовать в своих приложениях по-отдельности.
Forwarded from Frontender's notes [ru]
🤠Открываем и закрываем модалки на Vue Composition API
В этой статье автор расскажет, как Composition API позволяет нам переиспользовать логику в разных компонентах и избавить нас от лишнего дублирования, и можно ли передать внутри <template> в функцию не значение, а Proxy, а также вы узнаете как функция open умеет не только менять состояние у proxy, но и вызывать передаваемую в нее функцию.
Читать...
В этой статье автор расскажет, как Composition API позволяет нам переиспользовать логику в разных компонентах и избавить нас от лишнего дублирования, и можно ли передать внутри <template> в функцию не значение, а Proxy, а также вы узнаете как функция open умеет не только менять состояние у proxy, но и вызывать передаваемую в нее функцию.
Читать...
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
