PWAでここまでできる
スライド内の関連リンク * DiverseのPodcast https://podcast.diverse-inc.com/ * 採用ページ https://diverse-inc.co.jp/recruit/positions * 今回のサンプルGithub https://github.com/SAMUKEI/droidkaigi2019-sample-pwa * 今回のサンプル動画 https://youtu.be/ehW6397JceI * はじめてのプログレッシブ ウェブアプリ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja * PWA Builder https://www.pwabuilder.com/ * How to Package Android https:
JavaScript/Vue.jsアプリのパフォーマンス改善 一休.comスマートフォンサイトを高速化するためにやったこと
2018年12月12日、株式会社一休が主催するイベント「Ikyu Frontend Meetup」が開催されました。同社が運営する一休.comと一休レストランの開発に携わるエンジニアたちが、フロントエンド開発における知見を共有します。プレゼンテーション「JavaScript/Vue.js アプリケーションのパフォーマンスチューニング」に登壇したのは、株式会社一休宿泊事業本部、プロダクト開発部の宇都宮諒氏。一休.comのスマートフォンサイトにて実施した、Vue.jsを用いたパフォーマンス改善の舞台裏を語ります。講演資料はこちら JavaScript/Vue.jsアプリケーションのパフォーマンスチューニング 宇都宮諒氏：では、Vue.jsアプリケーションのパフォーマンスチューニングの話をしたいと思います。 自己紹介ですが、株式会社一休の宇都宮と申します。宿泊事業本部のUIチームに所属していて、
Vue School の無料コース「Nuxt.js Fundamentals」を受講して Nuxt.js の基礎を学んだ - kakakakakku blog
Vue School で今月から提供されている最新の無料コース「Nuxt.js Fundamentals」をさっそく受講した．最近よく聞くようになった Nuxt.js をまだ試したことがなく気になっていて，タイミングも良かった！今まで Vue School で「Vuex for Everyone」と「Vue.js + Firebase Realtime Database」と「Vue.js + Firebase Realtime Database」を受講して，素晴らしく体験が良く，今回もオススメできる内容だった！ vueschool.io Nuxt.js Fundamentals コースは計14個の動画で構成されている．動画を見るだけなら35分で見れるし，動画を見ながら写経をするとしても，2時間あれば終わる．Nuxt.js とは何か？を速習するのに最高なコースと言える． 1 : Introd
Vue Fes Japan: Next-Level Vue Animations
“人間は進化の過程で、より継ぎ目無く、シームレスに流れるような動きを行うよう最適化されてきた。” "人間とコンピューター間のインタラクションでも、新しく登場した概念に対応できるようにはなっていない”
改めて理解するJavaScript Array / Understanding JavaScript Array // Speaker Deck
All slide content and descriptions are owned by their creators.
これだけ覚えるべきJSの基礎 · takahashiakira/tech_for_web Wiki · GitHub
Dismiss Document your code Every project on GitHub comes with a version-controlled wiki to give your documentation the high level of care it deserves. It’s easy to create well-maintained, Markdown or rich text documentation alongside your code. Sign up for free See pricing for teams and enterprises 「FEのためのJS基礎」シリーズについて 「JS基礎シリーズ」は、フロントエンドエンジニア向けのJavaScript（以下JS）の中でも、特に実践に必要となる情報のみを個人的にまとめたシリーズです。
front-end-interview-handbook/README.md at master · yangshun/front-end-interview-handbook · GitHub
これは何のリポジトリですか？ フロントエンドの求人面接では典型的なソフトウェアエンジニアの面接とは異なりアルゴリズムの重要性が低く、特定の領域（HTML、CSS、JavaScript など）の入り組んだ知識や専門的な技術についてより多くの質問がなされます。 フロントエンドエンジニアの面接の準備に役立つリソースは既にいくつかありますが、ソフトウェアエンジニアの面接のリソースほど豊富ではありません。既存のリソースの中で最も有益な質問集はおそらく Front-end Developer Interview Questions ですが、残念ながら私はこれらの問題の多くに対して完全かつ満足のいく回答をネット上に見つけることができませんでした。そう、このプロジェクトはそれらの質問に回答する試みなのです。また、このプロジェクトはオープンソースなので、Web の状況が進歩するのにあわせてコミュニティのサポ
今後のフロントエンドについて(仮)
bonfire frontendで発表した今後のフロントエンドの話です。
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
What's PWA ? Progressive Web Apps （プログレッシブ ウェブ アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
JavaScript製アニメーションライブラリの原理を理解しよう - ICS MEDIA
アニメーションは画面の遷移やボタンの演出など、あらゆるウェブコンテンツやアプリケーションで利用されています。CSSならanimationやtransition、JavaScriptであればCreateJSやTweenMaxなどのJavaScriptライブラリを利用して制作している人がおおいでしょう。 私はFlashの全盛期に「Tween24」というアニメーションライブラリを自作していたこともあり、アニメーションには人一倍の思い入れがあります。しかし、その仕組みを理解している方は意外にも少ないのではないでしょうか。 ライブラリやフレームワークといったテクノロジーは、仕組みや原理を理解しておくことで備わっている機能をより活用でき、また応用の幅も広がります。今回はアニメーションライブラリの基礎部分の実装を交えながら、アニメーションの仕組みを紹介します。 ※この記事はアニメーションの原理の説明に焦
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
モバイル開発に役立つJSデバッグ術 | メルカリエンジニアリング
Mercari Advent Calendar 2017 13日目は フロントエンドチームの @sottar が web アプリの開発（特にモバイル開発）で役立つ Chrome DevTools の便利な機能を紹介します。 はじめに メルカリでは PC からのアクセスよりもモバイルからのアクセスが多いため、web アプリもモバイルからのアクセスを意識したコードを書く必要があります。 しかしモバイル向けのコードを書く際に、毎回実機を接続して確認するのは面倒です。そこで最近のブラウザに付属している開発者ツールにはモバイル向けのコンテンツの開発に役立つ機能が搭載されているため、その機能を使いこなすことでモバイル向けの開発をしつつ、開発のスピードを上げる事が可能です。 そこで本日は Chrome DevTools 内にある、特にモバイルデバイス向けのコンテンツ開発に役立つ機能を紹介します。 Dev
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
Vuejsのちょっと便利なコンポーネント機能 - Qiita
はじめに vuejsはとっつきやすく完成度の高いJSフレームワークだと思っていますし、日本語のドキュメントも充実しています、実際に下記の機能も全て公式ドキュメントに記載されている内容です。 しかしながら、実際にやりたいことと機能名の間に乖離があったりして、いざ使用する時に意外に実装方法などを見つけにくい場合も当然ながら存在するため、自分用に Vuejs のちょっと便利なコンポーネントの機能をメモっておきます。 お品書き 共通した親要素を使いまわしたい（スロット配信） パラメーターによって使用するコンポーネントを変えたい（動的コンポーネント） 複数のコンポーネントで、同じ処理を使いまわしたい（ミックスイン） 出力するタグを動的に指定したい 共通した親要素を使いまわしたい いわゆるラッパーコンポーネント、例えば10個のコンポーネントを作る必要があるとして、その全てが共通したヘッダやフッタを持っ
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
JavaScript ショートコードテクニック集（ES6含む） - Qiita
何の役に立つかはわからない、ショートコードのテクニック集です。 ここで紹介しているテクニックの幾つかは非推奨の記述法です。 用法、用量を守って正しくお使いください。 基本 改行と半角スペースをなくす。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2018年のフロントエンドエンジニアを取り巻く課題とチャレンジ
やわらかVue.js
