12/14 Nihonbashi.js #3 100star以下限定！細かすぎて伝わらない自作ライブラリ選手権。
s2s
12/14 Nihonbashi.js #3 100star以下限定！細かすぎて伝わらない自作ライブラリ選手権。
RustでWebフロントエンド開発はできるのか？ - 0x90
Rust Advent Calendarの13日めです。 イントロダクション Rustを語るときしばしば「RustはWebフロントエンド開発もできる」ということが言われます。もちろん、RustはLLVMフロントエンドであり（LLVMから見てClangっぽく見えるように頑張っている）、emscriptenを使うことで用意にasm.js/wasmにできるわけですが、そこにとどまらずRust自体がオフィシャルにemscriptenバックエンドをサポートしています。更にごく最近、LLVM自体のwasm backendもサポートされました。 さて、では実際RustでWebフロントエンド開発はできるのでしょうか。もちろん、コストの掛かる何らかの特別な処理を行うためにJavascriptからRustの関数を呼び出したり、あるいはこちらの方がされているように、emscriptenのOpenGL imple
Elasticsearchのための新しい形態素解析器 「Sudachi」 - Qiita
tl;dr （要約） Kuromojiに代わる新しい形態素解析器「Sudachi」 なにが良いの？ 最新の辞書 企業（ワークスアプリケーションズ）による継続的な更新 複数の分割単位 → 検索用途での再現率と適合率の向上 プラグインによる拡張 省メモリ Elasticsearchで使いたい プラグイン: WorksApplications/elasticsearch-sudachi 使い方は当記事の後半をご覧ください 注: この記事の執筆者はSudachiの開発に関わっています さまざまな形態素解析器 形態素解析は、伝統的な自然言語処理（Natural Language Processing, NLP）において基盤となる技術です。そして世の中にはさまざまな形態素解析器が存在します。販売されているものもありますが、一般に公開されているものだけでもいくつか例をあげると、JUMANとRNNLMを利
テストでモックできなくて困るNode.jsのモジュールの書き方 - console.lealog();
こういう書き方にしてしまったせいで、テストの時にうまくモックできず困ったよというメモ。 問題のコード こういうやつ。 function foo(id) { bar(id); // ... } function bar(id) { // some heavy logics... } module.exports = { foo, bar, }; モジュール内が関数だけで構成されてるのは○。 ただし、テスト的には都合が悪い。 何に困るか テストでこの関数をモックしたい・・って時に困る。 さっきのコード例で、`foo()`をテストするときに、`bar()`をモックしたいとする。 jestだとこんな風にするはず。 const mod = require('../mod'); describe('foo test', () => { let barSpy; beforeEach(() => { ba
5文字で書くJavaScript/ Shibuya.XSS techtalk #10
Shibuya.XSS techtalk #10 の発表資料です。
AWSの次世代JavaScriptライブラリ「AWS Amplify」の概要とReactアプリに導入する手順 #serverless #adventcalendar | DevelopersIO
AWS Amplifyとは？ 本記事はServerless Advent Calendar 2017の13日目の記事です。よろしくお願いします。 AWS Amplifyは、2017年11月に公開されたAWSを利用するWebアプリケーション向けのJavaScriptライブラリです。サインアップやサインイン、MFA、追跡またはメトリクスの分析、コンテンツ管理、またはサーバーレスAPI統合などの実装が容易にできるように設計されています。 AWS Amplify は、クラウドサービスをスケーラブルかつ保護された方法で使用して一般的なアクションを実行するクライアント開発者に、宣言型インターフェイスを提供するように設計されています。これらの新機能を使用して、開発者は JavaScript アプリケーションを作成して一般的な抽象化を使用したベストプラクティスをプログラムによって適用し、最終的に開発サイク
ブルゾンちえみ判別器をブラウザ上に実装する - Qiita
皆さん、Yahoo!検索大賞 2017はご覧になりましか？ このアワードで大賞に輝くと、「今年の顔」の名誉を手に入れることができるんです。 そんな栄えある今年の大賞は、ブルゾンちえみとのこと。 他にも、俳優部門は高橋一生、女優部門は吉岡里帆、といった具合に各分野毎に受賞者がいます。 ところで、僕はあまりテレビを観ないので、誰が誰やらわかりません。 このままだと安心して2018年を迎えることができないので、画像を読み込んでそれが誰なのか判定するアプリが必要です。 一目見れば区別つきそうなものですが、僕の濁った目で直接見るよりも、機械に判定させた方がよいに決まっていますので、作ってみました。 実際の動きはこちらから確認できます。 今回はブルゾンちえみも含め、Yahoo!検索大賞の受賞者から以下の5人をピックアップし、判別できるようにしています。 ブルゾンちえみ(お笑い部門) 高橋一生(俳優部門
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
2017-12-11のJS: Parcel、webpack 4.0.0α、Node.js Performance改善ガイド
JSer.info #361 - 設定より規約(Convention over configuration)なbundlerであるParcelがリリースされました。 🚀 Announcing Parcel: A blazing fast, zero configuration web application bundler 📦 webpackやFuseBoxは詳細を設定ファイルで扱いますが、Parcelには現時点では設定ファイルがありません。 代わりにビルトインのプラグインとpacakge.jsonに書かれたparcel-plugin-から始まる名前のパッケージをPluginsとして読み込むことで、対応するファイル(Assets)などを拡張します。 （Assetの内部処理として、それぞれのAssetsに対応する設定ファイルを使う仕組み。たとえばJSAssetならば内部的にBabelが利
Kotlin 1.2正式版リリース。KotlinはJavaとJavaScriptのマルチプラットフォーム対応に
Kotlin 1.2では、JavaVMとJavaScriptのマルチプラットフォーム対応を推し進め、プラットフォーム共通モジュールとプラットフォームに依存するモジュールを同一プロジェクト内で記述可能になった。 JetBrainsは「Kotlin 1.2」正式版のリリースを発表しました（日本語訳）。 Kotlinはオープンソースで開発されているプログラミング言語です。JavaVM上で動作し、Java言語よりも簡潔で安全なコードを書けることなどを特長としています。 Kotlinは、今年5月に行われたGoogle I/O 2017でAndroidの正式な開発言語となることが発表され、これをきっかけにして急速に注目度が高まっています。 Kotlin 1.2 is Here!https://t.co/TRclENjhz7 pic.twitter.com/lZo18u8SQz — Kotlin (@k
webpack時代の終わりとparcel時代のはじまり - Qiita
設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを
PuppeteerでWebページからメインコンテンツっぽいところを抽出してみる - Qiita
最近、Webページからざっくりメインコンテンツっぽいものを探し出すプログラムを作成しましたので得られた知見についてまとめてみます。本文などの情報を利用せずに汎用的にメインコンテンツを探したかったので、Elementの位置、幅、高さ(以下rect)等の視覚的な情報を使用して抽出してみました。具体的には puppeteerでページをスクレイピングして各Elementの情報をまとめたツリー構造を作る Elementにスコアを付けて尤もらしいものをメインコンテンツとする というステップで抽出します。 メインコンテンツを抽出する完全なコードについてはgistのサンプルを参照してください。 ページのスクレイピング puppeteerを使ってページをスクレイピングします。最初にdomツリーを探索して必要な情報をjsonとて抽出します。視覚的な情最新のとして各Elementごとにrectの情報を取得します
編集者が最近のフロントエンド技術に初挑戦して仕事用アプリを作ったので見て - nomolkのブログ
つくったもの 原稿の締切と進捗を管理するシステムです。 これが画面の全体像のキャプチャです。モザイクが多くてよくわからないので、ちょっと説明を加えたのが下の画像です。 上のほうに、その日と翌日の掲載予定記事が出ます。その下にカードのような感じで表示されているのが、各原稿の締切／進捗管理です。 カードは締め切り日順に表示されていて、各カードの内容はこんな感じになっています。締め切りを本人に伝えたかどうかとか、ネタのメモを書き込むことができます。ステータスは未入稿・チェック中・リライト中・入稿済みの4種類があり、手で更新します。 この日は三土さんの締切で、まだ原稿が入稿されていないことがわかりますね。（三土さん晒してすいません。この記事は無事掲載されました） 締切1週間前とか、超過とか、状況によってカード自体の色も変わって気づきやすくなっています。 背景 僕はデイリーポータルZ(以下、DPZ)
BFFの設計とflowtype - Qiita
株式会社FOLIOのフロントエンドエンジニアをしています、諸見里です。 この記事はFOLIOアドベントカレンダー7日目の記事です。昨日の記事はバズらせてサーバーを落とすことで有名な弊社CDOの超心に刺さってイヤでも印象に残るプレゼンの方法でした。それほどバズらずサーバーは落ちなかったようです。 会社のアドベントカレンダーということで、今回はFOLIOのBFF(Backend For Frontend)でのflowtypeの活用と、アーキテクチャについて書きます。 BFF & Microservices FOLIOのシステムは、Scalaを中心としたマイクロサービスで構成されています。そして、それらのサービスをクライアント向けに束ねるために、Node.jsで書かれたBFF(Backend For Frontend)を置いています。例えばWebアプリ用のBFFなら、各サービスからデータを集めて
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
コスパで学ぶ自動テストのはじめ方 - 若くない何かの悩み
Qiita 週間ランキング1位を獲得しました Kuniwak です。ご愛顧ありがとうございます。 qiita.com さて、本題に移りたいと思います。 つい最近ですが、勤め先の別チームに向けて自動テストの導入を支援するための資料を作成しておりました。こちらを共有したいと思います。 speakerdeck.com 資料中にある「仕様化テストを推奨しない」という決断には賛否両論あるかと思います。仕様化テストを推奨しなかった理由は、仕様化テストにかかるコストは相当に高く、本当に余裕があるときでないと選べない選択肢だったからです。今回自動テストを導入しようとしているチームは、見るからに余裕のない状況だったので仕様化テストからやれとは言えませんでした。 もし、「自分だったらこうする」等のアドバイスがあれば、ぜひ参考にしたいと思います。コメントなどに書いていただけると嬉しいです。
WebDNNのサンプルとコードの解説に挑戦 - のんびりしているエンジニアの日記
皆さんこんにちは。 お元気ですか。師走の12月らしく締め切りに追われています。 この記事は「Deep Learning フレームワークざっくり紹介 Advent Calendar 2017」第7日目です。 qiita.com DeepLearningフレームワークの１つ、WebDNNのご紹介をします。 このフレームワークを調べたきっかけとして、「MakeGirls.moe」があります。 MakeGirls.moeは萌画像生成のWebサービスで、WebDNNを使用して提供しているようです。 make.girls.moe WebDNN WebDNNは東京大学 原田・牛久研究室が作成した深層学習モデル(DNN)を ウェブブラウザ上で高速実行するためのオープンソースフレームワークです。 次のサイトのアワードに掲載されるほど、良いソフトウェアでもあります。 Open source software
少人数でのフロントエンド開発をクイックに進めるために - Qiita
この記事は 第2のドワンゴ Advent Calendar 2017 7日目の記事です。 昨日の記事は@yue82さんでRTL設計スタイルガイドのアンチパターンをやってみたでした こんにちは。ニコニコ静画でフロントエンド開発を行っているnagisioです。 今年も冬コミに落ちてしまいました 去年の記事はRe:ゼロから始めるElectron開発生活でした。Electronに関して、残念ながら最近はあまり書いてないのですが、Reactは既に趣味でも仕事でも必須なフレームワークとなりました。 本記事ではそんなReactを用いたプロダクト開発について、どのように開発を進めていくのかを追っていきます。 はじめに（宣伝枠） ニコニコ静画チームにおいて、フロントエンドでの新規開発は基本的に少人数（１〜２人程度）で行っています。比較的小規模な開発が多く、例えば直近でリリースしたのがニコニコ漫画@C93です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6
歴史的遺物callback interfaceの紹介 - Qiita
