2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
本日12月1日より、プログラマ有志による2013年の技術系Advent Calendarが各所ではじまる 本日12月1日より、プログラマ有志による2013年の各技術系Advent Calendar（アドベントカレンダー）が一日目を担当する人のblogではじまっている。 昨年以上に細分化されたため、昨年よりも今年のAdvent Calendarの数が多くなっているようだ。また、技術系以外の人に対してもこのような形式のAdvent Calendarの認知度が上がり、技術系以外のAdvent Calendarも昨年より増えている。 一般的なAdvent Calendarは、12月25日のクリスマスを楽しみに待つために、12月1日から24日までのカレンダーの日付の部分（扉だったりする）を開けるようになっており、1日ずつその日の日付の部分を開くと天使や動物の絵などが見えるという仕組み（もちろん、様々
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
The list went on and on. But what was it that made us identify one application or approach as "Web 1.0" and another as "Web 2.0"? (The question is particularly urgent because the Web 2.0 meme has become so widespread that companies are now pasting it on as a marketing buzzword, with no real understanding of just what it means. The question is particularly difficult because many of those buzzword-a
CoffeeScript と TypeScript をそれぞれ実務案件で使ってみた感想 | DevelopersIO
そんな訳で、CoffeeScript を触り始めて半年弱、TypeScript を触り始めて1ヶ月弱ほど経ちました。まだまだ日は浅いですが、いちおう両方とも実務案件にて使用したということで、ここらで双方に対する振り返りを簡単にしておくとします。 CoffeeScript について http://coffeescript.org/ 学習開始時期: 2014年1月頃 始めたきっかけ: Middleman や Ruby on Rails が標準サポートしているため、面倒な環境構築等をしなくて済んだから Ruby や Haml のようなテキスト量の少ない文法が好みだったから そんな訳でとっかかりとしての基礎学習期間はだいたい2〜３日くらいで、そこから既存のプロダクションコードを CoffeeScript に書き換えつつ実案件に取り入れていきました。 おおまかな特徴 要は JavaScript をよ
嫁を面接した企業が「あれ、これって……。」となる画像 はじめに 最近嫁が転職活動をしていたのですが、デザイナーは転職活動をする際に「ポートフォリオ」なるものが必要になるそうです。Webデザイナーである嫁は、このポートフォリオをWebサイトとして製作したいとのこと。 エンジニアリングを生業とする旦那として、ここは一肌脱がねばと思い、ポートフォリオサイトの構築をしました。 コントラクター（僕）のスペック iOSエンジニア Webアプリは過去にやっていた クライアント（嫁）のスペック デザイナー（仕事はWeb系） Ruby, JavaScriptはほぼ書けない HTML, CSSは書ける Git, GitHubは使える クライアント（嫁）の要望 パブリックに公開するのではなく、履歴書に添えたい URLを知っている人しかアクセスしない パスワード（BASIC認証）が欲しい デザインはいちから自分で
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
GitHubindexHello source: index.md View on github | Report issue Generated by middleman 3.1.6. Powered by Ruby 2.2.2.
もしもアナタが本物の魔法使いで、世界を自分の思うままに動かせるとしたら？ 毎日の家事はひとりでに片付き、請求書は放っておいても期日までに支払われ、家電たちも、アナタの思ったとおりに動くことでしょう ─── まあ、そこまでうまくはいきませんが、ちょっとした工夫で自動化できることって、実はたくさんあるのです。面倒なことを自分でする必要はありません。この記事では、今すぐ自動化できる10の事柄を紹介したいと思います。1. コンピューターを自動でメンテナンス わざわざ時間を割いて自分のマシンのメンテナンスをするのが大好き、なんていう人はまずいないでしょう。でもこれは、コンピューターを使うなら避けて通れない作業です。ライフハッカーでも、Windows編とMac編に分けて、必要なメンテナンスの手順を紹介してきました。そのうちかなりの部分は自動化できます。例えば、「CCleaner」のようなソフトは定期的
組織における、エンジニアの情報共有について。あるいは、レビューや設計について。 - # TODO: タイトル決定
これは、「ドリコム Advent Calendar 2015 その2」の、8日目の記事になる。 7日目は、middlemanとGitHub Pagesでブログを5分で開設！ほか盛りだくさん！ | いくら寝ても眠たい だった。 私は、ドリコムでエンジニアをしている matsusaki (@misoobu) という者だ。 ここでは、最近考えることの多い、組織におけるエンジニアの情報共有と、そのあるべき姿について書く。 また、それに関連して、コードレビューや設計についても触れる。 内容は、エンジニア視点のものになる。 情報共有は、組織にとって極めて重要だが、簡単なことではない。 本記事が、再考するきっかけとなれば、幸いである。 情報共有とは 情報共有を失敗するとどうなるのか 様々な情報共有 プロジェクトの状況や方針 作業内容とその状況 プログラムの設計やコード レビューの目的 レビューをするとき
Awesome Ruby : 素晴しい Ruby のライブラリ・ツール・フレームワーク・ソフトウェアの数々
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 元記事: Awesome Ruby Ruby 以外の言語, ソフトウェアについては を参照してください. Awesome List in Qiita Awesome Java Awesome JavaScript Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium 抽象化 ActiveInteraction - アプリケーション固有のビジネスロジックを管理します. Cells - Rails のコンポーネントを表示します. Decent Ex
Clojureに反対する大きな理由がJVMです。この役立たずは重いですからね。 これは、数週間前に ZA Tech のSlackで見た投稿です。休暇中にClojureの話題を何件か見たのですが、投稿者はJVMについても繰り返し言及していました。 私はこの投稿について Slack上で少しつぶやいていました が、もっと広く理解され議論されるように、本稿を書くことを決めました。 背景 以前は、私もJVMは重いと思っていました。2000年代の初めにJVMとPHPと比べていた頃の話です。当時は、.NETやColdFusionなど、別の重い製品が他にもありました。また、PerlやPythonという軽めの製品もありましたが、私はWindowsを使っていたのでActivePerlやActivePythonはやはり少し重めでした。 私が初めてJVMに対する“恐れ”を克服したのは、小規模な製品アプリを、JRu
Site Generators A List of Static Site Generators for Jamstack Sites
はじめに こんにちは、投稿推進部部長の勝間です。 突然ですが、皆さんは「組織における課題」について考えたこと、意識したことはあるでしょうか。 「組織における課題」なんて言葉を使うと、たとえば 事業戦略の方向性 人事評価制度 マネジメント層の育成 など、少し高いレイヤーの話が思いつくでしょうか。 ともすれば自分とは無関係な話のように思えるものかもしれません。 一方で、このようなものはどうでしょうか。 なんとなく、最近社内の空気変わった気がする なんとなく、隣の部署が何やってるかよくわからない このような、もやっとした感覚、は普段働いている中で感じたことがある人も少なくないかもしれません。 こういった「具体的な何か」というより「抽象的な違和感」を私たちが抱くことも組織における課題といってもいいかと思います。 このような組織における課題、違和感を認識したとき、私たちはどのように向かい合うべきでし
インストール gem をインストールし, 新たに Middleman を使ったサイトを作成するために CLI から middleman init my_project を実行します。 インストール方法を参照する サイトのカスタマイズ cd my_project してください。 Middleman は細かい設定なしに動作します。各ディレクトリの意味や サイトのカスタマイズの行い方を理解するためにドキュメントを読んでください。 カスタマイズ方法を参照する
黒い画面不要！デザイナ向け静的サイトジェネレーター「Phest」を公開しました | チャットワーククリエーターズブログ
こんにちは！ChatWork CTOの山本です。 ChatWork Advent Calendar3日目を担当します。 今回は、ChatWork社内でサイト制作に使っている、デザイナ向け静的サイトジェネレーター「Phest(フェスト)」というツールを公開します！ >>PhestのGitHubリポジトリはこちら 静的サイトジェネレーターって？静的サイトジェネレーターとは、テンプレートなどプログラム的な処理を実行し、 HTML/JavaScript/CSS/画像などだけで構成された静的なWebサイトとして書き出すツールのことです。 Webサイトをつくる上で共通のヘッダやフッタなどは、PHPやSSIなどのinclude構文を使ったり、 そもそもWordpressなどのBlogやCMSなどを使って構築するケースが多いと思います。 静的サイトジェネレーターは、そういったシステムが必要な部分をあらかじ
Vim覚え書き
GitHubindexHello source: index.md View on github | Report issue Generated by middleman 3.1.6. Powered by Ruby 2.2.2.
GitHubindexHello source: index.md View on github | Report issue Generated by middleman 3.1.6. Powered by Ruby 2.2.2.
LTを聞いているという感覚でご覧ください。 Qiita:Coat Qiita用のUIコンポーネント集 GitHub用のUIコンポーネント集をForkしてつくりはじめた レポジトリ: https://github.com/increments/qiita-coat デモサイト: http://increments.github.io/qiita-coat/ 今週月曜からやってる これはcommit数 Qiita:Coatが必要に感じた背景 全ての開発者に共通する願い 高速に開発したい 秩序がほしい (a.k.a. 最低限度の品質の保証) 開発体制の情勢に起因する理由 開発人数が徐々に増えつつある 社員11人+アルバイト3人 四半期に1人ぐらい増えてる 50人が51人になるとかならともかく、5人が6人とかになると大きく変わる その他の理由 サポートサイトや採用サイトなどQiita風のデザインを
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
変更履歴を記録する
Version 1.1.0 # Changelog All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] ### Added - v1.1 Brazilian Portuguese translation. - v1.1 German Translation - v1.1 Spanish translation. - v1.1 Italian
Installation Install the gem and run middleman init my_project to create a new Middleman site from the command line. See full install instructions Customize Your Site Check out the directory cd my_project. Middleman works right out of the box. Start reading the docs to find out what each directory is doing and how to customize your site. See advanced customizations Build and Deploy Running one com
Route 477
GitHubindexHello source: index.md View on github | Report issue Generated by middleman 3.1.6. Powered by Ruby 2.2.2.
こんにちは、AdventCalenderでノリで書いた記事が思わぬバズりを見せてしまい戸惑いを隠し切れない野村です。 当社では、今年の1月から週2回ペースでエンジニアブログを更新し続けています。 実はブログの開設自体は2014年8月と、今から1年半も前のできごとなのですが、色々なやんごとなき事情（「面倒くさい」「忙しい」「ネタがない」）によりあまり更新できていませんでした（2015年12月までで合計17記事、月1回ペース）。 更新する人も限られており、「これではいかん！」ということで、色々と体制を整えました。 その結果、現在は2016年1月だけで12記事の更新と、まずまずうまく行っていますので、やったことを公開したいと思います。 その1. 当番制にした はい、いきなり身もふたもないですが、これ重要です。 いくつかの目的のためにブログ更新強化を決めたとはいえ、「みんな他にやることあるし、強制
プログラムは、なるべく何もしなくても良い感じに動いてくれるのが理想的だけど、実際には何らかのかたちでユーザの設定を必要とすることがある。 Rails を使うときは config/application.rb でタイムゾーンを指定したり、DB へ接続するための情報を config/database.yml に指定する。 Bundler の挙動を変えたければ bundle config で設定を変更する。 Gem をインストールするときに毎回指定したいオプションがあれば、~/.gemrc に追記する。 もし自分の関わるプロダクトに「設定」のAPIが必要になったとき、何を判断の基準にして設計すればいいだろう。 ちょっと近所を見渡すだけでも、「設定」のやり方には色々ありそうだ。 設定という視点から、Rubyist にとって身近なプロダクトたちを資料として眺めてみた。 (NOTE: ちょっと悩みなが
ruby のアプリを動かす時にいちいち bundle exec って書くのがダルい。書きたくない。でもシステムに入ってたり違うバージョンの物が動いて変な動作をされても困る。 どうにかしてこのダルさを解消できないかと考えてみた。 まず rbenv を使ってるなら gem でインストールされるコマンドは必ずシェルのラッパとして生成され、そこから本物が起動する様になっている。例えば rails であれば以下の様なシェルになっている。 #!/usr/bin/env bash set -e [ -n "$RBENV_DEBUG" ] && set -x program="${0##*/}" if [ "$program" = "ruby" ]; then for arg; do case "$arg" in -e* | -- ) break ;; */* ) if [ -f "$arg" ]; th
Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる | DevelopersIO
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
プレビュー至上主義 - cmu12
「プレビュー至上主義」 プログラマが「テストファースト」を唱えるなら、デザイナが主張すべきは何? それが「プレビュー至上主義」。書くより先に見る、書きながら見る、しかもほぼ最終成果物に近い形で。 河村 奨 (かわむらつとむ) これはCreators MeetUpで話したスライドです。ライブプレビューしながら、jade + Gruntで作っています。興味あるかたはこちらのGitHubも合わせてどうぞ。 iPhoneや大きめの画面でも見られるよう調整しました。(2014/1/19) 好きなことはなしていいらしい。なにはなそう? レスポンシブ、インブラウザデザイン、脱Photoshopの波など、ここ数年、色々ありました。それをふまえて... ライブプレビュー 少なくとも、ライブリロード ロジックレステンプレート (たぶん時間ないので、よかったら後で〜) GUIツール不在のWEBデザイン業界 今年
Panoramic Photoviewer in Javascript - Gaya Design
PRESS RELEASE You might of seen my work around the web. When My Direct Blinds contacted me back in late 2015 with an irresistible offer to help build out their digital assets and join the company with an ownership stake, it was an offer I could not refuse. Web design, interior design and window furnishings shared a common ground and something I could get behind. Thus, the decision was made to end
Oracle Blogs
The definitive listing of Static Site Generators — all 460 of them!Stars Name License Language Created Updated
As we're writing the Fullstack React book, we get a lot of questions about how to build large applications with React and how to integrate external APIs. tl;dr - This post will guide you through building a full React app, even with little to no experience in the framework. We're going build a Yelp clone in React You can get the completed code here Try the demo here Download the first chapter of ou
Rubyistのためのズルいデザインハンズオン in RubyHiroba P4D ワークショップ
ズルいデザインを使った Rails 用 gem "zurui-sass-rails" の使って、実際にデザインの作り方を体験できるハンズオンです。 体験用レポジトリ https://github.com/prog4designer/zurui-hands-on zurui-sass-rai…
gistfile1.md rbenvとruby-buildでRuby環境を最新に保つ 更新日:2014/11/19 rbenv, ruby-buildを更新 $ cd ~/.rbenv $ git pull origin master $ cd ~/.rbenv/plugins/ruby-build $ git pull origin master rbenvでインストール可能なリストを表示 $ rbenv install -l Available versions: ... 2.1.0-rc1 2.1.1 2.2.0-dev ... openssl, readlineをインストールしていなければ $ brew install openssl $ brew install readline Ruby2.1の最新バージョンをインストール ※-Wshorten-64-to-32と警告が出るので
更新するのが面倒！サイトの共通部分を簡単に作る様々な方法
サイトにはヘッダーやフッター、ナビゲーション部分など全ページに共通して入る要素があります。 この部分を修正する時はHTMLを全ページ修正するととても手間がかかって大変です。自分のサイトはだいたいCMSで管理しているのでテンプレートを直せばあっと言う間なのですが、それ以外の場合の共通部分を簡単に治す方法を改めて調べてみました。 がんばって直に書いてるものを置換する Dreamweaverのテンプレート機能を使う JavaScriptを使う PHPを使う SSIを使う Node.jsやRubyのツールを使う がんばって直に書いてるものを置換する とりあえず普通にコーディングして、修正などある場合はソフトの一斉置換を使ってなんとかする方法です。 数ページものならあまり気にならないがページが増えていく毎に大変になる。リンクや画像が相対パス指定だと階層が増えると更に大変になります。 <footer>
AWSのAPIをカジュアルに
#jawsug #cloudgirl の資料です
Middleman: Hand-crafted frontend development
Middleman はモダンな web 開発ですべてのショートカットやツールを使用する静的サイトジェネレータです。はじめに。 Watch Follow @middlemanapp
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptフロントエンド開発の昨今
本日12月1日より、プログラマ有志による2013年の技術系Advent Calendarが各所ではじまる | gihyo.jp
2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
What Is Web 2.0 | O'Reilly Media
嫁の転職を支える技術 - 文字っぽいの。
katatema.js - ✘╹◡╹✘
D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch
Route 477 - Ruby Twitter Gem簡易リファレンス
生活を自動化する10のヒント | ライフハッカー・ジャパン
JVMはそんなに重くない | POSTD
Static Site Generators - Top Open Source SSGs | Jamstack
より良い組織を作るために - クックパッド開発者ブログ
Middleman: 作業を効率化するフロントエンド開発ツール
Greenbear Laboratory - SVKを使ってみよう
UIコンポーネント集 Qiita:Coat - ✘╹◡╹✘
Autoprefixerによる、CSS3の管理 - kojika17
Middleman: Hand-crafted frontend development
毎月10回くらい更新されるエンジニアブログの作り方 - クラウドワークス エンジニアブログ
「設定」を設計するための資料 - Hibariya
Big Sky :: bundle exec がウザい
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
Code coverage with gocov and wercker
Static Site Generators
Fullstack React: React Tutorial: Cloning Yelp
rbenvとruby-buildでRuby環境を最新に保つ