Denoの登場でNode.jsの時代は終わるのか？ - Qiita
Deno ver 1.0 5月13日、Deno v1.0の正式リリースが決定しました。 少し勉強してみましょう。 ↑ かわいい Denoってなに？ DenoはNode.jsの製作者であるRyan Dahlによって作られました、新しいJS/TSランタイムです Denoはdefaultで安全です（許可なしではファイル・ネットワーク・環境にアクセスできません） DenoはTypeScriptがビルトインで入ってます 外部パッケージはurlでインポートできます（Goみたいに） ディーノって読むらしい（デノではない） Denoが作られた背景 一年前くらいにこの動画を見たことを思い出しました。 Node.jsの作者であるRyan Dahlが、Node.jsを開発した当時の仕様を後悔する旨の動画です。 https://www.youtube.com/watch?v=M3BM9TB-8yA&t=1319s
ツイートの文字数を **厳密に** 数える方法 - Qiita
概要 Twitter API 経由でツイートする場合には、リクエストを送る前に字数制限を越えていないか検証する必要があります。 しかし Twitter の文字数カウントは独自の複雑な仕様になっており、ナイーブな方法（言語標準の length など）では正しい結果が得られません。 そこで本記事では以下の内容を取り上げます。 文字数カウントに伴う難点の説明 ツイートの長さを 厳密に 数えられる公式ライブラリ twitter-text の紹介 他言語に twitter-text を移植するために必要な情報のまとめ Python 3 用の自作パッケージ twitter-text-python の紹介 この記事が想定する読者 Twitter bot などを作っていてツイートの文字数カウントが必要な人 その他の状況で文字数カウントの沼にハマった人 文字コードについて手を動かしながら学ぶための題材が欲し
JavaScript 向けブラウザスクリーンショットライブラリ html2canvas で画面の一部分のみのスクリーンショットをとってみました | DevelopersIO
JavaScript 向けブラウザスクリーンショットライブラリ html2canvas で画面の一部分のみのスクリーンショットをとってみました CX事業本部の熊膳です。html2canvasというJavaScriptでスクリーンショットを取得するライブラリを使ってみたので紹介します。 html2canvasとは html2canvasは、JavaScriptでWebページ（もしくはその一部）のスクリーンショットを取る（実際にはCanvas上に描画する）ためのライブラリです。 独自にDOM解析やレンダリングなどを行っているため、完全にブラウザで表示しているものと同じものになるとは限りませんが、かなり再現性高いです。 公式サイトは、こちらです。 html2canvas - Screenshots with JavaScript 使い方（公式サイトより） html2canvas(document
恐竜でもわかるJavaScript - Qiita
こちらの記事は、2017年10月に公開された 『Modern JavaScript Explained For Dinosaurs』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに ライアンノースによる恐竜漫画から引用 あなたがJavaScriptの進化と共に歩んでこなかったのであれば、今のJavaScriptを学ぶことは難しく感じるでしょう。エコシステムは急速に成長し変化しているため、さまざまなツールが解決しようとしている問題を理解することは困難です。私は1998年からプログラミングを始めて、2014年になって初めてJavaScriptを真剣に学び始めました。当時私はBrowserifyに出会い 、そのキャッチフレーズを見たことを覚えています。 「Browserifyは、あなたの依存関係のすべてをまとめることによって、ブラウザでrequire(‘modules
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
結局VanillaJSである。 - nobkzのブログ
anond.hatelabo.jp nida3001.hatenablog.com 上記のブログに刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。しかし、なんか書くのダルいので、大分大雑把にかくぞ。 さて、さっそく結論を述べよう。今のフレームワーク論争やらに対する解決策はVanillaJSを使うってことである。 フロントエンドSPAのフレームワークについて まず、今のほとんどのフレームワークが使えないってのはそのとおりである。その話してみよう。その理由は、「フロントエンド」 ってのは一括りにできないからである。「ハッカーと画家」のとある言葉をアレンジして言えば「フロントエンドはユーラシア大陸のようなものである」。フロントエンドが関わる範囲が大きすぎるのである。ヨーロッパもあればアジアもあれば中東もあるという感じである。 範囲が大きすぎて、フレームワー
ぺちぱーエンジニャーからのフロントエンドに対する思い - 虚無愛好部活動記録
フロントエンドが嫌い に刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。私の立ち位置ですが、最近はぺちぱーでしこしこECサイト作っており、専業フロントエンジニアがいない程度の規模なもので、PHPエンジニア兼インフラエンジニア兼HTML・CSSコーダー兼JavaScriptエンジニアなどやってる…という感じです。要するに本業として触っているわけでもない私のフロントエンドに対する私の思いは大きく以下2つで、増田の方と似てます。 まず、JavaScriptフレームワークは使えないし使いたくないです。専業フロントエンドエンジニアいないのにReactやらVueやらに手を出すのは学習コスト高すぎて無理っす。また現実問題として、ページデザインは外注ということも多いので、もしこれらフーレムワークを使うならデザイン会社にそれを強制していくことになり、いくらなんでもそり
当選詐欺リダイレクト広告の配信経路とメカニズム
nafumofu @nafu_mofu ◆ Togetter 1. pubmatic[.]com 2. advertising[.]com 3. mathtag[.]com 4. aoxmediamarketing[.]com 2018-09-10 15:19:12 nafumofu @nafu_mofu ◆ Engadget 1. blogsmithmedia[.]com 2. aolcdn[.]com 3. atwola[.]com 4. adtechjp[.]com 5. mathtag[.]com 6. aoxmediamarketing[.]com 2018-09-10 15:19:12 nafumofu @nafu_mofu ◆ イザ！ 1. doubleclick[.]net 2. proparm[.]jp 3. adingo[.]jp 4. proparm[.]jp 5.
JavaScriptを言語仕様から把握し、ライブラリに振り回されない漢を目指す人に贈るJavaScriptの基礎 - Qiita
JavaScriptを言語仕様から把握し、ライブラリに振り回されない漢を目指す人に贈るJavaScriptの基礎JavaScript 個人的に本とかネットで勉強していたものを、ここにまとめていたのですが、せっかくなのでQiitaにも投稿します。 間違いなどお気付きの点があればご指摘をお願いいたします。 JavaScript(以下JS) ES6 = ES2015 とする(呼び方多すぎ) 変数と定数の定義 基本的に const で定義するようにし、どうしても必要な時だけ let を使うと事故を減らせる var はES6で書けるのであればもう使わなくて良い let 変数を宣言する。宣言できるのは一度だけ 宣言時に初期化を行わなくてもエラーにはならない(中身はundefinedとなる) 値の再代入は可能だが、再宣言はエラーになる const 定数を宣言する。宣言と同時に必ず初期化する必要がある 値
「世界最悪のログイン処理コード」を解説してみた
概要 ところでこのツイートを見てほしい。このソースコードをどう思う？ 世界最悪のログイン処理コード。 実際のサービスで可動していたものだとか……https://t.co/C2bG93ZCkj pic.twitter.com/EfVNAEslrn — はっしー@海外プログラマ🇳🇿元社畜 (@hassy_nz) 2018年8月10日 すごく……セキュリティーホールです…… 一応は動いていますが、あまりに問題がありすぎるため、Twitterでも話題になっていました。 問題点は片手に入り切らないぐらいある気がしますが、一つづつ解説していきます。 ※元記事のタイトルに記載されていますが、このコードはイントラネット内で動作していたものです。 問題点リスト 1. クライアント上のJavaScriptで書かれている 他の問題点を全部ぶっ飛ばすぐらいの重大な不具合です。 クライアントと言うのはこの場合、
Vim を WebAssembly に移植した - はやくプログラムになりたい
久々のブログです． 6月ぐらいにWebAssembly の仕様をざっくり読んだので，なんか WebAssembly でやりたいなと思って，Vim を WebAssembly に移植してブラウザで動くようにしてみました，という話です． github.com 多分実物を見ていただくのが一番早いので，下記のリンクにアクセスしてみてください． デモページはこちら（下記の注意事項を先にお読みください） 注意 デスクトップ版の Chrome か Firefox か Safari か Edge を使ってください．どうやら macOS では Safari が一番動きが良いです． デモページは全部で1MBほどのリソースを fetch します．モバイルネットワークなどからアクセスする場合はお気をつけください． keydown でキー入力を取っているので，キー入力を横取りするブラウザ拡張などが有効になっていると
Eq エンジニアブログ: Puppeteer を使ったフロントエンドのテスト
先日「東京 Node 学園 27 時限目」に参加して Puppeteer というライブラリを知りました。 Puppeteer は Node.js から Headless Chrome を操作するためのライブラリで、Google Chrome の開発チームが出している公式のものだそうです。 Node.js から Headless Chrome を扱うには「chrome-remote-interface」というものがありました。 私も「Headless Chrome を使ったフロントエンドのテスト」という記事の中で chrome-remote-interface の使い方を紹介しています。 その記事のなかで、ページをスクロールしたり、マウスでクリックするような操作をライブラリとして用意すれば Headless Chrome を使うのは十分に現実的だという感想を書きました。 逆にいうと、そのよう
テスト自動化- puppeteer | Ques
こんにちは。ヒューマンクレスト山口です。 私は普段「Selenium」を用いて、Webサイトの自動化しています。 皆さんは自動テストをしながら、HTTPステータスコードを確認したいと思ったことはありませんか？ 現在、「Selenium」ではHTTPステータスコードを確認することはできません。 HTTPステータスコードを取得するには様々な方法がありますが、ライブラリを使うのも１つの手段だと思います。 そこで今回は「puppeteer」を用いたWebサイトのテスト自動化を簡単に紹介します。 puppeteerとは？ Chrome DevTools Protocolを用いて、Headless ChromeをNode.jsで操作しやすくしたライブラリです。 2017年8月にリリースされ、ChromeのDevToolチームが開発・メンテナンスしています。 また、多様なAPIが提供されており、様々な操
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
2016年にJavaScriptを学ぶとこんな感じ
このストーリーは、Circle CIに投稿された”It’s the future”というストーリーにインスパイアされたものです。オリジナルはこちら。ここに書いたことは一つの意見というだけで、他のJavaScriptフレームワークもそうですが、過剰に真に受けないでください。このストーリーを執筆中に新たなJavaScriptフレームワークは作成されていません。 やあ、今新しいプロジェクトをやっているんだけど、実はここ数年ウェブのコード書いていなくてさ、しかも以前とは少し変わったとも聞いているよ。それで君が一番この辺でウェブ開発に詳しいって聞いたんだけど？ -フロントエンドエンジニア、といったほうが正しいが…まあ、俺なら間違いない。俺のは2016年のウェブだからな。ビジュアライゼーション、ミュージックプレイヤー、サッカーをするドローン等々。JsConfとReactConfから帰ってきたばかりだか
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React and Next.js is DEAD — Something New is (Finally) Replacing It (For Good)
7 Killer One-Liners in JavaScript
TypeScriptは過去最高のプログラミング言語だと思う - keroxpのScrapbox
