サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
qiita.com/rana_kualu
って海の向こうの人が言ってました。 私は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
可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key
フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft 先日2018年の最先端フロントエンドエンジニアになろうという記事を訳したのですが、そのリポジトリにはバックエンドとDevOpsのロードマップ画像も置いてあります。 しかしバックエンドのテキストにはTODOの1行だけで、動きがありませんでした。 解説が追加されないかなー、と思ってたら別の人がやってたのを見付けました。 ということで以下はModern Backend Developer in 2018の日本語訳です。 Modern Backend Developer in 2018 こんにちのWeb開発の様相は、数年前とは全く別物です。 Web開発には多すぎる選択肢があって何をすればいいのか迷います。 それが、これらのステップを視覚的に表し、段階的にWeb開発を行っていくためのガイドラインを作
以下は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
Original article:https://blog.cassidoo.co/post/producivity-apps-2023/ 以下はCassidy Williams ( dev.to / Twitter / GitHub / Webサイト ) による投稿、The Productivity apps I use in 2023の日本語訳です。 技術者には珍しくWebサイトがファンシー。 The Productivity apps I use in 2023 お気に入りのツールや、それをどう使って仕事を進めるのかについてよく聞かれます。 その質問に答えるため、そして次に同じことを聞かれたときにリンクを投げつけるために、この記事を書いています。 効率的ですね! 昨年にも同じ記事を書きましたが、全てを書ききれていなかったのと、さらに書き足したいことがあったことに気が付きました。 なお
<link href="https://fonts.googleapis.com">って書くと罰金取られます。 以下はGerman Court Rules Websites Embedding Google Fonts Violates GDPRというニュースの紹介です。 German Court Rules Websites Embedding Google Fonts Violates GDPR ドイツのミュンヘン地方裁判所は、あるWebサイトの運営者が、ユーザの個人情報を本人の同意なしにフォントライブラリを経由してGoogleに提供したとして、100ユーロの賠償を命じました。 Webサイトが原告のIPアドレスをGoogleに無断で提供したことは、ユーザのプライバシー権の侵害に当たると判断しました。 さらに、Webサイトの運営者は収集した情報をその他のデータと突き合わせることで『IPア
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
以下はThe Mistakes I Made As a Beginner Programmerの日本語訳です。 The Mistakes I Made As a Beginner Programmer 初心者プログラマが犯しがちな間違いと、それらを特定し、避けるための習慣を学ぶ方法。 まず最初に言っておくことがあります。 この記事は、誤りを犯すことを悪いと糾弾するために作成されたものではありません。 むしろ貴方が誤りに自ら気付き、あるいはその兆候を見いだし、それらを避けられるようにするために書かれたものです。 私は過去これらの誤りを犯し、それぞれから学びを得てきました。 今ではこれらを避けるようなコーディングを習慣付けるようにしています。 貴方もそうしましょう。 紹介は順不同です。 1) 設計せずに実装する 高品質なコンテンツは、一般的には容易に作成できるものではありません。 それには慎重
以下はjavinpaul( Webサイト / Twitter / Facebook / dev.to )による記事、11 Essential Skills Software Developers should Learn in 2020の日本語訳です。 なおリンク先URLは元記事のままであり、和訳にあたり変更などは行っていません。 11 Essential Skills Software Developers should Learn in 2020 注意事項:この記事にはアフィリエイトリンクが含まれています。 この記事に記載されているリンクを踏んで製品やサービスを購入すると、私が利益を受けとることがあります。 ソフトウェア開発を始めてしばらくすると、優れたプログラマになるには何をすればいいのかという考えが時によぎるでしょう。 より良い開発者になるために、2020年には何を学ぶべきでしょう
Original article:https://dev.to/dotnetsafer/rip-copy-and-paste-from-stackoverflow-trojan-source-solution-4p8f その昔コピペできない文章というものがありました。 実際は単にフォントを変えているだけというものですが、人間の目に見える文字と実際の文字が異なることを利用した攻撃の一種と見ることもできます。 さて、最近になって似たような攻撃に関する論文が公開されました。 人間には見えない文字を織り交ぜることによって、一見問題ないコードが実は脆弱になってしまうというものです。 ただ論文は堅苦しいうえに長くて読むのがつらいので、具体的に何がどうなのかよくわかりません。 平易に解説している記事があったので紹介してみます。 以下はDotnetsafer( Twitter / GitHub / Web
以下はVitor Paladini ( Twitter / GitHub / dev.to ) によるVS Code shortcuts that I would teach myself if I had a time machine with limited fuelの日本語訳です。 VS Code shortcuts that I would teach myself if I had a time machine with limited fuel 「やあ俺だ。黙って聞いてくれ。時間がないんだ。」 「待って待って、お前誰だ。どうやって部屋に入ってきた。あとどうして俺そっくりなんだ。」 「俺は未来のお前だ。ここまで来たのは、特別にVSCodeのショートカットを教えるためだ。さあいくぞ」 「正気か?ロト6の番号でも株式情報でもなく、わざわざVSCodeのショートカットを教えにやってきた
VisualStudioCodeは大人気なだけあって、有能なエクステンションが次から次へと出てきますね。 色々とっかえひっかえ試して遊んでいる人も多いのではないでしょうか。 なんかMinecraftのMOD環境構築と同じ空気を感じますね。 (環境ができたところで飽きて遊ばなくなる) まあ一番手っ取り早いのは、既に評価の固まっている手堅いエクステンションを導入することです。 ということで以下はSahil Bondre( Twitter / GitHub / LinkedIn / Instagram / 個人HP )による記事、💡 10 VS Code extensions I can't code withoutの日本語訳です。 💡 10 VS Code extensions I can't code without VSCodeは私のお気に入りのエディタです。 存在するコードエディタの
Firefox / Safari MozillaはMozilla Specification Positionsというリストを公開しています。 IETFやW3C、TC39などが提唱しているWeb技術に対して、Mozillaはどのように評価しているかという立ち位置を表明したものです。 あくまで現時点での評価であり、もちろん今後の仕様変更などに伴い評価は変わる可能性があります。 Mozilla's Positions Mozillaはどのように評価しているかの分類。 under consideration 評価の検討中。 important 優れた概念であり、Mozillaにとっても重要である。 worth prototyping 優れた概念であるが、プロトタイプを作成し、フィードバックを得て磨きをかける必要がある。 non-harmful 有害ではないが、良いアプローチではなく、取り組む価値
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
早く人間になりたい。 以下はEmma Wedekindによる記事、101 Tips For Being A Great Programmer (& Human)の日本語訳です。 101 Tips For Being A Great Programmer (& Human) 1. Get good at Googling Googleの使い方を知ろう。 プログラマであるということは、問題に対する答えを探す能力があるということです。 Googleのうまい使い方を知ることで、開発にかかる時間を大幅に節約することができます。 2. Under promise and over deliver 約束は控えめに、出来高は多めに。 タスクに2週間かかるようなら3週間かかると伝え、2週間で提出しましょう。 期待を上回った結果を出すことで、信頼を築くことができます。 3. Be nice to your d
2022/01/17追記:この方法では無効化できません。【Chrome】ServiceWorkerを今度こそ決定的かつ完全に消去するを参照してください。 ServiceWorkersというAPIが存在します。 ブラウザをフルスクリーン表示したり、デスクトップにアイコンを作成したり、PUSH通知を行ったり、バックグラウンドでJavaScriptを動作させたりといった機能を提供します。1 見てのとおりユーザには何一つ利のない機能なので、必ず無効化しましょう。 なに、動かなくなるサイトがあって困る? 大丈夫。 ServiceWorkersがないと動かないサイトは、存在そのものが不要なサイトです。 手順 PC版Chrome URLにchrome://flags/と入力すると、全面英語の設定画面のようなものが出てきます。 最上部の検索欄に「Worker」および「PWA」「Progressive」と入
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ! こ
先日Herokuの完全有償化が発表されて以降、蜘蛛の子を散らすようにHerokuからの脱出が図られています。 そんなわけで概ねHerokuの代替となりそうな無料サービスを紹介していきます。 ほとんどの代替サービスは完全無料というわけではなく、機能の少ない無料プランと高機能の有料プランが存在します。 有料化前のHerokuと同じということですね。 各サービスについて、実際に使ってみたという参考記事を貼っておくので、実際の使い勝手等はそちらを参照してください(他力本願) Qiita内に使ってみた記事が見つからなかったサービスは、日本では人気がないのだろうということで選外にしました。 また概要は、各サービスの説明やドキュメントに記載されているものです。 代替サービス一覧 FLy Flyはグローバルなアプリケーション配布プラットフォームです。 Turbokuを使えばHerokuアプリをFly.io
CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。
rm -rf /やったことある人。 私はないです。 以下はAndreas Müller( Twitter / GitHub / LinkedIn / Medium )による記事、9 Evil Bash Commands Explainedの日本語訳です。 9 Evil Bash Commands Explained 初めてターミナルを使って、そしてそれを理解したときのことを覚えています。 あらゆるファイルにアクセスし、全てのプログラムを実行し、黒い画面に何かを入力するだけでシステムの全てを完全に掌握できることに気がついた、あの感覚。 そしてもちろん、致命的ミスを犯して全てを失った、あのときの恐怖も。 私は本当はシステム管理者ではありませんが、長年にわたってLinux/UNIXベースのシステムで作業してきたので、コマンドを実行しようとしてEnterキーを打つことを躊躇う状況に何度も遭遇しまし
Sizzyというツールがあります。 様々なサイズの画面を同時に表示し、レスポンシブレイアウトがどうなるかを一気に確認できるという便利なツールです。 スマホ向けWebサイトを開発している人なら、持っていると非常に便利でしょう。 参考:レスポンシブの確認ツール、後発だけに便利!スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy / 『Sizzy』様々なデバイスでのサイト表示を確認出来る便利サイト さてこのSizzy、元々無償のChromeエクステンションだったのですが、先日2019年7月に単独のアプリとして有償化されました。 一人あたり月5ドル(団体割引あり)のサブスクリプション制です。 以下は作者のKizte( Twitter、Medium、Webサイト )がその理由や経緯を綴った記事、GitHub stars won't pay your rentの日本語訳です。
先日よりThe State of JavaScript 2018というアンケートが行われていたのですが、その集計結果が公開されたのでざっくりと紹介してみます。 回答者数は2万人超としか書かれてなくて正確な数は不明です。 というか全体的に大まかな集計結果しか出てなくて、もっと詳しいデータが欲しければ直接連絡しろという方針らしいです。 ちょっと残念。 The State of JavaScript 2018 Introduction 2万人以上のJavaScript開発者が回答したよ。 結果の概要はMediumに投稿してるよ。 色々なプロジェクトを紹介してるけど、その一部はスポンサーになってもらってるよ。 このアンケートはSacha Greif、Raphael Benitte、Michael Rambeauによって作成、維持されているよ。 SachaはVulcan.js、RaphaelはNiv
数年前であれば仕方なかったところですが、2018年の今となっては、パスワードハッシュの手動計算はもはや"悪"です。 まずログイン認証と称してmd5とかsha1とか書いてあるソースはゴミなので投げ捨てましょう。 hashやcryptは上記に比べればずっとマシですが、使い方によっては簡単に脆弱になりえます。 あと『パスワードを暗号化する』って表現してるところも見なくていいです。 PHPには、ハッシュに関わる諸々の落とし穴を一発で解消してくれるpassword_hashという超絶便利関数があるので、これを使います。 というか、これ以外を使ってはいけません。 以下はフレームワークを使わずに実装する際の例示です。 フレームワークを使っている場合は当然その流儀に従っておきましょう。 ハッシュの実装 データベース ユーザ情報を保存するテーブルを作成します。 パスワードカラムの文字数は、システム上のパスワ
以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。 ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。 ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。 配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco
以下はMostafa Gaafarによる記事、7 New Exciting JavaScript Features You Need to Knowの日本語訳です。 7 New Exciting JavaScript Features You Need to Know JavaScript ( ECMA Script ) は進化する言語であり、たくさんのproposalやアイデアが出番を待ち受けています。 TC39 (Technical Committee 39) という委員会がJavaScript標準と新機能の定義を担当しています。 そして今年は彼らの活動が活発になっています。 以下は、現在ステージ3にある提案の一部の紹介です。 ステージ3は完成する直前の段階です。 これはつまり、この機能がブラウザやその他のJavaScriptエンジンにすぐに実装されることを表しています。 実際、以下の
結果は順にtrue、true、falseです。 これがPHP7までの非厳密な比較(等価)演算子だったわけですが、まあおかしいよねってことで、この挙動がPHP8.0で変更になることになりました。 よもや今さら基本中の基本である比較演算子の動作を弄ってくるとは思わなかったぞ。 以下はSaner string to number comparisonsの日本語訳です。 PHP RFC: Saner string to number comparisons Introduction ==やその他の非厳密な比較演算子を用いた文字列と数値の比較は、現在は、文字列を数値にキャストし、その後整数か浮動小数の比較を行っています。 この結果、多数の不可解な結果が得られますが、中でも注目すべきは0 == "foobar"がtrueになることです。 このRFCでは、文字列が実際に数値型文字列である場合にのみ数値型
PHPは長きにわたり同期的、すなわち、あらゆる処理を上から順に実行していくというスタイルを取ってきました。 しかしたとえば、複数のURLからデータを取ってきて結果をまとめたいといった場合、時間のかかるHTTPリクエストは同時に投げたいですよね。 この用途にはGuzzleというライブラリが存在し、これを使えば同時にリクエストを投げられます。 しかし、ではHTTPアクセスとDBアクセスを同時にやりたい場合は? 時間のかかる計算を裏でやりたい場合は? などと考え始めると、こういった個別のライブラリでは対処しきれません。 ということで汎用的な非同期処理をPHPで書けるようにするRFCが提出されました。 PHP RFC: Fibers Introduction 人類史上ほぼ全ての期間において、人々はPHPを同期的なコードとしてのみ書いてきました。 同期的に実行されるコードのみが存在し、そしてそれを同
次のページ
このページを最初にブックマークしてみませんか?
『@rana_kualuのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く