Form Validation Using JavaScript's Constraint Validation API
Form validation is one of the primary reasons to use client-side JavaScript. It can prevent user entry errors before your app attempts to submit data to the server. But… client-side validation is not a substitute for server-side validation! Always check incoming user data on the server. Not every request will come from a browser nor will every browser run validation code. Client-side validation is
JS Self-Profiling API In Practice
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
APIキーもログインも不要！完全無料で使える天気予報API「Open-Meteo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも無料で使える天気予報APIを提供してくれるWebサービスをご紹介します！ 面倒なユーザー登録やAPIキーの設定などが不要で、欲しい天気情報のパラメータを含めたURLを好きなように構成するだけで簡単にJavaScriptから制御できるのが特徴です。 日本はもちろん、世界中の詳細な天気情報を取得できるのでご興味ある方はぜひ参考にしてみてください！ 【 Open-Meteo 】 ■「Open-Meteo」の使い方 それでは、「Open-Meteo」をどのように使えばいいのか詳しく見ていきましょう！ 「Open-Meteo」が提供する天気予報APIを利用するにあたり、何か特別な登録や申請は必要ありません。もっと言えば、ユーザー登録も不要でAPIキーもありません。 非営利プロジェクトであれば誰でも自由に使うことが可能で、以下のエンドポイント
スクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」 - かちびと.net
animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。 ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。 <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script type="text/javascript" src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script> <script type="text/javascript"> Animon.animon(); </script> CSSとJSを読み込んで初期化。これで準備完了です。設定は加須亜夢データ属性で行います。 <h1
知っておくと実装に役立つ！JavaScriptのテクニックのまとめ
デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches 🚀 by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. JavaScriptにおける機能継承 2. .map()の置換 3. 数値から文字列に、文字列から数値に 4. lengthを使用して配列のサイズを変更したり、空にする 5. 配列の分割で値を入れ替える 6. 配列から重複を削除する 7. ループのコードを少なくする 8. パフォーマンス 終わりに はじめに JavaScriptは世界で最もクールな言語
Web VitalsとJavaScript Errorの可視化
こんにちは、@watilde です。Amplifyの開発者体験体験の向上をすべく、ツイートのウォッチやGitHubでの反応などしています。もう去年のことですが、最近はcliの改善としてcreate-react-appのようにinitの実行時にREADMEの生成を行うPRなど作ったりしてます。参考: aws-amplify/amplify-cli#5808 この記事は英語で書いた Improve UX by observability in front-end with Amplify and QuickSight を自分で日本語に意訳してみたものです。Node学園 35時限目 オンライントライアル でも同様の内容を発表予定です。 JavaScriptのエラー例 JavaScriptは100%動いているのか 私達の作るWebアプリ・Webサイトが様々なデバイスで100％動作しているかは、実態
JavaScript で遅延評価を導入して起動を高速化した話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 Flash Player を JavaScript で実装していた際に、現場から「起動の高速化」という難しい要求をもらった際、「遅延評価」を導入したところ大変効果がありました。今回、その遅延評価について簡単なご紹介をしたいと思います。 Flash Player 起動までのステップ 当時 Flash Player を JavaScript で提供していた際、当時のスマートフォン端末においてロード完了から最初の画面が出るまで大体 150ms くらいかかっていました。普通の Web ページであれば 150ms はロード時間の中に吸収され許容範囲になる可能性が高いのですが、当時 Flash Pl
Promise のキャンセルについて - Qiita
[ English version ] JavaScript と Node.js についてのこの徹底した投稿では、Promises のキャンセルの歴史、なぜNode.jsに関係があるのか、そして async/await APIで使おうとしたときに注意すべきことについて学ぶことができます。 この投稿は、JavaScript の Promise API をよく理解していて、 Node.js の経験がある方のためのものです。 歴史 2014 年に Promise API がブラウザに導入されて以来、人々は Promise で他に何ができるかを調べていました。ブラウザに最初に登場した関連APIは、HTTP リクエストのための fetch() でした。 HTTP リクエストの問題は、サーバーのリソースを消費することであり、サーバーに送信されるリクエストの数が多い場合はお金がかかります。このため、特に
detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ | かちびと.net
Result detailsタグを使った開閉コンテンツのスタイリングサンプル集です。 JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。 css [data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-betw
JavaScript's Memory Management Explained | Felix Gerschau
javascriptJavaScript's Memory Management ExplainedEven though the JavaScript engine manages memory for us, it's good to know what happens under the hood. Read in Chinese or Korean Most of the time, you can probably get by fine not knowing anything about memory management as a JavaScript developer. Afterall, the JavaScript engine handles this for you. At one point or another, though, you'll encount
Async Clipboard APIでJavaScriptからクリップボードを操作する
JavaScriptからのクリップボードの操作は、長いあいだ開発者たちに切望されていました。かつてはFlashを使って実現するハックなどがありましたが、各ブラウザがexecCommandによるクリップボード操作を実装したことで、現在は落ち着きつつあります。 ただ、APIが綺麗に整備されているとは言いにくく、あまり現代的ではありません。そこで、スマートかつ現代的にクリップボードを扱うことができる、Async Clipboard APIの実装が進みつつあります。 Async Clipboard APIはその名の通り非同期でクリップボードを扱うAPIです。Async Clipboard APIはPromiseを返すので、直感的に扱えるようになっています。 従来のAPIでも、execCommandを用いることによってクリップボードを操作することができました。しかし、バグが多くブラウザ間の整合性が取
Next.js Database with Prisma | Next-Generation ORM for SQL Databases
Next.js blurs the lines between client and server. It supports pre-rendering pages at build time (SSG) or request time (SSR). Prisma is the perfect companion if you need to work with a database in a Next.js app. You can decide whether to access your database with Prisma at build time (getStaticProps), at request time (getServersideProps), using API routes, or by entirely separating the backend out
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
【Streamlit】JavaScriptが嫌いだからPythonだけでWebアプリをつくる - Qiita
フロント（SPA）開発案件2つのプレイングマネージャーと開発リーダーやってますが、JavaScriptが死ぬほど嫌いです。 ブラウザ上で動作するスクリプトなので仕方ないし、async-awaitで大分便利になったけど、非同期処理がやっぱり好きじゃないです。 JavaとかPythonとかそれなりの期間触った言語は大概「みんな違ってみんないい」みたいな感じになるんですが、JavaScriptだけそうならないので本当に嫌いなんだと思います。 因みにCSSはもっと嫌いです。 機械学習モデルの構築をPythonで実装することは多いと思いますが、ちょっとしたデモアプリでも作るとなると、フロント側はどうしてもHTML、JavaScript、CSSで組まないといけないです。 Jupyter Notebookも選択肢に入るかもしれませんが、Webアプリと比べると表現の自由度は下がるし、コードセルが見えるのは
Recoil
Minimal and ReactishRecoil works and thinks like React. Add some to your app and get fast and flexible shared state. Data-Flow GraphDerived data and asynchronous queries are tamed with pure functions and efficient subscriptions. Cross-App ObservationImplement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.
スタイルガイド - Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
The State of JavaScript 2019
We were pretty sure 2018 would be the last time we did this survey. After all, the JavaScript ecosystem can’t very well keep changing again, can it? But what do you know, turns out JavaScript isn’t quite done changing just yet! And so after over 21,717 respondents took this year's survey we had to dig up our components and charts, curse us-from-a-year-ago for writing such crappy code, and get to w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iframe sandboxでユーザー入力スクリプトを実行する
Startup Landing Templates
GitHub - jlfwong/speedscope: 🔬 A fast, interactive web-based viewer for performance profiles.
