JavaScript: What’s new in ECMAScript 2018 (ES2018)?Bram.us A rather geeky/technical weblog, est. 2001, by Bramus
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をはじめとしたバンドラ論争に振り回されたみなさんの中には怒りすら覚えた人もいるのではないでしょうか とは言っても 触ってみないことには良いも
Clearing cache in the browser
Andrew Betts (@triblondon) is a web developer and principal developer advocate for Fastly, working with developers across the world to help make the web faster, more secure, more reliable and easier to work with. He founded a web consultancy which was ultimately acquired by the Financial Times, led the team that created the FT's pioneering HTML5 web app, and founded the FT's Labs division. He is a
一休.comのJavaScriptユニットテスト環境 - 一休.com Developers Blog
この記事は一休.com Advent Calenrad 2017の2日目です。 宿泊事業本部フロントエンドエンジニアの宇都宮です。 一休.comの宿泊予約サービス（以下、一休）では、以下のようなスタックでWebフロントエンドの開発を行っています。 言語：ES 2017 ライブラリ・フレームワーク：古いところはjQuery、新しいところはVue.js ビルドパイプライン：Webpack + Babel 一休では、主要導線のE2Eテストは整備されています*1。一方、フロントエンド(JavaScript)のユニットテストは発展途上といったところです。 本記事では、一休のJSユニットテスト環境の変遷と現状について紹介します。 AVA 2017年4月の時点で、一休のJSユニットテスト環境は以下のような状況でした。 テスティングフレームワーク：AVA Babelでビルドされているコード：1,000行程
2017年度・自分なりのWebサイト制作向けCSS設計論 - Qiita
株式会社アンティー・ファクトリーXAチーム（マークアップエンジニアチームの名称）の Advent Calendar 1日目担当の@kokushinです。 業務ではWebサイトのマークアップに加え、JavaScriptを用いた演出・機能実装などを行っております。 プライベートでは、Vue.jsを使ったWebアプリやCSSフレームワークなんかを自作して遊んでおり、最近だとサーバーサイド言語にも手を出し始めました。楽しいです。 CSS設計に関してはまだ苦手意識がありますが、OOCSS・SMACSS・BEM・FLOCSSなどの設計論や、Atomic Designといった考え方が登場したことで昔よりかは随分と良くなりましたね。 弊社では主にFLOCSSを取り入れて業務に活かしているのですが、プライベート開発のときは__「独自のCSS設計を考えて実際に使ってみよう」__と決めていたので、Webサイトの
細かすぎるけど伝わって欲しいlodash.jsの話 - KAYAC Engineers' Blog
ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsというライブラリについて、掘り下げた紹介をさせていただきます。 lodash.jsとは https://lodash.com/ A modern JavaScript utility library delivering modularity, performance & extras. つまるところ、 ユーティリティー（なんか便利）関数を集めたやつ めっちゃかるい という特徴を持つライブラリです。近頃のフロントエンドの流行りであるThree.jsだったり、Vue.jsだったりといったものに比べると 地味 です。非常に地味ですが、個人的
これからの時代のメタプログラミングJavaScriptの正義を語ろう - Qiita
JavaScript Advent Calendar 2017 - Qiitaの第一日目です。JavaScriptにおいてメタプログラミングを用いて、エンジニアリングにおける邪悪と闘うという趣旨の記事です。 秋のJavaScript祭 in mixi 2017 - Javascript祭りでこれからのメタプログラミングJavaScriptの正義を語ろうという発表をしてきました。この記事はそれをベースにしています。 技術書典3で頒布した簡単JavaScript AST入門という同人誌ですが、どうも電子版を求める声が多いので、簡単JavaScript AST入門 - 東京ラビットハウス - BOOTH で電子版を販売しています。 結論から メタプログラミングを活用すればこの三つを達成できます。 コーディングタイムコンパイルという新しい概念・技術 暖かみ溢れる手作業を根絶 生産性を向上して、相対
MapboxとGoogle Mapsを比べながらMapboxの本当の素晴らしさを発掘する - Qiita
こんにちは、@nazomikanです。 この投稿はLifull Advent Calenderの1日目の投稿になります。 本記事はざっくり言うとmapboxすごいよって話です。 ※言うまでもなく素晴らしいgoogle maps apiと比較することでmapboxを深掘りするのが目的で、決してgoogle mapsを貶めるつもりの記事ではないことをご理解ください Mapboxとは 地図サービスです。 GoogleMapsと近い感じでJSやnative appのsdkが公開されてていい感じに開発できるやつです。 データソースはopen streatmapになります。 Google Mapsとの違い タイルのレンダリングについて google mapsは地図をサーバサイドレンダリングして256x256の地図タイル画像として配信してタイル上に配置していきます。 一方でmapboxは地理情報のvec
What's New In DevTools (Chrome 64) | Blog | Chrome for Developers
Welcome back! New features coming to DevTools in Chrome 64 include: Performance Monitor. View a page's performance in real-time. Console Sidebar. Reduce Console noise and focus on the messages that are important to you. Group similar Console messages. The Console now groups similar messages together by default. Read on, or watch the video version of these release notes below. Performance Monitor U
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 5.2
hirata.blog
