MindBEMding と近代 Component 設計の共通点 - Qiitaマークアップ歴の長い方からすれば大した話でもないのですが、フルスタックエンジニアの方々がフロントエンド開発に参入される昨今。CSS指定に関して、備わっていると良い感覚を共有できればと思ったので、メモを書きます。 MindBEMding が解決した課題 Vue.js のスコープ付き CSSについて見てみましょう。本家のドキュメントを引用します。
JavaScriptのイベントをたくさん見られるサイトを作る
JavaScriptのイベント、ややこしいですよね。 名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。 忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイト ひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。 なぜイベントを使うのか マウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで
ぼくたちのかんがえたさいきょうのi18n国家
本記事は下記のtweetから始まるスレッドに触発され、@qnighyや@na4zagin3からアイディアを拝借して書いた。 i18n力が最強の国は国内に複数の言語があり、そのうちいくつかは他国でも使われている言語の方言で、1バイト文字での代替表記が困難で、歴史的にISO-2022ベースの文字コードとUnicodeと独自エンコーディングが混在していて、フリガナなどの特殊な組版規則があり、右書き左書き縦書きを併用し、 — Masaki Hara (@qnighy) 2018年8月6日 皆さんのおかげで最強のi18n国家が建設されつつある。一瞬で滅びそう — Masaki Hara (@qnighy) 2018年8月6日 長い前置き ソフトウェアのi18nは難しい。自文化では当たり前と思っていてハードコードしてしまった仮定が崩れて、大幅な再設計を余儀なくされるからだ。気づいて再設計できればまだ良
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
千夜一夜かからずに、アラビア語Unicodeをマスターする！ - Qiita
!مرحبا アラビア語にようこそ！ 今では、世界中の様々な国からユーザーが自分のサイトへ訪れます。 アラビア語を話す人は、420,000,000人です。アラビア語は（ヘブライ語とペルシャ語とモルディブ語も）右から左に記述する言語です。なので国際化 (internationalization/i18n) が難しいです。私は、アラビア語のクラスを受講する前は、普通のウェブのプログラマーでした。クラスの受講後、私は、色々なFOSSのプログラムにアラビア語の国際化の為プルリクを送りました。これは私が初めての日本語で書いたプログラミングの記事です。 アラビア文字 日本語と同じなテクスト/ストリングと、CSSの writing-modeと縦書きか横書きか書くできます。 アラビア語で右から書くのに、ストリングの一番目のchar型が単語の１番目の文字です。 مرحبا「マルハバ（こんにちは）」の中を見
Webpack を使わずに import 文を使う - Qiita
要約 2018 年現在のフロントエンド開発 (HTML, CSS, JavaScript) のスタンダードは Webpack によるモジュール分割。 しかし、Webpack にはそれなりの環境準備が必要であり、慣れていないと時間がかかるデメリットがある。 ES6 に対応した最新のブラウザーを使えば、Webpack なしでもモジュール分割された JavaScript を使うことができるので、簡単な検証にはそちらが向いている。 本文 Webpack によるモジュール分割 Webpack は JavaScript の バンドル を担う。 たとえば、次のコードを分割することができる： 分割前
Web Components 入門として Hello World タグを作る - Qiita
Web Components とは何か 簡単に言ってしまえば、オリジナルタグを作れるHTMLの仕様です。 このあたりの記事が詳しいです。 https://html5experts.jp/shumpei-shiraishi/24239/ 良い感じに小さくまとまっている実装が無かったので自作してみました。 Hello, Worldタグを作る こんな感じになります。 https://iwtn.github.io/hello_world_tag/ 後述しますが、ブラウザのサポート状況は微妙でChromeでしか表示できないと思います。 ソースコードはこちら https://github.com/iwtn/hello_world_tag Developer Tools で見ると、オリジナルのタグで出来ていることがわかりやすいと思います。 3つの基本要素（本当は4つ）と基本的な作り方 template
タイムゾーン呪いの書 - Qiita
コメント欄で「Software Design 誌 (2018/12) に寄稿した内容や修正などをこちらの記事にも適用したい」と言ったあと、やるやる詐欺でずっと放置していましたが、三年近く経ってようやく 2021年 7月に大幅に改訂し、同時に Zenn に引っ越すことにしました。 タイムゾーン呪いの書 (知識編) タイムゾーン呪いの書 (実装編) タイムゾーン呪いの書 (Java 編) なにやら長くなりすぎたので三部構成になっています。 この Qiita 版は、しばらく (最低一年は) 改訂前のまま残しておきます。 タイムゾーンの存在はほぼ全ての人が知っていると思います。ソフトウェア・エンジニアなら多くの方が、自分の得意な言語で、タイムゾーンが関わるなにかしらのコードを書いたことがあるでしょう。ですが、日本に住んで日本の仕事をしていると国内時差もなく1 夏時間もない2 日本標準時 (Japa
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
PostHTMLプラグインの作り方 - Qiita
export default tree => { tree.match({ tag: 'span' }, node => { node.tag = 'p'; return node; }); } treeはASTにPostHTMLのAPIをつけたものです。 ASTの構成はposthtml-parserに書いています。 APIがtree.match(expression, cb)とtree.walk(cb)の2つしかなく、walkのほうは全ノード見ることになるのであまり使わないと思います。 なので基本的にtree.match()で処理していくことになります。 posthtml-match-helperを使えばセレクタ指定っぽくもできます。 ちなみにAPIを使わずに直接操作しても問題ありません。 親要素や兄弟要素にアクセスしたくなったときなどは直接触るしかありません・・・。 上記を覚えておけば
超マイナーなCSSヲタク知識を晒してみる：CSS displayプロパティ値の自動変換 - Qiita
これはDMM.com #2 Advent Calendar 2017 - Qiita 23日目の記事です。 昨日は @norinity1103 さんの 「パターン・ランゲージ」のワークショップを社内で実施した件 でした。 カレンダーのURLはこちら DMM.com #1 Advent Calendar 2017 - Qiita DMM.com #2 Advent Calendar 2017 - Qiita 自己紹介 はじめまして。DMM.com LaboのÉcouffesと申します。最近のマイブームは吉岡里帆のどんぎつねクリアファイルを30分毎に眺める事です。そのマイブームも、あれです、自動化したいです。はい。 はじめに 今回 Advent Calendar 参加にあたり、当初は勢い余って『超マイナーなCSSヲタク知識を晒してみる』と宣言しました。 ヲタク知識たるもの、実務に即役立つ有益な
「GoogleAnalytics見てアクセス解析して」って言われた時にまずしていること - Qiita
はじめに 僕はウェブサイト制作会社でサイトの運用・アクセス解析担当をしている者です。 ウェブサイトの制作・リニューアルを受注した際にプロジェクトに参加し、クライアントの現状サイトのアクセス解析とレポート作成、リニューアル提案が主な仕事です。 クライアントと直接相対するディレクターから「GoogleAnalyticsの権限もらったからアクセス解析して」とオーダーを受け、アクセス解析を行うことになります。 そもそも、初めて見るサイトを構造から理解し、リニューアルに資する提案ができるようなインサイトを得るまで分析するのは本当に骨が折れます。 さらに（全くの主観ですが）、多くのクライアントはGoogleAnalyticsを「タグ貼っただけ」状態で放置しています。 そのため、計測したデータが整理されていない・そもそも正しく計測できていないということはよく起こります。 そして、そのような計測エラーがノ
Work in ProgressパターンによるPull Requestを利用した開発フロー - Qiita
はじめに ソースコード管理ツールとしてGitlabやGithubを導入することで、ソースコードのバージョン管理に加えて、コードの変更前にコードレビューを実施するPull Requestを簡単に行うことができる。コードレビューの観点や手法は様々であるが、レビューを実施する前に幾つかのコンテキストをレビュー担当者とレビュー依頼者が共有しておくことでスムーズなコードレビューが期待される。 本文章ではWork in Progressパターンと呼ばれる手法を利用した、コードレビュー前のコンテキストの共有方法を紹介する。 コンテキストの共有 コードレビューを実施する前に幾つかのコンテキストを共有することは、レビュー担当者の負担削減や、レビューの品質向上またレビュー依頼者のタスクの明確化に繋がる。共有するべきコンテキストの一例として以下の物が挙げられる。 実装する機能の詳細設計 実装する機能の仕様 実装
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ちなみにMicrosoft Edgeでは既に開発中34である． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が
正しく、効率が良いjQueryライブラリの書き方を学ぶ - Qiita
何となく書いてごまかしてきたJavaScriptやjQueryを、このところきちんと勉強しています。 オプション豊富なスライドショーを作成できる「Slick」のコードを参考に、メソッドなどを読み込んでみました。 https://github.com/kenwheeler/slick/ 他のスクリプトと衝突しない、オブジェクト指向のjQueryライブラリの書き方をだいたい理解したので、おさらいとしてまとめてみます。 2016-12-27 追記 コメント欄でいただいたアドバイスをもとにひな型を改良しました。 2016-12-02 追記 ここのコメント欄とSNSなどで以下のようなアドバイスをいただきましたm(__)m jQueryっぽく書くのなら38行目のcss()はwidth()、48行目のmatch()はhasClass()が良いのでは このコードの場合、9行目のsample.prototy
Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita
やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro
翻訳: WebAPI 設計のベストプラクティス - Qiita
これは Enchant の開発者である Vinay Sahni さんが書いた記事「Best Practices for Designing a Pragmatic RESTful API」1を、ご本人の許可を得て翻訳したものです。 RESTful な WebAPI を設計しようとすると、細かなところで長考したり議論したりすると思います。また、他の API に倣ってやってはみたものの、本当にそれでいいのか、どうしてそうしているのか分からない、何てことも少なくはないと思います。 この記事では、そのようなハマリどころについて Vinay さんなりの答えを提示し、簡潔かつ明快に解説してくれています。 今後 WebAPI を設計される方は、是非参考にしてみてください。 なお、誤訳がありましたら編集リクエストを頂けると幸いです。 まえがき アプリケーションの開発が進むにつれて、その WebAPI を公
ドキュメント作成時のあるあるアンチパターン20 - Qiita
業務でドキュメントを作成するケースは多々ある 例：仕様書・設計書・提案書・メール・障害票．．． ここでは各ドキュメント共通してありがちなアンチパターンをまとめてみました。 1. 表記がバイト表示・マイクロ秒表示 プログラムが出した数値をありのままに表示するパターン ファイルサイズが100MB, 1GBあろうと、バイト表示にする 桁数が多い数値に、桁区切り（,）を入れない 時間を何でもマイクロ秒・ミリ秒にする（1/100万秒までの精度が必要？体感で分かる？） 桁数が多い＝精度が高い＝良い文書、ではなく、見る人が必要とする精度に切り上げることが重要（売上で１円単位まで出すことが無いのと同様） 悪い例 No ファイル名 ファイルサイズ(byte) 処理時間(秒)
[JavaScript]HTML5 Form Validationの制御と注意事項
概要 HTML5から支援しているForm Validation、皆さんご存知ですよね。 非常に便利ですし、自分もHTML5に感謝しています。👏 サーバでは常にデータを検証するべきですが、追加のデータ検証をWebページ自身で行うことにも多くの利点があります。ユーザがフォームに入力している間にデータを検証することで、ユーザは何らかのミスをしたことを直ちに知ることができます。これはユーザが HTTP のレスポンスを待つ時間を減らし、またサーバで誤ったフォーム入力を扱うことがないようにします。 詳しい内容は以下の記事をご参考してください。 🔗[JavaScript]HTML5 Form Validation しかし、ドンー (OA O; ) ブラウザー別にメッセージが統一されず、実際の案件には、デメリットになっちゃったんです。 やっぱりHTML5 Form Validationに完全に依存され
![[JavaScript]HTML5 Form Validationの制御と注意事項](https://cdn-ak-scissors.b.st-hatena.com/image/square/baeceb09ad56f9e68c0289e5c7e70c331687d51c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1REhUTUw1JTIwRm9ybSUyMFZhbGlkYXRpb24lRTMlODElQUUlRTUlODglQjYlRTUlQkUlQTElRTMlODElQTglRTYlQjMlQTglRTYlODQlOEYlRTQlQkElOEIlRTklQTAlODUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTAyNjQxYzAxODM4NTVhOTQ1Mjg0NWQxMjBjOWM2MDhj%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbGVlZG9oeXVuZy1kYmEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIxYmE3M2ZkOGY5YmFlOWU5MzU5ZDBhNmFhNGI5Mzc1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc22fd01cb6b1217171bd24d5597cea7e)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
