Sassを使ったz-indexの管理 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
SassのビルドもWebpackでHot Module Replacementしたい - Qiita
Rails + モダンJS環境で新規アプリ作成の続きです。 上の記事ではRailsのSprocketsを切って、JSの環境をnpmによせました。となってくると、 Sassのビルドもnpmによせたい！ただ、gulpなどは使いたくない！ ということで、WebpackにSassのビルドも任せて、CSSでもHot Module Replacementをしようとやってみました。以下、CSSのソースは src/css/ に置くこととしています。 前回と、今回で作成したサンプルはこちらです。 https://github.com/ufotsuboi/rails-webpack-sample 注意 今回はCSSは全体に読み込む、JSは一部のみといった、JSとCSSを完全にわけて扱いたいような状況を想定しています。 SPAのようなJSもCSSも全部のページで読み込むといったような状況であれば、webpack
RailsアプリのAMP対応をSassで快適に - Qiita
AMPとは AMP(Accelerated Mobile Pages)はモバイルでのウェブページ表示を高速化する手法です。Googleが強く推奨しており、2016年10月よりGoogleのモバイル検索結果の表示にAMPが使用されるようになりました。 高速化のため、AMPページで用いられるHTMLには独自のプロパティや制限があります。cssに関しても、外部ファイルを読み込めない等の制限があります。 RailsでAMP対応する際の問題 AMPでは外部ファイルを読み込めないので、cssをheadタグ内のstyleタグに書かなければなりません。すなわち、ビュー内でcssをrenderする必要があります。しかし、アセットパイプラインにはそんな仕組みはありません。File.readでcssファイルを読み込んでビューに書き出すといった方法はすぐに考え付きますが、これではコンパイルが必要なSassは使えま
Riot.js 3.3 と Lumen 5.4 でつくる 初めてのSPA フロントエンド編 - Qiita
はじめに 最近 Riot が気になっていたので、 Lumen 5.4 と Riot 3.3 で簡単なブログを作ってみることにした。 今回はフロントエンド編。 DB との接続なしのモックアップを作っていく。 Material Design for Bootstrap も気になっていたのでついでに使ってみる。 ダミーテキストはWebtoolsのダミーテキストジェネレータで作成している。 これを使えば日本語・英語・数字混合のダミーテキストが作れる。 そのほかのエントリーはこちら。 Riot.js 3.3 と Lumen 5.4 でつくる 初めてのSPA バックエンド編 Riot.js 3.3 と Lumen 5.4 でつくる 初めてのSPA つなぎこみ編 作るもの いろいろ頑張って最終的にこんな感じのブログを作る。 記事一覧の表示（カテゴリーの絞り込みあり） 記事詳細の表示 記事の新規作成・更新
Riot.jsベースのお手軽開発環境「Yosegi」を公開しました - Qiita
※ 2017/07/21追記 Riot v3とWebpack v3に対応しました。 その他package.jsonも更新済みです。 はじめに Riot.jsがんばれ。 そんな思いから生まれたRiot.jsベースのお手軽開発環境「 Yosegi 」を公開しました。 https://github.com/hisayatanaka/yosegi 導入は基本 npm install 一発で完了。 ES6/Sass対応でWebpackによる自動コンパイル＆バンドル（minify）、ブラウザリロードまで面倒を見てくれるパッケージです。あくまでも基本フレームとなりますので、お好みで自由にカスタマイズしながらご利用ください。 Google Compute Engineでの導入手順もまとめましたので、慣れた方なら10分程度で環境が構築できると思います。コンポーネント指向なフレームワークは敷居が高そう…そんな
Svelte ナメてたけど結構スゴい - Qiita
Front-end Developer Handbook 2017 でも言及されていたりと少しずつ注目を集めている印象の Svelte ですが、「はいはいまた JS の流行り物 FW でしょ」とか「No Framework って Serverless みたいなバズワードになるんでしょ〜」などと正直ナメてたんですが、ナメっぱなしではいけない、とガイドを一通りさらったところ「なるほどこれは新しい勢力だな」と思い至ったので同じくナメてる人向けにスゴいところを紹介します。一応断っておきますが、さすがに商用環境に投入できるかというとまだ全然出来る気がしないので、今すぐあなたの xxx を置き換えるものではないです。 Svelte のルック&フィール Svelte は Riot.js のコンポーネントや Vue.js のコンポーネントのように html ファイルにテンプレートとロジックを書いていくのが
React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる - Qiita
概要 React+Redux+Express+MongoDBでCRUDアプリを作ります。 この記事の目的は、React/Reduxを触り始めた人が サーバーとの通信の方法（より一般的には非同期処理の方法） Reduxにおけるフォームの扱い ExpressによるAPI node.jsからのMongoDBの操作 Herokuへのデプロイ など、主にサーバー側のデータの操作に関わる基本的な事項を学ぶきっかけを作ることです。 この目的に集中するために、それ以外の点については一切気にしないことにします。 そのため、初心者以外の人（上記の内容を理解している人）がこの記事を読んでも得るものはないと思います。 この記事が書かれた背景には、少し前に自分自身がjavascriptによるフロントエンド開発からwebプログラミングを学び始めたころの経験があります。ReactやReduxの基本的な文法の理解を終えて
僕的なRiotプロジェクト構成のお話 - Qiita
Riot.js Advent Calendar 2016 の19日目です。 今まで書いた人と似通ってたりしますが、よろしくお願いします。 <- 前日 @clown0082 さん: karma + mocha + Riot.jsでのテスト はじめの第一歩 -> 翌日 @potato4d さん: Riot.jsを通じて気軽に翻訳とOSSへの貢献を体験してみよう はじめに 今回は、僕的なriotのプロジェクト構成についてディレクトリ構成を晒しながらざっくり説明します。 SPAしつつ、クローラー対策としてSSR(サーバーサイドレンダリング)してます。 ふんわり話す程度なのでリファレンスっていうより読み物と思っていっただけたらと。 今回説明すること ディレクトリ構成 それぞれのディレクトリが何してるかの解説 使ってるライブラリ(ちょっとだけ) 今回説明しないこと ソースコード解説 さっそく さっそく
Angular Universalを試して数か月経ったので学びを書いていく - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? (この内容は社内LTで使ったものを文章化して引き伸ばしたものです。) (ゆっくり書いていたらAngular 4 RCが出てしまいました。。。) Angular Universalを使って、隙間時間にちまちまと社内向けのサービスを開発しました。 その間に試していて、詰まったり引っかかったりしたことを連々と書いていきます。 はじめに そもそもAngular Universalとは何かに関してはQuramyさんのこちらのAngular2のServer Side Renderingに触れてみるにお任せしたいと思います。 タイトルの通りAngul
JavaScript初心者がriot.jsを使い始めるまで - Qiita
はじめに Ruby on Railsを通してフロントエンドも何となくわかった気になっていたJavaScript初心者がイマドキのフレームワークを使い始めるまでに辿ったステップをまとめました。 前提となる今のスキルレベル Ruby on Rilsは1年間やってきて基本的なことはわかるレベルだが、JavaScriptは全くの初心者。 フロントエンドはBootstrapでできる範囲で済ませ、Rails内で使うJavaScriptといえば<form>タグにremote='true'を設定してあれこれするだけでAjaxの処理が余裕でできる〜！で終わっていました。 この状態でJavaScriptを自分のスキルに入れていました。 もちろんコードはイチからは書けず、検索したものをコピペで済ます日々。 JSON,DOM...なんとなくはわかったつもりでいるけど具体的に何、そしてどう書くの？ 最新のフレームワ
Riot を React の文脈で理解する - Qiita
Riot は React のような UI ライブラリです。 ライブラリの特徴については 公式サイトの比較 や 以前に書いた Qiita を参照してもらえれば伝わるかと思います。 React が DOM の複雑な操作をあくまでも JavaScript で解決しようとしているライブラリに対して、Riot はそこを HTML+α で解決するため Web Components を先取りして書けるようにしたライブラリを指向しているという点で大きな思想の違いは存在しています。 実際、Riot の issue では構文を Web Components 準拠にする変更があがったり、Shadow DOM 実装が検討されていたりと、割りと HTML の世界に近いライブラリとなっています。 その上で、ここではコードベースで、React でこう書くとき Riot はどう書くの？ という視点で比較してみます。 Re
Riotチートシート - Qiita
エスケープ {} を記述したいがコードを評価されたくない場合。 \{ 1 + 2 \} で { 1 + 2 } ループ <app> <div each={elem, index in array}> {index}: {elem} </div> this.array = ['hoge', 'fuga', 'piyo', 'pompopo'] </app> array の要素の数だけ、 <div> が増える。 indexは省略可能。 ArrayじゃなくてObjectでもeachできるが、パフォーマンス的な問題で推奨されない。 また、Arrayの要素がObjectだと elem も省略できるが、わかりづらいので個人的に使わない。 表示/非表示
SlackのBot(hubot)を作ってみる - Qiita
はじめに 最近コレを読んで、無性にChatBotを作りたくなった。 Software Design 2016年1月号｜技術評論社 Slackでらくらく工数管理 « サーバーワークス エンジニアブログ ので、手始めにSlackのbot作りをしてみようと思う。 botの種類 おもむろにslack botでググってみたところ、hubotなるものが一般的らしい。 ほかにもWebHooksを使うものもあるようだが、次のステップにしようと思う。 hubotの追加 ここからIntegrationするAppを選べる。 App Directory | Slack hubotで検索するとAppが出てくるので、導入するチームを選ぶ。 Hubot | Slack APIトークンやらBotの名前やらいろいろ設定できる画面に飛ぶので、適当に名前をつけてアイコンを設定すると、とりあえずbotユーザが追加された。 bot
Riot.js+Webpackの構成 - Qiita
{ "name": "asset", "version": "1.0.0", "description": "", "main": "webpack.config.babel.js", "scripts": { "watch": "webpack --watch --progress" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-es2015-riot": "^1.1.0", "riotjs-loader": "^4.0.0", "webpack": "^1.14.0" }, "dependencies": { "riot":
チームをReady for Riotにするワークショップ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はRiot.js Advent Calendar 2016の24日目の記事です。 前置き ご注意 ある程度Riotが分かっている人が、JavaScript初心者のチームにRiot的な考え方に親しんでもらうワークショップについて書いた記事です。 Riotについての説明はほぼ皆無ですので、ご注意を。 Riotなら誰でも使いこなせると思った Riot.js、良いですよね。JavaScript初心者集団でも、現代的なコンポーネント指向でサクサク作れるようになんて、夢のようじゃないの！ ……そんな風に思って、Riotの基礎の勉強会を開催。
Riot.js で bootstrap-carousel タグを実装 - Qiita
概要 Riot.js というライブラリがあって最近話題です。 Riot.js http://riotjs.com/ja/ Qiita の記事 http://qiita.com/search?q=riot これを使って bootstrap の carousel を簡単に実装するためのカスタムタグを作ってみました。 確かにすごく簡単で、便利に使えそうです。 この記事は、次の記事とのマルチポストです： http://dora.bk.tsukuba.ac.jp/~takeuchi/?%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%2FRiot.js%2Fbootstrap-carousel%E3%82%BF%E3%82%B0%E3%82%92%E5%AE%9F%E8%A3%85 Bootstrap の carousel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassを使ったz-indexの管理 改 - Qiita
Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
