フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ - Qiita
概要 フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。 使いやすそうなツールがあれば追記していく予定です。 ドキュメント類 何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで mdn (Mozilla Developer Network の略) ウェブ標準ドキュメント 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する Can I use ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる ジェネレーター系 Interactive CSS Grid Generator Gridを使ったレイアウトをGUIで作り、コード生成できる そのレイアウトをもとにCodeP
エンジニアのための十徳ナイフ「DevToys」が便利すぎる - Qiita
DevToysとは デベロッパーのためのスイスアーミーナイフの紹介文の通り。 開発時によく使うツールを十徳ナイフのようにまとめたアプリになっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機能のショートカットを探したりせずとも、これ一つですぐにできます！ インストール Microsoft Storeからインストールできます。 公式サイトからストアへのリンクを踏むか、ストア検索して見つけてください。 WinGetやChocolateyでもインストール可能です。 Microsoft StoreアプリなのでWindowsでしか使えませんが、Macユーザーの方は気を落とさずにこちらの記事をどうぞ！ また、作者曰くMacにはDevBoxやDevUtilsなどの類似ツールが既にあるため非対応だそう
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
デザイナーでも分かる範囲のReact、その書き方と学び方 - Qiita
これは何 「デザイナーもReact書いてくださいよ」って空気になったときに読むと役立つかもしれない記事です 基本的に筆者が学んだ流れを記載しています そのため、世間一般のベストプラクティスではないと思います エンジニアの方から見ると邪道な流れ・説明の仕方かもしれませんが、デザイナーに教える上での分かりやすさを重視していますのでご了承ください この記事の中で使っているコードはこちらのリポジトリで公開しています コミットを辿ってもらえれば、各セクションの内容が全て見れます ※言い訳がましいですが、筆者もReactに精通している程ではなく「デザイナーにしては割と知ってる」レベルです もし説明に間違いや不足があれば編集リクエストをお願いします 対象読者 Web or UIデザイナー HTMLとCSSは普通に書けるけど、Reactはほぼ全く触ったことがない人 1人で完全に実装したいってほどではないけ
エンジニアなら知っておきたい生産性を爆上げするツール8選 - Qiita
はじめに 今まで自分が使ってきた中で、これは生産性が爆上げする！と思うものを厳選しました 是非最後までご覧ください 1. Biscuit 公式サイト -> Biscuit 複数のアプリをグループ分けしたり、まとめることができるアプリケーション 調べ物が多いエンジニアは、Chromeのタブがカオスになっていることがよくあります 個人的にはあれこれなんでも登録するのではなく、よく使うアプリだけをまとめるのが良いかなと思っています 設定のインポートやエクスポートも簡単なので、別のPCへの移行も楽チン 僕のBiscuitはこんな感じです⬇︎ 2. Notion 公式サイト -> Notion 結論から言うと、私はNotionがないとダメな体になっています 出会いは2020年の2月頃、メモ帳よりも自由度が高くて何か良いものはないだろうかと模索していた頃にジャストフィットしました 単純なメモも取れる、
1分でも早く仕事を終わらせるためにVSCodeにできること - Qiita
はじめに 本投稿は『VSCodeが最強のエディタだ!!』などといったことを伝える記事ではありません。 数あるエディタの中の『VSCode』に焦点を当てて、作業効率化できるための使い方をまとめたものです。 いくつかのテーマに分けて、ご紹介させていただきますので、興味のあるところを拾い読みしていただければと思います。 (スクリーンショットについては、随時更新させていただきますが、古い場合があります。ご容赦ください。) 1.ショートカット ショートカットはかなりの数があるので、今回は『1日の作業の中で登場頻度が多そうな操作』に焦点をあてて、効率化を目指していきます。 ショートカットを覚えることで、ある程度の操作はマウスに触らずにできるようになります。 1つ1つの効果としては微々たるものですが、操作頻度の多いものであればあるほど、効果が期待できるので、覚えることをオススメします！ VSCodeを閉
VSCode に必ず入れておきたい拡張機能 - Qiita
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ
IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita
Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。
VSCodeのマルチカーソル練習帳 - Qiita
VSCodeを使いこなしている人がカーソルを複数置いて手早く作業してて、カッコいいなと思ったことありませんか？こんな感じで。 私はマルチカーソル使います(キャー素敵！)。冗談はさておき、VSCode使ってる人全員がマルチカーソル使ってるわけではなさそうだと最近知ったので、基本をまとめてみました。 なお記事では、以下のテキストをサンプルとして使用しています。お手元にVSCodeを用意できる方は、サンプルを使って同じ操作を試しながら覚えてみてください！ { "id" : "12345678-1234-1234-1234-123456789012", "title" : "myTitle", "content" : "myContent", "createdAt" : "2019-09-01 00:00:00", "createdUser" : "12345678-1234-1234-1234-
プロジェクトリーダーというお仕事 - Qiita
概要 そろそろ年度末だし、新年度からプロジェクトリーダーとしてやっていく人もいるかと思うので、プロジェクトリーダーはどういうことをしないといけないかと、心得的なものを投稿しようと思います。今業界全体的にリーダー不足になってるんで、プロジェクトリーダーという役割について興味持ってくれる人が増えると嬉しいです。 ※ここでのプロジェクトとはシステム開発等IT関連のプロジェクトを指すものとします。 軽く自己紹介 2013年頃から7年くらいプロジェクトリーダーとして請負業務などの仕事をしてきました。最近はプロジェクトマネージャーも兼ねてやっていたり、うまくいっていないプロジェクトにコンサルとして入って立て直すというようなこともしています。 レジュメ https://www.resume.id/branch まずは結論から プロジェクトリーダーの使命 「担当するプロジェクトを成功へと導く」 「プロジェ
仕事の進め方の良し悪しを見える化したら、各自が自分で行動を改善してくれた話 - Qiita
はじめに プログラミングの仕事を効率的に行うためには、プログラミングの知識だけでなく、仕事の進め方も大事と思います。 10年近く前、私のプロジェクト(C#での開発業務)は自分も含めて若手が多く、次のような「仕事の進め方」の問題が多々有りました。 1つの不具合の修正に対して、10時間以上かけて実装したが、そもそも修正方針が間違っていたため、最初からやり直しとなった。 レビュー指摘の修正時に、類似の問題が他にないか横展開調査をしないため、何度も差し戻しが発生した。 そこで、当時の私はプロジェクトメンバーの仕事の進め方を改善する方法を考えました。一般的には「問題を見える化」することで問題が改善されると言われています。逆に言うと、問題は見えないままでは改善されません。 つまり、各自の仕事の進め方の良し悪しを見える化が必要でした。従って、仕事の進め方の良し悪しを測るチェックシートを作成し、その評価結
平成のうちにやめたかった『ITの7つの無意味な習慣』 - Qiita
2019年の今年は「令和元年」であるわけだが、年初はまだ「平成31年」だったので、ギリギリまだ平成ともいえる。ところで、ITの世界にもいろいろな都市伝説や根拠は薄いけれどもかっちり守られているしきたり/習慣があり、少なくとも今の世界では通用しないため本当は改善したほうがいいのだが業界的にずるずるといってしまっていることが色々と存在する。年末の今、平成を思い返したときに元IT企業に勤めていた人間として「この習慣は平成のうちに終わらせておかねばならなかっただろうに！」と悔やまれることを7つ挙げてみた。 ※ちなみに、諸君のまわりでこれらをすべてやめられている人がいたならば本当に神である、というのが残念ながら今の現状だ。 【7位】 2要素認証でない「2段階認証」 これは令和元年にセブンペイサービスの停止でだいぶ話題になったので、認識されている諸君も多いかもしれない。話題になったのは大手企業のサービ
HTMLとCSSでカレーライスを作った - Qiita
カレーライスを作りました ※スマホではバグりますすみません See the Pen カレーライス by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen. どうやって作ったの この記事ではカレーライスをHTMLとCSSで作ったときのポイントをいくつか抜粋したものを紹介します。 実業務ではきっと役には立ちませんので、 「CSSってこんな表現できるんだな」・「CSS楽しい」と思っていただければ幸いです。 パーツを細かく作る カレーのカレーによるカレーのためのAtomic Designの記事で言及した、 Atomic Designの考えを元にして作りました。 Atomsの用意 にんじん じゃがいも 牛肉 切った具材 米 皿 これらをどう作ったか後ほど解説します。 （厳密には米はMoleculesですが、まぁよしとしましょう。） これらを全て組み合わせ
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下は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 あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
IT業界のルー大柴と渡り合うためのカタカナ用語一覧 - Qiita
イントロ 別にディスってません。 実際にカタカナめっちゃ飛び交ってますからね。コミットはオフィシャルにアプライとか日本語２文字やん。 ということで彼らの会話を理解するために、とりあえずドラフトでアップしちゃって今後アップデートして行きます。 書いとこかな？と思ったものだけ書いておきます。 なぜルー語が飛び交うか 初めに個人的に考察した結果。 技術自体が英語圏から直輸入（プログラミングとか） そのため 日本語変換 < カタカナ変換 の方が楽 一言に沢山の情報を詰め込める（エンジニア気質） 漢字二文字くらいの言葉を多用するのもおそらくこの意味合い 上記を踏まえ、わざわざ日本語に変換する意味がない ※キリがないので都度更新していく ※一部マーケよりかも ※DAI語は基本入れず ※五十音順に訂正(19/9/9) ※いくつか追加(19/9/10) ※アドホック、ワークアラウンド 追加(19/10/9
【WordPress】WordPressのここがダメ - Qiita
巷では、少し前からアフィブログを WordPress で作るのが流行っているようですが、主に PHP 開発者＆サーバー管理者の観点から、WordPress のダメだと思うところを、思うままに書いてみました。 WordPress をディスるつもりはありませんので、注意喚起：解決法：ポエム ＝ 4：1：5 ぐらいの感覚でご覧いただければ幸いです。 ⇒ 【WordPress】WordPressのここがイイ 1.設計が古すぎる 先日書いた記事で、気になって admin-ajax.php のコードを眺めてみましたが、Oh... これは酷い…。 require_once が連呼され、global 空間に define() とコンフィグ用の配列が入り乱れ、$_GET $_POST $_REQUEST が舞い踊り、ファイルはクラスどころか関数にすらなっていない…200 行に満たないコードはネタの宝庫で、1
xamppのPHPを最新バージョンに上げる - Qiita
はじめに Laravelを試さなくてはいけなくなったので、Laravel開発環境を作らなければいけなくなりました。 WindowsPCなので開発環境はxamppで構築しようと考えていますが、以前PHP開発環境を作るためxamppをインストールしており、PHPのバージョンが古いため、PHPのバージョンを上げることでLaravelの開発環境構築の準備を行いました。 PHPの最新バージョンをダウンロード ダウンロードはこちら から最新のPHPをダウンロードする。 ダウンロードしたPHPファイルを配置 xamppフォルダの既存のPHPファイルを念のためバックアップで確保し、上記でダウンロードしたファイルと入れ替える。 Apacheが起動しない・・・ これで起動すればPHPのバージョンが上がっているはず！ と思ったのですが、エラーが発生してApacheが起動しない・・・ エラー1 phpファイル書き
牛乳卵問題に学ぶ、`要望` と `要件定義` と `設計` と `実装` の違い - Qiita
はじめに 有名なプログラマージョーク プログラマの夫に「買い物にいって牛乳を1つ買ってきて。卵があったら6つお願い」と言ったら、夫は牛乳を6パック買ってきた。 プログラマーを笑う自虐ジョークとして使われがちですが、 良い題材なのでこれを元に要望 と 要件定義 と 設計 と 実装 の違いを纏めてみましょう。 下記、それぞれのフェーズの原理原則論を記載します。 各フェーズの原理原則 1. 要望 顧客(妻)の要望 を書き出す：顧客の仕事 買い物に行って牛乳を1つ買ってきて、卵があったら6つお願い。 2. 要件定義1（ダイジェスト） 顧客の要望から曖昧な点を除いて復唱する：PMの仕事 上記だとプログラマーの夫は牛乳を6本買ってきました。夫は妻に、要望をより具体的な形で復唱する必要があります。 ここでは、卵を6つ買ってくるという事を確認することで事故を防ぐことができます。 牛乳を1本買ってくる 卵が
わかる！Firebase ～全てのサービスをおつまみ紹介～ - Qiita
はじめに Firebase がちょっとバズってるようなので、「Firebaseって何？どんなことができるの？」をざっとまとめました。 TL; DR（3行で言うと？） Google「君らサービス開発する時、毎回似たようなもの用意したり作るでしょ？それもうやっといたから。まとめてFirebaseって呼ぶわ。」 Google「サーバを持ってない？必要ならマシン貸すよ。もしサーバを管理したくないならソースコードだけくれたらそれで勝手にホスティングしてオートスケールするよ」 Google「お金？個人の趣味範囲なら要らんよ」 それぞれのサービスを紹介（アプリの開発とテスト編） Realtime Database NoSQL で JSON をやりとりできる DBサーバとクライアントがダイレクトに通信するイメージ 中間にサーバを経由しない分高速 その分セキュリティが心配かもしれないが、しっかり権限を絞れる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
