タグ

jsに関するamebloger-xのブックマーク (14)

  • Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ

    Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識(HTML, CSS, JavaScript)、制作者として必要なスキル(Git, HTTPSプロトコル, Terminalなど)をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ

    Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
  • かちびと.net

    Delighters.JSはページスクロールに応じて要素に任意のCSSアニメーションを付与できるスクリプトです。よく見かけるやつです。個人的には多くの場合、嫌でも目にしっかり入ってくるくらいの派手なエフェクトの割に、意味を感じないエフェクトばかり見かけるのであまり好きではないんですが、UX向上の役割を果たしてる場合もありますので技術自体は基的には良いものですよね。今更感ある用途のスクリプトですが非依存型で管理や導入も楽そうだったので覚えておこうかと思います。ライセンスはMIT。 Delighters.JS

  • Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG

    Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery

    Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
  • ES2018で追加される機能まとめ - Qiita

    はじめに ECMAScript 2018に最終的に入るProposalが決定しました。 ECMAScriptは毎年6月ごろにリリースされるため、これから新しい機能(Proposal)を入れると間に合わなくなります。 そのため、1月ごろに機能(Proposal)の追加はフリーズされ、この時期からStage 4となったProposalはECMAScript仕様体へマージされます。 2018-01-29のJS: Firefox 58、Safari 11.1(β)、Parcel 1.5.0、webpack 4(β)、ES 2018の機能が決定 - JSer.info https://jser.info/2018/01/30/firefox-58-safari-11.1b-parcel-1.5.0-webpack-4b-es-2018/ というわけで、ES2018のProposalがまとまった模様

    ES2018で追加される機能まとめ - Qiita
  • 超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順 - Qiita

    つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基的な情報を含んでい

    超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順 - Qiita
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

    dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
  • Underscore.jsを使って、簡単に絞り込み検索を実装する | Tips Note by TAM

    以前作ったサイトで、扱っている商品をカテゴリや値段で絞り込みできる検索機能をつけたいという要望がありました。 どうしたもんかと思っていたのですが、Underscore.jsを使って実装してみたら、とても簡単に良い感じにできたので紹介します! Underscore.jsの説明については、以前TipsNoteで紹介されているので詳細な説明は省きますが、簡単に言うとJavaScriptの便利な命令がたくさん詰まったライブラリです。 Underscore.jsの使い方 個人的には、配列やオブジェクトを使った処理がすごく楽になるところが特にお気に入りです! デモ いきなりデモからいきます! 色 形 を指定して 検索 を押すと絞り込み検索が行われます。 See the Pen underscore.jsを使った絞り込み検索 by daichi (@kandai) on CodePen. 良い感じに絞り

    Underscore.jsを使って、簡単に絞り込み検索を実装する | Tips Note by TAM
  • これは凄い!Web制作が捗るモーフィング系の最新スニペットまとめ

    作成:2016/04/25 更新:2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。 進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵! 新プロパティmix-blend-modeを使いこな

    これは凄い!Web制作が捗るモーフィング系の最新スニペットまとめ
  • 「リアルタイムWEBを実現する技術」の触りを知っておく為のまとめ - Qiita

    概要 socket.ioについて周辺技術の触りをまとめておく これだけ知ってれば後から調べやすいはず 覚えること Socket.io Websocket ノンブロッキングI/O node.js Socket.ioって何? Socket.ioのページを参照 「Socket.IOは、リアルタイム双方向イベントベースの通信を可能にします。」 「これは、信頼性とスピードに均等に焦点を当て、すべてのプラットフォーム、ブラウザやデバイス上で動作します。」 解りにくいので簡単に書くと 幾つかの通信方式とサーバー、ブラウザ、デバイス間の通信を抽象化してくれるライブラリでいいはず Socket.ioが対応している通信方式 Socket.IO protocol xhr-polling xhr-multipart htmlfile websocket flashsocket jsonp-polling 抽象化し

    「リアルタイムWEBを実現する技術」の触りを知っておく為のまとめ - Qiita
  • WordPressでscript要素をまるっとサクッと非同期化する方法

    ちょっと久々にWordPressネタ。 今回はwp_head()関数とwp_footer()関数から出力されるscript要素を非同期( async )化しようじゃないかというお話です。 いわゆるレンダリングブロックの原因であるjavascriptの読み込みを遅延させて、体感速度を上げていきます。 code.close() Photo by ruiwen async 属性を使おう async属性をざっくり説明すると、script要素に指定することで実効タイミングを指定することができる論理属性です。 asyncを付与すると、利用可能になった時点でスクリプトを実行します。 <script async src="... 記述としては上の通り。 javascriptの実行時にレンダリングブロックせず、非同期で実行されます。 WordPress で async 属性を使う そんなasync属性をWo

    WordPressでscript要素をまるっとサクッと非同期化する方法
  • FINDJOB!終了のお知らせ | FINDJOB!

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    FINDJOB!終了のお知らせ | FINDJOB!
  • いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記

    外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省

  • ブロガーよ欲を満たせ!ブログのアクセスアップだ。今すぐ1万超PVを狙え!

    【特集】アクセスアップに有利なWordPressテーマはいかが? SEO対策や収益化に有利なWordPressのテーマがあれば教えてほしい。 そんな声にお応えしました。 たくさんあるWordPressテーマの中から気でおすすめできる5つを紹介。 選び方もお伝えします。 続きはこちらへ ブログのアクセスアップにお悩みのあなた。 専門知識は不要。お金も一切かけません。 そんなアクセスを激増できる方法があるとしたら、知りたくないですか? 実は7年以上も続くこのブログ。 始めたばかりの頃は、1日平均、わずか「0〜4人」しかアクセスがなかったのです。 そんなお寒い状態が続いていたこのブログに、なんとたった1回の更新で15,000以上のアクセスを集めた方法があるんです! その方法を今回は初心者さんでもマネできるように、徹底的に詳しくお伝えしていきたいと思います。 ただ闇雲に記事を書き続けてもアクセス

    ブロガーよ欲を満たせ!ブログのアクセスアップだ。今すぐ1万超PVを狙え!
  • HTML5で組んでるならこの魔法のjsも入れておけっていう話

    現在、A!@attripさん発で話題になっている「たった2行でIE5.5~IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS

    HTML5で組んでるならこの魔法のjsも入れておけっていう話
  • 1