Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.
CodeCombat - Coding games to learn Python and JavaScript
Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.
flowchart.js
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
Electronでデスクトップアプリを簡単構築
全国5000人のエンジニアをやめて寿司職人になろうと思っているみなさんこんばんは。 前回までスライド共有用のアプリケーションを趣味(リハビリ)で作っていたのですが、折角なのでデスクトップクライアントも作ってみました。 構築にはElectronを使ったのですが、結構簡単にできたので記録としてまとめておきます。 Electronって何？GitHubが開発するクロスプラットフォームで動作するアプリケーションを開発するためのフレームワーク。コードの記述はHTML5とNode.js。その範囲であれば既存のWeb開発技術が使いまわせる。例えばjQueryとかAngularなんかを使うのも可能Chromeブラウザのオープンソース版のChroniumのエンジンを内蔵例えばAtom・Visual Studio Code・Slackクライアントや、日本だとKobitoあたりがメジャー作り方あちこちに記事があが
JavaScript iterables and iterators - JS Rocks
A collaborative website about the latest JavaScript features and tools. ECMAScript 2015 (ES6) introduces two new distinct, yet closely related, concepts: iterables and iterators. Now you will truly learn how important these concepts are and how to make good use of them. Iterables Iterable objects are objects that implement the Iterable interface. That is, iterable objects expose a default iterati
Want to learn JavaScript ?
This is a walk-through of the steps I personally took in a single year, to begin learning JavaScript. My goal was to be able to get a job in a position where Javascript would be at the forefront of what I do on a daily basis. I should make it clear that my journey wasn’t as smooth as what I’m about to present to you, this should give you a much smoother ride. The inspiration for writing this artic
Visualizing Algorithms
The power of the unaided mind is highly overrated… The real powers come from devising external aids that enhance cognitive abilities. —Donald Norman Algorithms are a fascinating use case for visualization. To visualize an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behavior. This may be why algorithm visualizations are
jQuery だけで Single Page Application を作る方法 - Qiita
ぶっちゃけ誰も得しないけど、一度作った経験がある(ただしそれはJSONで動的データを読み込んだりはしないが)ので、一応できるんだぜということを示すために作った。 https://github.com/srd7/jquery-spa-sample 注意 with-webpack は、webpack を利用して jquery と自作コードをまとめあげている。ただしクライアントサイド的には依存ライブラリは jquery のみ。いやまぁ Jade を読み込んだりはしてますけども・・・。 なので「jQueryだけじゃねーじゃん」というツッコミを受けそうなのでonly-jqueryというのを作った。 ただしこれは with-webpack のコードをコピペして手動で一つのファイルにまとめあげた感じ。 その他の違いとして、with-webpack Jade -> HTML に変換した HTML を Ja
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
Jets.js
How does it work? The main idea is not to affect attributes of each tag in the list while filtering. Instead apply dynamic CSS rule in only one <style> tag and browser will decide which item of list to show or hide. Since it's just CSS - Jets.js may be applied to any tag, whether it's a table or UL, OL, DIV… Search term may be set using text field, select or even programmatically. In fact, plugin
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備 当スクリプトを外部ファイルとして記述し、初期化しておきます。 スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1
![[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d7b12bef628f068421e02247872e8a530b7b5ee/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015091000.png)
yohgaki's blog - 画像ファイルにJavaScriptを隠す
Last Updated on: 2014年12月5日前回のエントリでイメージファイルにスクリプトを埋め込んで攻撃する方法について記載しましたが、最近イメージファイルにスクリプトを埋め込む事例が話題になったためか ha.ckersにJavaScriptをイメージファイルに隠す方法が紹介されています。 http://ha.ckers.org/blog/20070623/hiding-js-in-valid-images/ <script src="http://cracked.example.com/cracked.gif">などとXSS攻撃を拡張する手段に利用可能です。サンプルとしてFlickerにJavaScriptを埋め込んだイメージファイルがアップされています。 このイメージファイルは上手く細工しているので画像としても表示され、JavaScriptも実行できます。 Flickerは画
URLのハッシュを監視する(＃, シャープ, フラグメント識別子) at softelメモ
対象がこれらのブラウザならば、これだけでハッシュの変化を監視できる。 JavaScript $(function(){ $(window).on('hashchange', function(){ alert(location.hash); }); }); Demo #test1 #test2 #test3 #test4 #test5 もしhashchangeイベントに対応していないブラウザでもハッシュの監視をしようと思ったら、タイマー監視してイベントを発火させる感じになるでしょうか。 if ("onhashchange" in window) { //この場合はhashchangeイベントをサポートしているので何もしなくてよい } else { //hashchangeイベントをサポートしていない場合だけ特別に、0.1秒ごとにハッシュを見る処理を追加する $(function(){ va
iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」:phpspot開発日誌
iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 2015年09月09日- Iframe-resizer by davidjbradshaw デモ iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」。 iframeってお手軽に使えるんですが、iframe内外のJSが連携するのは別ページであるので面倒であったり、更にクロスドメインが絡むのでややこしいんですよね。 iframe内のresizeイベントが取れるので、JSで動的にコンテンツのサイズが増えても、自動リサイズが出来たりするようです 関連エントリ iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload
React.js and Dynamic Children - Why the Keys are Important
React.js and Dynamic Children - Why the Keys are Important … and check why 5600+ Rails engineers read also this React.js and Dynamic Children - Why the Keys are Important Recently I’ve been building a pretty dynamic interface based on google analytics data for one of our customers. There was a bug that I couldn’t quite figure out because of my wrong understanding of how react works. In the end it
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
syncano.io - a really cool domain parked on Park.io
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
Mithril
どこでも React する
Elemental UI
FluxでCUIアプリ
