理解して導入するWebフレームワーク ~解決すべき課題に着目する~ / Understanding and implementing web frameworks ~focusing on the problems to be solved~
![Generate React Component with TypeScript AST](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4b6ce06b2ea316c8c20110f2424f8b6093b7eb7/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe2e0a0fcbaf54ea591fecffaab886d79%2Fslide_0.jpg%3F19591879)
#React やってて、props のバケツリレーを何か嫌がる人たまにいるんだけど、自分は props のバケツリレーそのものをそんなに悪いと思ったことがない。 「バケツリレーがつらい」ように見えるコンポーネントの大半はそもそも props の設計がおかしい場合が多く、本当の問題はそっちにあると思っている。 たとえば、次のようなバケツリレーはつらいかもしれない。ここでいう Body はサイドバーとしてフォロワーの一覧を表示し、メインコンテンツとしてフィード一覧を表示するみたいなものを想像して欲しい。フォロワー一覧の中で使う props とフィード一覧で使う props を混ぜて1つの親に渡している状況だ。
著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。 OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。 また、SNS でシェアされる際もロゴがあればより良いでしょう。 はじめにソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。 今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。 慣れれば上の画像のようなロゴが 5
発表内容文字起こし https://kuroeveryday.blogspot.com/2019/07/mastering-box-shadow.html UIT meetup vol.7 集まれ!(タブン)実務では使わないフロントエンド芸発表会 https://uit.connpass.com/event/138084/ NES.css | NES-style CSS Framework https://github.com/nostalgic-css/NES.css CSS Collection(CSS芸) https://bcrikko.github.io/css-collection/ box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる https://kuroeveryday.blogspot.com/2018/10/draw-and-animate-p
出来上がったもの(2018年9月) ソースコード この記事は半起半眠みたいな状態で書いたので、文章が壊滅している可能性がありますがご了承ください。 dependencies yarn add -D parcel-bundler babel-core babel-preset-env css-mqpacker eslint eslint-config-precure husky lint-staged node-sass node-sass-package-importer parcel-bundler parcel-plugin-imagemin parcel-plugin-inlinesvg postcss postcss-short postcss-sorting pug stylelint stylelint-config-recommended-scss stylelint-scs
この記事は J2complexed Advent Calendar 2017 の15日目の記事です。 SVGを表示するのには、さまざまな書き方がありますね。 1. インライン 2. imgタグでsvg画像ファイル読み込み 3. cssでsvg画像ファイル読み込み 4. objectタグ 1.の派生、useタグを使ったインラインの書き方が便利なので、まとめる。 (もういろんなところでまとまってる今更話だけど、後半の話とかわかりやすい記事がぱっと見つけられなかったので、自分まとめ用に) 同じ画像いろんなところで使いたい。 svg画像をimgタグなどで読み込むと、これまでの普通の画像と同じく、使い回すには便利。 が、アニメーションさせたり色変えたり、svgの良いところがあんまり活かされない。 でも、インラインでコピペしまくるのは、コードが大変なことになるのでやりたくない。 そんなときのuse。
追記20180606 Chrome独自と書いていましたが、「Fetch Standard」に取り込まれていることを確認しました すでに、Chromeで「Cross-Origin Read Blocking (CORB) blocked cross-origin response」というエラーが出るようになっております。imgタグからクロスオリジンでhtmlファイルを取得したり、タグとレスポンスのcontent-typeが一致してない場合に出ます。 もともと、このChromeにCross-Origin Read Blocking (CORB)という機能を実装するという議論が、blink-devのメーリングリストに投稿されています。 「Cross-Origin Read Blocking (CORB)」 に詳しい説明があるので、CORB とはなんぞやと簡単に説明を読んで見る。 CORBはまだC
0ctf_h4x0rs.space.md 0CTF/TCTF 2018 Quals h4x0rs.space Writeup (Web 1000) 問題 I've made a blog platform let you write your secret. Nobody can know it since I enabled all of modern web security mechanism, is it cool, huh? Get `document. cookie` of the admin. h4x0rs.space 解法(ざっくり) 第一段階: ファイルアップロード + AppCache で XSS 第二段階: JSONP + Service Worker でXSS 解法(くわしく) 概観 ブログを書けるWebアプリケーション ブログでは、 [tag]text[/tag]
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs. From a mathematical perspective they are an iso-surface. They are rendered using equations such as f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2). Jamie Wong has a fantastic tutorial on rendering metaballs with canvas. We can replicate the metaball effect using CSS & SVG by applying both blur and contrast fi
こんにちは。Cacooの平山です。現在、僕たち Cacoo チームは脱Flash・ HTML5 化に向けて最終の追い込みの真っ最中です。そんな中ではありますが、前回の「ぶっちぎり」記事では、HTML5化に向けた描画技術としてSVGを選択したことをお伝えしました。今回は、HTML5版のもうひとつの改善ポイント「データ面での刷新」を紹介したいと思います。 Cacoo のデータ形式や構造の刷新・JSONフォーマットへの移行 HTML5版では、描画にSVGを採用するという変更だけではなく、抜本的なデータ形式や構造の刷新も行いました。これには以下3点の理由があります。 Flash版ではAMFというFlashに特化したデータフォーマットを採用している 図に含まれるデータ量に応じて、パフォーマンスが低下しやすい構造である サーバー内でデータを処理しにくい 1点目はFlashから脱却するにあたり対応必須な
こんにちは! Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 (*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください) どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
SVGスプライトって、なんか複雑なイメージがありませんか? 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう! 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
EngineeringDelivering Octicons with SVGGitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While the changes are mostly under-the-hood, you’ll immediately feel… GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While
CSS Niteの「Shift10:Webデザイン行く年来る年」のデザイントレンドセッションがたった今終わりました。 「坂本の目」の部分で「画像解像度再考」ということでお話させていただきましたが、若干時間が足りないはずなので、ブログで補足しておこうと思います。 海外サイトは解像度が高くてもきちんと見える 今回、デザイントレンドで多くのサイトを見ていて気づいたのは、多くの海外サイトがフルHD(1920x1080ピクセル)以上の解像度の端末で見てもきちんと見えるように作ってあり、それに対して国内のサイトの多くは解像度の高い端末で見ると、文字が小さく読めないというものでした(比べるのがそもそも無理があるのは承知しております)。 実寸で見ていただいた方がわかりやすすいのですが、この画像でも幅1920pxで見た場合と幅1366pxで見た場合では、スケール感も全然違って、高解像度では文字も相当小さく感
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く