わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
数行のコードと外部スクリプトを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptを紹介します。 フレームワークやライブラリなど他のスクリプトに依存することなく、単体で動作し、もちろん他のフレームワークと一緒でも動作します。 Blendy Blendy -GitHub Blendyとは Blendyのデモ Blendyの使い方 Blendyとは Blendyはわずか数行のコードを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptです。依存関係はなく、単体で動作し、React, Vue.js, Angularをはじめ、ほぼすべてのフレームワークと一緒でも動作します。 MITライセンスで、商用プロジェクトでも無料で利用できます。
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
JavaScript Visualized - Promise Execution
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by Web
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ
HTMX vs React: A Complete Comparison - Semaphore
The ultimate goal of HTMX is to provide modern browser interactivity directly within HTML, without the need for JavaScript. Although relatively new, with its initial release in late 2020, this frontend library has quickly caught the attention of the IT web community. With 2nd place in the 2023 JavaScript Rising Stars “Front-end Frameworks” category (right behind React), a spot in the GitHub Accele
Pagefind | Pagefind — Static low-bandwidth search at scale
Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. Pagefind runs after Hugo, Eleventy, Jekyll, Next, Astro, SvelteKit, or any other website framework. The installation process is always the same: Pagefind only requires a folder containing the built static files of yo
Free and Open source PDF generation library! | pdfme
pdfme: Free and Open source PDF generation library!A powerful PDF generation library fully written in TypeScript, featuring a React-based UI template editor for seamless PDF creation*. Open source, community-driven, and completely free for PDF generation under the MIT license! * The PDF generation library and the UI editor can be used separately.
UnJS: Unleash JavaScript's Potential
Unleash JavaScript's Potential with the UnJS EcosystemAgnostic Excellence: JavaScript Libraries, Tools, and Utilities, Crafted to Elevate Your Coding Journey. A unified JavaScript ecosystem The UnJS PhilosophyA robust ecosystem, driven by the UNIX Philosophy, housing purpose-built, high-quality JavaScript utilities, libraries, and tools, upheld by a collaborative community. High-quality & Single-P
Break the limits of Web
@snowcode I'm totally loving Nue — I like where this is going; it looks like you're creating an extensible "better version" of HTML built for content producers! Re-imagining what html could have been. txs for all the work! ❤️ @retiagod What a great contribution to the world! Feedback I love the vision behind this project!!! As a former front end dev who turned away from dev work due to a dislike f
Muuri - Infinite layouts with batteries included
what & why? Muuri creates responsive, sortable, filterable and draggable layouts. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. You can build pretty amazing layouts without a single line of JavaScript these days. However, sometimes (rarely though) CSS just isn't enough, and that's where Muuri comes along. At it's very core Muuri is a layout engine
clipboard.js
Why Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIP file. Setup First, include the script locat
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
chroma.js api docs!
chroma.js chroma.js is a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales. Quick-start Here are a couple of things chroma.js can do for you: read colors from a wide range of formats analyze and manipulate colors convert colors into wide range of formats linear and bezier interpolation in different color spaces Here's an example for a simple
Alpine.js
<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content... </span> </div> { let keys = Object.keys(steps) direction = keys.indexOf(value) > keys.indexOf(old) ? 'right' : 'left' })" > Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the mode
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Testing Library | Testing Library
GitGraph.js
TOAST UI :: Make Your Web Delicious!
GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
console.log(); しか使えなかった自分へ。。。 - Qiita
