HTML + CSSでリアルな炎（アニメーション付）を作る - QiitaCGなどのパーティクルで炎を作るやり方を応用して、HTMLとCSSだけでリアルな炎のアニメーションを作成しました。 完成品はこちら See the Pen Only HTML + CSS Fire by Nishihara (@Nishihara) on CodePen. 概要 パーティクルのかわりに大量のdiv要素を用意しています。1個1個はただの円形ですが、それらを上昇させつつ重ね合わせることで、炎のような演出を作っています。div要素大量に作るのが面倒だったのでPugを使っています。
我が名は神龍……どんなテストもひとつだけ自動化してやろう - Qiita
『我が名は神龍……どんなテストもひとつだけ自動化してやろう』 じゃ、じゃあ！このブラウザテストを自動化してください！ Chromeで https://kids.yahoo.co.jp/ にアクセスして 検索ワードに ねこ と入力して さがすをクリックして 検索結果にネコ - Wikipedia が含まれていることを確認して 検索結果に 買い方 を追加して さがすをクリックして 探しているのは「猫の飼い方」？と表示されることを確認して クリックすると猫の飼い方で再検索されて 検索ボックスを不倫で上書きして さがすをクリックして このページは表示できませんと出ていることを確認 『よかろう……たやすい願いだ』 まずはライブラリのインストールと初期設定をしてやろう…… # [ライブラリのインストール] # CodeceptJSとPuppeteerをインストールします。nodeとnpmが必要ですので
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への振る舞いの後付け」というスク
【JSON】都道府県市区郡一覧作ってみた - Qiita
都道府県と市区郡のみの一覧 東京都だけ【村】、【島】、【町】があるけど東京都以外の46道府県は市区郡のみのJSONデータです。書き方間違ってたら指摘して頂けると有難いです。 よくあるドロップダウンメニューで都道府県を選択すると次の市区町村ドロップダウンメニューが選択した都道府県内にある市区町村だけ出てくるアレみたいなのを作りたくてJSONデータとして作ってみました。 まだ実際のドロップダウンメニューを作ったわけではないですが、Ajaxで作って完成したらコードをQiitaに公開しようと思います。色々調べたけど解りやすいものが無かったので作ってしまえと思ってます。コピペで動くような物にしようと思ってます。 2017年10月11日追記 連動ドロップダウンメニュー完成、多分コピペで動く。 都道府県選択したら連動して市区郡が出てくるアレ作ってみた 2017年12月13日追記 チェックボックス版 こっ
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ヲタク知識を晒してみる』と宣言しました。 ヲタク知識たるもの、実務に即役立つ有益な
クリーンなJavaScriptコードを書くためのガイド - Qiita
Clean Code PHP / Clean Code JavaScript 以下はClean Code JavaScriptの日本語訳です。 clean-code-javascript Introduction Robert C. Martinの著書Clean Codeは、JavaScriptにも当てはまることばかりです。 これはスタイルガイドではありません。 JavaScriptで3R(Readable、Reusable、Refactorable)なコードを推進するためのガイドです。 ここに書いてあることの全てに従わねばならないわけではなく、普遍的に合意されているわけでもありません。 ただのガイドラインであり、それ以上のものではありません。 しかしこれらは、Clean Codeの著者らが長年の集合知の結果をまとめたものです。 ソフトウェアエンジニアリングの歴史は僅か50年程度のものでし
「GoogleAnalytics見てアクセス解析して」って言われた時にまずしていること - Qiita
はじめに 僕はウェブサイト制作会社でサイトの運用・アクセス解析担当をしている者です。 ウェブサイトの制作・リニューアルを受注した際にプロジェクトに参加し、クライアントの現状サイトのアクセス解析とレポート作成、リニューアル提案が主な仕事です。 クライアントと直接相対するディレクターから「GoogleAnalyticsの権限もらったからアクセス解析して」とオーダーを受け、アクセス解析を行うことになります。 そもそも、初めて見るサイトを構造から理解し、リニューアルに資する提案ができるようなインサイトを得るまで分析するのは本当に骨が折れます。 さらに（全くの主観ですが）、多くのクライアントはGoogleAnalyticsを「タグ貼っただけ」状態で放置しています。 そのため、計測したデータが整理されていない・そもそも正しく計測できていないということはよく起こります。 そして、そのような計測エラーがノ
高校生にWeb上でプログラミングを教え始めたエンジニアがこの8ヶ月間で得た気づき - Qiita
画像: N高等学校課外授業(N予備校)での生放送授業のブラウザ上での見た目、コメントが書ける 目次 はじめに 教えることになったきっかけ Web企業にエンジニアとして就職できるようになる、というミッション 既存のWeb教材に感じた問題意識 「各自進められるゲームブック形式の教材」と「徹底的にフォローする生放送授業」 コンセプトをもとに構成されたコースと内容 ゼロからプログラミングができるようになった人が生まれた日 永劫、プログラミングは一部の天才たちのためのものか？ プログラミング学習のモチベーションの課題と対応 まじめなオタクたちが社会をよくしようと頑張ること さいごに はじめに 自分はこの8ヶ月間、Web上で非対面のプログラミング教育、具体的にはHTML教材と生放送授業を中心としたプログラミング教育をN高等学校の生徒に行ってきました。 ここに書かれている内容は、これからプログラミング教
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の実装がなされると，一気にウェブアプリへの移行が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MindBEMding と近代 Component 設計の共通点 - Qiita
