sakaki0214のブックマーク - はてなブックマーク

JSおくのほそ道 #000 [IndexPage] - Qiita

ご挨拶じぇいえすや嗚呼じぇいえすやじぇいえすや初めまして！ JavaScript街道600里を歩きながら、その中で生まれた発見や探求を詠み上げます。テーマはとしては「JavaScript基礎のその奥へ！」を掲げてやって参ります。単なる概要紹介と手順ではなく、一歩掘り下げた検証や考察を入れつつ裏側(ソース)はなるべく見て周り、「どのようなアーキテクチャによりそのモノが動いているのか」もチェックしながら進めていきたいと思います。 1つのトピックで1~10位の投稿を予定しています順不同に書き進めますもはや常識！？NodeJSの基本非同期型イベント駆動とはイベントループの仕組みを探るモジュール＆npmのキホン Webサーバ＋アプリ構築が速すぎる件 Socket.ioで双方向通信チャットアプリを構築ビルドツールの骨身に迫る Gruntとの上手な付き合い方 gulpと

sakaki0214 2017/03/22

javascript

リンク

flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita

注）本文中の「コンテナ」「アイテム」について本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。コンテナ display: flexや、wrap指定などをする複数のアイテムを含むアイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。起きる条件 Safari なぜコンテンツの最小サイズを尊重してくれない模様どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-it ems:center はみ出す問題 Chrome IE11 はみ出てますね。起きる条件 IE10-11 f

sakaki0214 2017/03/06

リンク

管理者権限でメモ帳を開いてhostsを編集するコマンド - Qiita

Windowsでhostsを修正するのにいつも手間取ります。メモ帳を管理者権限で開いて、[ファイル]->[開く]からhostsまで辿って・・・ってやってました。 Qiitaさんで調べたところ、管理者権限でメモ帳を開く方法は以下が参考になります。手っ取り早く管理者権限のメモ帳などを起動する (fernet様) hostsを管理権限で編集するショートカットを作成する (goosys様) いいですね！さらに、コマンドで管理者権限で起動する方法を教えていただきましたので WindowsのPowerShellを管理者権限で起動する方法 (syui様) それを参考にさせてもらって、管理者権限のメモ帳でhostsを開くコマンドがこちらになります。 powershell -NoProfile -ExecutionPolicy unrestricted -Command "start notepad

sakaki0214 2017/03/03

リンク

MailChimpを使用してHTMLメールのテストを行う - Qiita

前回 Litmusを試してみましたが、他サービスも検証しようと思い、今回はMailChimpでのHTMLメールのプレビュー機能がどんな物か試してみました。 2016/4/9時点の情報です http://mailchimp.com/ メール配信ツールとして大手のようで、調べた感じだと実際に使用してる方も多そうでした。個人的には配信やマーケティングは今回求めていないのでHTMLメールプレビュー機能だけ使ってみます。会員登録 Em ailとUsername、パスワードだけで会員登録は完了です。ただし、会員登録後、使用するまでに少し時間がかかります。アカウント登録したメールに開始するためのURLが送られてくるのですが、そこそこの情報入力を求められます。名前などは良いのですが、Website URLが必須となっているので、試しに使いたいだけの人は入力に困る場面もありそうです。ヘルプにも書いてあり

sakaki0214 2016/10/05

htmlメール

リンク

エンジニアなら知っておきたい、絵で見てわかるセキュア通信の基本 - Qiita

TLS 1.3は現在策定中ですが、前方秘匿性の問題から RSAのみを用いた鍵委共有が禁止になる見込みです。(詳細は後述します) HTTPSとは次に、HTTPSです。 HTTPS - Wikipedia HTTPS（Hypertext Transfer Protocol Secure）は、HTTPによる通信を安全に（セキュアに）行うためのプロトコルおよびURIスキームである。厳密に言えば、HTTPS自体はプロトコルではなく、SSL/TLSプロトコルによって提供されるセキュアな接続の上でHTTP通信を行うことをHTTPSと呼んでいる。とのことです。 HTTPの説明を割愛するとすれば、「SSL/TLSでセキュアにHTTPをやる」というだけの説明で済んでしまいます。最近では個人情報等の観点から全てのサイトをHTTPSにするような動きが見られますが、元々HTTPSが使われやすかった

sakaki0214 2016/08/04

あとで読む

リンク

アニメーション最強のVelocity.jsの使い方 - Qiita

はじめに今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。そして、3d-

sakaki0214 2016/04/14

リンク

You Don't Need jQuery - Qiita

注意とお願いこの記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。この記事はYou Don't Need jQueryの日本語訳と同じ内容です。先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。追記この記事は当初は「もうjQueryは必要ない」というタイトルで

sakaki0214 2016/04/13

リンク

春からはじめるモダンJavaScript / ES2015 - Qiita

春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。簡単に(雑な)歴史を紹介します。ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ

sakaki0214 2016/03/17

javascript

リンク

旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita

はじめにネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ

sakaki0214 2016/01/19

JavaScript

リンク

Python基礎講座(はじめに) - Qiita

この記事を書いた動機僕の住む静岡県では、2010年から「静岡Developers勉強会」という IT エンジニアを対象とした勉強会が開催されています。 2010年：「Programming in Haskell」 2011年：「JavaScript: The Good Parts」 2012年：「HTML5＆CSS3実践入門」 2013年：「入門機械学習」 2014年：「実践コンピュータビジョン」昨年の「実践　コンピュータビジョン」ではPythonを使用したため、多くの人に勉強会に参加してもらうために、Pythonの基本を学べるスライドを作成しました。その後、勉強会に参加したメンバーから、「自分もそのスライドの発表を聞きたい」と要望があり、せっかく初心者用の資料を作成したのならば、Webで公開したほうが多くの人が見ることが出来て良いのではないかと考え、今回Qiitaを利用し

sakaki0214 2015/11/11

python

リンク

サーバサイドエンジニアでも押えておきたい！コアJavaScriptの基本知識 - Qiita

はじめに WEBアプリケーション開発においてブラウザ側で何かをしたい場合、ブラウザで唯一動作する言語といっていい JavaScript を触らざるを得ません。ただ JavaScript は理解してしまえば難しくないものの、サーバサイド側の言語と違う特徴 (特に関数まわり) があるため、慣れないうちは混乱することが多いのかなと思います。私もまだ JavaScript を学び始めて日が浅く（本職はサーバサイド側のエンジニア）、また JavaScript での業務経験もそれほど豊富ではないのですが、サーバサイドエンジニア側の視点で、とっかかりとしてこれだけ知っていれば理解が捗るだろうというものを挙げてみました。ですので必ずしも網羅性はなく、ブラウザに関する機能（クライアントサイドAPI）についても触れていません（対象はコアJavaScript言語《ECMAScript5相当》）

sakaki0214 2015/07/16

javascript

リンク

CSSだけで<select>をカスタマイズする - Qiita

Form系要素スタイルの初期化ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択

sakaki0214 2015/06/25

select
css

リンク

Gitでやらかさないための事前予防策 - Qiita

Gitでやらかした時に使える19個の奥義を書いてやらかしたときになんとかリカバリできるようにした。今回は、そもそもやらかさないようにしたいよねっていうお話。コミット編 .gitignoreを細かく指定しておく .gitignoreを指定しておけば余計なファイルをコミットしちゃうことを予防できます過去に似たようなプロジェクトがあるのならそれを流用しましょう。ないのであれば.gitignore.ioで生成してそれをカスタムしましょう。ワイルドカード指定やディレクトリまるごとの指定は副作用ある可能性があるので慎重に。コミットメッセージのフォーマットを決めておくコミットメッセージのフォーマットを決めておけば書き直したいということも減りますコミットメッセージをやらかして直したいと思うことはよくあります。そういうのって案外コミットメッセージが自由すぎることが問題だったりします。ある