Frontend Developer Roadmap: What is Frontend Development?
Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity. What does a Frontend Developer do? As a front-end developer, you'll be responsible for creating the user inte
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
Through the pipeline: An exploration of front-end bundlers
This last week I spent a lot of time buried deep in the documentation of parcel, rollup, and esbuild. I've been on a quest. Mainly one that starts from a place of being fed up with webpack being slow and unwieldy to configure and manage. And I've been hearing and even playing around with these other bundlers a bit, well enough to know a happier path should exist. My bundling needs Let me lay out m
2020年の11の必見のフロントエンドトレンド - Qiita
こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー
JavaScript: The First 20 Years
JavaScript: The First 20 Years by Allen Wirfs-Brock and Brendan Eich Our HOPL paper is done and submitted to the ACM for June 2020 publication in PACMPL (Proceedings of the ACM on Programming Languages) and presentation at the HOPL 4 conference in June 2021. PACMPL is an open access journal so there isn’t a paywall preventing people from reading our paper. The official version of the paper is a
現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ
JavaScript Remote Conference 2020 – The best online conference experience for JavaScript Developers
Join Us Virtually Learn, Mingle, and Stay Safe Angular Remote Conference is a fully online conference produced by the team that creates the Adventures in Angular and JavaScript Jabber podcasts. With the conference cancellations, we're concerned that our community won't have the opportunity to learn, grow, and mingle. We also want to continue to produce and support a podcast for the Angular develop
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
Dixin's Blog - Understanding (all) JavaScript module formats and tools
When you build an application with JavaScript, you always want to modularize your code. However, JavaScript language was initially invented for simple form manipulation, with no built-in features like module or namespace. In years, tons of technologies are invented to modularize JavaScript. This article discusses all mainstream terms, patterns, libraries, syntax, and tools for JavaScript modules.
そのコンポーネント、CSSだけで実現できますよ【JavaScript必要なし】 - Qiita
以下は、Adrian Beceさんの記事、You can create these elements without JavaScriptの日本語訳です。 そのコンポーネント、CSSだけで実現できますよ（You can create these elements without JavaScript） 私達は、よくあるUI要素機能（アコーディオン、ツールチップ、テキストの切り取りなど）をJavaScriptで書くことに慣れてきました。しかし、HTMLとCSSが新しい機能を手に入れたことで、より少ないJavScriptでUI要素を作れるようになり、JavScriptはバリデーションやデータプロセッシングなど、ロジックにより集中できます。 いくつかの実装、まだ洗練されてなかったり柔軟ではありませんが、それでも小さなプロジェクトなどでは便利です。 なぜ、1つのアコーディオンのためにJavaScr
Why JavaScript Tooling Sucks
Home Ideas Writing & Speaking Book Tactics, Strategy, Principles About Bio, Talks, Photos Subscribe RSS, Newsletter, Mixtape JavaScript Tooling is just too hard to use, and it’s not your fault. If you clicked on this title ready to agree, you are part of the problem. Don’t worry, so am I. I work on JavaScript Tooling and I think my tools can be a lot better. ”Let he who is without sin” and all tha
僕でもわかるasync/await - Qiita
サルでも分かるで挫折し、ミジンコでも分かるで挫折したわたしに。 サル ＞ ミジンコ ＞ 僕 僕でも分かるasync/awaitまとめました。 モダンブラウザで動きます。Developer Toolのコンソールで試してみてください。 （本記事のサンプルはgoogle.comドメインのページでお試しください。googleさんお邪魔します） fetch APIで試す ブラウザからAjaxリクエストなどに使えるfetch APIで試します。 jQueryなどのAjax通信を思い出すと、レスポンスを取得した際のロジックはコールバック関数で定義しますね。fetchを使うと以下のように同期処理っぽく書けます。 (async () => { const response = await fetch("https://www.google.com") const html = await response.
JavaScriptで配列やオブジェクトをループする良い方法を真剣に検討してみた - Qiita
はじめに JavaScriptで配列やオブジェクトをループする時どのように書きますか？ シンプルにfor文？ Array.forEachを使う方法もありますね。 あるいはES6から取り入れられたfor-of文でしょうか？ ただこうしたいくつかの方法がある中、僕が以前思ったのは 「で、結局何が良いんだってばよ？？(￣へ￣|||)」ということです 単なる文法の違いでどれでも良いのか？それともリスクやパフォーマンスがそれぞれ違ったりするだろうか・・？ その疑問の答えを出すために、ループの各手法を主にリスク・パフォーマンスの面で比較・調査して「配列やオブジェクトをループする良い方法」の結論を出してみました。 もし良ければ参考にしてみてください。 どんなループ方法があるか まず配列とオブジェクトそれぞれでどんなループ方法があるかを挙げます。 ※jQueryやUnderscore.jsでのループ方法は
画像の最適化 | Web | Google Developers
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
Using Native JavaScript Modules in Production Today — Philip Walton
Two years ago I wrote about a technique—now commonly referred to as the module/nomodule pattern—that allows you to write ES2015+ JavaScript and then use bundlers and transpilers to generate two versions of your codebase, one with modern syntax (loaded via <script type="module">) and one with ES5 syntax (loaded via <script nomodule>). The technique allows you to ship significantly less code to modu
JavaScriptのコードをファクトリ関数でシンプルに保つ方法
関数やオブジェクトの習得なくして、JavaScriptプログラマーとして成功はできません。また、関数やオブジェクトは、コンポジションと呼ばれる強力なオブジェクトパラダイムを開始するために必要な土台となります。今回はファクトリ関数を使用して関数、オブジェクト、Promiseを生成する際によく使われるパターンを説明していきます。 関数が1つのオブジェクトを返すとき、その関数をファクトリ関数と呼びます。 簡単な例を示します。 function createJelly() { return { type: 'jelly', colour: 'red' scoops: 3 }; } ファクトリを呼び出すたびに、ファクトリは「jelly」オブジェクトの新しいインスタンスを返します。 重要なのは、ファクトリ名にcreateという接頭辞をつける必要はないということです。ただし、接頭辞をつけるとほかの人たち
【エンジニアも最低限知っておきたい！】構造化データマークアップ入門 - Qiita
こんにちは！エイチーム引越し侍でインハウスSEO担当をしています、@tatechiです。 突然ですが、最近グーグル検索をして、「検索結果がゴージャスになってる！」と思うことはありませんか？ たとえば、「トマトパスタ レシピ」で検索したとき。 検索結果にトマトパスタの写真が出ていて、サイト名にアクセスしなくてもどんなトマトパスタを作るためのレシピがわかるようになっています。 「少し前はタイトルとディスクリプションしか出ていなかったのに…」と思うと、めちゃくちゃ豪華な検索結果になりましたよね？！ このゴージャスな検索結果のことをその名の通りリッチリザルトといいます。 これは全部、構造化データマークアップのおかげです そして近年、SEO界隈ではこの構造化データマークアップが盛り上がっています…！ 今回はエンジニアが最低限知っておくべき構造化データマークアップの基礎を紹介します。 検索エンジンのト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Where JavaScript is headed in 2022
Javascript, ES6, ES7, ES10 where are we?
GitHub - goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)
