サーバーサイドエンジニアも知っておくべきフロントエンドの今Rails Developers Meetup 2019
ブラウザがJavaScriptを直接サポートしない世界 - Qiita
TL;DR WASMって凄いね．JavaScript処理系すら実装できるんだって． ならブラウザはWASMだけをサポートすれば楽なんじゃないかな． という考察記事です． 経緯 私は少し前からRustでJavaScript処理系を書いています．(まだまだ機能不足ですが) ある日，ふと思いました．*Rustで書いてるんだからWASMに変換するのも楽なんじゃないか?*と． 面白そうなので，試してみたわけです． 意外と面倒だった RustからWASMへと変換する方法を説明した記事は，調べればいくらでもでてきます．無論そのとおりに手を動かしてみるわけです． しかし，いざやってみるとコンパイラに結構文句を言われます．考えてみれば当たり前ですが，libcなんて使っていたらWASMには変換できません． なので余分なコードは削り，WASMに変換できるようコードを書き直しました． すると，すんなりWASMに変
騙されるな。JavaScript の function は関数じゃない。コンストラクタだ。 - Qiita
といった書き方を目にしたことがあると思います。また、普段から「関数」として使っている人も多いと思います。 しかし、結論から言うと、JavaScript の function は普通の「関数」ではなく「コンストラクタ」です。JavaScriptの構文・キーワードに騙されてはいけません。(私自身、少し勘違いをしていて、以前書いた記事(JavaScript初心者にはfunctionよりも、まずアロー関数を教えるべき)では function は「メソッド」だと主張していました。) 「newができるからコンストラクタって言いたいだけなんでしょう」と思った方、とりあえずブラウザバックしようとする手を止めて最後までお読みください。 function を「関数」として使用すると、状況によってはパフォーマンスに影響する可能性があります(若干誇張表現です。最適化の度合いによります)。 以下、function
OYOのキャンペーン「#いきなり東京0円ライフ」をハッキングして当選してみた - Qiita
※プログラムの解析に類する内容を扱っております。 ※ハッキングと称していますが、犯罪に類する行為は一切しておりません。 ※混乱を避けるため当該キャンペーンの終了を待って、この記事を公開させていただきました。 プロモーション周りの分析も書いているのでこちらもぜひご一読ください https://note.mu/aiharayuki/n/n87909fdd40c7 まず実際に抽選してみましょう この「くじを引く」ボタンを押すことで抽選がされるわけだ。 ハズレの画面はこんな感じ 外れた。悲しい。 どういった仕組みでくじ引きが動いているんだろう phpかなんかでサーバーサイドで制御してるのかなー。 https://www.oyolife.co.jp/tokyo-cp/ どうやらjsで抽選をしているみたいだぞ？ でもまず基本のscript.jsをみてみよう クッキー消して何回かくじ引きしよう http
Private Class Field の導入に伴う JS の構文拡張 | blog.jxck.io
Intro ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。 これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。 提案されている構文や、挙動について解説する。 Class Field Declaration まず前提として、現状の Class の フィールドはコンストラクタで定義する必要がある。 例えば count フィールドを持つ Counter クラスを定義した場合、以下のようになる。 class Counter { constructor() { this.count = 0 } increment() { this.count ++ } display() { console.log(this.count) } } const c = new Counter() c.in
我が名は神龍……どんなテストもひとつだけ自動化してやろう - Qiita
『我が名は神龍……どんなテストもひとつだけ自動化してやろう』 じゃ、じゃあ！このブラウザテストを自動化してください！ Chromeで https://kids.yahoo.co.jp/ にアクセスして 検索ワードに ねこ と入力して さがすをクリックして 検索結果にネコ - Wikipedia が含まれていることを確認して 検索結果に 買い方 を追加して さがすをクリックして 探しているのは「猫の飼い方」？と表示されることを確認して クリックすると猫の飼い方で再検索されて 検索ボックスを不倫で上書きして さがすをクリックして このページは表示できませんと出ていることを確認 『よかろう……たやすい願いだ』 まずはライブラリのインストールと初期設定をしてやろう…… # [ライブラリのインストール] # CodeceptJSとPuppeteerをインストールします。nodeとnpmが必要ですので
for文無限ループURL投稿で補導された件についてまとめてみた - piyolog
2019年3月4日、兵庫県警察はインターネット掲示板に不正プログラムのURLを書き込んだとして未成年者を含む3名を不正指令電磁的記録供用未遂の疑いで児童相談所への通告や書類送検を行う方針と報じられました。ここでは関連する情報をまとめます。 不正プログラムはfor文無限ループか NHK報道から、張り付けられたURLで動作する「不正プログラム」はfor文無限ループとみられる。*1 JavaScriptを見る限り、特殊な実装や脆弱性を用いたものではなく、for文の条件式などを記述せずに無限ループさせたもの。顔文字やメッセージはalertダイアログを使って表示させている。 当該URLを開いたタブを閉じるなどの操作が必要な場合もあるが、最新のブラウザ（Chrome、Firefoxなど）では開いただけで落ちることはない。 URL投稿で摘発された3人 次の3人が問題となったURLを書き込んだとして児童相
ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします（yarn global add codecrumbs）。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト
仮想スクロールのすヽめ - Qiita
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか？ 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。（絶対に違う） 仮想スクロールの仕組み イカれたメンバーを紹介するぜ！ 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ！ ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数（あるいは
GitHub - fantasyland/fantasy-land: Specification for interoperability of common algebraic structures in JavaScript
"value" is any JavaScript value, including any which have the structures defined below. "equivalent" is an appropriate definition of equivalence for the given value. The definition should ensure that the two values can be safely swapped out in a program that respects abstractions. For example: Two lists are equivalent if they are equivalent at all indices. Two plain old JavaScript objects, interpr
Node.js ES2015/ES6, ES2016 and ES2017 support
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch
今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 SSRをすることはSEOのためだと思われがちですが、個人的にはSEOのためにしているわけではなく、 First View を向上するため（特に First Meaningful Paint を向上するため）にやっています。 First View SEOとSSRに関しては Google が最近出したこの記事の SEO Considerations 節が詳しいです。ここでは説明しません。 SSRをしない、Client S
今からでも間に合う！ JavaScriptのWake Lock APIの使い方
2019/05/28 追記： Wake Lock APIの仕様が大幅に変更されたので、この記事は役に立たなくなりました。改稿をお待ちください。 近頃、PWAに代表されるような、ブラウザアプリのモバイル端末への進出が進んでいることは皆さんご存知かと思います。とはいえ、ネイティブアプリに比べると、ブラウザ上で動くJavaScriptにできることは限られています。現在、それを補うために、JavaScriptから使用することができる様々なAPIが次々と策定されています。この記事で紹介するWake Lock APIもその1つです。 Wake Lockという言葉は、ネイティブアプリ開発をしている方なら知っている言葉かもしれません。これは、要するにほっといても画面が勝手に消えない機能です。 スマートフォンのような端末は、一定時間触らないでいると画面が消えてアプリ等の動作も止まるのが普通です。しかし例えば
Webでどこまで遊べるか試してみた - Qiita
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - goolord/jshark: 🦈 Safe JavaScript EDSL
Vuetify — A Vue Component Framework — Vuetify
GitHub - jamiebuilds/the-super-tiny-compiler: :snowman: Possibly the smallest compiler ever
Mozilla releases Iodide, an open source browser tool for publishing dynamic data science
https://kotlinlang.org/docs/reference/javascript-dce.html
GitHub - klaudiosinani/qoa: Minimal interactive command-line prompts library
