turtleDB: A JavaScript Framework for building offline-first, collaborative web apps
Too Long; Didn't ReadBuilding an offline-first, collaborative web app can be done in 2 easy steps: Building an offline-first, collaborative web app can be done in 2 easy steps: npm install turtleDB npm install tortoiseDB Done! Before we get into what turtleDB and tortoiseDB are… Offline first AND collaborative? What does that even mean? In this day and age, those of us who live in modern, heavily-
Page Lifecycle API | Web Platform | Chrome for Developers
Modern browsers today will sometimes suspend pages or discard them entirely when system resources are constrained. In the future, browsers want to do this proactively, so they consume less power and memory. The Page Lifecycle API provides lifecycle hooks so your pages can safely handle these browser interventions without affecting the user experience. Take a look at the API to see whether you shou
Node.jsでつくるNode.js - もくじ - Qiita
はじめに 「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本を手を動かしながら読んで、非常に感銘を受けました。そんなおりに PythonでつくるPythonという記事を読み、自分でもNode.jsでミニNode.js作りにチャンレンジすることにしました。 予想以上に手間取り端折った部分もありますが、なんとか最後はブートストラップまで行くことができました。 目次 ミニインタープリター編 Step1：ソースのパース ... 初めての esprima Step2：単純化 ... 抽象構文木(AST)を単純化 Step 3: +演算子を評価する ... 足し算を実行 Step 4: 四則演算で電卓を作る ... 電卓を作るところまでと、比較演算子の実装 Step 5: 変数を使う ... 変数の宣言、代入、参照 Step 6: 条件分岐
KeyboardEvent.keyCodeとは何か - WebStudio
Tweet (list) 導入 KeyboardEvent.keyCodeとは何なのかについて少し解説してみたいと思います。 Webアプリでキーボードからの入力を処理する場合に、KeyboardEvent.keyCodeと、 KeyboardEvent.charCodeの二つ(さらにKeyboardEvent.whichを使う人も希に見かけますが)を最初に見かけられた方が多いのではないかと思います。 あなたがこれらの属性を初めて知った時、そのドキュメントはどのように解説していたでしょうか。 KeyboardEvent.charCodeはシンプルで誤解するのも難しいぐらいです。 しかし、KeyboardEvent.keyCodeはそうではありません。 多くの人は、この属性を根本的に間違った情報と共に知ったと思います。 KeyboardEvent.keyCodeの歴史 KeyboardEven
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
Clearing cache in the browser
Andrew Betts (@triblondon) is a web developer and principal developer advocate for Fastly, working with developers across the world to help make the web faster, more secure, more reliable and easier to work with. He founded a web consultancy which was ultimately acquired by the Financial Times, led the team that created the FT's pioneering HTML5 web app, and founded the FT's Labs division. He is a
PuppeteerでWebページからメインコンテンツっぽいところを抽出してみる - Qiita
最近、Webページからざっくりメインコンテンツっぽいものを探し出すプログラムを作成しましたので得られた知見についてまとめてみます。本文などの情報を利用せずに汎用的にメインコンテンツを探したかったので、Elementの位置、幅、高さ(以下rect)等の視覚的な情報を使用して抽出してみました。具体的には puppeteerでページをスクレイピングして各Elementの情報をまとめたツリー構造を作る Elementにスコアを付けて尤もらしいものをメインコンテンツとする というステップで抽出します。 メインコンテンツを抽出する完全なコードについてはgistのサンプルを参照してください。 ページのスクレイピング puppeteerを使ってページをスクレイピングします。最初にdomツリーを探索して必要な情報をjsonとて抽出します。視覚的な情最新のとして各Elementごとにrectの情報を取得します
await vs return vs return await
When writing async functions, there are differences between await vs return vs return await, and picking the right one is important. Let's start with this async function: async function waitAndMaybeReject() { // Wait one second await new Promise((r) => setTimeout(r, 1000)); // Toss a coin const isHeads = Boolean(Math.round(Math.random())); if (isHeads) return 'yay'; throw Error('Boo!'); } This ret
最近のselenium-webdriverの話 - Qiita
こんにちは、@nazomikanです。 この記事はLIFULL Advent Calender2017 その2の3日目の記事です。 昨年のAdvent Calenderでselenium-webdriver(node)のapi翻訳記事を書きましたが、その当時対象としてた2系から現在はメジャーバージョンアップを挟んで色々と現状が変わってきてるのでその辺の話をします。 ローカルモードでのテスト時にselenium standaloneサーバが不要に v2.43のチェンジセットでFireFoxのネイティブサポートが追加されて、remoteでの実行時を除いてサポート対象の全てのブラウザがstandaloneサーバなしで実行できるようになりました。 (chrome/phantomjsのネイティブサポートは2.34) ※のちにphantomjsとoperaのサポートは切られる ※この当時サポート対象で
がんばらないTypeScriptのはじめ方 - 角待ちは対空
追記 2019/04/16に以下の記事が公開されました。 employment.en-japan.com gfxさんによる記事です。この記事自体2017年の若干古い記事なので、新しく読む方は最新版である上記の記事を読んだほうがいいでしょう。 このエントリは2017/07/12に行われたHatena Engineer Seminar #8 @ Tokyoの発表内容をブログ向けに書き直したものです。 事前の通知では「CoffeeScript脱出にみるTypeScript2.4時代のベストプラクティス」がタイトルだったのですが、主題を変えたためタイトルも「がんばらないTypeScriptの始め方」に変更させていただきました。CoffeeScript脱出の話は一応出てきます。 社内のTypeScript事情 その後のTypeScript 現在の様子 TypeScriptのがんばらないはじめ方
Introducing Redux Zero
Redux Zero is a lightweight state container based on Redux with a single store and no reducers, 100% written in TypeScript. Less than 1kb (gzip). Made for (p)react ⚛️ By Concrete 💙 We all love Redux. It’s probably one of the few things that are adopted by React, Angular and Vue people. (Thanks, Dan Abramov) But for some cases, Redux is way too much. Maybe you don’t want to add all of that boilerp
React Fiber現状確認
F8でもReact Fiberについての発表もあったので、気になっている人も多いReact Fiberの現状について簡単に書きたいと思います。 Reactの完全な書き換えということで、使い方も変わってしまうと思っている人もいると思いますが、内部実装の書き換えであり、利用者から見える部分ではほとんど変更はありません。 もちろん、react-fiberというパッケージをインストールするというわけでもありません。 むしろ、v16の時点では現在の実装と互換性を保たれているので、v16がリリースされた時に、v15.5を使っていればほとんどそのままv16に更新できると思います。 そして、言われなければ内部実装が変わっていることに気づかないのではないかと思います。 とりあえずどうなるのか知りたい人向けのまとめ v16では、基本的にはv15の時と同じように動作します。逆に言うとパフォーマンスもそんなに変わ
i18nの書き方 from JavaScript - Qiita
続編と、コード自体ではなく、何をすればいいかを書きましたAmazonに見るi18n -「国際化対応」とは何を変える事か Webサイトを多言語化する 最近多言語化に関する仕事をしている関係でi18n(l10n)用のライブラリを色々と見たので、 i18nライブラリによくある使い方を紹介します。 とは言ってもほとんどのライブラリは同じような書き方をするのでJavaScriptを例にします。 ライブラリ一覧 書き方の紹介として使用するものはawasome-javascriptにあるものと、他に気になったものを選びました。 ただし、この記事の目的は「書き方」を紹介するもので「ライブラリ」を紹介するものではありません。 動くことは確認しましたがどのくらいまともに動くかはチェックしていないのでご注意ください。 Polyglot Airbnbが公開するシンプルなライブラリ i18next 色々な環境やフレ
What is Promise.try, and why does it matter? - joepie91's Ramblings
A topic that frequently confuses users in the #Node.js channel, is the Promise.try method provided by Bluebird. People often struggle to understand what it is, or why they should use it - and this isn't helped by the fact that almost all guides to Promises fail to demonstrate its use. In this brief article, I hope to provide a better explanation of what Promise.try is, and why you should always us
JavaScript の ジェネレータ を極める！ - Qiita
ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！ ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める！（この記事） また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ジェネレータ、ジェ
TypeScriptを使った方がいいケースとは？ | POSTD
去年の夏、私たちは大量のコードベース（18,000行以上の コード行数 ）をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。 型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケース コードサイズ ：ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。 特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptの トランスパイラ は明白な誤りを
The State of Front-End Tooling – 2015
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat Update 30/11/2016 If you’re interested in finding out more details about current Front-End Tooling trends, I’ve now published the results from the 2016 Edition of this Survey. Update 12/10/2015 – Thanks to the incredible response to the survey! Since putting the article live last month, responses to t
中間言語としてのJavaScriptはどうなったのか - .mjtの日記復帰計画
prev: http://d.hatena.ne.jp/mjt/20080904/p2 なぜか３年前の記事が急にブックマークされていたのでフォローする記事。 ↑の記事の1年後、InfoQの記事( http://www.infoq.com/news/2009/09/javascript-compilation-target )でいくつかのJavaScriptにコンパイルする言語が紹介された。もちろん、GoogleのGWT(Google Web Toolkit)もJavaScriptを出力するJava環境と言える。 先の記事で触れたエミュレータでの活用は、見たところDirect-threadingによるものに限られているように見える。つまり、CPU命令をJavaScript的なfunctionとして実装し、CPU命令と１対１対応させる。Google V8のような、Direct-threadin
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
texlive.js – A LaTeX Compiler for Javascript
texlive.js – A LaTeX Compiler for Javascript Usage var pdftex = new PDFTeX(); var latex_code = "" + "\\documentclass{article}" + "\\begin{document}" + "\\LaTeX is great!" + "$E = mc^2$" + "\\end{document}"; pdftex.compile(latex_code) .then(function(pdf) { window.open(pdf) }); Demo LaTeX Input Compile this LaTeX code to a PDF Start Collaboration Mode \documentclass[12pt]{article} \usepackage{amsmat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
