React Starter KitにみるWebフロントエンドに求められる機能と実装 - LINE ENGINEERING
初めまして、IT戦略3チームでUIUXデザインと社内プロジェクトのTech Leadを担当している高村といいます。この記事では、React Starter Kitという汎用的なWebプロジェクトテンプレートの実装を参考にしながら、改めて、なぜWebフロントエンドは複雑なのか、その解決方法は何かを振り返ってみたいと思います。この記事をきっかけとして、実際に現場でツール選定を行うフロントエンド開発者の方だけでなく、普段「フロントエンドには時間をかけたくない」と思っているサーバサイド開発者やWebディレクターの方たちに、「だからフロントエンドの課題は収束しにくいんだな」「フロントエンドといっても範囲は広いから、目的やユースケースを絞ってツールを選定しよう」と感じていただければ幸いです。 この記事はLINE Advent Calendar 2017の10日目の記事です。 Webフロントエンドの複雑
Elixir：Bootstrap編
Elixirを使って、Bootstrap3をセットアップします。 Bowerのインストール CSSやJavaScriptといったフロントエンド用のパッケージ管理ツールの Bower をインストールします。Bowerはnpmを使ってグローバル環境にインストールします。 npm install -g bower Bowerを初期化して、bower.jsonファイルを作成します。 質問には全てリターンキーを押して、デフォルト回答します。 bower init Bowerの詳細は公式サイトをご覧ください。 http://bower.io/ Bootstrapのインストール Bowerを使ってBootstrapをインストールします。 ここでは、Sass版のBootstrapをインストールします。 bower install bootstrap-sass-official --save bower_c
モダンぽいJavaScriptテスト環境の構築メモ - maru source
こんにちは丸山@h13i32maruです。 ES6でアプリコード、テストコードを書いてテストをするための環境を作ったので、そのメモです。 目標 ES6で書いたアプリコードとテストコードをnpm run testでテストする 最終的な環境 最終的にはこんな環境になった。リポジトリ ECMAScript6 Google Chrome Travis CI npm traceur-compiler mocha espower-cli karma karma-cli karma-mocha karma-chrome-launcher bower power-assert 今回はgrunt/gulpのようなビルドシステムは入れていない。npm runをタスク実行のフロントとすることでタスク自体はお手軽にshで書いた。shだとwindowsが厳しいけど、まあとりあえず自分の環境用だしいいかなと。 以降で
simple-sidebar
Press the icon in the top right corner of this page to run simple-sidebar. A jQuery plugin that allows to create a side nav as in modern mobile apps. It aims to simplicity so that everybody can use it no matter if expert programmers or not. For an even simpler and stable version of this plugin check the simpler-sidebar fork. Download Run one of these commands in your bash according to your needs.
細かすぎて伝わらない package.json 小ネタ三選 - t-wadaのブログ
こんにちは、和田 (@t_wada) です。本日は Node.js Advent Calendar の 7 日目として、 Node.js で開発する際の設定ファイル package.json にまつわる Tips について書きたいと思います。 はじめに 私はこれまで power-assert を筆頭に、いくつか npm モジュールをリリースしてきました。 Node.js を使った開発には、設定ファイル package.json の記述が必要です。特に npm モジュールを公開する場合には、設定すべき事、考えるべき事もいろいろ増えてきます。今回は、 npm モジュールを作ってきた過程で学んだ package.json に関する Tips の中で、あまり知られていないマイナー気味なものを挙げていきたいと思います。 Tips1: package.json の files フィールドでホワイトリス
bowerでつまづいた事のメモなど - uzullaがブログ
先日のudrkで知った、ライブラリパッケージマネージャであるbowerが気になるとかいていたら、 muddydixonさんが最新版で記事かいてくれた(http://muddydixon.hatenablog.com/entry/2013/04/28/030402)ので、試した。 bowerの0.9.2がでたから最新の情報とかをまとめました http://t.co/AJlUx1BHSp @uzulla— Muddy Dixon (@muddydixon) 2013年4月27日 大変有り難うございました。 まあ、大きな障害はありませんでしたが、CGIおじさんにはわりと意味がわからない所いくつかあったので追記しておきます。 初心者お役立ち情報(nodeを入れる所) 重要なこととして、最新版の0.11.2では手元ではbowerうごきませんでした。 とりあえずnvmで入れます(nodeenvってまだ
npm とフロントエンドのパッケージ管理の未来
JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じになる。 タスクランナー（Grunt/gulp）・モジュールシステム（browserify/webpack）・テストスイート（karma/testem）などの開発環境系の管理が npm の主なお仕事。インストールされたパッケージは node_modules 内に展開されて、CommonJS スタイルのモジュール管理から利用する。 本題につながる話としては、ブラウザで動くライブラリの一部は npm にも
初心者向けAngularJS - その１ - albatrosary's blog
この記事は「AngularJS初心者向けハンズオンのネタ」としてまとめています。最近ではいろいろ書籍もありますし、AngularJSリンク集でもまとめている通り資料は豊富にありますが改めて。内容としてはビルトインディレクティブとコントローラー/ファクトリーを触ってみる程度です。 Angularリンク集 - albatrosary's blog ※ この記事はAngular1.3をベースに書いています。Angular1.5ベースのものはこちらになります(追記:2016/2/18)。 GitHub - albatrosary/Angular1Study: Comprehensive Beginner’s Guide to Angular 準備 サーバのインストール Python 「 http://www.python.jp/ 」からダウンロードしインストールします コマンドラインで $ pyt
JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ
※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFacebook Flowの動向に注目 Backbone.js ModelとEventを使う/Viewは使わなくていい Lodash Underscore.jsをよくしたやつ Gulp Gruntより良いという意味で。browserifyまわりがうまく動かない問題があってnpm runのほうがいいという噂もあるがまあ良いに分類してもいい EventEmitter Custom EventはDOMにくっ付いてる感があるのでロジック志向の物にはEventEmitter使った
米Yahoo!がYUI新規開発中止を発表。その背景となったJavaScriptの現状解説
米Yahoo!のエンジニアリングチームは、同社がこれまでJavaScriptライブラリとして開発してきたYahoo User Interface library（YUI）の新規開発を中止すると発表しました。 YUIは、JavaScriptでインタラクティブなWebサイトを構築する技術「Ajax」への注目が高まっていた2009年に登場したライブラリです。さまざまなメニュー、カレンダーやカラーピッカー、タブ、リッチテキストエディタなどのコンポーネントが揃っているだけでなく、DOM操作やイベントハンドリング、テスト用ライブラリやJavaScript圧縮ツールなど、幅広くJavaScriptを強化するための機能を備えています。 しかしその後登場したjQueryなどのさまざまなライブラリやツールに人気を奪われ、ここ数年はYUIへの注目度も低下。コミュニティからのリクエストも少数になり、多くのモジュー
bower-buildでbowerで入れたファイルを一つにconcatする - Qiita
bower、普通に入れるだけだとbower_components/...に入るんだけど、index.htmlから相対パスで一個一個引いたりするのが面倒なので、だいたいconcatして一つにまとめたりする。 で、gulpやgruntのタスクを書くんだけど、毎回やるの面倒になったので、それだけのタスクをやるライブラリをさっくり作った。 mizchi/bower-build いれる。 $ bower init # なんか色々訊かれる $ bower install --save jquery codemirror # ライブラリいれる $ bower-build -o public --debug write: /Users/mizchi/proj/bower-build/public/vendor.js # include codemirror.js and jquery.js write:
ng-intro | AngularJS directives for intro.js
angular-intro.js An angularjs directive that wraps intro.js functionality. See the project page for an overview. NPMYou can install this package through NPM by using the following command : npm install angular-intro.js --save WebpackYou can use this package in your webpack project, first by including intro.js and its css file. Next you need to require this package. import ngIntro from 'angular-int
Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築 - Qiita
これから AngularJS でアプリケーションを作るぜ！という方向けの、環境構築メモです。 モダンな開発をするために総合開発環境として Yeoman を利用 おすすめとされる AngularJS アプリケーション構成も適用 最低限のUIライブラリはいるだろうということで UI Bootstrap(AngularJS用のBootstrap)を導入 IDEとして WebStorm を利用 ただこれは私がたまたま使ってるだけなので、使わなくてもOK ちなみに私が試した環境は、つぎのとおりです。 Mac OS X 10.9.1 node v0.10.25 npm 1.3.24 YeomanとAngularJS雛形ジェネレータをインストール もしお使いの環境にまだ導入されてなければ npm でインストールします。
あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方
連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツールを統合したワークフローを提供する「Yeoman」 Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。 訳すと、「今風のWebアプリのための土台／基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだ
Mac OSX開発環境構築メモ、便利なツールとか | Ore no homepage
サッカー観戦が好きなハズなんだけど、今回のワールドカップまだ一試合も見てない。試合の状況はTwitterや外の叫び声で把握してるんだけど…。 えーと、以前、似たような記事(https://hiroakis.com/blog/2012/07/31/mac-osxiterm2tmuxzsh/)を書いてから2年も経ってしまった。ちょいちょい使うツールが増えたりもしたのでそのまとめ。基本的には自分用メモだけど、紹介したものが人様の役に立てば幸い。同業者の人達の環境とかどうなってるのか気になるね。 0. シノギ 自己紹介ってわけじゃないけど、普段こんな仕事↓やってる奴の環境ですよ、っと。 Web屋でSNSやソーシャルゲームの運用。 会社の職種的にはインフラエンジニアというくくり。 しかしながらデータセンター行くのは月一くらい。 普段はサーバの管理とか運用改善とかをしてる。 ターミナルカタカタしてたり
[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO
Material design with Polymer Google I/O 2014 で発表になった「Material Design」ですが、Web の場合は Polymer で提供されています。Polymer は Web Components を使ったフロントエンドフレームワークです。昨年の Google I/O で発表されました。 ということで、リファレンスを参考に Polymer を使って Material Design の Web ページ制作を試してみたいと思います。 デモで Material Design の世界を体験してみよう その前に、Material Design でどのような Web ページが作れるのか、デモの Web ページが公開されているので、ちょっと触ってみましょう。以下の 3 つのデモが公開されています。 Topeka (クイズアプリ) Paper Eleme
![[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/72ef0cd6f2febb767fc5805699941053937cbb1b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fpolymer.png)
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)
■ [ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 npm と bower と grunt を使って javascripts のテストに必要なライブラリをインストールするようにした by hsbt · Pull Request #414 · tdiary/tdiary-core で導入した npm, grunt, bower の組み合わせで javascript/css をかなり良い感じに organize するという仕組みを production の rails に投入した。 準備としてはまず nodejs を使えるようにするところから開始。これは cli さえ満足に動けばいいので xbuild を使ってビルドしたものを /opt/node-x.y.z とか /usr/local/node-x.y.z に置いて /usr/loca
![[ruby][rails] rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cab6183abe73ade0ce0a24c302ac36ee5c17b43/height=288;version=1;width=512/https%3A%2F%2Fwww.hsbt.org%2Fdiary%2Ftheme%2Fogimage.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
