SLOBSERVER - L'actualité de Second Life
めちゃくちゃ覚えやすいJavaScript学習サイト『JavaScript』 | 100SHIKI
いや、ドメインがね笑。 というわけでJavaScript.comはJavaScriptの学習サイトだ。 最近はやりのインタラクティブなスタイルでひとつずつ命令を覚えていくことができる。 内容はまぁ、いままでの学習サイトとさほど変わらないが、わかりやすすぎるドメインなのでいいのではなかろうか。 そろそろJSがんばろうかな、という方はチャレンジしてみてもいいですな。
cssCharts.js - スタイルシートでグラフを描画 MOONGIFT
HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。 そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。 cssCharts.jsの使い方 cssCharts.jsの描けるグラフです。まずは棒グラフ。 次はドーナッツグラフ。 ドーナッツグラフの2つの値版。 さらに中央を塗りつぶしたバージョン。 次に折れ線グラフ。 塗りつぶしをなくした版。 もっとシンプルに。 そしてポイントも取り除いた版。 最後にパイチャート。 オンマウスでタイトルを表示することもできます。 例えば棒グラフの場合は次のように指定します。 <!--
nurse-colors.jp - このウェブサイトは販売用です！ - nurse colors リソースおよび情報
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.
遊ぶだけで一流エンジニアになれる！？ゲーム形式のJavaScript学習ツール「Code Combat」の使い方 - mobile hack 楽しい生活情報を携帯しよう
biz.moneyforward.com
遊ぶだけで一流エンジニアになれる！？ゲーム形式のJavaScript学習ツール「Code Combat」の使い方
現代は、世の中とテクノロジーが密接なつながりのある時代。特に、スマートフォンが爆発的に普及した2010年以降から、Webサービスの充実を体感している人も多いはず。そして、非エンジニアでありながら趣味としてプログラミング行い、ゲームやWebサイトを作っている人も多いです。 しかし、プログラミングと聞くと「難しそう」といったイメージを持つ方も多いのではないでしょうか？エンジニアは専門職ということもあり、その入口は特に難しそうに感じるかもしれません。 そこで今回は、初めてプログラミングに挑戦したい方にオススメな、JavaScriptやPythonなどの学習サービス「Code Combat」をご紹介します。 「Code Combat」ってなに？ 「Code Combat」は、プログラミングを全く知らない人でも簡単に出来るゲーム形式のサービスなので「遊びながらJavaScriptなどを学ぶ」ことので
Bootstrapにフォームのバリデーションや通知パネルなど、便利な機能を簡単に追加できるスクリプト -Smoke
Bootstrapで作成したページに、外部ファイルと数行のコードを加えるだけで、さまざまな便利な機能を追加できるjQueryのプラグインを紹介します。 Bootstrapの対応バージョンは、3.xです。 Smoke Smoke -GitHub Smokeの使い方 Smokeのデモ Smokeの使い方 Smokeの使い方は、簡単です。 Bootstarpでつくったページに、外部スクリプト・スタイルシートを加えます。 Bootstapのコードをベースにした最小構成は、こんな感じです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
Top 50 Free JavaScript Plugins & Libraries — Speckyboy
Resources by Application Bootstrap Templates Figma Templates Flyer Templates Illustrator Templates InDesign Templates Lightroom Presets Logo Templates Logo Fonts Mockup Templates Photoshop Actions Photoshop Brushes Resume Templates Tailwind CSS UI Kits Web Templates Video & Motion Design Templates All Motion Design After Effects Apple Motion DaVinci Resolve Final Cut Pro Premiere Pro Presentation
webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」
webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」 webサイト上の仕様を自身ですべて開発するには時間やコストが必要であり、どうしても限界があることが多いと思います。今回はそんな時に参考にしたい、webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」を紹介したいと思います。 SassyFlags – Simple Sass Library for flags CSSやJavaScriptなどのツール、非常に多彩な種類が紹介されており、サイトを今よりもっと魅力的に演出することができます。気になったものをピックアップしましたので、下記よりご覧くだ
[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Vue」を作る - フルスタックエンジニアに
今回はTODO-ModuleのSPA（シングルページアプリケーション）クライアントをVue.jsを使って作っていきます。 Vue.jsとはViewModelに特化したフレームワークです。AngularJSやKnockoutJSに影響を受けており、似ているところも多々あります。 AngularJSはフルスタックですが Vue.jsはそうではないので、ViewModel以外の部分は自作するか、他のライブラリを使う必要がります。 今回はVue.js以外にルーティングライブラリであるPage.jsと バリデーターのvue-validatorを使います。 デモアプリとソースコードはこちらに公開しています。 TODO-Module-Vue ソースコード 動作環境 OS X Yosemite node v0.10.37 npm 2.7.3 今まで同様に、このクライアントアプリの動作確認にはAPIが必要な
AngularJS ui-routerを使って認証機能を実装してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさま、GWは満喫できたでしょうか？ こんにちは、フロントエンドエンジニアの稲葉です。 今回はAngularJSでui-routerを使って簡単に認証機能を実装したサンプルをご紹介したいと思います。 実際の動作はDEMOで確認することができます。（モックなのでEメールとパスワードはなにかしら文字が入力されていれば通ります） デモのソースコードはこちらに置いています。 ui-routerとは angular-ui/ui-router · GitHub： https://github.com/angular-ui/ui-router ui-routerはAngularJS用のルーティングモジュールです。 viewの入れ子をサポートするなど高機能で扱いやすいので、標準のngRouteよりui-routerを使っている人の方が多いのではないかという気がします。 ルーティングの準備 まずはログイン
AngularJS x TypeScript でちょっと本格的な TODO アプリを作ってみる – AngularJS + TypeScript ＃2 | PSYENCE:MEDIA
AngularJS x TypeScript でちょっと本格的な TODO アプリを作ってみる – AngularJS + TypeScript ＃2 wakamsha 2015.05.18 426 5735224110 2015年5月23日 controllerAs について追記しました。 はじめに とりあえず何かアプリっぽいものを作ってみようということで、定番の TODO アプリに挑戦してみようと思います。 ググればいくらでも情報は出てきますが、この記事では以下にあるようないかにもチュートリアルっぽいものからもう一歩踏み込んで、より実践的かつ規模の大きな案件にも応用出来るような作りを目指してみます。 AngularJS 1.2 日本語リファレンス | js STUDIO AngularJS • TodoMVC サンプルコードはこちらからどうぞ。 wakamsha/angular-dem
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
2日でできる! JavaScript トレーニング - mixi engineer blog
こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています！ 2015年度の JavaScript 研修は、Web アプリケーションの部品（モジュール）をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンテンツをレンガ状にどんどんスタックして配置していける「stackgrid.adem.js」:phpspot開発日誌
「JavaScriptなんて理解不能」を「ちょっとわかる」にする最低限の基本を教えてください（後編） | 誰もが受けたい！アクセス解析5分クリニック
メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」:phpspot開発日誌