Recently, I needed to change some design elements of a site when the site is in the fullscreen mode. So, I was looking for a way to it using CSS as all I wanted to change was hiding some stuff when in the fullscreen mode. And that’s when I came across this CSS media feature display-mode which can be used to test the display mode of an application. This feature would work just like any other media

本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書について詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとは​JavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセット​スーパーセットとは、元の言語と

さてさて、ここ数回は高速なサイトを構築する流れでNode.jsのExpressを使った開発方法を紹介しています。 ExpressはLaravelと比べると、より必要なものだけに特化したフレームワークで「いたれりつくせり」のLaravelとはまた違った雰囲気があります。 そして、今回はその「標準搭載されてはいないもの」の中から、 バリデーション機能（入力が正しい／間違ってるのチェック） の使い方を実例で紹介したいと思います。 ぜひ皆さんのお役に立てると嬉しいです😊✨ 開発環境： Node 8.10、Express 4.1、express-validator 6.3 インストールする まずは、Expressでバリデーションが使えるようになるパッケージ「express-validator」をインストールしておきましょう。 npm install --save express-validator

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

基本的にGASはブラウザ上のエディタで開発する必要があり、若干面倒ですね。 それにエディタが使いにくく(慣れてないだけかも)、使い慣れたエディタで開発したいなと思いました。 そこで clasp を使用していこうかなと思います。 導入手順 clasp インストール ドキュメントに従い、以下のコマンドを実行します。 $ npm install -g @google/clasp $ clasp -v 2.3.0 次にGoogle Apps Script APIの設定をオンにします。 これでインストールと設定は完了しました。 ログイン $ clasp login Logging in globally... 🔑 Authorize clasp by visiting this url: https://accounts.google.com/o/oauth2/v2/auth?access_typ

対象読者 SPA(Single Page Application)の性能を改善したい方 webpack buildの流れを改善したい方 背景 私はAirレジ中国チームでフロントエンジニアとして開発を担当している李です。今回はSPAの性能改善について共有したいと思います。 本稿では、性能があまり良くない端末と弱電波の環境下でもSPA(Single Page Application)が速く走るように改善できたことをお伝えします。 私を含めエンジニアたちは性能の良い端末（MAC Proなど）でSPAの開発をしていたため、アプリケーションのパフォーマンスが悪いことに気付いていませんでした。 そしていざリリースしたところ、性能が良くない端末を使っているお客様から、「めっちゃ重い(太卡了)」と多くの苦言をいただいてしまいました。 「重い」というのはお客様からの直感的な体験ですが、この現状の裏には何があ

少し前からライブラリを読むトレーニングを始めたのですが、最近ようやく読み方がわかってきたので、やり始めた頃に知っておきたかったことをまとめます。 これから JavaScript/TypeScript で書かれたライブラリを読んでみようと思っている方の助けになれば嬉しいです。 「私はこういう道具を使ったり、こういう工夫をしています」みたいな感じの内容ですので、もし「もっといい読み方があるよ」みたいなのがありましたらIssueなどで教えていただきたいです。 （※ライブラリを読むにあたって、ブラウザの話と NodeJS の話があるのですが、似てる点がほとんどなのでごった煮します。） エントリポイントを探す ライブラリを読むにあたって そのライブラリが持つ module がどう協調して全体が作られるのか その関数は正確にはどういう挙動をするのか などを考えると、ユーザーから渡された入力や呼び出しが

Webチームの蔵下です。Chrome 81でWeb NFCが試験的に導入されました！ ちょっと変わり種なのでネット上ではあまり話題にならなかったのですが、個人的にはビッグニュースでした。 Web NFCを使うと、下記のTweetのような実在するカードとWebサイトを組み合わせたゲームなどが実装できます！ すごい！ 🏷️ Web NFC reaches a key milestone - it is coming soon! Check out https://t.co/wC4Sx6Rpu8 pic.twitter.com/MmsIDHGNjy— Chrome for Developers (@ChromiumDev) 2019年12月17日 勢いのままにWeb NFCを触ってみたので、ソースコードを交えて使い方を紹介します。 Web NFCとは？ Web NFCとは、JavaScript

Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters. Luckily it’s easy to turn off rules that conflict or are unnecessary with Prettier, by using thes

プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da

昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san

By Vijit Ail If you have just started with React, you are probably still wrapping your head around the whole Single Page Application concept. Traditionally routing works like this: let's say you type in /contact in the URL. The browser will make a GET request to the server, and the server will return an HTML page as the response. But, with the new Single Page Application paradigm, all the URL requ

The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, or its children, Document, and Window, but the target may be any object that supports events (such as IDBRequest). Note: The addEventListener() method is the recommended way to register an event listener. The benefits

I'm using i18next to power i18n for my weblog. It works great on text-only content, but when I try to translate content that includes HTML markup, it is displaying the raw markup when I translate the text. As an example, here is a snippet of the markup from a post that is not working as expected: <div class="i18n" data-i18n="content.body"> In Medellín they have many different types of <i>jugos nat