WebKit Features in Safari 18.0
Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolved issues land in WebKit, the rendering engine driving Safari. New in Safari 18 Distraction Control Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, n
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ color: { brand: 'blue', white: '#fff' }, space: { small: '4px', medium: '8px', } }); export const hero = style({ backgroundColor: vars.color.brandd, color: vars.color.white, padding: vars.space.large });
Visual Studio CodeのシンタックスハイライトをWebページで使う - ぷろじぇくと、みすじら。
Created at: 2016-01-11 Visual Studio Codeのエディタ部分はVisual Studio Codeがリリースされるよりも前からいろいろなところで使われていて、 最初はVisual Studio Online “Monaco”のエディタ部分として公開されていました。 それから徐々にMicrosoftの中での利用範囲が広がりTypeScriptのPlaygroundやWinJSのPlayground、 ちょっと変わったところではInternet Explorer/EdgeのF12開発者ツールの中でも使われていたりします。 そして月日は流れて、Visual Studio Codeがオープンソースになってついにエディタ部分(Monaco Editor)が公開されました。 ということでそれを使う方法を調べていたのですが、たまたまシンタックスハイライトの機能が備わっ
無ければ作るし、ついでに公開するし の流れ - latest log
ブラウザでバイナリを扱うのが辛すぎて、何とかしたいと作りこんでいた冶具(HexDump.js) がだんだん極まってきたの図。 ただの Hex Dump 機能として作ってたハズが、気がついたらこんな感じに。 冶具: 作業の効率を改善するために自分でクリエイトする道具 HexDump(source, { style: { "packet_start_code_prefix(00 00 01)": { values: [0x00, 0x00, 0x01], css: "font-weight:bold;color:green" }, "stream_id(1 byte)": { begin: 3, end: 4, css: "font-weight:bold;color:blue" }, "PES_packet_length(2 byte)": { begin: 4, end: 6, css:
highlight.js
192 languages and 496 themesAutomatic language detectionWorks with any HTML markupZero dependenciesCompatible with any JS frameworkSupports Node.js and DenoCurrent release: 11.9.0 #!/bin/bash ###### CONFIG ACCEPTED_HOSTS="/root/.hag_accepted.conf" BE_VERBOSE=false if [ "$UID" -ne 0 ] then echo "Superuser rights required" exit 2 fi genApacheConf(){ echo -e "# Host ${HOME_DIR}$1/$2 :" } echo '"quote
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body> Step 2: HTML 水面のアニメーションを適用する要素を用意します。 <div id="example1"></div> Step 3: JavaScript 適用する要素
![[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42d4f0aeabe8d5c05510d7c537c44691f1eec9d1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015071301.gif)
favico.js
favico.js v0.3.10 Make use of your favicon with badges, images or videos View on GitHub Try it: +1 -1 Set icon Play video Start webcam Reset Works on Chrome, Firefox, Opera and IE11+ Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color.
VOC.js作った。 視覚と見た目に基づいた非同期コミュニケーションができるよ - 標高+1m
昨日の記事で書いたVOC (Vision Oriented Communication) の実装を支援するライブラリを作った。 https://github.com/ympbyc/VOC READMEを英語で書いたのでここに日本語版を書いとく。 VOCのコンセプト オブジェクト指向やアクターはpushベースだけど、実世界のコミュニケーションの多くはpullベースだ。 僕らはレシーバを指定したメッセージを送らない。 僕らは自分の見た目(e.g. 表情)や自分の周りの状態(e.g. 声)を変える能力を持っている。 僕らは自分の周りの景色を見て、情報を引き出して、それに基づいて行動する。 僕らはそれぞれバラバラに勝手に非同期に行動している 僕らは赤信号が見えたらブレーキを踏むわけで、赤信号が僕らのbrakeメソッドを呼んでくれるわけじゃない。 実装 VOC.Visual(state)は見た目を作
軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
Focus transition
Playground Placebo button Why? Keyboard navigation has a major downside: it’s not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent. How? Flying Focus creates an element that is moving when the focus event happens. outline: 5px auto -webkit-focus-ring-color makes the element look like it has a focus. It only works in Safari and Chrome. Firefox does
datalist experiment
datalist experiment By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves. Options can be tagged with datalist and referenced from the input element using list attribute by its id. See examples below. input[type=text] datalist For text type, datalist simply suggests list of wo
深いインデントであっても色付けすれば見やすく·JavaScript Scope Context Coloring MOONGIFT
JavaScript Scope Context Coloringはシンタックスやスコープによる色づけができるJavaScript用ハイライトライブラリです。 JavaScriptのプログラミングではコールバック方式のコーディングが多いため、インデントが深くなりがちではないでしょうか。そこで使ってみたいカラーリングツールがJavaScript Scope Context Coloringです。 分かるでしょうか。スコープによってカラーリングが変わっています。 こちらは通常のシンタックスによるカラーリング。 さらに分かりやすくするとこんな感じに。8階層までサポートされています。 インデントがあまり深くなると可読性が下がるために個人的には好きではないのですが、深くなってしまうのであればそれに向いた見せ方があると思われます。変数のスコープも色づけで分かるようになったりすると変な不具合が紛れ込まな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - luruke/browser-2020: Things you can do with a browser in 2020 ☕️
JSONを使ってSassとJavaScriptで設定値を共有する方法
https://qiita.com/watilde/items/094a44072d84e88cb8dc