Boostra/386 Disc 1_
これから始めるJavaScriptの基礎と全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #06」【ゲスト寄稿】 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
これから始めるJavaScriptの基礎と全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #06」【ゲスト寄稿】 編集部注：本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy（テックアカデミー）による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから photo credit: nyuhuhuu via photopin cc 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第6回目のテーマは「JavaScriptの基礎」です。 前回は「これからプログラミングを学び始める方へ」というテーマでお送りしました。今回はより具体的にプログラミングを学んでいただくため
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
動くインフォグラフィックでサイトを楽しくするアイデア (1/3)
デザインとテクノロジーをもとにブランディングやWebサイト制作などを手がける、米国のエージェントのポートフォリオサイト。 気持ちよく回転する円グラフ シンプルなフラットデザインを採用した「Knormal」のポートフォリオサイト。このサイトでは、3枚の画像からなる円グラフを重ね合わせ、CSSアニメーションによって回転させている。インフォグラフィックとしてはごく単純なものだが、スムーズに気持ちよく動くアニメーションと独特の配色がサイトの個性を表していて、おもしろさがある。 今回は、Knormalのインフォグラフィックをヒントに、グラフの基本的な構造から、CSS3を使った動かし方、JavaScriptやSVGと組み合わせた発展的なグラフの作り方までを解説する。 STEP 1：グラフの構造を考える 最初に、円グラフの構造から考えてみよう。立体的に見える円グラフは、3つのレイヤーからなる。色や形状の
JavaScriptフレームワークはもうこりごり | POSTD
JavaScriptでフレームワークを書くのはもうやめましょう。 JavaScriptフレームワークというものは、あたかも避けられない死と税金のようなもの、絶対にぶちあたる避けられないものといわれています。こっそり聞いてみましょう、新しいウェブプロジェクトが始まるとき、一番初めに聞かれる質問は？十中八九は「どのJSフレームワーク使っているの？」でしょうね。昨今の業界においてJSフレームワークというものは本当に根深く浸透しているのです。でも、だから必須だというものではないのです。実際、もう使うべきではないのです。 どうしてこういった結論に至ったのか、振り返ってみましょう。 AngularにBackbone、Ember・・・ ここのところ長い間、 ウェブプラットフォーム とはHTML+CSS+JS、と簡潔に技術用語の羅列でまとめられてしまっていましたが、そこにはもっとぴったり表す用語“大混乱”
フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す - Qiita
概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での開発環境 mac mini (2011) 19インチのシングルモニタ GUI系ツール Sublime Text 2 プログラマ向けのテキストエディタ。 これがないと仕事にならない。 以下、必須なPackage。 Vintage vimっぽいキーバインドにする
bouncejs.com - bouncejs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
25. CSSアニメーションを使う 25 ‣ アニメーションにCSS Transitionを使う ‣ JavaScriptで直接やるよりはるかに速い ‣ setIntervalでアニメーションするのを置き換える 26. すぐわかるCSS Transition 26 .foobar { background-color: white; } .foobar:hover { -webkit-transition: background-color 1s linear; background-color: red; } .foobarクラスの要素 .foobarクラスの要素
WordPressで特定ページにだけコードを埋め込める便利プラグインの使い方をご紹介 -CSS & JavaScript Toolbox
特定のページだけヘッダに手をいれたい、テキストや画像を加えたい、CSSやJavaScriptやPHPを適用するなど、特定の複数ページにだけコードを埋め込めるWordPressのプラグインを紹介します。 個別にCSS/JavaScriptを埋め込むことができるプラグインは他にもありますが、HTMLやPHPにも対応、そしてそれらを一元管理できるのはこれだけだと思います。 CSS & JavaScript Toolbox 以前ご紹介したCSS&JavaScript Toolboxが新しいバージョンをリリースされたので、改めて紹介します。 新しいバージョンになり、Free版とPro版の機能の差はなくなりました。 ※Pro版はサポートやフォーラムへのアクセス権がつきます。 CSS & JavaScript Toolboxの特長 CSS & JavaScript Toolboxのインストール CSS
[JS]CSS3アニメーションを使ったページが簡単な記述で面白いように実装できるスクリプト -AniJS
スクロールするとヘッダがアニメーションで移動したり、コンテンツが次々とスライドして表示されたり、ページのロード時にふわっと表示したりなど、スクロール、ロード、クリック、ホバー、フォーカスなどのさまざまなイベントをトリガーにCSS3アニメーションを適用できるスクリプトを紹介します。 jQueryなどの他のスクリプトは不要です。 AniJS -CodePen こちらのデモでは、ロード時にぶらぶら揺れて表示し、ヘッダのクリック、フッタのクリックにもアニメーションが仕込まれています。 AniJSの使い方 Step 1: 外部ファイル 当スクリプトを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
CocProxy | CodeRepos::Share – Trac
CocProxy めんどくさいことしない置換プロキシー 使い方 http://svn.coderepos.org/share/lang/ruby/cocproxy/proxy.rb をダウンロード `files' というディレクトリをつくる 置換したいファイルをてきとうにつっこむ ruby proxy.rb ポートとか表示されるのでブラウザの設定を変える デフォルトだと、 #{File.basename(req.path_info)}", #{req.host}#{req.path_info}", #{req.host}/#{File.basename(req.path_info)}", .#{req.path_info}", がスキャンされ、ヒットしたら置換されます。 例えば、http://example.com/test/foo/bar.css にアクセスすると files/bar.c
超会議3の超チューニング祭の感想
さて、超チューニング祭が終わったので、感想を書こうと思う。すでに、参加者の中で、感想を書いている人もいる。 レポート - 超チューニング祭で努力賞(最速賞)をとるためにやったこと - Qiita ニコ動 超チューニング祭で最優秀賞もらいました 超チューニング祭に参加した - masarakki's blog JavaScript - 超チューニング祭に参加＆表彰した - Qiita kmizu/slide_cho_tuning また、いつの間に行ったのか、優勝者に取材したところもあるらしい。 『ニコ超3』の超チューニング祭で、“創世神”戀塚昭彦氏を上回ったカップルが見せたバランス感覚 - エンジニアtype さて、筆者の視点からみた超チューニング祭はどうだったか。 そもそも、私がスタッフとして配置されるブースは、超時空ニコニコ研究所であるはずだった。しかし、超会議にさかのぼること三週間前、
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
『Web Componentsで行うHTMLのコンポーネント化』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業本部の泉水（@1000ch）です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - Front End Developer Playground & Code Editor in the Browser
Workflower Apps
GitHub - kawasima/jagrid: Japanese-styled grid framework.
Tutorialzine
