Svelteをwebpackで動かしてTODOリストを作成してみた - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
[翻訳記事]マイクロフロントエンド - マイクロサービスのフロントエンドへの応用
モダンな Web アプリを異なる JavaScript フレームワークを使う複数チームで開発するためのテクニック はじめに この記事は翻訳記事です。 原著者の許可をとって翻訳・掲載しています。 原文はこちらです。 翻訳者 マイクロフロントエンドとは？ マイクロフロントエンドという言葉は 2016 年の終わりにThoughtWorks Technology Radarで言及されました。 それはマイクロサービスの考え方をフロントエンドに拡張したものです。 現在の Web のトレンドは多機能でパワフルな SPA です。 SPA はフロントエンドとバックエンドを切り離すという、マイクロサービスの考え方に基づいています。 開発をすすめていくと、特に複数のチームで管理している場合 フロントエンド層が肥大化して管理が難しくなりがちです。 これを「モノリシックなフロントエンド」と呼びます。 マイクロフロン
Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法
Babel7.4.0 から、長いことお世話になってきた @babel/polyfill が非推奨となりました。加えて、@babel/preset-env と @babel/ransform-runtime が core-js@3 に対応したようです🎉 これらに伴いpolyfill周りの設定方法が変わったので、その内容をメモしておこうと思います。 Babel と core-js の関係のおさらい これからのpolyfill設定方法 1. preset-env と useBuiltIns:usage で必要なpolyfillだけ読み込む方法 2. preset-env と useBuiltIns:entry で全polyfillを読み込む方法 3. transform-runtime を使う方法 Proposal の使い方 参考 Babel と core-js の関係のおさらい Babelが
GitHub - daybrush/moveable: Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
import Moveable from "moveable"; const moveable = new Moveable(document.body, { target: document.querySelector(".target"), // If the container is null, the position is fixed. (default: parentElement(document.body)) container: document.body, draggable: true, resizable: true, scalable: true, rotatable: true, warpable: true, // Enabling pinchable lets you use events that // can be used in draggable,
Build a PWA Using Only Vanilla JavaScript
Progressive Web App (PWA)“A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver a native app-like experience to users. These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines.” A Progressive Web App (PWA) works like any other normal app but with a lot of added features and a lot less hassle. T
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
Webサイトをダークモードに対応させよう
Webサイトをダークモードに対応させようダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ とにかく夜間見えづらい！私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわってことで夜間の運転はやめました。運転していなくても田舎道の
MPA から少しずつ SPA w/ Vue.js in TypeScript へ移行していく流れ - Qiita
この記事について 以前 MPA でつくったプロダクトを途中で SPA に移行したことがあったんですが、また別のプロジェクトでやることになるかもしれない状況になったので、当時のことを思い出しつつ、手元で動かしながらメモを取ったのでその記録です。 はじめに 文脈 開発当初は MPA でつくりはじめたが、事情により SPA へ移行して、使用言語も JS から TS へ変えたい できれば一気に置き換えたいが、新規機能開発なども同時並行でやりたいので、緩やかに移行したい メンバーに TypeScript 経験者が少ないため、学習と並行しながら重要なところにだけ型をつけたい 定義 MPA: Multi Page Application - クライアントからリクエストがきたら、サーバは HTML ドキュメントを返す SPA: SIngle Page Application - ベースとなる HTML は
The Writable Files API: Simplifying local file access | Web | Google Developers
Published: August 19, 2024 The File System Access API enables developers to build powerful web apps that interact with files on the user's local device, such as IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows them to read or save changes directly to files and folders on the user's device. Beyond reading and writing files, the File System
現代フロントエンドに欠かせないwebpackとBabelを理解しよう
Transcript ݱϑϩϯτΤϯυʹ͔ܽͤͳ͍ XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP����� /BNF� ����4BLJUP�.VLBJ� 5XJUUFS ����!@@TBLJUP@@� $PNQBOZ� ����$ZCP[V�JOD� ����'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ෦࣮Λ͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ&$."4DSJQUͱ͍͏ݴޠ༷͕͋Δ� w͜ͷݴޠ༷ΛܾΊ͍ͯΔҕһձ͕5$�� 5FDIOJDBM�$PNNJUUFF��� � w&4��
うちのチームにおけるTypeScriptの付き合い方
MVPは最低限の機能しか作らないので、ブラッシュアップするのが前提にある。 なので変更しやすい方がいい
When a rewrite isn’t: rebuilding Slack on the desktop
Conventional wisdom holds that you should never rewrite your code from scratch, and that’s good advice. Time spent rewriting something that already works is time that won’t be spent making our customers working lives simpler, more pleasant, and more productive. And running code knows things: hard-won knowledge gained through billions of hours of cumulative usage and tens of thousands of bug fixes.
ScrapboxでのServiceWorkerとCacheの活用 - daiiz
https://gyazo.com/6650f305b46ff9a2683fd11988e12cf3 https://gyazo.com/ed58dad9ca677c8ab54867fe08cf6817
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue使いなら秒で覚えられるSvelte入門 - Qiita
ウェブフォント今昔物語
GitHub - lirantal/lockfile-lint: Lint an npm or yarn lockfile to analyze and detect security issues
GitHub - fengyuanchen/cropperjs: JavaScript image cropper.
GitHub - goldfire/howler.js: Javascript audio library for the modern web.
GitHub - mfranzke/loading-attribute-polyfill: Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.
GitHub - sampotts/rangetouch: A super tiny library to make `<input type='range'>` sliders work better on touch devices