OGPを使ってMarkdownのリンクをカード型のリンクにマークアップする
ContentfulとNext.jsで作る技術ブログ Hello World ContentfulとNext.js、そしてVercelを使ってポートフォリオ兼技術ブログとなるサイトを作った。フロントエンドエンジニアとして、単に技術の知識を共有するだけで... 一般的なブログサービスやQiita、Zennといったサービスでは、Markdownに記述した外部リンクがカード的なUIで表示されることがある。これは OGP (Open Graph Protocol) という仕組みを使った表現で、単なるテキストリンクよりもずっと見栄えがいいのでこのブログでも実現したいと思っていた。先日試行錯誤してひとまず形になったので、この記事ではその実装の方法についてまとめておきたいと思う。上に貼り付けたこのブログ自身へのリンクがそれにあたる。 Next.js （ブログ記事のSSGに使用） marked （Mark
ericelliott/essential-javascript-links · GitHub
README.md Essential JavaScript Links A curated list by Eric Elliott and friends. Suggest links in the gist comments. Help us turn this into a proper website! This is a very exclusive collection of only must-have JavaScript links. I'm only listing my favorite links. Nothing else makes the cut. Feel free to suggest links if you think they're good enough to make this list. The really curious should f
Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog
Promiseは非同期処理をベースにした並列処理の実装方法の一種です。Promiseでは並列処理の各タスクが必ず1回実行されることが保証され、タスクとタスクからの結果を取得する処理を分離することできます。また、タスクの並列処理／直列処理をユーザーが自由に制御することができます。 ECMAScript Language Specification 6th EditionにPromiseが追加されたことから、しばらくの間JavaScriptの非同期処理に関する話題の中心はPromiseになると思われます。 Node.jsでも既にPromise対応したモジュールも多く、Promiseでのみ非同期処理を提供しているモジュールも存在します。Promiseを使用する機会は今後必然的に増えていくでしょう。 今回のエントリーでは、Node.jsでPromiseを使用する方法を説明します。コード例を中心に理
最新・最速！Webサービスが今すぐ作れる！ - MEANスタック開発(1) - paiza開発日誌
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 最近のリッチなWebサービス開発ではブラウザ(クライアント)とサーバ両方のコードを書いたり、Webソケットなどで連携したりすることもあり、気軽に取り組みづらくなっています。しかし、MEANスタックはクライアントからサーバまで全てをまとめた環境で、これを使えば素早くWebサービスを作ることができます。 今回は、MEANスタックの開発環境の一つ、AngularJS Full-stack generator(generator-angular-fullstack)を用いて実際にサンプルプログラムを動かしたり、修正したり、Herokuにデプロイしたりしてみます。 ブラウザ側のJavaScriptコードだけの作り方や、サーバ側だけのコードの書き方はWeb上でも多くでてい
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
第1回 JavaScriptの基礎を見直す | gihyo.jp
連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎」 の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
10年間JavaScriptをコピペしていた僕がJavaScript本格入門して知った驚愕のJavaScript言語仕様覚書 | niwatako$
JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。 むかしむかし 私にとってJavaScriptといえば、高校生時代(10 […]
Phantomjsで画像ファイルを保存する。 - The Other Road Ahead
2013-10-10 Phantomjsで画像ファイルを保存する。 Phantomjsでは、スクリーンショットを取ることができるが、開いたページの個別の画像を指定してダウンロードすることはできない。じゃあcasperjs使えばいいじゃんって話になるけど、casperjsは、ajaxで画像のurlを指定してダウンロードしているので、ページを開いたタイミングでrequestした画像がダウンロードされるわけではなく、もう一度requestを送ってダウンロードするので、リファラとか気にする場合は面倒なことになる。しかし、phantomjsには、disk cacheの仕組みがあり、そこからcacheした画像を掘り起こせばダウンロードしたファイル取ってこれるよねってことで、それを可能にしたscriptがこちら。 https://gist.github.com/bshamric/4717583 nor
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
橋本商会 » 画像を安全に埋め込みたい
チャットに画像のURLが貼られた時に、安全にimgタグを埋め込みたいという議論があったので書いておく。 一番単純な実装だと、 var s = "はろー http://shokai.org.ex/example.jpg てすとてすと"; s.replace(/(https?:\/\/.+)\.(jpe?g|gif|png)/g, "<img src=\"$1.$2\">$1.$2</img>"); のようにすると "はろー <img src="http://shokai.org.ex/example.jpg">http://shokai.org.ex/example.jpg</img> てすとてすと" になるのだが、よく考えると http://tumblr.com/logout#.png みたいなのを貼られるとimgタグが描画された瞬間にログアウトしてしまう。 正規表現がショボいのも悪いけど
JavaScript style guide - Mozilla | MDN
else は上で示したように常に単独の行に書いてください。 return の後には else を使わないでください。 if (x < y) return -1; if (x > y) return 1; return 0; i++ も ++i も使用可能です。 インライン関数はそのデバッグが楽になるように名前を付けてください。関数をプロパティに代入しただけではその関数に名前を付けることはできません。次のようにしてください。 var offlineObserver = { observe: function OO_observe(aSubject, aTopic, aState) { if (aTopic == "network:offline-status-changed") setOfflineUI(aState == "offline"); } }; 名前や列挙値には interCap
Array.prototype.map の自前実装 - がくぞーのメモ
javascript array map 自前 という検索ワードでのリファラがあったので map の自前実装でも書いてみます。 とはいえ、すでにやってる方がいらっしゃるので Arrayオブジェクトのmapメソッド - バリケンのJavaScript日記 多元配列を一元配列に変換 (JavaScript) - Days on the Moon 毛色を変えて畳み込み関数による map の実装でも紹介してみます。 まぁ関数型言語に慣れている方には何の面白みもないかもしれませんが＾＾；；； JavaScript で高階関数に触れたって人には畳み込み関数の強力さを知ってもらえるのではないかと。 という訳で畳み込み関数です。prototype.js だと inject、関数型言語だと foldl、JavaScript1.8 だと reduce と様々な名前で呼ばれてますが、ここでは JavaScrip
html5 canvasを用いた画像のBase64作成 - それマグで！
Base64 大好きです。 どんなデータでもHTMLに埋め込んでしまえるBase64愛してます。 画像をBase64にしたいな。 色々と方法はあるけれど、今回はCanvasでやろうと思いました。 base64にするには Image を作成 img srcに Image突っ込んでロードさせる img がロード完了されるイベント待ち canvas要素作成 canvasを2dで扱うcontext取り出し img の中身をCanvasに転送（コピー） textarea を作成 canvasの中身をBase64にする textareaの中にbase64を書き込み こんなかんじで、Base64を作ることが出来ます。 <!DOCTYPE html> <html> <head> <title></title> <style> body{ } </style> <script type="text/java
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
JSCompress - The JavaScript Compression Tool
About JSCompress JSCompress is an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for all JavaScript minification and compression. Why You Should Compress JavaScript There are a number of reasons wh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Little Book on CoffeeScript
Using the command line
GitHub - getify/You-Dont-Know-JS: A book series (2 published editions) on the JS language.
JavaScript Promiseの本
