As iOS developers, there are times we want to include web content inside our iOS apps. We may want to load content from a website that pairs with a native app version, or we may want to let the user open links without having to open another browser. Prior to iOS 8, we’d have to use a UIWebView which was clunky, leaked memory, and difficult to debug. After iOS 8, however, Apple deprecated UIWebView

Frontend Conference Fukuoka 2018で発表した資料です。 https://frontend-conf.fukuoka.jp/ 各リンク先を確認する場合は、以下のpdfを参照ください http://tonkotsuboy.github.io/slides/181204…

JavaScript2 シェアフル Advent Calendar 2018 10 日目の記事です。 Microsoft EdgeがChromiumベースになるということで賑わっていますので、私も話に乗っかりたいと思い、IE6の話を書くことにしました。 BabelとParcelとHyperappでIE6対応SPA作ってみました デモ: https://boiyaa-ie6-compatible-spa.appspot.com ソース: https://github.com/boiyaa/ie6-compatible-spa これを見ているほとんどのみなさんはIE6を持っていないと思うので、↑を開いてもただの簡素なSPAでしかありませんが。。 記事の最後に載せた画面キャプチャのようになります。 IE6で見る方法 Windows XP マシンを入手するか、BrowserStack の有料プラン

フロントエンドエンジニアの今村です。 この記事はAngular Advent Calendar 2018 11日目の記事で、テーマは多言語対応です。 Angular Advent CalendarなのでAngularの話を中心に書きますが、手法としてはAngularに限らず、ひろく（TypeScriptで書かれた）Webフロントエンド全般の多言語対応に適用可能なものです。というのも、私は以前にも似たような記事をQiitaに投稿していて、その時はReactをやっていました。 この記事ではQiitaに投稿した方法を少し改良したやり方をご紹介しますが、TypeScriptの型に甘えて多言語対応を実現したいという気持ちは一貫しています。 TL;DR 辞書ファイルをTypeScriptで書きたいという思いのもと、Angularの標準のi18n機能やその他のライブラリに頼らずに実装した多言語対応を紹介

TL;DR Web-Components、とっても素敵なんですが、いまいちまだその真価がわからないってことが多いかと思います。 どんなユースケースが直近でweb-Componentsを使えるようになったら有用なのか？Webの開発者に喜ばれるのか？ と考えたとき、 「JSのファイルを読み込んでタグを書くといい感じのUIが提供される」 のが一番シンプルで楽なんじゃないかと思い。 <template /> を使わずWeb-ComponentsはJavascriptで完結できる開発環境を作ってみよう。 ということで、この記事です。 主要なライブラリ ※ 結論からすると まったり開発しているリポジトリがあるので いろいろぶっ飛ばしてソース読んだほうが早いって方はどうぞ。 現行で使ってるライブラリは以下です。 かなりシンプルですが、これで <template /> を使用せず、最終的にバニラなJava

厳密なサブセットかは要確認な気がするが、まあそういうコンセプトのライブラリがある。 で、使ってみた。 preact とは reactのサブセット実装。reactと比較してかなり小さい(圧縮して3kb)。contextとかpropTypesとかはない。いらないと思う。 reactとの互換をもたせるレイヤーは本体を小さくするために外部パッケージに切り出されている。 https://github.com/developit/preact-compat コード量が少ないので、迷ったら元のコード読めるという安心感がある。 個人的にReactは過剰な抽象化の迷宮だと思っていて、あんまり読みたくない。 最初に ライフゲームのアニメーションしたかったわけで、ライフゲームを書きたかったわけではないので、ライフゲームのロジック部分はnpmから適当に持ってきた。 動いてるコードはここ http://mizchi

はじめに スプライトアニメーションとは、コマを画像一枚に敷き詰め、画像内での座標位置を連続で切り替えることで、アニメーションを実現させる手法です。 特にここ数年でどーんと色々なWebサイトで使われるようになっている気がします。私はあまり詳しくはありませんが、ゲーム制作とかでは昔から一般的な手法だったのかもしれません（RPGツクールとかでスプライト画像を見た気もします）。 そんなに難しいものでもなく、アイデア次第では美しく非常にインパクトのある表現も可能です。ここでは動作の基本をまとめてみます。試したことの無い方の参考になれば幸いです。 目次 アニメーションイメージ スプライトアニメーションのメリット・デメリット cssだけで表現してみる cssとjavascriptで表現してみる canvasで表現してみる アニメーションイメージ [ソース画像] [アニメーション] ※途中でガクッとなるの

デモとソースはこちら Demo https://dart-sass-bootstrap-demo.netlify.com/ (その3) Source https://github.com/terrierscript/dartystrap/ Soruce (parcel-plugin) https://github.com/terrierscript/parcel-plugin-darty その1だけの簡素版もあったので貼っておく（こっちの方がさっくり動いている感がある） https://dart-sass-browser-sample.netlify.com/ https://github.com/terrierscript/dart-sass-browser ソースはアレな具合なところ多いがご勘弁願いたい。 本当は元々Bootstrap4のカスタムビルド的な話をしようと思って練っていたら

CTO. Dad. Feminist. Lover. Fan of AI 🧠, environment 🌎, lean startup 📊, surfskate 🛹, cappuccinos ☕ and movies 🎬. Still learning.

MANABIYA 2018-03-24 (sat) Webセッション ３時限目の発表内容 https://manabiya.tech

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

This article discusses more of the amazing things you can do with Shadow DOM! It builds on the concepts discussed in Shadow DOM 101 and Shadow DOM 201. Using multiple shadow roots If you're hosting a party, it gets stuffy if everyone is crammed into the same room. You want the option of distributing groups of people across multiple rooms. Elements hosting Shadow DOM can do this too, that is to say