はてなブックマーク

<input type="password" id="userPasswd" required pattern="^(?=.*[0-9])(?=.*[A-Za-z])(?=.*[!\x22\#$%&@'()*+,-./_])[\w!\x22\#$%&@'()*+,-./]{8,}$" data-required="required" placeholder="Password" name="userPasswd">

『TypeScript実践プログラミング』より自分用メモ。 ポイント Errorインターフェースの実装 効果：nameとmessageプロパティがカスタムクラスに確実に定義される toStringのオーバーライドの推奨 理由：このメソッドをオーバーラードしないと、デフォルト実装であるObject#toString()が呼ばれ、[object Object]が出力される ネイティブのErrorは聖域として扱い、決してスローしないこと。 理由：アプリケーションの例外とErrorとの明確な分離 以下の例では ApplicationError をアプリケーションのルートのカスタム例外クラスとしている 必要に応じてInputErrorなどの子カスタム例外クラスをサポート class ApplicationError implements Error { public name = 'Applicat

今はやりのMEANスタックについてまとめてみる(Mongo, Express, Angular, Nodeで作るWEBアプリケーション) 海外でじわじわ人気を獲得し始めている うわさの「MEANスタック」とはなにか？ まとめてみました。 MEANとは 合わせて読みたい M = MongoDB 従来のRDBMSとは異なる、NoSQLというデータベースシステムによる ドキュメント指向型データベース。 MongoDBについてまとめてみた E = Express Node.jsの軽量Webアプリケーションフレームワーク Expressについてまとめてみた Expressを学ぶチュートリアル形式の記事・コンテンツまとめ A = Angular オープンソース(MITライセンス)のJavaScript用 MVCフレームワーク。 Angularについてまとめてみた Angular JSの良質チュートリア

随時更新中 日本語によるAngularのTips別チュートリアル AngularJS's tutorial ・とても丁寧に作りこまれていて、わかりやすい 公式チュートリアル AngularJS ・基本困ったらここ Yeomanのチュートリアル Step 10 ・かなり質が高い。 ・自分がチュートリ作る際にも参考になる。 angular-local-storage GitHub Demo ・上記のチュートリで使われるモジュール Further Reading THE PAST, PRESENT & FUTURE OF LOCAL STORAGE FOR WEB APPLICATIONS ・これは英語だけどかなりおすすめ ・Local Storageの背景とかも理解できた MongoDBも接続したい YEOMANを使ってMEAN（MongoDB + Express.js + Angular.j

モジュールパターンは、 名前空間 プライベートメンバとパブリックメンバの使い分け 即時関数(3-4で説明) などを組み合わせて作る、コード作成のためのパターンです。モジュールパターンを適用することによって、機能別にコードを分割することができます。さらに、各機能ごとにコードをまとめることによって、機能の拡張・削除・リファクタリングが容易になります。また、導入も簡単なので、結構広く使われていると思います。 以下の順で説明していきます。 モジュールパターン(1)：名前空間の準備 モジュールパターン(2)：モジュールの定義 モジュールパターン(3)：モジュールを使う モジュールパターン(4)：モジュールの公開 モジュールパターン(1)：名前空間の準備 まずは名前空間を準備します。

INDEX はじめに ~ InstagramのフィルタをJSで作ってみる Canvasで画像ピクセルを抽出 セピア化やミラー反転などで練習してみる若きあの頃 フィルター効果を実現する方法がわからない トーンカーブをいじればいけんじゃん？ ラグランジュ補間が使えそう でもこれってめっちゃ時間かかりそう？→ Web Worker APIでかいけつ 最後に はじめに ~ InstagramのフィルタをJSで作ってみる 先日、Canvasを練習したいと思って画像変換でいろいろ遊んでたところ、「Instagram」の画像フィルターを実現してみたら面白そうかねと思って作ってみようと思いました。が、それまでに結構紆余曲折があったので、記録も兼ねて記事にまとめてみることにします。 個人的には、Instagramの本当のフィルターそっくりにはまだ動いていないものもあり、実践的でないものも多いかもしれませんが

SQL文法一覧 合わせて読みたい はじめに 自分が勉強するときにつかった図書は スッキリわかる SQL 入門 ドリル215問付き! です。 とてもわかり易い。これを用いながら メモしてあった文法一覧。 これからSQLを勉強される方は ぜひご一読ください。とても わかりやすいです。 実行結果や詳しい説明などは ぜひ書籍で御覧ください。 また、おすすめのSQL学習媒体があれば ぜひ教えて下さい。 Level 1 INSERT

Atomを開発するときに知っていると便利なコマンド&基本知識 atom 主にatomをターミナルから開くときに使う。 # atomのバージョンを見る $ atom --version $ atom -v # atomをdeveloperモードで使う $ atom . --dev $ atom . -d # Packageを読み込まないセーフモードで開く $ atom --safe # atom packageを公開する # それぞれ以下のx部分を自動連番でgit tagや # レポジトリへのpushをおこなってくれる # n # patch -> 0.0.x # minor -> 0.x.0 # major -> x.0.0 $ apm publish patch # 新しいパッケージを作成した時はリンクしてあげると # 「development packages」として認識され # Se

Help us understand the problem. What is going on with this article?

はじめに この記事の目的 記事作成者がSCSSを使う際に多用する＋学習目的で、 SCSSの文法のうち、よく使うものやストックしておきたいものを まとめておく。 ＋ ちょっとした補足説明（用語整理など） 用語整理 Compass Sassをもとに書かれたフレームワーク。 Sass (Syntactically Awesome Stylesheet) 広義にはCSSのメタ言語。Sassには２つの文法が有り、SassとSCSSがある。したがって、狭義の意味で、文法としてSassという用語が使われる場合も。 Scss (Sassy CSS) 上述の通り、CSSのメタ言語であるSassの、記法のひとつ。ただし、現在ではSCSSのほうが主流だとよく言われている。 メリット 早い！圧倒的に記述が早くなる！ 見やすい！特に入れ子表現が見やすくなる！ コード量が一気に減る！ 導入事例が多く解説記事や使える人

まずはじめに読む AWSアカウント作ったらこれだけはやっとけ！IAMユーザーとAuthyを使ったMFAで2段階認証 http://qiita.com/yoshidashingo/items/cd206daca0596659b440 S3のアクセスコントロールまとめ http://qiita.com/ryo0301/items/791c0a666feeea0a704c Amazon Web Services 基本の「き」〜AWS概要編〜 http://www.slideshare.net/masarutomonaga/aws20130720 課金系・無料枠関連 AWS 公式 料金表 http://aws.amazon.com/jp/s3/pricing/ S3の料金体系が分かりにくいと聞かれたので纏めた http://qiita.com/kawaz/items/07d67a851fd49c1

自分の使い方 自分はフロントは個人の趣味で開発することが多いので、「2. Sublime Text使っているならならコレ」で紹介しているように、Sublime Text 3に、有名なYUI Compressorをいれて圧縮しちゃっています。 ただし、中規模以上の開発であったり、中長期的な開発であれば、個人の場合でもGruntを使用するので、「自動でやりたいならコレ」で紹介している手法を用います。ただし、Gruntは結構自分のPCのマシンパワーでフルに使うと重かったりするので、公開するプラグインを作成している場合や、ブログといった場合などには使いますが、チュートリアルや、ちょろっとしたティザーサイトなどはYUI Compressorで済ませちゃっています。 1. オンラインならコレ Online JavaScript/CSS Compressor ブックマークにしておいて損はないと思います。

module.js:340 throw err; ^ Error: Cannot find module 'cookie-parser' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (path:5:20) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Func

インストール方法から参考リンクまで。 自分の勉強ついでに、Tigについて基本の すべてをまとめてみました。 合わせて読みたい 【おすすめ】MacのFinderをカスタマイズする魔法のコマンドたち 【おすすめ】これからWebする人はここ読んどけ(HTML/CSS/JS/Ps/Ai.etc) 【おすすめ】Qiitaを使い倒す方法一覧 Tigとは 定義 Tig is an ncurses-based text-mode interface for git. It functions mainly as a Git repository browser, but can also assist in staging changes for commit at chunk level and act as a pager for output from various Git commands. 要

http://stackoverflow.com/questions/16956810/finding-all-files-containing-a-text-string-on-linux 「ディレクトリから特定の文字列を含むファイルをすべて抽出する」ためのコマンドについての質問。 IntelliJの「Search Everywhere」のような機能ですね。 IDEとか使っていると普通に備えられたりしている、テキストファイルの中身の横断検索。 これ、Linuxのコマンドでどうやるのか、Linux触り初めの頃結構調べた記憶があります。 答えから言うと、こちら。 ########################## # grep # -r : 再帰的にgrepコマンドを実行する # -n : 行番号を出力する # -w : 文字列全体にマッチする場合 # -l : (option)これをつけ

Java/Androidとメモリのお話 社内LTで発表した資料です。 はじめに 最近AndroidでJava 8導入か？ということで、Jack Compilerのページが公開されたり、Android Nの動向が気になるところでして、社内の勉強会でJava 8とかJack/Jillとかについて発表しようとしていたのですが、そもそも「Dalvik / ARTの違いってなんだっけ？」「そもそもHeapやGCってなんだっけ？」となったので、調べてみました。 良くわかっていなかった箇所を整理するためにも書いています。なので、間違っているところやアドバイスがあれば、質問・指摘・コメントしていただけるとすごく嬉しいです Keyword JVM Heap Gabage Collection Android Application Heap Linux Heap ( Native Heap ) Dalvik

ターミナルの使い方 まずは、Macintosh HD > アプリケーション > ユーティリティから、 「ターミナル」を起動してください。 Mac OS Xの『ターミナル』は意外と使われていない機能です。Mac初心者からすると敷居が高そうに見えますが、実際のところターミナルに対して身構える必要はありません。基本的なターミナルコマンドを知っておくだけで、OSの使い勝手は飛躍的に向上するでしょう。参考リンク 1. ls = ファイルの表示 lsコマンドを入力することによって 今いるフォルダの中にあるファイルをすべて 表示させることができます。

勉強会で発表資料を作る際などに プレゼン用スライドを作る方法は たくさんあります。 この前、ふとしたきっかけで Reveal.jsを使ってみたところ とても好評だったので、類似のライブラリを 探してみました。 デフォルトのテンプレートから綺麗なものが 多く、すぐに勉強会の発表資料などに 作れるものがたくさんありました。 個人的には ・Impress.js ・Reveal.js ・Jmpress.js 合わせて読みたい 【Tig全まとめ】Gitを自由自在に操るための必殺ツール 【おすすめ】MacのFinderをカスタマイズする魔法のコマンドたち たった一行でブラウザをメモ帳に変える不思議なコード ライブラリ一覧 1. Deck.js Demo http://imakewebthings.com/deck.js/#intro GitHub https://github.com/imakeweb

仮想環境ってなに? 概要 近年、Web開発の分野では PC上(ローカル)に構築した仮想マシン上に テスト用の環境を作成し、そこで開発やテストを行う というスタイルが一般的になっています。 その場合に問題になるのが、本番環境と テスト/開発環境が同一になっていない、というケースです。 よくあるのは、「Herokuにデプロイしたら動かない」とか 「動いちゃいるけどなんかレイアウトが変」とか 「このGemが動かない」といったケースです。 また、複数人の開発者が関わるプロジェクトや テキストに沿ってRails開発を進める場合など テキストを作成した環境と全く同じ環境で 開発ができれば、最初の環境構築で つまづいたりしなくてすむのです。 これを「仮想環境」と 呼びます。自分のPC上に仮想的に作り上げた 本番・テスト環境、ということです。 仮想環境のメリットは？ プロのエンジニアが使っている 本番環境

はじめに 本記事は、『JavaScriptパターン』(O'Reilly)の第七章を読んで、JavaScriptでいろいろなデザインパターンを試してみようと思い書いた記事です。なお、各記事が長くなりそうなので分割しました。 リンク一覧 【まとめ】JavaScriptでデザインパターン 【JSでデザインパターン】シングルトン編 【JSでデザインパターン】ファクトリ編 【JSでデザインパターン】イテレータ編 【JSでデザインパターン】デコレータ編 【JSでデザインパターン】ストラテジー編 【JSでデザインパターン】ファサード編 【JSでデザインパターン】プロキシ編 【JSでデザインパターン】メディエータ編 【JSでデザインパターン】オブザーバ編 Singleten Singletenとは？ Javaのようなオブジェクト指向プログラミング言語では、静的と動的なプロパティ、メソッドが入り組んでいるた

About 新しい職場でMacを配られたエンジニア、 新しくMacを購入したWebデザイナさんなどの 参考になれば幸いです。 2014年度に書いた記事を多少アップデートしてあります。 GUI Sublime Text Sublimeはプラグインも多く、参考書や記事も多いので ぜひおすすめです。 Packages Emmet SideBarEnhancements ConvertToUTF8 BracketHighlighter OmniMarkupPreviewer Alignment TrailingSpaces Markdown Extended FullPitchWhiteSpaceHighlight EJS IMESupport (Windowsの人だけ必須。) Atom 最近だとAtomもおすすめです。 プラグインもとても増えてきました。 おすすめパッケージは以下あたりを参考にし

はじめに 3行まとめ GitHubでライブラリ・プラグインを公開する方法がわかります 特にJS/jQueryのライブラリを公開する際のTipsがまとめられてあります ドキュメントに何を書けばいいか？が分かります 対象読者 JavaScriptで他の人にも使ってもらいたいコードを書いた！ jQueryでぬるぬる動くユニークなアニメーションのコードを書いた！ 公開して世の中の人に使ってもらいたい！ Index 1. ファイル 圧縮ファイル(~.min.js)を準備 命名規則を汎用的に jQueryならversionを明記 コメントを書く・削る 高速化・最適化をする 非標準のメソッドは使わない use strictモードを使ってみる ESLintでJSテスト DOMをキャッシュする 2. 公開 Demoページは必要 Docsのススメ bowerで公開 npmで公開 バッジを付ける 1. ファイル

"Today's Big News" 来る2015年6月17日、JavaScriptの生みの親でもある超有名人のBrendan Eichが以下の記事を発表しました。海外では結構この話題がもちきりみたいです。そういえば最近のRebuild.fmでもこの話題が出ていましたね。 （注） 訳は意訳です。原文との乖離があれば教えてください。 Today's Big News It’s by now a cliché that JS has become the assembly language of the Web. Rather, JS is one syntax for a portable and safe machine language, let’s say. Today I’m pleased to announce that cross-browser work has begun

JavaScriptには、「部分適用」や「カリー化」といった考え方が存在します。 ココらへんは定義がわかりづらかったり、筆者自身も完璧に理解できているとは言いがたい部分もありますので、ざっくりと全体像でもお伝えできればと思います。 関数の適用、部分適用、カリー化の順番でお話していきます。 関数の適用とは そもそも、関数プログラミング言語においては、関数は「呼び出されるもの」というより、「適用されるもの」と捉えるほうが正確です。JavaScriptにはFunction.prototype.apply()メソッドがあります。 つまり、関数の呼び出しはapply()メソッドの糖衣構文（シンタックスシュガー）である、ということです。実際にapply()を使ってみます。 一つ目の引数には、関数の内部でthisに束縛されるオブジェクト、 二つ目の引数には、引数の配列で、関数の内部で使用したい値の配列を

SSHとは SSHとは、セキュアな通信を行うためのプロトコルです。 たとえば、HTTP。HTTPを通してブラウザからWebサイトにアクセスし、 コンテンツを閲覧したりWebアプリを利用したりします。 この「HTTP」というのもプロトコルの一種です。 HTTPもSSHもOSI参照モデルと呼ばれる層の最上位、アプリケーションレイヤーに位置しています。 なお、よく聞く「OpenSSH」とは、このSSHのプロトコルを実現するための 有名なソフトウェア（プログラム）のひとつです。 FTPのプロトコルで言うFileZillaとか、そういったイメージです。 このSSHを使うと、リモートサーバに安全にログインできたり、 ファイルをセキュアに送受信することができたりします。 SSHは「Secure Shell」の訳で、リモートシェルに特化しています。 公開鍵認証という仕組みを用いて、セキュアな通信を実現して

2015/09/25 追記 2014/10/08 チュートリアル追記 2015/08/24 大幅加筆修正 はじめてのかたに http://ameblo.jp/ca-1pixel/entry-11476850674.html 特徴、「なぜいま注目されているのか」など 背景がわかりやすく書いている。とてもわかりやすい。 デメリット、問題点など http://qiita.com/hshimo/items/156249ec8e6dbf75205a Qiitaの記事です。 環境構築なら http://liginc.co.jp/web/programming/node-js/85318 nvmのインストールから簡単な使い方まで。 環境構築の良記事はたくさんあるけど、とりあえず ここみておけば問題ない。 使い方やノウハウ http://blog.asial.co.jp/1231 Node.jsでこんなこ

10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use