Webpack 4.0 Release: What's New?
TL;DR: On Sunday, February 25, 2018, Webpack 4.0, was released to the public. Legato (Weboack 4.0's codename) is a major release to the JavaScript module bundler. It has taken about eight months since the release of 3.0. In this article, I'll cover the new features in Webpack 4.0 and several other changes and deprecations. Webpack is a capable module bundler for JavaScript applications. It bundles
How to JavaScript in 2018
From command-line tools and webpack to TypeScript, Flow and beyond, let's talk about how to use JavaScript in 2018. Last year many people, including myself, were talking about JavaScript fatigue. No, the ways to write a JavaScript application have not really slimmed down, BUT with a lot of command-line tools doing much of the heavy lifting, transpiling becoming less crucial and TypeScript trying t
JavaScript Primer - 迷わないための入門書
元々は、0/1/2/3/4の5段階でしたが、2023年に2.7が追加されています。 これは、ブラウザが実装しはじめて見つかる問題などによりステージ2と3を行き来してしまうことがあったためです。 そのため、実装の前のテストと検証のためのステージとして2.7が追加されました。 2ヶ月に一度行われるTC39のミーティングにおいて、プロポーザルごとにステージを進めるかどうかを議論します。 このミーティングの議事録もGitHub上のtc39/tc39-notesにて公開されています。 ステージ4となったプロポーザルはドラフト版であるtc39/ecma262へマージされます。 そして毎年の決まった時期にドラフト版を元にしてECMAScript 20XXとしてリリースします。 この仕様策定プロセスの変更は、ECMAScriptに含まれる機能の形にも影響しています。 たとえば、class構文の策定は最大限
GitHub - egoist/franxx: A vanilla JavaScript router that works everywhere.
import { createRouter } from 'franxx' import { createBrowserHistory } from 'history' const router = createRouter({ history: createBrowserHistory(), }) router.add('/', () => { console.log('homepage') }) router.add('/user/:name', ({ params, query }) => { console.log(params.name) }) // The router by default automatically runs route handler // When URL changes // But for initial render // You need to
Hyperapp for Redux refugees
How I learned to stop worrying and love the function Feb 14th, 2018 · 16 min read I love Redux. It was my gateway to functional programming, and the first such code I ever put into production. Gone were the days of using the DOM for storing your application state and precariously manipulating it with jQuery. Redux provides a tidy state management solution that lives entirely apart from your view.
Debugging Service Workers
Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。 1. ようこそ このラボでは、既存のウェブ アプリケーションをオフラインで動作するようにします。これは、プログレッシブ ウェブアプリ ワークショップの一連のコンパニオン Codelab の最初のものです。このシリーズには、他に 7 つの Codelab があります。 学習内容 Service Worker を手動で作成する 既存のウェブ アプリケーションに Service Worker を追加する Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする 必要な予備知識 基本的な HTML と JavaScript 必要なもの Service Worker をサポートしているブラウザ 2. 準備 ま
Railsアプリケーションにおけるフロントエンド環境のモダン化
freeeの価値基準の一つである、ユーザーにとって「本質的（マジ）で価値ある」ものを届けるということ。本連載ではそれに向かって、日々挑戦を続ける開発現場の事例をお伝えします。本記事では、freeeでのフロントエンド環境の改善への取り組みである、Ruby on Railsアプリケーションにおけるフロントエンド環境のモダン化について紹介します。Rails5.0以前の標準的なフロントエンドのビルド基盤であるSprocketsアセットパイプラインがもたらした問題について解説するとともに、その仕組みに依存して成長してきたプロダクトがいかにしてSprocketsへの依存を断ち切ったかについて説明します。 対象読者 Ruby on Rails 5.0以前のアプリケーションのフロントエンド開発で、npmによるモジュール管理やwebpackなどによるビルドを行いたいのにそれがなかなか実現できずに困っている方
使い勝手は抜群、JavaScriptフレームワーク「Backborn.js」
今回はフルスタックなJavaScriptライブラリ「Angular」と、コンセプトが反対の「Backbone.js」を紹介しよう。 Backbone.jsは、Angularと同じく「MV*」をサポートするJavaScriptフレームワークの一つだ。ただし名前の通り、骨組みしかない。 簡単に言うと、「Model、View、そしてRouterを簡単にWebアプリケーションに組み込むことに特化したJavaScriptライブラリ」となる。もちろん、ほかにも多様な機能を持つが、他のJavaScriptライブラリと組み合わせて使うことが基本となっている。 ほかのライブラリの力を借りる Backbone.jsを使うための準備はいたって簡単だ。公式WebサイトからBackbone.jsをダウンロードして、HTMLにscript要素で組み込むだけだ。ただし前述の通り、いくつか他のJavaScriptライブラ
商用環境で設定しておきたいセキュリティ関連 HTTP ヘッダまとめ - A Memorandum
TL;DR X-Content-Type-Options X-Frame-Options(XFO) X-XSS-Protection Content-Security-Policy (CSP) Upgrade-Insecure-Requests Strict-Transport-Security (HSTS) Public-Key-Pins (HPKP) 設定 TL;DR X-Content-Type-Options MIME スニッフィングの無効化 X-Frame-Options(XFO) フレーム表示を制限しクリックジャッキングを予防 X-XSS-Protection XSSフィルタの有効/無効 Content-Security-Policy (CSP) XSSなどの攻撃を軽減するセキュリティレイヤー Strict-Transport-Security (HSTS) HTTP の代わり
グレープシティ、入力支援用JavaScriptライブラリ「InputManJS」を新発売 | gihyo.jp
グレープシティ（株）は、Webアプリケーションでのさまざまな入力に対応したHTML5/JavaScript開発ライブラリ「InputManJS」を2018年2月14日に発売する。 「InputManJS」は、同社がWindows用開発コンポーネントとして販売してきた「InputMan」の機能をJavaScriptに移植して開発されたもの。テキスト、入力のマスク、日付時刻、数値など用途別に最適化された入力用コントロールを収録し、日本での使用に便利な和暦や漢数字に対応しており、入力時のフォーカス移動や文字数制限、未入力時のウォーターマークの表示等も指定可能。 InputManJSの使用例、カレンダー機能は休日等を自由に設定可能 同社では入力以外のUIもカバーしたJavaScriptライブラリWijmo等を販売しているが世界共通モジュールとなっており、おもに日本のユーザ向けに入力機能の強化
🐛🔨 The Contributors Guide to webpack — Part 1 🎨 🖼
The Contributors Guide to webpack is a multi-part publication series outlining the many ways that you can learn about, and contribute to the webpack open source project. You can read the first article in the series here! A(n) (eco)system overviewFirst off, if you’ve gotten this far down the article, 👏 congratulations 👏! Jumping into an unfamiliar codebase (or any for that matter) for the first t
正規表現のデバッグに重宝した神サイトを紹介してみる | DevelopersIO
はじめに こんぬづは、バーチャルYoutuberの中では圧倒的に輝夜月ちゃんが好きな田中です。特にクリスマスのやつが好きです。 さて今回は、今年正規表現のデバッグに重宝した Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript を紹介します。 Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript サイトはこんな感じ。 以下のような特徴があります。 正規表現のデバッグ 記述した正規表現の解説が見れる 正規表現に対して入力した文字列の、マッチした部分が見れる 正規表現のクイックリファレンスがついている 正規表現のデバッグ たとえば /[a-zA-Z]{0,3}+[0-9]{0,3}/ みたいな正規表現があ
Using Laravel Translation Strings in Vue.js
…or anything, reallyOne issue you will face if you need to make a multi-lingual site is how to keep your translations organized for both your back-end framework and your javascript components. I’m going to demonstrate the basic technique for this, using Laravel and Vue.js for my example. What is this?You should know right off the bat that the technique I’m showing is completely framework — and eve
AlminのサイトをOSSドキュメントツールのdocusaurusで作り直した
Alminでは元々GitBookを使ったドキュメントサイトをhttps://almin.js.org/で公開していました。 最近、OSS向けのドキュメントサイト作成ツールであるDocusaurusが公開されたのを受けて、GitBookからDocusaurusに移行しました。 Alminのサイト: Almin · Flux/CQRS patterns for JavaScript application. https://github.com/almin/almin DocusaurusはEasy to Maintain Open Source Documentation WebsitesとあるようにOSSのライブラリやプロダクト向けのドキュメントサイトを作る一種の静的サイトジェネレーターです。 Facebookから公開されていることからも分かるように、JestやPrettier(Faceb
textlint 10.0.0 リリース
textlint 10.0.0をリリースしました。 Release textlint 10.0.0 · textlint/textlint 変更点 textlint 10.0.0の主な変更点です。 🆕 Features @textlint/ast-node-typesがTxtNodeの型定義を持つように @textlint/ast-node-typesという内部的に使ってるものがtextlintのパーサが作るTxtNodeの型定義を持つようになりました。#358 textlintのASTを扱いたいTypeScriptユーザーはこれを利用できるので、textlint pluginを作りたいとかしたい人は便利かもしれません。 詳しくはTxtNodeのドキュメントを見てください textlintがTypeScriptで扱えるように #248 以前の9.0.0のリリースでtextlintのコアエ
Yet Another Bundler - Parcel + Vue.jsの可能性を模索した話 - - Studio Andy
この記事は Vue.js #1 Advent Calendar 2017 - Qiita 15日目の記事です。 今年もアドベントカレンダーの季節がやってきました！ ブログ書くのは1年ぶりですねw まずはネタ探しということで最近はReact Nativeを書いている時間が長いのもあり、はじめはVue.jsでモバイルアプリが作れるWeexについての記事を書こうといろいろ準備していました。 そんな穏やかな冬の午後・・・ またなんか出た qiita.com ちょっと待ってくれ 先週社内でWebpackの勉強会したばっかなんだけど・・・ ↑↑ やりきった感のある投稿の様子 正直、 (ほんともう勘弁してくれ〜〜〜) って感じだしBrowserifyやWebpackをはじめとしたバンドラ論争に振り回されたみなさんの中には怒りすら覚えた人もいるのではないでしょうか とは言っても 触ってみないことには良いも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript — JavaScript With Superpowers
ServiceWorkers in practice
JavaScript: What’s new in ECMAScript 2018 (ES2018)?
HTML 5.2
