新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
寄り目を利用した「目diff」および「立体インデント」の考案 - Qiita
疲れてくると寄り目になっちゃう現象ありますよね。 これを有効活用する方法を思いついたので書き留めようと思います。 先日 react native でアプリを作ってたんですが、なんかの操作の前後で挙動が想定と違いました。 よく分かんなかったので、とりあえずデータの中身を表示させて、 ふとした拍子で再現しなくなると困るので念のためスクショを撮りました。 （左: バグる前 / 右: バグった後。データは今てきとーにでっち上げたものです。） 見ても分かんない、えーと、どうすんだっけ… Remote Debug 有効にして Chrome の…テキストを diff で…あぁ、目が寄るぅ…… あぁなんだ categoryId が変わっちゃってるじゃん、と一目瞭然ですね。 インデントと行数が揃ってるっていう前提の上ですが、寄り目を使うと diff 部分が マトリックスでラグってるとき風に（網膜上に）表示さ
2018/07/12 に発生したセキュリティ インシデント (eslint-scope@3.7.2) について - Qiita
2018 年 7 月 12 日に、ESLint 開発チームが管理する npm パッケージに悪意あるコードが挿入されるセキュリティ インシデントがありました。 ESLint からのアナウンス: https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes npm からのアナウンス: https://status.npmjs.org/incidents/dn7c1fgrr7ng 以下の場合に npm install を実行したユーザーの npm アカウントへのログイン情報 (アクセストークン) が盗まれた恐れがあります (盗まれたアクセストークンはすでに無効化されています)。 日本時間の 18:49 から 19:25 の約 1 時間のあいだに npm install を実行し、eslint-config-e
HTMLのタグ選びで迷うところ - Qiita
WHATWGのHTML Living Standardと、W3CのHTML5.2を見比べつつ、たまにMDNをながめながら書いていますが、少し感情的な部分も混じっています。 <article>と<section> A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent" 4.3.12.1 Article or section? | HTML Standard 実装する人の意図によるよ！ってそれを言っちゃおしまいですよ。気持ちはわかるけども。 <article> in principle, independently distri
Bitbucketでgit-ftpを自動化する - Qiita
環境 タイトルにあるようにソースコードのホスティングにはBitbucketを使用する必要があります。 はじめに この記事はこちらの続きです。 コマンドでgit ftp pushをしたくなかったのと、push時に色々出来るようにしたかったので、Bitbucketのpiplinesを使って見ました。 こちらの記事の続編であるため、git ftp initは終わっているという前提で進めていきます。 1.Bitbucketでpiplinesを有効化 Bitbucketではデフォルトでpiplinesが無効化されているので、有効化していきます。 リポジトリのページにアクセスをして、サイドバーの一番下の「設定」をクリックします。 「設定」 → 「settings」をクリック 「settings」をクリックしたら、以下のように有効化させます。 以上でBitbucket側の設定は完了です。 2.bitbu
5000人に聞いた、2018年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita
先日Launching the Front-End Tooling Survey 2018というフロントエンドツールのアンケート調査を和訳しましたが、その結果が発表されました。 以下はThe Front-End Tooling Survey 2018 - Resultsの日本語訳です。 The Front-End Tooling Survey 2018 - Results 今年3月のFront-End Tooling Surveyに、5097人のフロントエンド開発者から回答をいただきました。 参加された皆さんには感謝致します。 毎回、調査の目標は単純です。 フロントエンドエンジニアが現在仕事で使用しているツールについて光を当てたいのです。 どのようなツールが使われているのか、自分の知識や経験だけで判断してしまうのは早計です。 以下の結果は、フロントエンドツールの現在の動向を把握するのに役立
[CSS][メモ] IE11でflex-basisにbox-sizingが効かない - Qiita
ul { display: flex; flex-wrap: wrap; width: 960px; margin: 0 20px; } li { flex: 0 0 184px; height: 40px; padding: 10px; box-sizing: border-box; } 上記のコードでChromeでは1行5列のリストが表示されるが、 IE11ではbox-sizingが効かず、5列目が落ちてしまう。 これに対処する為には、以下のようにmax-widthをflex-basisと同値で指定する必要がある。 ul { display: flex; flex-wrap: wrap; width: 960px; margin: 0 20px; } li { flex: 0 0 184px; max-width: 184px; /* ← これを追加 */ height: 40px;
![[CSS][メモ] IE11でflex-basisにbox-sizingが効かない - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/82465ad51f6a8463e001ae782639f120b64469ac/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ1NTJTVEJTVCJUUzJTgzJUExJUUzJTgzJUEyJTVEJTIwSUUxMSVFMyU4MSVBN2ZsZXgtYmFzaXMlRTMlODElQUJib3gtc2l6aW5nJUUzJTgxJThDJUU1JThBJUI5JUUzJTgxJThCJUUzJTgxJUFBJUUzJTgxJTg0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02MzY1NTk3MTE0NGYwNjNhNGNiNDNiNzM2MDhjYTlkOQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb3BwYXlhc2hpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05ZjkyMzRhNjhjNGRjNDAwMGMxYTY0NTBiMGY3MmM1Mw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc5487fb7e0d1d369edb767e52847eed4)
相対的なネーミングはよせ、やめるんだ！ - Qiita
たぶん1000回くらいは言われてきているがいまだに絶滅しないので、もう1回言う。ファイル名でもソースコード上の変数でもCSSのセレクタでもなんでもいいけど、相対的なネーミングはやめよう。 Safe Harbor Statement この投稿は個人の（中略）であり、所属する組織とは関係ありません。 なぜ相対的なネーミングをしてはいけないか 名前をつけた人の主観が入り込むため 時間が経つにつれ名前が実態と乖離し混乱を招くため 実装に無駄な制約をかけるため なぜ相対的なネーミングがなくならないか なにが相対的なネーミングなのか理解していないため じゃないかな多分。 避けるべき語 というわけで相対的なネーミングを回避するための禁止ワードのうち代表的なものをあげておきます。 new, 新, latest, 最新, old, 旧 など これらの時系列を表す語は、比較対象がないと新なのか旧なのかわかりま
dev.toに匹敵する速度を出せるWordPressテーマを開発した話 - Qiita
本日、無料WordPressテーマ Godios. をリリースしました。 公式サイトを見ていただけるとわかると思うのですがページが一瞬で遷移しています。 どうでしょう、dev.toと同じくらい速いんじゃないでしょうか。 この記事ではテーマを高速化するにあたって用いたテクニックを書いていきたいと思います。 圧縮 テーマに含まれている画像・CSS・JSファイルの圧縮。 画像はOptimizilla・TinyPNG、CSSはCSS Minifier、JSはJSCompressを使用しました。 CSS・JSファイルの遅延読み込み レンダリングをブロックするファイルが大量にあると表示が遅くなりますので、JSファイルはdeferまたはasync属性を付与し、CSSファイルはインライン、またはJSで非同期に読み込んでいます。 無駄なSQLクエリを減らす データベースへのアクセスが多いと負荷が掛かる上、速
独自設定ファイルは不要。ParcelでコンパイルするSassとAutoprefixer - Qiita
この記事は大幅に加筆・修正して「Sassのモダンなコンパイル環境が3分で作れるParcel入門独自設定ファイルは不要 - ICS MEDIA」に引っ越しました。 ※ Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
iOSはoverflow:hidden;でスクロールを無効にできない - Qiita
// スクロールを無効にする $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); // スクロール無効を解除する $(window).off('.noScroll'); スマホの独自イベントのtouchmoveイベントを切ってスクロールを止める。 解除したい時はoffする。 イベント名に、.noScrollと名前を付けることで、他の部分でtouchmoveイベントを使っていたとしても、そのtouchmoveイベントまでイベントをoff()してしまうこともなく、.noScrollの名前のイベントのみをoff()することができる。 参考 iphoneでスクロールをさせない処理をする。 特定のエリアのみスクロールを無効にする方法 ドロワーメニューを左側に表示するときにコンテンツ側を固定するときなど //
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
【翻訳まとめ】jQuery 3.0 alpha リリースノート - Qiita
3.0正式版がリリースされたので、新しい記事を書きました 【翻訳まとめ】jQuery 3.0 アップグレードガイド tl;dr jQuery 3.0 alphaがリリース .hide()と.show()に後方互換性のない変更あり（注意！） jQuery.DeferredがよりPromises/A+に準拠 .width()と.height()が小数値を返せるように 非推奨の.load, .unload, .errorや、ajaxの.success(), .error(), .complete()が廃止 requestAnimationFrameの復活 はじめに 2015/7/13にjQuery 3.0 alphaがリリースされました。 http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versio
ズンドコキヨシをフォントで - Qiita
.zundoko { font-family:zundoko,sans-serif ; -webkit-font-feature-settings: "ccmp" 1 ; font-feature-settings: "ccmp" 1 ; } これで「ズンズンズンズンドコ」と書いた部分が、自動的に「キ・ヨ・シ! 」と表示されるようになります。 仕組み Opentypeのフォントフィーチャーを利用しています。特定の文字の組み合わせを別の字体で表示する合字機能を使って、「ズンズンズンズンドコ」で特定の文字「キ・ヨ・シ! 」を表示する仕組みです。実は「キ・ヨ・シ! 」は一つの文字です。通常の文字はカタカナのグリフのみ持っています。 合字機能は、ブラウザによって自動的に動作しますが、 Chromeでは -webkit-font-feature-settings: "ccmp" 1 ; の指定が必要
若者はどうやってCSSを覚えたのか - Qiita
先日、@Jxckさん主催で行われた次世代WebカンファレンスでCSSのセッションに登壇させていただきました。（動画） セッション中に@cssradarさんに「morishitterはどうやってCSSを覚えたのか」と聞かれ曖昧にしか答えられなかったので、 自分が今までどうやってCSSを学んできたのか を振り返ってみる。 黎明期 プログラムを書き始めたのは3年半ぐらい前からだと思う。PHPでWebアプリを書いたのがはじめで、そのときにBootstrap v2をベースに何もわからないまま、雑にCSSを書いた。 BootstrapのようなCSSフレームワークからCSSを始めると、floatやpositionのようなレイアウトに関わるプロパティがどういうものなのかを知らなくても、何となくでWebアプリのレイアウティングができる。 そしてブラックボックス化されたBootstrapのコードを読もうとして
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
Font Awesomeで回転したいときfa-spinが便利 - Qiita
<div> <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
git ftpを使えるようにする(Windows, Mac) - Qiita