★2018/04/13投稿 → Barba.jsを使った実装方法を書きました pjaxをざっと触ってみたので、自分用にメモ。 少々癖はあるが、シームレスなページ遷移の実装や、読み込み速度の向上が可能。 まだまだ使いこなせてないので、マスターしたい（切実） ★pjaxについてはこちら → http://falsandtru.github.io/jquery-pjax/ 準備 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.js"></script>

「自分でアプリやWebサイトを作ってみたい」そう思う人が増えたことで、プログラミング学習を始める人が増えました。プログラミン学習といえば、参考書を購入し、実際にコーディングしながらスキルを身につけていくのが一般的ですが、途中で理解できなくなり投げ出してしまうのが関の山・・・。 また限られた時間の中、本を読みながら手を動かして、常に自分で目標を立てながら学習を進めていくことも簡単なことではありません。プログラミングを勉強しようと思ったけど、途中で挫折してしまったという人はたくさんいることでしょう。 そんな人に朗報です。今では途中で挫折することなく、「独学」でプログラミングスキルを磨くことができるサービスが数々あります。ここでは厳選した15個のプログラミングサ、ご紹介いたします。 1：ドットインストールドットインストール 国内プログラミングサービスの最大手といったら、この「ドットインストール」

全国のケーブルが嫌いな皆様こんにちは。 本日このようなツイートをした所、とても多くの方にリアクションをいただいたので、デスク周りのケーブルをスッキリさせる為に、私が心がけてる事などをご紹介しようと思います。 ここでケーブルが大嫌いな私が、ケーブルを隠すためにしている涙ぐましい努力の数々をご覧ください。 pic.twitter.com/YVGF5jamz4 — Go Ando / THE GUILD (@goando) April 21, 2019 なぜケーブルが嫌いなのかまず最初に申し上げたいのが、私はケーブルがとても嫌いです。 ケーブルそのものが嫌いというよりは、巷に溢れている好ましくないケーブルの状態が嫌いなのだと思っています。好ましくない状態とは大雑把に以下の2ケースです。 1. 使われてないのに放ったらかしにされている。 2. 必要以上に長いケーブルが使われている。つまり余った状態

TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための

Simple tool to find, customize and generate common SVG icons for your project

おさらいシリーズ第4弾w HTML5ではinput要素が拡張されて正規表現による入力値バリデーションができるようになっている。利用するには、 <input pattern=""> のように pattern 属性値にバリデーション用の正規表現を書いてやればよい。 ──で、毎度UI作っていて正規表現パターンを調べるのが手間だったので、定形的な入力値については一度まとめておこうかと思った次第。 まぁ、正規表現の自分用チートシートみたいなものですな。 pattern属性用正規表現サンプル集 バリデーション内容 正規表現（pattern属性） 備考

CSSで三角形を作るといえばborderを利用したものが有名だけどサイズの計算とか扱いとかがちょっとめんどいので普通のdivとかの背景を三角形にしたくなった。した。 普通にwidth/heightを設定するだけでかってに伸縮してくれるのがいいところで、底辺が100%の三角形とか、width:autoのような挙動をする三角形を手軽に作れる。 .bottom{ background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%, linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%; } .top{ backgrou

JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm

【PR開示】当ブログはアフィリエイトプログラムに参加しています。記事内にプロモーションを含む場合があります。 無添加調味料おすすめ10選！通販で買える人気調味料を厳選

概要 みなさん、Git使ってますか？ もしくは、使いこなしていますか？ 独習Gitを読んで、思いの外Gitコマンドが多かったので、 タイトルの通り、Gitコマンドで100本ノックをまとめてみました。 Gitの環境構築が終わっている状態からを想定しています。 git initでローカルにリポジトリを用意してください。 問題に対して、直後に回答を載せる形式にしています。 Git初心者の方も、目を通して知らないオプションをググれば勉強になると思います。 参考文献 独習Git Gitに馴染む 1. メールアドレスをGitのグローバル設定に追加 git config --global user.email "Your E-mail@example.com" 2. user.nameの設定値を表示 git config user.name 3. user.emailの設定値を表示 git config

Why your website should have meta tags? Your website visitors are visual beings (with the exception of robots). When they see the awesome content, product, video, or all of the other cool things they discover on there, they will share it. Now how great would it be if that wasn’t just a plain link in the message, post, comment or tweet but a quick preview of your awesome stuff? Meta tags enable sea

ということで11月で835点を取ることができました。 2017/09でいったんスコアが下がったのは結構へこみました。(まあTOEICの点数は運もあるのでプラスマイナス50点くらいの揺れはでると思います。) 学習戦略 英語上達完全マップ 実は英語上達完全マップどおりには勉強しませんでした。英語上達完全マップではボキャビルの勉強は後のほうでいいと書かれていましたが、TOEICのスコアを順調にあげるためにはボキャビルは最初の方にやったほうがいい気がして、4ヶ月後くらいにはTOEICの教材を中心に勉強しました(英語上達完全マップ的にはTOEIC用の勉強するのは邪道なのですが、まあ私はTOEICさんに身を委ねることに決めたので…)。 ただ、英語上達完全マップで掲げられている、瞬間英作文、音読、精読、文法、多読、ボキャビル、リスニングといった体系別トレーニング方法はとても理にかなっていると思いますし、

「IT技術が日々進歩している」と、近年はよく耳にしますね。 では、実際に最近リリースされた画期的なサービスや2017年話題になったインターネットサービス・アプリを、あなたはどれくらい知っていますか？ 実は、皆が知らない所で、面白いサービスや役に立つサービスが沢山ローンチされています。この記事では、2017年にローンチされた、もしくは話題になったサービスや役に立つサービスをご紹介しましょう。 新しい波をいち早く察知するための、１つの参考になれば幸いです。マーケットが拡大する前、あるいは流行に沿ってチェックできれば、オイシイ思いができるかもしれません。 1.ロケラボ 2.Cotobox（コトボックス） 3.Sarahah（サラハ） Peing（ピング） 4.SPRAY Insight 5.eiffel（エッフェル） 6.VALU（バリュー） 7.cash 8.メルカリNOW 9.ランチパスポー

タイトル通りによく使う正規表現を毎回ググるのが効率悪いのでまとめてみました。各言語で正規表現のサンプルを書いてみました。 正規表現式 Emailアドレス ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ ドメイン名 ^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$ インタネットURL ^(http|https)://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ユーザー名 (Twitter username) ^[a-zA-Z0-9_\-.]{3,15}$ 固定電話 ^0\d-\d{4}-\d{4}$ 携帯電話 ^(070|080|090)-\d{4}-\d{4}$ IP電話 ^050-\d{4}-\d{4}$ フリーダイヤル ^0120-\d{3}-\d{3}

WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.email.css -GitHub normalize.email.cssの特徴 normalize.email.cssの構成 HTMLメールを作成する時のテンプレート normalize.email.cssの中身 normalize.email.cssの特徴 ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。 ネイティブプラットフォームのフォントスタイルを作成。 HTMLメールの一般的なバグに対応。 コメントを使用したスタイルの説明。 normalize.email.cssの構成

どうも、まさとらん（@0310lan）です！ 今回は、基本的なJavaScriptプログラミングが出来るようになった人向けに、さらなるステップアップを目指せる「YouTubeチャンネル」を厳選してまとめてみました！ 海外のプログラミング系YouTube動画は、有料でもおかしくない「質」の高さと豊富なコンテンツ量に魅力があり、確実にレベルアップが期待できるのでぜひ参考にしてみてください。 ■JavaScriptの勘所を勉強できるYouTubeチャンネル！ 【 Fun Fun Function 】 プログラミング動画とは思えない超ハイテンションなノリで、JavaScriptを学ぶうえで欠かせない勘所を分かりやすく教えてくれるのがコチラのチャンネル！ 「Spotify」の開発にも携わっていたというプログラマーの彼は、得意のJavaScript言語を分かりやすく伝えることに情熱を注いでおり、それは

Z-ROTATE : 30°, transform-origin: left top 0px a { display: block; transform-origin: left top 0px; transition: all 0.2s ease 0s; -moz-transform-origin: left top 0px; -moz-transition: all 0.2s ease 0s; -webkit-transform-origin: left top 0px; -webkit-transition: all 0.2s ease 0s; -o-transform-origin: left top 0px; -o-transition: all 0.2s ease 0s; -ms-transform-origin: left top 0px; -ms-transition: a