TR Output

フロントエンドエンジニアの備忘録

2020-01-01から1年間の記事一覧

【2020年11月】読了記事

HTML HTML5の10の新機能 あなたは知ってますか? - Qiita CSS コピペで簡単!CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート | コリス CSSの疑似クラス「:focus-within」が素晴らしい理由 | コリス Webページや…

フロントエンドの個人的なレビュー観点

最近社内で新卒・初学者向けにフロントエンドのコードレビューをする機会が増えたので、自分のためにもレビューの観点をまとめておこうと思います。 共通 エラーチェック(バリデーションチェック) 使われていないコード、コメントアウトがないか インデン…

【2020年10月】読了記事

HTML metaタグに記述するソーシャルメディアや検索用のコードをまとめて簡単に生成できるオンラインツール -Meta Tags | コリス document outline algorithm と h1 要素 | grgr-dkrkのブログ CSS Animating Number Counters | CSS-Tricks CSS設計において特…

【2020年9月】読了記事

HTML あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita CSS CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック | コリス JavaScript Back-end Developers RoadMap❤ - DEV Deno v1.4…

BEMを書くときの個人的プラクティス

シングルクラスでmodifierを使う element内でクラス名を格納するための this を定義し、modifier内で継承しています。 これにより、 class="block__element block__element--modifier" と2つクラスを付けるようなところを class="block__element--modifier" …

【2020年8月】読了記事

CSS content-visibility: the new CSS property that boosts your rendering performance CSSを活用してHTMLのセマンティックエラーを指摘する方法 - ICS MEDIA JSからTSへの移行ツール、ts-migrateを試してみた - Qiita JavaScript JavaScriptからletを絶滅…

【2020年7月】読了記事

HTML 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver SVG Title vs. HTML Title Attribute | CSS-Tricks CSS CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる | コリス Web制作の面倒な作業…

Chromeリモートデスクトップで「半角全角」キーをMacからWindowsに送信し、入力切替する

外出先でMacからChromeリモートデスクトップを使用し、自宅のWindowsを操作したいとき 日本語が打てず困っていたので色々と調べてみました。 結論「option + @」 Macの「Backquote」がWindowsの「半角/全角」と対応している Macで「Backquote」を入力するに…

ブラウザのキャッシュ対策メモ

①外部ファイル読み込み時にパラメーターをつける phpでuniqid();やdate();などを使い頻繁に変わる値を設定する <script src="/js/test.js?x=<?php echo uniqid(); ?>"></script> ②jQueryの記述を$(function(){})の中に入れない jQueryの記述は毎回下記のように$(function(){})の中に書くというのを通例としていたが、外側に…

今週読んだ記事(6/20~6/26)

CSS ニューモーフィズムのUIで見かけるさまざまなCSSを簡単に生成できる無料ツール -Neumorphic Generator | コリス Using Custom Property "Stacks" to Tame the Cascade | CSS-Tricks JavaScript 【Vue.js】Composition API時代の便利ライブラリ「VueUse」…

今週読んだ記事(6/13~6/19)

JavaScript 【Vue.js】CSS Modulesで書き始めるときに見るべきTips - Qiita Advanced TypeScript Types cheat sheet (with examples) - DEV What Is The Best Deno Web Framework? - DEV JavaScriptでx === 'a' || x === 'b' || x === 'c' || ...をシュッと…

今週読んだ記事(6/6~6/12)

HTML HTMLでWebページを実装するための必要最小限をまとめたフロントエンド用のテンプレート一式(IE11も対応) | コリス CSS 2020年版:おすすめの人気CSSフレームワークと特徴の総まとめ | Web Design Trends 君は真に理解しているか?z-indexとスタッキン…

今週読んだ記事(5/29~6/5)

HTML 画像による Layout Shift が無くなる Web がやって来る - mizdra's blog 【IE11】先頭にハイフン2つのclass名はCSSが効かない - Qiita CSS Sassのモジュールシステムを@importから@useに移行する方法を考えてみた | Rriver 全モダンブラウザ対応のCSS機…

今週読んだ記事(5/23~5/29)

HTML HTMHell - #20 HTMHell special: close buttons CSS 翻訳:CSSユーティリティクラスと「関心の分離」(いかにしてユーティリティファーストにたどり着いたか) - yuhei blog 2020年版!おすすめのリセットCSSまとめ | Web Design Trends Sassを@import…

今週読んだ記事(5/16~5/22)

HTML The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation CSS CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場 | コリス CSS fix for 100vh in mobile WebKit - Matt Smith text-underline…

今週読んだ記事(5/9~5/15)

CSS boxShadows | CSS box-shadow editor & quick presets min(), max(), and clamp() are CSS magic! | CSS-Tricks CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス 一番分かりやすいCSS Grid Layoutの使い…

今週読んだ記事(5/2~5/8)

CSS `lh` and `rlh` units | CSS-Tricks List Style Recipes | CSS-Tricks CSSとSassのコーディングスタイルガイドを作ってみた - Qiita Chromium lands Flexbox gap contain | CSS-Tricks Let's Take a Deep Dive Into the CSS Contain Property | CSS-Tric…

【Python / TwitterAPI】ツイートを全て削除するまでの備忘録

APIの申請 所要時間:1~2週間 必要に応じて英語でメール返信 twitterからアーカイブの申請、ダウンロード 所要時間:数時間 Macに Python, pip のインストール python-twitter のインストール ターミナルで実行 $ pip install python-twitter 削除するプログ…

今週読んだ記事(4/25~5/1)

HTML 無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】 - PhotoshopVIP 【2020年版】Webサイトのファビコンや各種アイコンの作り方・設定方法 | Web Design Trends CSS @property | CSS-Tricks How to Make a CSS-Only Carousel | CSS-Tricks…

今週読んだ記事(4/18〜4/24)

CSS これでもうCSSのクラス名は迷わない!BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet | コリス Creating Playful Effects With CSS Text Shadows | CSS-Tricks 最先端Webテクはこれ!コピペできるHTML/CSSスニペット77個まとめ - Photosh…

今週読んだ記事(4/11~4/17)

HTML htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか - Qiita Better Form Inputs for Better Mobile User Experiences | CSS-Tricks CSS サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック |…

ソーシャルディスタンシングCSS

文 字 間 も 空 け よ う 。 body { letter-spacing: 1em !important; } ブックマークレット版 ここをクリックで試せます。 javascript:(function(){document.body.style.cssText += 'letter-spacing: 1em !important;';})();

今週読んだ記事(4/4~4/10)

HTML #180: Tinkering with Video on Mobile | CSS-Tricks Chrome 81に追加された便利な機能――リンク先ページの特定の場所に移動しハイライト表示 | 海外SEO情報ブログ FirefoxがネイティブLazyloadをサポート、画像の遅延読み込みを簡単に実装可能に | 海外…

今週読んだ記事(3/28~4/3)

HTML Accessibility Links | CSS-Tricks Why Do Some HTML Elements Become Deprecated? | CSS-Tricks CSS mask-image | CSS-Tricks 「vw, vh, vmin, vmax」を使ったCSSのテクニックのまとめ | コリス 4 CSS Grid Properties (and One Value) for Most of Yo…

今週読んだ記事(3/21〜3/27)

技術系 2020年版 初心者向け プログラミング入門ガイド - Qiita [JavaScript] "10" + 1 は "101" だが "10" - 1 は 9 を理解する - Qiita 「イベント構造化データに“eventAttendanceMode”がありません」の警告がSearch Consoleから届く | 海外SEO情報ブログ …

今週読んだ記事(3/14~3/20)

技術関連 Using the HTML title attribute – Updated March 2020 | TPG – The Accessibility Experts title属性の問題点 srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita HTML5で<img>タグに追加されたsrcsetとsizes属性につ…