2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けるこ
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
JavaScriptだけでTrello風タスク管理ボードを開発できるライブラリ「jKanban」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です！ 非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。 コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください！ 【 jKanban 】 ■「jKanban」の使い方 それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう！ 必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。 これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>j
とりあえず試してみたいって方のための phina.js 入門 | phiary
phina.js Advent Calendar 2015 - Qiita 8日目のエントリーです. 1日目 本日 JavaScript ゲームライブラリ『phina.js』をリリースしました! | phiary 2日目 ManagerSceneでゲームの流れを管理しよう | daishi blog 3日目 ゲーム開発 - 気鋭の新JSゲームライブラリ「phina.js」の概要を自分なりにまとめてみた - Qiita 4日目 【phina.js】Gridクラスを使いこなそう - Qiita 5日目 phina.js で Webフォント を使ってみるよ！ - Qiita 6日目 [phina.js] Tweenerを使いこなそう! [Tweener 基本編] - Qiita 7日目 [phina.js] サンプルから覚えるphina.js - Qiita このブログでお馴染みの とりあえず試
ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」:phpspot開発日誌
Home - jQuery.smoothState.js ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 WEBページというと画面遷移で一旦画面がクリアされて再描画されるため、アプリっぽい体験にすることは通常難しいですが、こちらのプラグインを使って、よりアプリっぽいWEBページ作りが出来ます。 ページ遷移後はURLもa.html→b.htmlのように変わるため、ブックマークやSEO的にも問題のないWEBページ作りに役立てられます 関連エントリ ページ遷移を意識させないアニメーションによるページ切り替え効果実装 モダンでかっこいいページ遷移アニメーションサンプル
★Geolocation API
■Geolocation APIとは Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 Geolocation APIの登場以前にも携帯端末などで位置情報を扱うことは出来ましたが、 各携帯キャリア独自の規格であったためキャリアごとの仕様に合わせて開発する必要がありました。 Geolocation APIは、ウェブの標準化団体であるW3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されています。 すでに、Firefox・Google Chrome・Safariなどの一般的なブラウザでサポートされており、 スマートフォンのようなGPS対応の携帯端末向けのウェブサイトだけではなく、 一般的なブラウザで閲覧するいわゆるPCサイトでもユーザーの位置情報を利用したコンテンツを提供することが可能になっています。 ■どんなしくみ？ Geo
The Google Directions API（ルート検索）｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル - GMAPv3 - Directions - 2地点間のルート検索</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jav
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。 jQuery hashchangeプラグイン １．機能 Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。 が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。 例えば下の図の①～⑤のページ遷移で、通常は「戻る」「進め」ボタンで②～④の遷移は行われませんが、hashchangeプラグインを使えば②～④のページ遷移も実現できます。 具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント（「index.html#abc」の「#abc」）を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
#2「JavaScriptでおっぱいを動かす」 tech.kayac.com Advent Calendar 2012 - KAYAC Engineers' Blog
カップル爆発しろ どうも。「何かよく知らないけど訳分かんない人だと思ってた」と社内で最近言われたHTMLファイ部のdamele0nです。 このエントリはtech.kayac.com Advent Calendar 2012 2日目の記事です。 テーマは「私の中のマイイノベーション 2012」 季節のせいか周囲ではカップルが続々と誕生して次々とイノベーションを起こすなか、僕はといえば相変わらず人生にしかれた非モテのレールを光のスピードで突き進んでいます。 僕だって、2人でイノベーションを起こしたい…。 僕だって、冬のせいにしたい…。 僕だって、クリスマスに七面鳥抱えながら海岸沿いを2人でキャッキャウフフしたい…。 僕だって、ちちくりたい…。 僕だって、僕だって、僕だって…。 安心してください。 僕は、なんですか？ あなたは、なんですか？ そう、エンジニアです。 無いものは作ればいい。世界なん
Safariのポップアップウインドウを開かない件です。 | yabuchany.com blog
以前、聞かれて「すいません。わかりません。」って言ってしまった事なんですが。 Safariのポップアップウインドウを開かないにチェックを入れていてもFlashからポップアップを開くようにする方法 がわかりましたので自分の為にメモします。 ＊「GRAM | グラム」さんの記事に「Opening External Links in new window from AS3」というのが紹介されていました。 それを参考にして、AS2で「Safari」とそれ以外のブラウザで分岐させ「Safari」の場合はgetURLを、それ以外のブラウザはExternalInterface.calを使うのを作ってみました。 ＊_rootにbtn_mcと言う名前のMovieClipを置きタイムラインの1フレーム目にScriptを書いてる場合の例。 import flash.external.ExternalInterf
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
Loading...
IE Fuck!(ieのバグまとめ) - Qiita