You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Intro ResizeObserver の ship が進みつつある。 この仕様の解説および、ElementQuery / ContainerQuery について解説する。 Resize Observer 1 ResizeObserver ResizeObserver は、最近増えつつある ObserverFamily の 1 つであり、要素のリサイズを検知するインタフェースである。 リサイズを検知したい要素をターゲットに observe() すると、ターゲットと矩形情報が取得できる。 const resizeObserver = new ResizeObserver((entries) => { entries.forEach(({target, contentRect}) => { console.log(target) const {x, y, width, height, top
追記: 2019/05/01 最近の@typescript-eslint/eslint-plugin, Prettierのアップデートによって、正式にTypeScript 3.4対応されました。一通り普通に動いてる感じ。 これまで自分で使っていて問題になったのがパフォーマンス。ESLint単体やTSLintに比べて、プロジェクトによるだろうけど2倍以上遅い。体感で結構辛い。 Poor performance on some projects · Issue #389 · typescript-eslint/typescript-eslint これはTypeScriptのパーサーを通す部分の構造上の問題が原因なので、簡単には直せなそうな気配。 とりあえず、個人的には型を必要とするルールにそこまでの価値を感じていないので、該当ルールを無効にしてparserOptions > projectを削
これまで 新卒で入社したWeb系IT企業で1年4ヶ月ほど新規事業部門でブログサービスの開発などをしていました。チームでやってるサービスと自分個人が結びつくのもあんまり良くない気がするので会社名は書かないけど、本日が最終出社日なので振り返ってみます。 やったこと フロントエンド周りを中心にやりました。 JavaScript、Node関連ではrollup, babel, prettier, eslintなどを導入したり、すでにあったコードのリファクタリングを行ってES6 Modulesを導入したりしました。 その他、色々なバイナリを入れたりコンパイルをして動かす必要のある部分などもdockerを使って一から環境構築することなくビルドできるようにしたり、CSSはSassを使っていたものをPostCSSに変更したりしました。デプロイ周りのフローもAWSに繋いでる部分を自動にしたり色々気になったとこ
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上(1ページあたりの閲覧時間が長く相対的にローディン
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記:アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました! 熱心な React ユーザ
Denoの公式homepageに、拙作のロゴアニメが採用されました!https://t.co/iQyox3QK5D Ryanへの質問回答のお礼として作ったものでしたが、公式に使いたいと言ってもらって感激でした😂 pic.twitter.com/3qYho3bUaL— はっしゅろっく (@hashedrock) 2019年2月2日 この件についての経緯を書く。 先週、しゅうまいさんから「技術書典でDenoの薄い本書きませんか?」という呼びかけがdeno-jaのslackにあった。 もともと技術書典楽しそうだなと指をくわえて見ていたので、即飛びついたのだった。しかし、自分はそこまで技術に自信がない。 他のメンバーはDenoの深い部分について書きそうなので、 じゃあ「マンガでわかる~」シリーズみたいな感じで、イラストを交えて初心者向けの章を書こうかな? と考えたのだった。自分は典型的な器用貧乏
株式会社クリアコード > ククログ > Webアプリや拡張機能(アドオン)で、Web Crypto APIを使ってローカルに保存されるデータを暗号化する ※注記:本文末尾の「公開鍵暗号ではなく共通鍵暗号を使う理由」の説明について、2019年1月30日午前0時から21時までの間の初出時に内容の誤りがありました。また、2019年1月30日午前0時から2月5日20時頃までの間において、本文中での AES-CTR による暗号化処理が、 nonce を適切に指定していないために脆弱な状態となっていました。お詫びして訂正致します。初出時の内容のみをご覧になっていた方は、お手数ですが訂正後の説明を改めてご参照下さい。 クリアコードで主にMozilla製品のサポート業務に従事している、結城です。 FirefoxやThunderbirdがSSL/TLSで通信する際は、通信内容は自動的に暗号化されます。その一
Intro 脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。 こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。 そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。 まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。 WICG/trusted-types Intent to Experiment: Trusted Types Sink XSS などの原因となる DOM 操作として、 DOM に直接文字列を展開する処理がある。 element.innerHTML location.href scri
node-report: meld into core by gireeshpunathil · Pull Request #22712 · nodejs/node Checklist make -j4 test (UNIX), or vcbuild test (Windows) passes tests and/or benchmarks are included documentation is changed or added commit message follows commit guidelines This PR adds ... 結構前から進行してて入れたいねーってなってたらこんなにかかってしまいました。 semver-minor なので、次のリリースで入るでしょう。 目的 主な目的としては、何かのエラーで例外をキャッチしたときにその時の詳細情報をコア側から提供し、原因特
AWS Dev Day Tokyo 2018でMicro Frontendsについて話したスライドです。 #MicroFrontends #マイクロフロントエンド
このnoteをすべてのインターネット探索者(Internet Explorer)達に捧げる。 2018年12月31日、新卒入社して3年半勤めた会社を辞めた。東京の八重洲にある、フリーペーパーやWebサービスを作る会社で働いていた。いわゆる「文系プログラマー」というやつで、文系学部を卒業後、会社に入ってからプログラミングを覚えた。現在は退職してフリーランスになり、個人で開発しつつ、ずっと漫画を描いている。 3年半のあいだ、大きく分けて2つの失敗をした。 1. プログラミング入門の仕方に失敗した 2. プログラミングを覚えてから何をすればいいかわからなかった 前者の失敗の結果、プログラミングを投げ出して京都に逃亡した。後者の失敗では精神を病み、3ヶ月休職をすることになった。前者は笑い話だが、後者は人生に暗い影しか落とさない。これからプログラミングを始めようと考えている人には同じような失敗を避け
[JS]面白いスクリプトが登場!スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
自身のウェブサイト上に他人のパソコンのCPU(処理装置)を使って仮想通貨をマイニングする「Coinhive(コインハイブ)」を保管したなどとして、不正指令電磁的記録保管の罪に問われたウェブデザイナーの男性(31)の第3回公判が1月17日、横浜地裁(本間敏広裁判長)であり、被告人質問が行われた。 ●CPU使用率50%「不快感を与えず問題のない設定」 弁護側の質問から開始。男性は自身のサイトにコインハイブを導入した経緯について、2017年9月ごろにウェブメディアの記事でコインハイブを知り「新しい技術として興味深く、試してみたいと思った」と説明。 ローカル環境でCPU使用率0%〜100%までテストした際に、「CPU使用率50%であればユーザーに不快感を与えず問題のない設定」と思い、自身のサイトに設置したコインハイブはCPU使用率50%の設定にしたという。 弁護人の「コインハイブを設置することで、
# イマドキと言われる言語機能について ---------------------- [第60回プログラミングシンポジウム](http://www.ipsj.or.jp/prosym/60/60program.html) === # About Me ---------  * κeen * [@blackenedgold](https://twitter.com/blackenedgold) * Github: [KeenS](https://github.com/KeenS) * [Idein Inc.](https://idein.jp/)のエンジニア + 情報科学の教育は受けていない純粋なエンジニア * 実際に仕事で使った(ている)のはJava, Scala, Rust === # 最近っぽい言語 ------------
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く