WEBフロントエンドエンジニア初学者の勉強リスト - Qiita
はじめに 最近転職をしてフロントエンドエンジニアになりました。 昔からWEBには触れていたものの、独学で細々とブログをやったりWEBページを持っていた程度なので、きちんと学ぶのは初めての初学者です。 WEBの世界はとても広い。広すぎて何を目指して勉強すればいいのかわからない。何を調べたかも忘れそう。なので目印代わりに調べたことをここにまとめておこうと思います。 MarkDownの練習も兼ねて。 YahooでググったりQiitaで聞いたりするきっかけ程度にでもなりますように。 この投稿は初学者がネットの知識や入門書を読んで身に付けた知識なので、間違っているところや不足しているところが多々あると思います。 もし見つけた方がいたら、私と、これから学ぶ方の為にどうぞコメント等でご指摘いただければ幸いです。 言語 HTML/CSS/JSの三種の神器は変わらず。ただし、よりインテリジェントな書き方がで
なんとなく…改め、Vue.jsでCSSスタイルガイド作成に挑戦 | バシャログ。
一体型VRヘッドセット『Oculus Go』がそろそろ発売されるのではないかと、ドキドキしながら待っている kouraku です。おはこんばんちわ。199＄という低価格にも関わらず、スペックがそれなりにあるらしい・・・ので、ここから一気にVRユーザーが増えてくれるのではないか、と期待をしています。 さてさて、前回は Vue.js を使ってみたら、もしかしたらCSSのスタイルガイドが作れちゃうんじゃないの！？・・・ということで、marked.js と highlight.js を導入して見た目を整えたり、サンプルコードの下にサンプル表示を追加してみました。 なんとなく（今更ながら）Vue.jsを試してみた〜その２ これだけでもスタイルガイドの形に近づいて気がしますが、更にスタイルガイドとして機能させるために、色々と追加していこうと思います。 表示仕様を変更してみる 前回までの表示は、読み込ん
Vue.jsをシンプルに理解しよう - Qiita
Vue.jsって聞いたことあるよね？ 最近ホットみたいですねVue.js、今更ですが入門者向けにVue.jsを紹介したいと思います。 誰でもわかるように書きますので多少間違っていても許してください!何でもしますから! 続きを書きました。 Vue.jsをシンプルに理解しよう その2 双方向データバインディング？ Vue.jsのインスタンスの作り方とかは他にもいろんな方が紹介していると思うのでそちらを参照してください。 まず一番基本的で便利なやつを紹介します。 Vueインスタンス内のdataというオブジェクト内の変数がhtmlと連動します。 かっっこいい言い方すると双方向データバインディングとか言います。 分かりにくいからhtmlとjsが同じ値になるって覚えたらいいよ! jsfiddleで確認してください。 dataの中にさらにオブジェクトを入れることもできます。 便利だ... ちなみに{{
こっそり改変を見逃さない! いざという時に役立つ"魚拓"サービス5選
Webページの内容を証拠として残したい場合に役立つのが、いわゆる"魚拓"サービスだ。クローラが自動巡回するのではなく、利用者がURLを入力することでWebサイトのコピーをオンラインに残せるこれらのサービスは、オンラインでの共有が容易なため、改変などの行為を見逃さないためのチェックツールとして重宝する。 魚拓サービスの必要性や適法性についてはさまざまな見解があるが、修正履歴を残さずに記事を大きく改変したり、短期間で記事ごと削除するメディアは少なくない。また、Webサービスの利用規約の変更であったり、個人レベルでも、誹謗中傷発言を削除して存在自体がなかったようにふるまうユーザは後を絶たないだけに、それらに対して少なからぬ抑止力となっていることは間違いのないところだ。 こうした魚拓サービスは、日本における元祖と言える「ウェブ魚拓」以外にもさまざまなサービスが存在しており、最近ではTwitter専
Google Analytics に新たに導入された「データ保持」の設定に関する誤解と対策
「GDPR（General Data Protection Regulation）」、日本語で言うところの「一般データ保護規則」に基づいて Google Analytics に新たに加わった設定項目である「データ保持」の設定について、保持期間を「無期限」に変更しないと、「期間経過後、過去のアクセス解析データが全て消えてしまう」と誤解を招くような情報が多く見うけられます。 しかし、今回設定できるようになった（正確には設定が2018年5月25日以降有効になる）「データ保持」項目は「ユーザーデータとイベントデータ」の保持期間に関するものであり、Google Analytics に蓄積された「解析データ全体の最大保存期限ではない」という点に注意が必要です ※1。 ちなみに過去データがどこまで保証されるかについて Google 社は明確には規定していませんが、それは今回の件とはまた別の話になりますの
d904b2f9a103c37a25fa#%E8%80%83%E3%81%88%E3%81%A4%E3%81%84%E3%81%9F%E4%BB%95%E5%88%86%E3%81%91%E6%96%B9
はじめに FLOCSSというCSS設計手法で実装をやっていく上で、唯一の悩みどころにcomponentとprojectの判別があります。私のチームでも悩み、チームメンバーがモヤモヤし、あとあとCSSも崩壊しそうだったので、一つの判別基準をつくることにしました。 FLOCSS とは 数あるCSS設計手法のひとつで、OOCSSやSMACSS、BEM、SuitCSSなどのメジャーな設計手法のいいとこどりをした国産の設計手法です。 https://github.com/hiloki/flocss CSSはデザイン通りの見た目を実現するために様々な書き方ができてしまうため、あるルールに則って記述していかないと、一つの変更が予期せぬところのレイアウト崩れを発生させてしまいます。そのルールというのも、かなり練りこんだものでないとあとあと破綻してしまいます。 FLOCSSはそういった要点を抑えたうえで、U
jQueryにおけるattrとpropの違いと使いドコロまとめ - Qiita
checkboxやradioのチェック状態を調べる際にはattrではなくpropを使うのが良い。 attrでも取れないこともないですが、propで取得する方が処理が早いです。 特にIEの場合、inputに対するdisabledの処理がものすごく重く、attrでdisabledやcheckedの処理を沢山していると、無駄に最悪な感じで負荷がかかります。 attrとpropの取得の違い またこの２つは、同じ値を取得してるようで異なる値を取得するので注意。 例えば //チェックした値を取得するよー $(":checkbox").click(function() { alert($(this).prop('checked')); alert($(this).attr('checked')); }); の場合、 チェック時 prop true attr checked 非チェック時 prop fal
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita
Vue.jsはそのまま使ってもよいですが「自分(プロジェクト)に合ったフレームワーク」を見つけるのにも向いています。 これは、後発フレームワークだけあり各フレームワークの特徴を意識した設計がなされているためです。他の著名なフレームワークとの特徴を比較した文書もあるので、こちらをチェックしながら導入を検討するとよいと思います。 そのため、以下はVue.jsの紹介と他フレームワーク(Knockout.js と Angular)へのステップという2セクションに分けて紹介していきたいと思います。 JavaScriptフレームワークの導入を行いたいがこの選択は慎重にいきたい、という状況であれば最初にVue.jsを試金石としてみて、効果的と感じられる機能からAngularやKnockout.jsに流れていくというのは十分ありだと思います。 2016/06: Vue.jsの1.x系に合わせて記述・サンプ
【爆速】WordPressで始めるpjax入門 - Qiita
AWS+KUSANAGIでWordPressサイトを運用しており、その時点でかなり速かったのですが、さらに高速化するべくpjax(barba.js)を導入しました。 導入後、ページ遷移体感速度が5000兆倍になったので導入方法をシェアします。 barba.jsとは pjax(非同期画面遷移)を使いやすくしたjsライブラリ。 これを使うとページ遷移時にコンテンツ部分のみを読み込むことができ、 まるでネイティブアプリを使っているようなページ遷移を体験できます。 また、animation、prefetch、cache等に対応しています。 デモサイト barba.jsを導入しているサイトのご紹介。 ・Grid Demo（公式） ・Next/Prev Demo（公式） ・Circles Demo（公式） ・Accueil | Effektiv, cabinet de recrutement（非公式）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design Browser - Browser for Developers and Designers - Solis For Mac.
Webアクセシビリティ対策って、何からやればいいんですか？／Webアクセシビリティのコンサルタントの植木真さんに聞いてきた | Webのコト、教えてホシイの！