ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
リクルートテクノロジーズ エンジニアコース新人研修の内容を公開します！（2020年度版） | Recruit Tech Blog
こんにちは！ リクルートテクノロジーズでセキュリティエンジニアとして活動している、藤原 巧です。 毎年恒例となっており、大きな反響をいただいている、エンジニアコースの新人研修の内容を紹介させていただきます。 研修の概要 リクルートテクノロジーズでは、新卒採用の新人向けに３ヶ月間の技術研修を行っています。この技術研修では大きく分けて２つのコースが設けられています。 1. プログラミングやWebサービスの構造の基礎を体系的に学び、その後一人につき、ひとつのスマホサイトを企画からリリースまで行うコース 2. 一定以上のプログラミングスキルと開発系経験がある新人に向けた、実際の開発で必要となる様々な技術要素をより深く学び、その後実際のサービスでチーム開発にてOJTを行うコース 今回公開するのは 2. で使用した資料です。 この技術研修は、そのほとんどの部分を内製で実施しています。 この研修の最大の
はじめに エンジニアやデータサイエンティストの人材育成のためのオープンソースな教材を探していたらMicrosoftがGitHubでかなり質の高い教材をweb開発、データサイエンティスト、機械学習、IoTの四項目を対象に提供してるのを発見したため共有したいと思う。 正直、マイクロソフトと聞くとGoogleやらFacebookに比べていけてないイメージを持っていたけど、実際にMicrosoftのGitHubレポジトリを見て、彼らはここ数年で大きく変わったように思える。特に人材育成や学習教材に関しては世界一かもしれないなんて思っています。本記事では筆者が自信を持っておすすめするMicrosoftのオープン教材を紹介するのでぜひ自身の勉強や人材育成に生かしてもらえれば本記事を執筆した甲斐があります。（もちろん僕がお勧めしているだけでなくてGitHubのスター数も多く世界的に認められています！） こ
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな
ユヴァル・ノア・ハラリ、オードリー・タン対談「民主主義、社会の未来」全和訳 | AI新聞 | exaBase コミュニティ（エクサベースコミュニティ）
iStock:NicoElNino We translated RadicaxChange’s original article “To Be or not to Be Hacked? The Future of Identity, Work and Democracy.” Into Japanese with the permission of Audrey Tang and Michael Zur of Yuval Noah Harari International Office. This is an abridged version of the whole conversation. The whole conversation is available as a YouTube video. イスラエルの歴史学者ユヴァル・ノア・ハラリ氏と、最先端のコロナ対策で一躍世界の注目
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
【徹底解説】これからのエンジニアの必携スキル、プロンプトエンジニアリングの手引「Prompt Engineering Guide」を読んでまとめてみた | DevelopersIO
【徹底解説】これからのエンジニアの必携スキル、プロンプトエンジニアリングの手引「Prompt Engineering Guide」を読んでまとめてみた こんにちは。CX 事業本部 Delivery 部のきんじょーです。 ここのところChatGPT と戯れてアプリを作ったり、様々なプロンプトの検証をしていましたが、言語モデルの性能を最大限に引き出すために、体系的にプロンプトエンジニアリングを学びたいと考えていました。 GitHub に「Prompt Engineering Guide」という素晴らしいリポジトリがあったので、読んで検証した内容をブログにまとめていきます。 本記事は、執筆時点の上記リポジトリの内容を元にしていますが、意訳や独自に検証した日本語のプロンプトを含みます。 上記リポジトリも絶賛開発中の段階のため、最新情報や原文が気になる方はリポジトリを直接参照してください。 目次 プ
フロントエンドのデザインパターン
本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
https://martinfowler.com/articles/branching-patterns.html 最新のソース管理システムには、ソースコードのブランチを簡単に作成できる強力なツールが用意されています。しかし、最終的にはこれらのブランチをマージしなければならず、多くのチームは混み合ったブランチに対処するのに膨大な時間を費やしています。複数の開発者の作業をインテグレーションし、本番リリースまでの道筋を整理することに集中して、チームが効果的にブランチを利用できるようにするためのパターンがいくつかあります。全体的なテーマとしては、ブランチを頻繁にインテグレーションし、最小限の労力で本番環境に展開できる健全なメインラインを作ることに注力すべきだということです。 ベースパターン ソースブランチング ✣ メインライン ✣ 健全なブランチ ✣ インテグレーションパターン メインラインイン
Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
デザインシステム｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し、ウェブサービス・ウェブアプリケーションの使い勝手や情報の探しやすさ、アクセシビリティ等の向上に取り組んでいます。 その一環として、「デザインシステム」の構築を推進し、官民問わずすべての方が参照できる形で公開しています。よりよいデザインの普及・啓発に向けて拡充と更新を継続的に行い、あらゆる人がデジタル化の恩恵を享受できる社会に貢献します。 2024年5月30日 デザインシステムのコンテンツは専用サイト「デジタル庁デザインシステムβ版」へ移行しました 専用サイトで、ガイドラインやデザインデータ等の各アセットを案内しています。 イラストレーション・アイコン素材 行政手続きをもっとわかりやすくするために作成した素材集です。どなたでもご利用いただけます。 最近の取組2024年5月 専用サイト「デジタル庁デザインシステムβ
はじめに 昨今の採用現場においてはソフトウェアエンジニアは売り手市場と言われ数年が経過していますが、2023年現在においても、デジタルトランスフォーメーションの加速により、これまでのIT企業の募集だけではなく、様々な企業がソフトウェアエンジニアを募集している状況にあると思います。 知り合いのリクルーターに話を聞くと、ここ最近米国のBigTech企業や、日本初のベンチャー企業のレイオフが目立ちますが、それはごく一部であり、多くの企業では引き続きソフトウェアエンジニアの需要は最も高く、この先10年以上はこの高い需要は続くだろうと言っていました。 引用元: 【2023年最新】厳選！エンジニア採用に強い15の採用媒体比較～最新市場動向や採用戦略も徹底解説 - type 私自身が就職した10年数年前は望んでソフトウェアエンジニアに就く人は理系出身のプログラミング趣向が強い人ばかりという印象でしたが、
クレカ情報の流出があったタリーズオンラインストアのWebアーカイブから原因を特定した猛者が現れる→集まった有識者たちにより巧妙な手口が明らかに
あらおじ @ojigunma すごい タリーズの原因発見してる人いる 確かにナンカある slick.min.js という画像をスライドするファイルの中に 難読化された悪意のあるコードが追記されてるっぽい 難読化は４段階ぐらいされてるらしい これブラウザとかセキュリティソフトで気づくのは無理なんだろか。。。 x.com/motikan2010/st… Niishi Kubo | GitLab,Limeboard @n11sh1_ クレカ情報漏洩の件、技術的な原因特定はこの投稿が一番分かりやすかった。 slick.min.js（画像切り替えのライブラリ）を改ざんされてマルウェアが仕込まれて、クレカ情報はサーバーに送信される前にフロントエンドから外部に送信されていたらしい。Content-Security-Policy がレスポンスヘッダーにきちんと設定されていれば悪意あるドメインに対しての通信
Smoozサービス終了に寄せて
202012_smooz.md Smoozサービス終了に寄せて 前置き この文章と、それに含まれる考察や各サービスへの脆弱性報告などはmala個人の活動であり、所属している企業とは関係ありません。 一方で私は、企業が閲覧履歴を収集して何をしたいのか、所属してる企業や他社事例について、ある程度詳しい当事者でもあります。 一般論として書けることは書けるが、(業務上知り得た知識で開示されてないものなど)個別具体的なことは書けないこともあり、また観測範囲に偏りがある可能性もあります。 Smoozに報告した脆弱性2件 最近、Smoozというスマホ向けのブラウザアプリに2件脆弱性の報告をした。 この記事を書いている時点で、Smoozの配布が停止されていて、修正バージョンの入手が出来ない。 2件目についてはまだ返事が来ていない。 脆弱性情報の開示にあたって特段の許可は得ていないが、開発元からも利用停止す
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
GitHub - Tokyo-Metro-Gov/covid19: 東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
DuckDuckGo（https://duckduckgo.com）はプライバシーの保護に重きを置いている検索エンジンのひとつである。 特筆すべきは、Bangという機能があって、探しものがとてもはかどる。 たとえば「!a 図書館」（ビックリマーク＋アルファベットのa＋スペース＋検索語）と入力するとAmazonを検索してくれる。 こんな風に「!＋何か」 で特定のサイトのみの検索ができる機能がBangである。 検索エンジンが使えなくなった（クズみたいなサイトが上位に来て、欲しい情報が見つからない等）と言われて久しいが、探すべきサイトにダイレクトで検索することで、この問題のかなりの部分が解決する。 よく使いそうなのは ! （キーワード） 最初の検索結果へ直接ジャンプ !i イメージ検索 !m 地図検索 !n ニュース検索 !v 動画検索 !w ウィキペディア検索 !pdf PDFファイルだけを検
保守性の高いソフトウェア開発のTips集
保守性の高いソフトウェアの開発に役立つ様々なTipsを書いた。 特定の言語にとらわれずあらゆる場面で役立つことを集めた。
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
2021年、企業が無償公開した新人エンジニア向け研修資料 機械学習やゲーム開発、AWS入門、数学などさまざま
2021年、企業が無償公開した新人エンジニア向け研修資料 機械学習やゲーム開発、AWS入門、数学などさまざま（1/2 ページ） 2021年、さまざまな企業が自社の社内研修資料を無償公開したことが話題になった。ITmedia NEWSでは主に、新人エンジニア向けに公開した資料などを記事として取り上げたところ、多くの反響が集まった。 学べる内容は、機械学習やIT業界の文化、ゲーム開発、セキュリティ、AWS入門、数学など各社さまざま。100ページ以上のスライドや5時間を超える動画などの資料もあり、新人教育への力の入れ具合も垣間見える。改めて、2021年に企業が無償公開した、社内研修資料を取り上げた記事を紹介する。 セガ、3DCG技術の基礎に役立つ数学資料 セガは6月15日に、2020年に社内勉強会で使った線形代数の教材を公式ブログで公開した。ゲーム制作では、キャラクターや背景を3次元で回転させた
「VS Code Meetup」は、強力かつ軽量なオープンソースのコードエディター「Visual Studio Code」のミートアップです。今年もVS Code Meetup 主催の年次カンファレンス、「VS Code Conference Japan 2021」が開催されました。招待講演では、SF作家の藤井太洋氏が登壇。VS Codeで執筆を支援する機能拡張「novel-writer」の制作について発表しました。 『Hello, World!』で吉川英治文学新人賞を受賞したSF作家 藤井：お時間いただきまして、ありがとうございます。本日、「Visual Studio Codeで小説を書く」というセッションを持たせていただく、SF作家の藤井太洋です。それでは、プレゼンテーションを進めます。 まず簡単な自己紹介から。私は、2012年に『Gene Mapper』というサイバーパンク小説をセル
はじめに X.509 証明書について解説します。(English version is here → "Illustrated X.509 Certificate") ※ この記事は 2020 年 7 月 1 日にオンラインで開催された Authlete 社主催の『OAuth/OIDC 勉強会【クライアント認証編】』の一部を文書化したものです。勉強会の動画は公開しており、X.509 証明書については『#4 X.509 証明書（１）』と『#5 X.509 証明書（２）』で解説しているので、動画解説のほうがお好みであればそちらをご参照ください。 1. デジタル署名（前提知識） この記事を読んでいただくにあたり、デジタル署名に関する知識が必要となります。つまり、「秘密鍵を用いて生成された署名を公開鍵で検証することにより」、「対象データが改竄されていないこと」や「秘密鍵の保持者が確かに署名したこと
N501Y変異株スクリーニングの実施状況N501Y陽性例構成割合,変異株PCR検査実施割合 | 東京都 新型コロナウイルス感染症対策サイト
東京都福祉保健局： 〒163-8001 東京都新宿区西新宿2丁目8番1号 電話：03-5320-4032 FAX：03-5388-1400 Copyright © Bureau of Social Welfare and Public Health, Tokyo Metropolitan Government. All Rights Reserved.
従来のGoogleアナリティクスである、ユニバーサル アナリティクス（以下UA）のサポートがいよいよ2023年7月に終了することが、先日アナウンスされました（※）。昨年対比やトレンドをチェックすることを考えると、2022年内できるだけ早めに次世代のGoogleアナリティクス（以下GA4）へ移行したいWebメディア運営者も多いかと思います。新しいツールの勉強や、既存システムの改修が必要な問題ではありますが、この機会を、データ収集・可視化の設計を見直し、日々の意思決定の共通言語としてデータを使いやすくするチャンスと捉えてみてはいかがでしょうか。 ※ Google、ユニバーサルアナリティクスのサポートを2023年7月1日に終了。早めのGA4移行を推奨 このnoteでは、前半でダッシュボードによるデータの可視化にコストをかけるべき理由を整理します。後半では、2021年秋に文春オンラインのダッシュ
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。 はじめに 問題意識として、今のプログラミングスクールや独学勢が Ruby on Rails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。 歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ
NTT 東日本 - IPA 「シン・テレワークシステム」 - HTML5 版 Web クライアントの公開について
NTT 東日本 - IPA 「シン・テレワークシステム」 Beta 7 および HTML5 版 Web クライアントの公開について トップ | 中間報告 | 自治体テレワーク for LGWAN | HTML5 Web 版クライアント (Mac, Chromebook 対応) | バージョン履歴 | ダウンロード | ユーザー数グラフ 入門 - 今すぐ使ってみよう | クライアント検疫機能・MAC アドレス認証機能 | 二要素認証・ワンタイムパスワード (OTP) 機能 | マイナンバーカードを用いたユーザー認証機能 | 仮想マルチディスプレイ機能 行政情報システムでの利用 | 組織 LAN におけるポリシー規制サーバー設置 | 企業システムにおける VM・HDD クローン対応 | Wake on LAN リモート電源 ON 機能 | 画面撮影・キャプチャ防止のための電子透かし機能 FAQ
2020年03月01日08:00 家で暇をつぶせるサイトを10個ほど紹介する Tweet 1: 名無しさん＠おーぷん 20/03/01(日)03:18:33 ID:ghI SDIN無料ゲーム https://sdin.jp/ 対人対戦もできるテーブルゲームなどが置かれてるサイトや 腕に自信がある人はぜひチャレンジしてみよう 2: 名無しさん＠おーぷん 20/03/01(日)03:18:53 ID:ghI ゲームカタログ@Wiki ～名作からクソゲーまで～ https://w.atwiki.jp/gcmatome/ あらゆるゲームを紹介するWikiや いろんなゲームの記事があるから結構時間つぶせるで 50: 名無しさん＠おーぷん 20/03/01(日)03:51:11 ID:IAz >>2 これ有名なのはバイアス入って書かれてるよな 古いのとかは結構使えるけど 5: 名無しさん＠おーぷん 2
今回は高校生の私たちが公開した投票サイトが三日で１万PVを記録したので、その経緯をサイトの紹介も含め、全て公開します。 qiitaで後日談を書きましたので、よかったらお読みください リンクはこちらです サイトの内容 名前はAICEVOTE(アイスボート) リンクはこちら ----> aicevote.com(大量アクセスで現在サーバーが不安定な状況です。ご了承ください。) このサイトを一言で言うとこんな感じです。 "投票用紙を氷に見立てた次世代のリアルタイム投票サイト" AICEVOTEとは 普通の投票とAICEVOTE（アイスボート）の違い 普通の投票 普通の投票では、投票箱A/Bに最終的に投票された票の数の比で結果が決まります AICEVOTE AICEVOTEでは投票用紙の代わりに氷を投票します。 それぞれの投票箱の底は網目になっています 時間が経てばあなたが投票した氷は少しずつ溶け
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
エンジニアを始めてから便利だったツールまとめ
概要 エンジニアになってから出会った便利ツール・アプリを備忘録としてまとめました。 ※WEB用ツール多め GUIツール・アプリ デスクトップ上で動作させるやつ。 Authy https://authy.com/ 2FAアプリ。Multi-Deviceという複数端末で使える機能があり、PCでログインする際の2FAをPCのみで完結できるので便利。 Hyper https://hyper.is/ コンソールアプリ。テーマ機能やプラグイン追加で自分の好みに環境を整えやすくて見た目がよい。 設定を.hyper.jsファイルで管理するので、gitにて設定管理ができて便利。 VSCode https://code.visualstudio.com/ 言わずもがなの高機能コードエディター。特に理由がなければ基本的にはプログラミングするならこれを使えばいいんじゃないかな。 豊富なプラグインや設定で、Hype
先日、弊社では Community Geocoder というサービスをリリースしました。 Community Geocoder 紹介記事 さて、このジオコーダーは、住所を正規化してそれを「大字町丁目コード」という12桁の数字に変換し、そのコードをファイル名として GitHub ページ上に大量においた JSON ファイルにアクセスして緯度経度を取得するということをやっています。 つまり、住所の正規化からコードに変換する部分がとても重要で、そもそも正規化に失敗してしまうとどうしようもないという仕様なんです。 さいわい先日経産省が公開した IMI コンポーネントツール である程度のことをやってくれるのですが（というかそうであることを期待したのですが）、いろいろ調べ始めると住所という仕組みはほんとに複雑で、Facebook で絡んでくださった @hfu さんいわくまさに「自然言語処理そのもの」であ
この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ
社内勉強会で専門的技術力を高めるには
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog サイトオペレーション本部に所属している大津と申します。普段CDNとNode.jsサポートの仕事をしていて、第9代黒帯（ヤフー内のスキル任命制度／ネットワーク・セキュリティ）に任命していただいています。1 先日ヤフー社内で黒帯LT会が開催されました。お題目は事前に指定された「専門的技術力を極めるための極意」ということで、10分ほど話をしました。しかし、これまでみたいにセミナールームで大勢の前で話すわけではなく、最近代わり映えしない自宅デスクからのオンラインLTは、正直勝手が違いました。時間配分もミスって中途半端に終了です。と思いきや数日前、このYahoo! JAPAN Tech Blog担当者から「いやー、よかったですよ。そのネタ書
Next.jsの考え方
Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
初学者に教えたい、MicrosoftがGitHubで公開している教材が最高だった！ - Qiita
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
ソースコードブランチ管理のパターン - Martin Fowler's Bliki (ja)
エンジニアの職務経歴書 〜正しい魅力の伝え方〜 - Qiita
「SEOに強いHTMLの書き方」についての個人的な見解
JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
探しものがはかどる検索エンジンDuckDuckGo、NDC順Bangリスト
「Visual Studio Code」で執筆するSF作家 藤井太洋氏が作る物書きのための拡張機能
図解 X.509 証明書 - Qiita
文春オンラインの記事分析を支える爆速ダッシュボードを作るまで｜Shota Tajima
Google TypeScript Style Guide
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法
家で暇をつぶせるサイトを10個ほど紹介する : 哲学ニュースnwk
たった256文字のJavaScriptコードで描かれた街の風景アニメがスゴ過ぎて訳がわからない／解説ページを見てもわからないorz【やじうまの杜】
高校生がリアルタイム投票サイトを公開したらいきなり1万PVを記録した話 - Qiita
"レガシー"と言われないためのJavaScript再入門
日本の住所の正規化に本気で取り組んでみたら大変すぎて鼻血が出た。 - Qiita
現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti