2019/08 Bookmark
#Bookmark
個人開発している TFTシミュレータ が PageSpeedInsightsでついに1.0秒を切れた。とても嬉しい。
基本的にPage Speed Insightに示されている注意書きの項目を修正していくことで高速化した
ウェブアプリケーション高速化
特に効果があったのはSprite画像を使用してページ表示を高速化 レスポンシブ対応
webアプリの特性上画像が多くなり、100リクエスト 1MB程度の画像を取得していたが、画像サイズの圧縮とSpriteイメージの活用で3リクエスト 70KB程度にまで小さくできた
https://gyazo.com/c482e9d691e6b23ab577ca582a20e848
Twitterで見たScrapBoxで暗記カード を1時間ぐらいで実装していたら公式のScrapboxカスタマイズコレクションで私の記事を参考にして改良してくれたカスタマイズが紹介されていた
改良して公開してくれるエンジニア文化最高
Scrapboxで暗記シートを作る - Scrapboxカスタマイズコレクション
Bookmarkを追記するBookmarklet を作った
このページはこのBookmarkletを使ってリンクを追加している
追加したいページを表示して「ブックマークに追加する」みたいにボタン1つでこの記事にリンクが追加される。とても便利
AtomicDesignとかTypeScriptの本を読んだ
TypeScript Vue Nuxt熱が高い
Vue3.0早くきてほしい
Elmを触りたいと思い続けてる
Factorio熱が高まってきた
https://gyazo.com/d24e9752373ccdd9da3d80c8b28dcdca
特に気になった技術
Q co.,ltd.【株式会社キュー】
すげえっていう感想しか出てこないwebサイトのギミック
パックマンや☆を書くと特殊な動作
Home | Aurelia
vueやReactのようなフレームワーク
Atomic DesignをVue.jsで実現するための構成と考え方 | Biscuetでの例をもとに - SMARTCAMP Engineer Blog
個人的にAtomicDesign本を呼んで勉強した結果、個人開発でTemplate層を排除した
How to create Responsive Retina CSS sprites
HTML Snippets" " | CSS-Tricks
Chart.js samples
Beautiful HTML5 JavaScript Charts | CanvasJS
提案を通せない人が押さえるべきビジネスパーソンの思考パターン3つ | BtoCマーケティング支援の株式会社ホジョセン
自分はWHYとHOWの人だと思った
ファーウェイ、Android代替の『Harmony OS』発表。「世界に調和をもたらす」OSとアピール - Engadget 日本版
ReactでTypeScript使うときにPropsやStateってinterfaceよりType Aliasの方よいのでは説 - terrierscript: 保存済みの下書き
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm - Speaker Deck
Binary Tree Bin Packing Algorithm
TypeScript – TypeSafe な ArrayObject と 操作 ｜ DevelopersIO
JavaScript開発者のための優秀なVSCodeツール26選 - Qiita
毎日見にいきたくなるレポート画面のデザイン｜Taiga Sano｜note
入力遅延のある環境がどれほどストレスが溜まるのか手軽に体感できるサイト「Typing delay experiment」 - GIGAZINE
ソフトウェアエンジニアのかけ声｜コキチーズ@k2wanko｜note
Nuxt.js 2.9 がリリースされたぞ！ - Qiita
初期フェーズにおけるTypeScriptの付き合い方
Nuxt.js And TestCode - Speaker Deck
TypeScriptで超型安全なBuilderパターン - Qiita
TypeScript 3.7の asserts x is T 型はどのように危険なのか - Qiita
面白そうな技術トピック
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
小難しいコーディングは一切不要！！！たったの15分でLINE Clovaにクソアプリを解き放ってTシャツをゲットする方法を発明したよ。 - Qiita
失敗しづらいUIへのアプローチ - Qiita
画像の上におしゃれに文字やボタンをのせる方法（CSS）
CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA
たのしいOSSコードリーディング：Let's read "cookies"🍪 - Speaker Deck
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Vue.js Algoliaを使って、フロントエンド開発だけで検索機能を実現する - LiBz Tech Blog
「1から100の偶数の和を求めるワンライナー」まとめ - Qiita
簡単だけど、デザインがすごく良くなる！デザイナーによる思考プロセスを丁寧に解説した良書 -デザイン力の基本 | コリス
Laravel PostgreSQL Vue.jsでSPA開発【チュートリアル】 - OPTiM TECH BLOG
Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら - Qiita
bloc97/Anime4K: A High-Quality Real Time Anime Upscaler
体系的に学ぶモダン Web セキュリティ (#seccamp 全国大会 2019 B5) / Learn Modern Web Security Systematically - Speaker Deck
個人開発者同士でバグを見つけ合うバグバッシュという取り組みについて - フロントエンドの地獄
デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント｜Tomoyuki Arasuna｜note
Elm勉強会@弊社（2019/08/28） - Qiita
チームでElm開発。〜TEAに導かれし者たち〜 - Speaker Deck
nekochans/nuxt-boilerplate: Nuxt.js Boilerplate
Vue.js Showcase - Made With Vue.js
CSSアニメーション ●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita
yamory | すべてのエンジニアにセキュアな開発を。
興味ある
【やる気を出したい人必見】科学的に証明されたやる気を出す方法5選 怠惰な自分とは今日でおさらば - ホワイト心理学って何？
睡眠の質を高めるための方法（総まとめ編）
1枚のイラストからアニメーションを自動生成する深層学習エンジン「DeepAnime」を開発・提供開始｜株式会社AlgoAgeのプレスリリース
donnemartin/system-design-primer: Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
技術ブロガー必読！と言える「Technical Blogging, Second Edition」を読んだ - kakakakakku blog
文字装飾デザイン基本の10パターンを参考例とともにご紹介します！ | 東京上野のWeb制作会社LIG
Vuestic Admin
求めてたやつ。上司が近くに来たら、とっさにPC画面を切り替えてくれるセンサー | ギズモード・ジャパン
知っているようで意外と知らなかったPython小ネタ集 ｜ DevelopersIO
綺麗なfavicon（ファビコン）作成の基本的なコツ・アイデアまとめ | 東京上野のWeb制作会社LIG
マンガ読書管理アプリの設計メモ（１８）｜aiiro｜note
AWS、SQL互換の新問い合わせ言語「PartiQL」をオープンソースで公開。RDB、KVS、JSON、CSVなどをまとめて検索可能 － Publickey
欲
プレミアムモバイルPCなのに、安くてスペックもいい：GPD P2 Maxレビュー | ギズモード・ジャパン
Do you like keyboards? - Speaker Deck
参考/勉強用
page-break-before－スタイルシートリファレンス
Difference between HTML and HTML5 - GeeksforGeeks
Difference Between HTML and HTML5
hoverした時に疑似要素で画像やテキストを出現させる。 | パソコン倶楽部りんご
ルート相対パス！！？ | phiary
いままで知らなかった
2019夏、先輩が若手に贈る「お世話になった技術書60選」- 入門からガチまで – ｜ DevelopersIO
Vue.jsで定期的にバックエンドと通信したいときに気にしたい3つのこと - プラグイン作成で解決 - SMARTCAMP Engineer Blog
3階層システム（三階層システム）とは - IT用語辞典 e-Words
マークアップエンジニアがフロンエンドエンジニアになるために、学ぶべきこと・活かせること - Qiita
スタートアップのためのコンテナ入門 – 導入編 | AWS Startup ブログ
JavaScript練習問題集(ECMAScript2015,2016,2017,2018,other Library)
Life of a Pixel 2018 - Google スライド
実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか - Qiita
WEB制作で便利なお役立ちツール3選 | ジーニアスブログ
CSS Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある | コリス
What Is Semantic HTML and Why You Should Use It
ヤフーのクリエイターが読んでいる技術・デザイン書 〜 技術活動費用補助制度のデータから見る興味関心 - Yahoo! JAPAN Tech Blog
ブラウザベースSVGエディタまとめ - Qiita
CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..) - Qiita
意外と知られていない、CSSで文末を3点リーダーで省略表示するline-clampプロパティの効果的な実装方法 | コリス
現在フロントエンドに欠かせないwebpackとBabelを理解しよう - Speaker Deck
CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 | NxWorld
progfay-pub
めちゃくちゃ良いScrapBoxのカスタマイズ
読み物
秋元@サイボウズラボ・プログラマー・ブログ | akky's work blog
エンジニアはつらいよ。ミーム動画で遊ぶエンジニアたち - 中華IT最新事情
「50歳過ぎてエンジニアリングに戻ったら、楽しくて仕方ないんです」笹川賢一（税理士）〜Forkwellエンジニア成分研究所 - Forkwell Press
プログラマーを30年間やってきた経験から学んだことまとめ - GIGAZINE
エンジニアの不安と壁 - naoyaのはてなダイアリー
グーグルが出した「最終解」　理想のリーダーとチーム｜出世ナビ｜NIKKEI STYLE
"クソコード"は人格攻撃ではないのか｜qsona｜note
『B1グランプリ(Bug Bash)』を2時間やって細かいIssueを洗い出しました - Kyash Blog
株式会社ROXXの会社情報 - Wantedly
iOSエンジニアとして入社した僕が AWS認定資格 11冠 になった話 ｜ DevelopersIO
5年いた富士通を退職した理由
【ノーカット掲載】オンプレミスかクラウドか。社内を二分する論争にDeNA南場智子が出した"答え" | フルスイング - DeNA
「スタートアップがまともなわけ無いから入るな」【後編】SUGAR・杉谷保幸CTOインタビュー　｜　Geekroid
雑記/未整理
木星に巨大な何かが衝突したっぽいです | ギズモード・ジャパン