CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. The golden rule of CoffeeScript is: “It’s just JavaScript.” The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can u
Electronでメディアファイル用のファイルブラウザ「BlackAlbum」を作った - joker1007’s diary
Electronで動作する動画ファイル及びJPG in Zip向けのファイルブラウザを作ってみました。 構成としてはElectron+React+Reduxで、gulpfile以外はbabelを使って書いてます。 そこそこ今風な感じを目指して、一部flowtypeとかも取り入れてますが、割と適当な感じで使ってます。 実は以前Node.jsで同じもの作ってたんだけど、せっかくちゃんとデスクトップアプリとして作れるようになったしReactにも慣れたのでElectronと今の技術で作り直してみたのがこれです。名前も同じだったりする。 https://github.com/joker1007/blackalbum https://github.com/joker1007/blackalbum/releases/download/v0.2.0/BlackAlbum-darwin-x64-0.2.0.
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
最近 Fitbit つけて散歩してるので CircleCI + Pixela で見えるようにしてみた - Mitsuyuki.Shiiba
歩数で草を生やしてみたのだー。これで散歩の楽しみが増えたなー やってること やってることはシンプルで、こう↓ Fitbit の API で歩数を取得 Pixela に記録 というスクリプトをつくって CircleCI で定期的に実行 Fitbit? 最近 Fitbit Sense というスマートウォッチをつけて散歩してる www.fitbit.com 会社の福利厚生で健康のための補助があるので、それを利用して手に入れたのだ。散歩やジョギングをしたら勝手に記録されてるので便利。睡眠のログも取られてるので面白い Pixela? Pixela は日々の活動を記録して見えるようにしてくれる API サービス。いちばん最初に貼った画像みたいに GitHub の草を生やすやつみたいにしてくれる。操作が全部 API 経由なのも楽しい pixe.la せっかく散歩してるから せっかく散歩してるから Fit
なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
C10K 問題、実は理解していない
お願い 「C10K 問題とは何か」がわかる方は是非 Issue や Twitter などで教えてください。 追記: 自分の立場 1req ごとに 1 native thread を割り当てていたら、クライアントの数が増えれば増えるほど負荷が高まるのは当然だ。ただハードウェアの性能的に余裕があっても性能が劣化することがあり、それを C10K 問題と呼ぶ。C10K 問題は fd, pid の枯渇、スレッドを固定長サイズで確保することによるメモリの無駄遣い、コンテキストスイッチコストを含む。これを解決する方法が 1req ごとに 1 native thread を割り当てない技術で、シングルスレッド+イベントループ+IO 多重化といったテクニックや M:N モデルにつながる。 追記: @naoya_ito さんに解説してもらった当時の歴史的背景 https://twitter.com/naoya
はじめに バックエンドエンジニアは、プログラミングの中で特にイメージがわきにくい分野である。簡単に言えば、バックエンドエンジニアはユーザから見えない部分にあるシステムである。(例えば、ユーザ認証やデータベース設計・操作・運用などが例として挙げられる) 例えば、ECサイトを運用する際に、ユーザから見えるUIだけを作っても作動しない。バックエンドになるシステムの構築も必要なのだ。 今回はバックエンド開発を理解する上で必要な10の知識を徹底解説する。その中で、個人の見解に過ぎないが初心者にオススメのバックエンドのフレームワークを3選紹介する。あくまで一個人の見解に過ぎないが、今回の記事を通してバックエンドの学習方法またはその魅力を十分に理解していただければ非常に幸いである。 本題に入る前に、本記事における「バックエンド」はあくまで認証やデータベースなどシステムやソフトウェアの裏側で動作しているも
ここ最近はブラウザーの上で動く思いっきりRIAなアプリケーションを書いている私。こと通信の部分になると JavaScript での開発効率が、C++/Java/Objective Cなどと比べて格段に高いことをつくづく感じている毎日なので、今日は、そのあたりを少し解説してみようかと思う。 サーバーのAPIにアクセスするプログラムを書く方法は色々とあるが、「サーバー上の特定のURLにHTTPでアクセスして結果をXMLやHTMLやJSONで受け取る」というケースに限定すれば、基本的に３つのパターンに分けられる。 1. 同期通信 result = urlfetch.fetch("http://www.google.com/") if result.status_code == 200: doSomethingWithResult(result.content) その書きやすさのために、実務経験の
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．はてな・ペパボ技術大会 #4 〜DevOps〜 @京都において，「社内横断で開発効率を上げる取り組み」というお題で発表しています．この記事は，その発表資料です． 社内横断で開発効率を上げる取り組み はてな・ペパボ技術大会 #4 〜DevOps〜 @京都 hitode909 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア 好きな本はオブジェクト指向入門とドメイン駆動設計 2009年〜 うごメモチーム 2012年〜 ブログチーム 2017年〜 マンガチーム 2018年〜 CTO室(兼務) アジェンダ CTO室での活動 特定のチームに閉じず，社内横断で開発効率を上げるための試み みなさん 学生の方? 🙌 社会人の方? 🙌 Devの方? 🙌 Opsの
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
ここのところHystrixについて調べていたのですが、Netflixは他にもGitHub上で様々なOSSを公開しています。 github.com Javaのものが中心ですがPythonやGo、Cで書かれているものもあります。ライブラリ的なものからミドルウェアや運用ツールまで多岐に渡っており、NetflixがAWSを利用しているということもありAWS上での利用に特化したものもあります。また各プロダクトのドキュメントもしっかりしており、以下のような専用のサイトも立ち上げられており、社内で開発したものを積極的にOSS化するという方針が伺えます。 netflix.github.io HystrixやEurekaなどを筆頭に有名なものも多いのですが、なにぶん数が多くどのようなものがあるのかを把握するのも割と一苦労な感じなのですが、Netflixでは自社のOSSを紹介するMeetupが継続的に開催され
概要 退職エントリって良いですよね。 人生色々ですよね。 作ったもの 退職エントリまとめ これ自体は、ただのはてなブログです。 退職エントリをあつめる cheerio-httpcliで、タイトルに「退職しました」や、「退職します」が付いてるサイトのURLを Google検索結果から集めます。 const client = require('cheerio-httpcli'); // "退職しました"を検索する。"&tbs=qdr:d"を付与すると24時間以内の検索になる。 const BASE_URL_GOOGLE = 'https://www.google.com/search?q=%22%E9%80%80%E8%81%B7%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%22&tbs=qdr:d&start='; // はてブなど、除外したいサイトを登録しておく
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
AMP（Accelerated Mobile Pages）がオープンソースとして立ち上げられてから数年が経ちました。食べログなどの大手Webサービスが対応し、また簡単にAMP対応できるWordPressプラグインが出たことで、今では一般に浸透してきた感じを持っています。 ただ「表示高速化技術」「一瞬で表示する技術」というのは正しくないのでやめませんか？ AMPはWeb Componentsフレームワークまず誤解されがちなのですが、AMPは新たな技術ではなく、Web標準の「Web Components」というAPIを用いて実装されています。AMPのGitHubページにもしっかりと「The AMP web component framework.」（AMPというWeb Componentsを用いたフレームワーク」と掲載されています。 Web Componentsは、再利用可能でカプセル化された
ZEIT が作っている Micro という Node.js のフレームワークがあり、使いやすそう。 ZEIT は、かの Next.js を作っていて、 Mongoose を作った人や socket.io を作った人が所属しており、とても信頼できる。 ちなみに、 ZEIT は Now という、 Node.js （及び Dockerized されたもの）を動かせる、サーバーレスのサービスもやっている。 ZEIT(時) と Now(今) という世界観が良いですね。 初動が早くて、快適だった。 [追記] 何かに Micro 8 と書いてあって、最初、そういう名前のフレームワークと思ったのですが、実際は 8 はバージョン名で、 Micro のようです。また現行バージョンは9でした。 多分これ https://zeit.co/blog/micro-8 [/追記] Features README の F
asyncとawaitの由来を調べたところ,asyncとawaitのaは関係なかったことがわかりました,英語はクソ - ncaq
asyncとawaitの由来を調べたところ, asyncとawaitのaは関係なかったことがわかりました, 英語はクソ 背景 ｢awaitってなんだよ｣ という気持ちがある日寝てる私に降ってきました. asyncの由来 asyncはsynchronize(同期する), synchronization(同期すること)を省略したsyncに, ギリシャ語由来の接頭辞a-をくっつけて, async(同期しない)となります. また、英語の〈a-〉という接頭辞はいろいろな意味がありますが、その中の一つに、ギリシャ語の〈a-〉（母音またはhの前ではan-）に由来して、「無」「ない」という否定を表すものがあります。 第29回 食べることと話すこと (2) - 語源でゴキゲン prefix meaning "not, without," from Greek Online Etymology Diction
はじめに まず始めに言っておかなければなりません。 gocode 今まで本当にありがとう この記事は、Go 言語歴10年になる僕がこれまで愛用してきた Go 言語のコード補完ソフトウェア gocode の歴史と功績、そして今、gocode 自らがその役割を終えようとしている姿をぜひ皆さんに知って頂きたいという思いから Go Advent Calendar 2018 の記事として起こしました。この記事では gocode が歩んできた歴史と苦悩を少しでも皆さんに分かる様に解説させて頂きつつ、そして次にやってくる Go 言語のコード補完の未来についてご紹介したいと思います。Vim について多めに書かれていますが、Visual Studio Code での Go 開発にも影響する話です。 gocode とは gocode は nsf 氏が開発した Go 言語のコード補完サーバです。 GitHub
もうAndroidの非同期処理はasync/awaitでいいんじゃないかなぁと思った - visible true
Rx Ja Night Vol.2 - connpassで「 Androidの非同期処理をKotlinコルーチンで行う」という話をしてきました。 スライドで使っているコードは次のリポジトリに置いています。 github.com 今回取り扱った非同期処理の範囲 スライドやリポジトリのREADME.mdに大体書いているのですがコチラにも載せときます。 詳細な説明はスライドやリポジトリを参照してください。 次の非同期処理をコルーチンで実現します。 単発の実行 直列の実行 並列の実行 + エラーハンドリング キャンセル 環境 すべてKotlinが提供する標準の機能を用います。 implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:1.1.2-4" implementation "org.jetbrains.kotlinx:kotlinx-c
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
Reactを使うならReact Developer Toolsの再レンダリング時ハイライトくらい設定してくれ
モダンフロントエンドについて初めて書きます。お手柔らかに。 最近 React と Next.js に入門したのですが、入門時点で一番最初に知っておきたかったことについて書きました。 「React 初心者が useState とかを学習する前にまず一番にやることはこれ」っていう内容です。。 タイトルは自分への戒めです。 TL;DR この記事を読むと React Developer Tools の簡単な使い方を知り、useState の再レンダリングについて動きがイメージできるようになると思います React Developer Tools これのこと。React を使った開発をするのであれば、必ず導入しないといけないレベルのもの。 再レンダリング時ハイライトの設定 React Developer Tools をインストールした後、F12 を押下して Component を選択この歯車を押下す
はじめに このページは、プロトアウトスタジオのAPIにつなげる授業に関連して、よりAPIの多様さ、広がりを深掘りします。 まだ、JavaScriptに慣れていなくても「なるべくシンプルにAPIを体験する」ことを目指して、 public-apis というフリーで使えるAPIを集めてリストにしているサイトから、手順が少なくAPIにつなげられるシンプルに取得できるものを中心に、直接取得できるURL・Node.js axios await/async ソースコードを一つ一つトライしています。 慣れてきたら、自分で public-apis のサイトを直接読んでみて、巡ってみましょう！ APIピックアップ数 最終更新日 2020/6/8 104 個のAPIをピックアップ中！ 参考資料 public-apis の豊富なAPIリストをベースにAPIつなげていきます。 ピックアップルール 手順が少なくAPI
あまりにも世情にうといので作った。 NHKのRSSを定期的にチェックして、新着ニュースの動画を連続自動再生する。 とてもテレビっぽい。おかげで4日後にオリンピックが開催されるという事を知れた。 ソースコード https://github.com/shokai/nhk-news-app zipでダウンロード https://github.com/shokai/nhk-news-app/releases node-webkitはネイティブアプリ作成のためにwebkitが改造されたwebブラウザで、HTML/JavaScript/CSSが実行できるだけでなくnode.jsのAPIもそのまま呼び出せる。 つまりjQueryでDOM操作すると同時にnodeのライブラリを使うような処理が、同じプログラムファイルにまとめて書ける。変にブリッジを書く事なくいつものnodeのように require(‘モジュ
多くのWeb制作者はパフォーマンスというと、JavaScriptや画像の最適化、サーバーの設定、CSSなどのファイルの圧縮や結合を検討します。そして、Webページのコアとなる言語にも関わらず、HTMLは無視されがちです。 HTMLは単に複雑さと要素の数を減らすだけでは、パースにかかる時間をあまり改善することはできません。しかしよく作られたHTMLはページを素早くロードするための決定的な土台になり、異なるビューポートサイズに対応するレイアウトになります。 さまざまなデバイスに対して素早くロードし、うまくいくコンテンツを作ることができるクリーンで簡潔なHTMLのコードを紹介します。 High performance HTML 下記は各ポイントを意訳したものです。 著者のSam Dutton氏は、Google ChromeのDeveloper Advocateをされています。 ※当ブログでの翻訳
高嶋ちさ子を批判してる連中は、例外なくゴミクズ
はてな（っていうか、はてブ）を見ててゴミクズが多すぎてびっくりした。 高嶋ちさ子を批判してる連中の、あまりな人間性が下劣、幼稚、挙句に低能。 腹が立って仕方ない。 まず、この件に関しては爆笑の太田が http://news.livedoor.com/article/detail/11217862/ 「自分のお母さんが世間からボロクソ言われてるのを子どもが見ることの方が、『俺が悪いんだ。お母さんイジメないで』って思っちゃうんじゃないかなって気がして心配ですけどね」 と言ってるのが全面的に正しいと思ってる。 太田は個人的には嫌いだし、ラジオの抜粋で記事を起こす糞メディアには死滅してほしいけど。 高嶋ちさ子を批判してる人たちって、自分が投稿した文章を彼女の子供たちが見た時、どんな気持ちになるか、考えてるの？ 子の友達や、その親が見て、どんなことが起こるのか、想像してるの？ してないよね。 子供の
ぐるなびにあった２億ファイルをAWSにデータ移行しました - ぐるなびをちょっと良くするエンジニアブログ
こんにちは！店舗開発チームの滝口です。 ぐるなびでは、認証・認可のプラットフォーム開発に携わったのち、現在はレストランデータの運用をしつつ、ぐるなび掲載ページや、店舗向け管理画面の開発をしています。 はじめに このたび、オンプレで稼働していた「非構造化データストレージ（通称：UDS）」をAWSに移行しました。 UDS は NAS に保存されているファイルを REST API を介して CRUD 操作できるシステムで、ぐるなびで掲載している店舗の画像や CSS 、Javascript 等の保存に利用されています。 この記事では NAS に保存されたファイルをどのようにして AWS に移行したのか、その移行方式や AWS アーキテクチャを紹介します。 目次 はじめに 目次 UDS 基本情報 今回使った主な AWS AWS を活用して実現したいこと AWS 導入におけるアーキテクチャ AWS へ
(2016/7/7、いただいたフィードバックを元に記事を修正いたしました。) JavaScript、特にNode.jsといえば、 コールバック地獄 がよく連想されます ^(1) 。たくさんの非同期I/Oを扱うコードを書いたことがある方には、おそらく以下のようなパターンはおなじみでしょう。 export default function getLikes () { getUsers((err, users) => { if (err) return fn(err); filterUsersWithFriends((err, usersWithFriends) => { if (err) return fn(err); getUsersLikes(usersWithFriends, (err, likes) => { if (err) return fn (err); fn(null, lik
はてな社内で10年間運用されていた広告配信システムを刷新し、ネイティブ広告枠に対応しました - Hatena Developer Blog
アプリケーションエンジニアのid:yanbeです。2011年にはてなに入社し、以後、はてなブックマークのエンジニアやディレクターなどを経て、最近では、社内で利用する広告入稿システムと、その広告を配信するシステムを開発するチームに所属しています。 はてなでは、Webサービスの収益化の手段の一つとして、Google AdSenseなどのアドネットワークによる広告掲載のほかに、広告主との直接契約や広告代理店を介した広告掲載もおこなっています。 後者の具体的な例としては、はてなブックマーク公式スマートフォンアプリの人気エントリーを開くと、一覧に[PR]表記とともに差し込まれる広告枠*1です。 スマートフォンアプリの他に、はてなブックマークのPC版やスマートフォン版にも、このような広告枠が複数存在します。各プラットフォームに設置されている広告枠の掲載状況を効率的に管理するために、はてな社内では「広告
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
サーバーレスのセキュリティリスク - AWS Lambdaにおける脆弱性攻撃と対策 - Flatt Security Blog
はじめに こんにちは、株式会社Flatt Security セキュリティエンジニアの森岡(@scgajge12)です。 本稿では、AWS Lambda で起こりうる脆弱性攻撃やリスク、セキュリティ対策を解説し、サーバーレスにおけるセキュリティリスクについて紹介します。 はじめに AWS Lambda について サーバーレスにおけるセキュリティリスク AWS Lambda で起こりうる脆弱性攻撃 Lambda での脆弱性攻撃によるリスク 脆弱性攻撃による更なるリスク OS Command Injection XML External Entity (XXE) Insecure Deserialization Server Side Request Forgery (SSRF) Remote Code Execution (RCE) AWS Lambda におけるセキュリティ対策 セキュリティ
Latest topics > なぜMozillaはXULアドオンを廃止したのか？（翻訳） - outsider reflex
Latest topics > なぜMozillaはXULアドオンを廃止したのか？（翻訳） 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 「同調圧力は忌むべきものだ」と思考停止していたことに気付いた話 Main 「なぜMozillaはXULアドオンを廃止したのか？」に寄せられていた反応を見て、「甘い……甘すぎる……」と思って、W3C信者時代からの価値観に行き着いた話 » なぜMozillaはXULアドオンを廃止したのか？（翻訳） - Aug 22, 2020 （原著：David Teller, 2020年8月20日、CC BY-NC 4.0で公開されている内容の全訳。Qiitaにもクロスポストしています。） 要約：Firefoxはかつて、XUL
React ユーザー向けの Next.js ガイド
最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。 対象は、React は知っているけどこれから Next を学ぼうとする人が想定。 つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材 とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、 ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか 元々は SSR のための煩雑な手続きをしなくてい
新しいNext.jsの入門 ─ App DirectoryによるWeb開発をハンズオンで理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
使用するライブラリ このアプリで、Next.js以外に使用するライブラリは以下の4つです。インストール方法等は必要な箇所で説明します。 Prisma TypeScriptのORマッパーです。アプリでのノートの保存等に使用します。 ▶ Prisma | Next-generation ORM for Node.js & TypeScript Tailwind CSS CSSフレームワークです。アプリのUIデザインに使用します。 ▶ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Zod バリデーションライブラリです。APIレスポンスの型定義とバリデーションに使用します。 ▶ Zod | Documentation SWR データフェッチ用のライブラリです。ノート一覧のクライアントサイドで
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ：https://github.com/cyokodog/headless-chrome 概要 ヘッドレス（GUIを表示しない状態）で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可（2017/06/08時点ではMAC、Linuxのみ） 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ（そのうち指定不要
Underscore.js
v1.13.6 CDN URLs (Use with <script src="..."></script>) https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js https://cdn.jsdelivr.net/npm/[email protected]/underscore-esm-min.js https://unpkg.com/[email protected]/underscore-umd-min.js https://unpkg.com/[email protected]/underscore-esm-min.js https://pagecdn.io/lib/underscore/1.13.6/underscore-umd-min.js https://pagecdn.io/lib/unde
κeenです。最近同期/非同期、ブロッキング/ノンブロッキング、直接形式/継続渡し形式あたりが混乱してきたので個人的に整理します。 あくまで私個人の理解を纏めただけなので誤謬などに注意して下さい。 追記: @tanaka_akrさんから指摘されたのですが、用語の説明が間違っていそうだったので書き直しました。 diffはこちら 非同期とノンブロッキングはよく混同されます。また、非同期処理の記述形式として直接形式や継続渡し形式などがあります。 私自身違う言葉だなとは思いつつも混同したり違いを忘れたりしています。 非同期もノンブロッキングもナイーブなIOに比べると速い方式だな程度の理解でいてそんなに困らないと思ってますし混同や誤用に目くじらを立てるつもりもありません。 しかしながら3者を区別しないと意味を成さない文脈で3者を混同している技術を何度か見掛けたので（自分の中で）整理しようと思ったのが
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
Webサービスを作るときのテンプレートを作った - hiroppy's site
仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
JavaScript Reference - MDN
バックエンド開発の基本を理解するために必要な10の知識 2022年版
無名関数を使った非同期通信のススメ（JavaScript）
社内横断で開発効率を上げる取り組み #pepabohatena - hitode909の日記
ssb がすばらしすぎる件 - TokuLog 改め だまってコードを書けよハゲ
Netflixのオープンソースソフトウェア - たけぞう瀕死ブログ
退職エントリを毎日自動で集めるBlogを作った - Qiita
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
AMPを「高速化技術」「一瞬で表示する技術」というのはもうやめよう。｜榊原昌彦
Node.js でちょっとしたサーバーサイドやるなら、 Micro が良いかも - Qiita
Big Sky :: gocode やめます(そして Language Server へ)
JavaScript 長いループ 分割 - hitode909の日記
すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集
橋本商会 » node-webkitでNHK Newsを連続自動再生するアプリ作った
High Performance HTML -さまざまなデバイスに配慮されたクリーンで簡潔なHTMLの書き方
AsyncとAwait : コールバック地獄を避けるための最新のやり方、そしてその未来 | POSTD
Headless Chrome をさわってみた | CYOKODOG
非同期とノンブロッキングとあと何か | κeenのHappy Hacκing Blog