[Rails 5.1]webpackerを使用して、Spectre.cssを適用する方法 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
![[Rails 5.1]webpackerを使用して、Spectre.cssを適用する方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c9d4fcef4acfa33df89fc8fec6f806cd9a638e3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNjM5MiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTU1MjE5OTI2MD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00YjA3MTVjMGVjYTZhZWE4Mjc4MmM5MjEzYWI4ZWZkYw%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D3a7effd277183bfcf62d7fd752b89ece%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmFpbHMlMjA1LjElNUR3ZWJwYWNrZXIlRTMlODIlOTIlRTQlQkQlQkYlRTclOTQlQTglRTMlODElOTclRTMlODElQTYlRTMlODAlODFTcGVjdHJlLmNzcyVFMyU4MiU5MiVFOSU4MSVBOSVFNyU5NCVBOCVFMyU4MSU5OSVFMyU4MiU4QiVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTAxZTZkZDlkNDM0NGMwNTUxOTZhYTQzMDY0MGMzYTg4%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzaGlyb2Vtb25zJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NDdlZjIzMTVlNzYyNmU4Y2M5M2QxZGNiNzVmMGFjYjk%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVG9yZXRhLCBJbmMu%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D6bfc01e2f728b725655b77d02cfafb9b)
How React Native works - DiscoverSDK Blog
The most basic is the cross-platform <View>, a simple and flexible UI element that can be thought of as analogous to the <div>. On iOS, for instance, the <View> component renders to a UIView, while on Android it renders to a View. Other components from the table act as platform-specific components. Like for a Datepicker, <DatePickerIOS date={this.state.date} mode="date" timeZoneOffsetInMinutes={th
フロント書くなら確実に知っておくべきCodePenについてのメモ - Qiita
概要 HTML/CSS/JavaScriptが書きたい？じゃあCodePenでしょ！！ ということで基本の使い方とすごいところを語ります。 What is CodePen? HTML/CSS/JSのコードを、ブラウザ上で編集しながら実行結果が確認できる最強ツールです。 コードを保存して公開することもできるので、ポートフォリオとしてコードを公開している人や、誰かの書いた素晴らしいコードを参考にしてコーディングを行うことができます。 How to Start CodePen! 1. Sign up ボタンを押します！ 【URL】 https://codepen.io/ 2.Free プランをクリックします！ 3.入力＆Submit！ 4.Save&Continueをクリック！ 5.アカウント作成完了！ 他にも色々 フォークする 参考になりそうなコードをフォーク(コピー)して自分のアカウントで編
Webをほとんど分からない奴がRiot.jsを触ってみる(多分①) - Qiita
⚠はじめに 文章を書くのが下手なので見苦しくて読みにくく理解しづらいかもしれませんがご了承ください この文章書いてるアホ、まっじで初心者なので、何か間違っていたらコメント等でやさ～～～～しく教えてくれると助かります イントロ タイトルを三回読みましたでしょうか そうです、HTML CSS js 全て超基礎レベルでしか覚えてない野郎がRiotに挑戦してみます しかも続きます たぶん あ Webエンジニアとかそういうのは目指してません こういうの使えたらかっこいいみたいな自己満です 私みたいな同じような初心者の方で挑戦してみたいとか、参考になればいいかなぁなんて思ってこの記事を書いています Q, てかなんで挑戦しようと思ったの？ 知り合いがRiotを使用していたのを見て私もやりたいな～～～～(唐突)と、思ったからです インターン探してたらWeb系多くてちょっと覚えておこうとか思ったわけではない
【React】Goodpatch×TeamSpirit Meetupに参加してきた - ゆとり日記
teamspirit.connpass.com ↑のイベントに参加してきました。 （通常枠で申し込んだつもりでいたが、直前になって「ブログ執筆枠」で申し込んでいた事に気づくという阿呆ぶりを発揮。） フロントエンドエンジニア3年目。 Redux + React + Node.jsのSPA開発を1年くらいやってる。 Reactに若干飽きてる。 こんな人間から見た感想を書いていきます。 各LTの感想 ※発表者の方の資料は、展開され次第追記していきます。 LT1 Reactのパフォーマンスを改善する必要が無かった話 チームスピリットさんが開発してるプロダクトがReactで開発されていて、それのパフォーマンス改善の話を聞いた。 結論はLTのタイトルにもある通りでそこまでパフォーマンスを改善する必要が無かった、とのこと。普段から設計やコードレビューに気をつけていた甲斐もあって、現状のパフォーマンスは悪
Efficient React Components: A Guide to Optimizing React Performance | Toptal®
Efficient React Components: A Guide to Optimizing React Performance Why does a React web app run slow? The answer often lies in when and how frequently your components re-render, and whether those re-renders were even necessary. React doesn’t promise magical performance gains, but it provides just the right tools and functionalities to make it easy. In this article, Toptal Freelance Software Engin
Bootstrap3をRails4に導入 - Qiita
1年くらい前に書いた記事ですが、お蔵入りさせるのも何なので公開します。実は先程新しいプロジェクトでもやって違うところがないか確認もしたので2017年現在でも有効じゃないかと思います。 Bootstrap導入するのに結構ハマりました。実際両方の方法を試しました。 最新はBootstrap4だけどα版のため現時点（2016年7月時点）では3が無難。 あと、世にある導入方法の殆どがscaffoldでまず何らかの雛形作らせるんだけど、当然読み飛ばしています。 Gemを使う 以下はBootswatchをインストールする例だが、これだけだと動かない可能性あり、並行して手動のものもやってみました。 イイ感じのテンプレートができるとか言う有名なサンプルサイトはこちら。 http://bootswatch.com/ Rubyといえばお馴染みのこちらを参照。 http://dev.classmethod.jp
どっかからデータ取得してきて表示するだけのやつ作りました - Qiita
概要 ある日 どっかからデータ取得してきて、表示するだけのやつ作る — こばしゅん (@ksyunnnn) 2017年5月20日 なので作りました！ドンッ https://codepen.io/ksyunnnn/pen/oWQjOM 成果物はたいしたことしてませんが、結果的に書いたコードや学んだ技術の共有というよりはそこに至った工程を残しておきたいと思います。 利用するAPIの選択 New York Timesに決めた The New York Times API - Live news headlines from The New York Times: https://t.co/gmey7YxXTC — こばしゅん (@ksyunnnn) 2017年5月20日 とりあえず、画像とタイトルとリンクが取得できるものを選びました。 画面設計＆どこまで作るか判断 Googleスプレッドシートで
Web Fundamentals — Google Developers
Google は、すべてのユーザーがあらゆるブラウザで利用できる、美しく、アクセスしやすく、高速で安全なウェブサイトを構築できるようサポートしています。このサイトには、Chrome チームのメンバーや、ウェブ開発のトピック（ユーザー補助、パフォーマンス、デザインなど）を専門とする外部のエキスパートが執筆した、その取り組みをサポートするコンテンツが掲載されています。 Web Platform Baseline では、ウェブ プラットフォームの機能に対するブラウザのサポートに関する情報を明確にし、現在プロジェクトで使用できるウェブ プラットフォームの機能について明確な情報を提供します。web.dev の記事で、使用されている機能がすべてベースラインの一部である場合、ブラウザの互換性レベルは信頼できます。
Sublime Textをもっと快適で便利にする、フロントエンドのWeb制作に役立つプラグインのまとめ
Sublime Textは快適で非常に使いやすいエディタですが、そのままの状態では最近の他のエディタに機能で劣っている面があります。 エディタとしての機能を強化し、HTML, CSS, JavaScriptのコーディング作業を快適にする便利なプラグインを紹介します。 Sublime Text 3 Plugins for Frontend Web Development キャプチャは、Sublime Text 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づき翻訳しています。 Sublime Textの管理系プラグイン Sublime Textの一般系プラグイン Sublime TextのJavaScript関連のプラグイン Sublime TextのHTMLとCSS関連のプラグイン Sublime Textのリンター関連のプラグイン Sublim
Getting Started with AnyChart — 10 Practical Examples — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. If your website is data-intensive, then you will need to make that data easy to visualize, normally by means of a JavaScript charting library. However such libraries are a dime a dozen and they all have slightl
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
It’s Time To Start Using CSS Custom Properties — Smashing Magazine
In this article, Serg Hospodarets will teach you more about CSS custom properties, including their syntax, their advantages, good usage examples and how to interact with them from JavaScript. You will learn how to detect whether they are supported, how they are different from CSS preprocessor variables, and how to start using native CSS variables until they are supported across browsers. This is t
ニューヨークで開催された AMP Conf 2017 に参加してきました - ぐるなびをちょっと良くするエンジニアブログ
みなさまいかがお過ごしでしょうか。フロントエンド開発グループの佐藤雅ｙです。 2017年3月7日と8日にニューヨークで開催された AMP のカンファレンス「AMP Conf 2017」に招待していただき、参加してきました。 今回は1日目のレポートになります。 AMPとは カンファレンスの内容に触れる前に、AMP をご存じない方のために、ちらりと AMP について触れておきます。 まず、AMP = Accelerated Mobile Pages の頭文字 です。 実装方法等はオフィシャルサイトが最新で基本となりますが、オフィシャルブログや、Google他サービスブログ等で、事前に仕様やマイルストーンが公開されることも多いです。 AMP の昨今 もともとの AMP の成り立ちは、モバイルニュースサイトの表示速度の遅さに業を煮やした有志たちが、モバイルサイトのパフォーマンスを改善させるために考
webpack2はじめました - Qiita
仕事のプロジェクトでお世話になっているRailsが5.1からwebpackがサポートされるということで、そろそろモダンなフロントエンドにも力入れていきたい所存であるからして、手始めにwebpackとはなんぞやというところから始めようと思った次第です。 webpackとは webpack事始め v1とv2で全然違うのが罠 以上のことを自分なりにまとめてみました。 自分用の備忘録なので、分かりづらかったり、よく理解できてなかったりするかもしれませんが…コメントなどで指摘していただけるとありがたいです。 webpackとは webpackとはなんぞや。 早い話、Ruby大先生で言うところのBundlerみたいなもの……って例えるとわかりやすいでしょうか。 ちょっと違うような気もします。Node.jsのnpm先輩もいますし…。 モジュールバンドラー っていうのが正解らしいのですが、じゃあこの_モジ
Houdini、それはCSSの進化を促すプロジェクト - The future starts today
この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは
Ryan Tsao
Virtual CSS with StyletronDecember 06, 2016Introducing StyletronStyletron is a CSS-in-JS library built from the ground up for high-performance, designed to work as fast as possible while also producing the smallest possible CSS output. Most CSS-in-JS libraries convert JS objects containing style declarations into corresponding CSS classes with generated, hashed class names1. In general, this proce
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Weekly News for Web Designers
Web制作の20年史――デザイナーとエンジニアの協業、効率化の課題にツールはどう応えるべきなのか
DeNA Engineering - DeNAエンジニアのポータルサイト
