フロントエンドを楽にするために
フロントエンドを楽にするために Qiitaを支えたい技術 at 時雨祭 About HN: mizchi Qiitaの方からきました(入社半年たったらしい) Reactオジサンはそろそろ飽きてきた Angularに興味が無いのでこっちにきた 最近の業務 Kobito for Windows Closedβ中: もうちょい待ってろ お前らウェブエンジニアはWindows使わないのでβユーザー集めにくいんじゃ 省力モード 一昨日がClosedβリリースだったんで察してくれ！！！ ついさっきまでバグフィックス用のビルド作ってた Qiitaを支える技術? 4ヶ月ほどほぼソロ作業 正直カウボーイぎみ OSSでドキュメントガンガン書いてカバー(したい) 業務から派生したOSS mizchi/arda Flux フレームワーク mizchi/stone-skin IndexedDb ラッパー mizch
Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期
Web Components と Electron でつくる Neovim フロントエンドの未来 - はやくプログラムになりたい
この記事は Vim Advent Calendar 2015 の20日目の記事です． まずはこちらのスクリーンショットをご覧ください． エディタの UI やカーソル移動は Vim っぽいですが，markdown ライブプレビューやカーソル位置での画像ポップアップ，組み込みブラウザなど謎の UI が見て取れます．本記事ではこれについてボトムアップで必要な知識から順を追って紹介します． 長い……三行で Neovim msgpack-rpc API を使って <canvas> と Node.js API で Neovim フロントエンドを作成し Web Component としてラップ して HTML アプリに簡単に組み込めるようにした上で UI プラグインをウェブ技術で構築できる NyaoVim という Neovim GUI エディタを Electron 使ってつくってます． 目次 Web C
そろそろ勉強しないトナーと思いつつもだるくなる原因列挙する 前提 お前はJS書いてればいいよと甘やかされてきたので仕事で書いた量は少ない リフロー、ペイント等の表示制御系とパフォーマンス周りだけはそれなりに知ってる position: absolute や visibility: hidden とか 簡単な装飾はできる 段組とかの知識があんまりない わからないこと 解法が一つではなく、最適解がわからない 数こなせばわかる気がするが時間かかってだるい すでにあるサイトを参考にするもそれが正しいのかよくわからない 正解が(プログラマ的感覚だと)醜くみえる たとえば中央寄せ たとえば段組 このrelative指定は本当に必要なのか…みたいな ググって引っかかる資料のレベルが低い 古のspacer.gifとか未だに引っ掛かる これはJSと同じ問題なので2010~の資料しかみないようにする 楽できそ
を晒すことで俺以外が試してくれるかもしれない！というのは置いといて、現在の知見です。 MV* React | A JavaScript library for building user interfaces Facebook製データバインディング。jsxという謎拡張子に目をつむれば未来を感じる設計。とにかく生DOM触りたくないという気概を感じる。 Welcome - Polymer Google製WebComponent。WebComponent使うならこれが有望株っぽい。 component/component MV* とはちょっと違うけどCSS/JavaScript/HTML まとめてライブラリにできる。JavaScript以外もライブラリに含む際は有望。 何がしたいかはt_wadaさんがまとめてくれたtogetterみてください。Web フロントエンド開発用パッケージマネージャ c
2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビューライブラリ/フレームワーク モジュールバンドラ タスクランナー パッケージマネージャ テスティング トランスパイラ 2016年に使った: Babel。各ブラウザの JavaScript エンジンで ES2015~ES2017 の実装が進んでいるので、関わっている案件のブラウザのシェア次第なところもありますが、ES2015~ES2017 の仕様だけトランスパイルしたいのであれば、再来年あたりから要らなくなるんじゃないかな、という気持ち。 来年使いそう: 静的型付けがメインで、ES20XX から ES5 へのトランパイルは副次的で
VimConfは、テキストエディタVimのユーザーと開発者のための国際カンファレンスです。2018年11月24日に東京 秋葉原でその6回目となるVimConf 2018が開催されました。 今回の目玉は、Vimの作者Bram Moolenaarさんの登壇です。運営の方によると、Bramさんの招致はずっと夢だったようで、何ヵ月もの交渉を経て講演が決まった際は嬉しかったそうです。 本レポートは、LTを除くセッションの内容を中心にお送りします。 オープニング キーノート『What is the next feature? - Who makes next feature of Vim』 ― mattn mattnさんは、日本のVimコミュニティ vim-jp のキャプテンとして活動を続けられている方です。書籍『Vimテクニックバイブル』や『Vim scriptテクニックバイブル』の執筆に携わり、雑
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
次世代 Web カンファレンス - connpassに参加してきたのでメモ。 このメモは文字起こしではなくあくまでメモなので、そのままの発言じゃなくて解釈や要約が混じっています。 詳細は動画をみてください 次世代Webカンファレンス 2019 - YouTube パフォーマンス 登壇者 @1000ch likr @sisidovski 記録 ローディング周り 1000ch: WebKitのレンダリングの様子の動画を見たのが興味を持ったきっかけ 1000ch: HTTP/2になってきてローディングの通信を気にすることは減った? sisidovski: 同時接続数は気にすることは減ったけど、結局は気になる likr: H2 Pushとかが気になっている? 1000ch: 実際に使ったことないけど、会場で使ったことある人? 2割以内ぐらい sisidovski: 「Pushで早くなる」ということ
Frontrend Conference - A conference for front-end developer（2015年2月21日開催） に参加してきたのでメモ 殆どCSS側のセッションにいたのでCSSが中心。 終わったあとに#ゴーヤsushiと#ルノアール_sushiをしたのでとても長かった。 Pragmatic Front-end Developer: From Artisan to Expert - 斉藤 祐也 基調講演 メンテンス性 WEBを構成するJS+CSS+HTMLはあんまりメンテしやすくない けど専門的な知識がなくてもかけてしまう学びやすさがある 言語的にシンプル コードスタイルガイドライン 多くの人が開発しても、一人の人が書いたように見えるようにしたほうがいい JavaScript IDOMATIC.js jQuery Code Style GuideLine
電通デジタル エンジニアの おのきです。前回の記事は「SQLスクリプト上でのテーブルや共通テーブル式の依存関係を可視化する」でした。 今回はDentsu Digital Tech Advent Calendar 17 日目の記事になります。 私たちの開発チームでは、社内向け業務システム「EASI」においてデジタル広告のプランニングツールや過去実績のレポーティングツールを日々開発、運用しています。 「EASI」では MicroServices アーキテクチャーを採用し開発を進めており、バックエンドだけでなくフロントエンドについても Micro Frontends という仕組みを取り入れてサービス提供を行っています。 私たちのチームで Micro Frontends を導入してからちょうど一年になるので、ここで改めて導入の目的や選択した技術、導入手順、運用上の注意点や課題と対策をこの記事で覚書
Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想 - mizchi's blog
これ facebook/react https://github.com/facebook/react 使ってみる サンプルそぎ落として、最小構成で組んでみた gist8208430 モジュール定義 -> 引数をJavaScriptで受け取って処理 -> renderという流れ。jsxという拡張子はjavascriptにxmlリテラルを追加したものっぽい。(この拡張子かぶりすぎてるので本当にやめてほしい) render毎にDOM構築してるから激しくパフォーマンス悪いのでは… と思ったら次のような記事があった。 Performance Calendar » React’s diff algorithm http://calendar.perfplanet.com/2013/diff/ どうも毎回innerHTMLで突っ込むんじゃなくて、既にrender済みのものはスキップして最適化している模
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info テーマ textlint Privacy Firstな校正ツールを作る サーバにデータを送らずに、ローカルで文章のチェックをする textlintとは? textlint textlintJavaScriptで書かれた文章のLintツール ESLintの文章版 Markdown、Re:View、HTMLなど文章構造をパースしてからチェックする 一般的なスペルチェッカーは構造を見ないので誤検知する 200弱ぐらいのルールがある Collection of textlint rule · textlint/textlint Wiki 日本語、英語、言語に依存しな
Intro WebBundle を用いてサブリソースのみを Bundle する、 Subresource Bundle の策定と実装が進んでいる。 これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、 RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。 現時点での仕様と実装を解説する。 Intent to Prototype: Subresource loading with Web Bundles Subresource Bundling WebBundle の初期の仕様は、 HTML を頂点としたページ全体をまとめる方向で始まった。 WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io これをサブリソース(JS, CSS, Img etc)に対して利用できるようにする仕様だ。 HTML 自体は
morishitaです。 先日、Web Componentついて書きました。 tech.actindi.net 多くのブラウザで動作できるようになってきていることは確認できました。 ただ、実装方法についてはもっと良い方法がないものかと思いました。 と思っていたら、Vue.jsが Web Components もサポートしているではないですか！ で、やってみました。 環境準備 手っ取り早く試すためにVue CLIを使います。 次のコマンドでインストールできます。 $ yarn global add @vue/cli インストールできたらプロジェクトを作ります。 このエントリではvue-web-componentsという名前で作りますが、 なんでも構いません。 次のコマンドを実行するといろいろ質問されます。 $ vue create vue-web-components 今回は次の様に答えまし
ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介 - ANDPAD Tech Blog
この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得したリソースを元に生成します 1. はじめに 2022/08/16 に入社しました、Web フロントエンド開発を中心に行っている寺島です。 私は入社してから現在に至るまで、アンドパッドのデザインシステム 『Tsukuri』 の Web 向け実装である 『Tsukuri for Web』を開発しています。 この記事では以下について紹介します。 Tsukuri および Tsukuri for Web の背景 現在行っている開発のベースとな
Wicket学習帳
Wicketを学習するために書いたブログです。メモ帳がわりに学習した内容を記述していきます。 単なる情報の羅列だけにならないように、試した結果や感想を、自分の言葉で記録していきます。 WicketはWebアプリケーションを、Swingアプリのように作れるわけですが、そうは言っても作ったあとの動作はやっぱりWebアプリケーションなわけです。Ajaxコンポーネントを使うことで、Webっぽくない動作をすることもできますが、Javascriptを使ったクライアントサイドのロジックも必要です。一番単純な例では、削除ボタンを押したときに「削除してもよろしいですか？はい・いいえ」みたいな確認ダイアログです。これぐらいならばJavascriptで即時に確認したほうがいいです。 この章では、WicketコンポーネントでJavascriptを使う方法を書いています。「全部サーバーサイドでやれ」っていうような閉
Photo by hue12 photography on Unsplash All the Ways to Make a Web Component - Feb 2022 Update Introduction The same <my-counter/> Web Component has been written in 61 variants. The complete collection is available in the WebComponents.dev Studio Editor. In this new release, we fixed performance computation support for librairies missing from the previous editions: you can now compare both sizes an
最近のJavaScript業界で「HTMLへの思い」を聞いてみました。 Angular先生 HTMLはもっと出来る子さ。もっと進化できるはず、もっと頑張れよ! React先輩 もうHTMLに期待するのは飽き飽きしたよ。すべてはJavaScriptでいいんだ、クールだろ? Polymer君 HTMLは進化して帰ってきたよ! エッ、Safariッテナンデスカ? このあたり、モダンブラウザ・ネイティブ世代のライブラリたちとの温度差があるようですね。少し、意見を聞いてみましょう。 Riot君 先生、僕たちゆとり世代なんで頑張りたくないです。というかHTMLは十分高機能だし。先輩には悪いけど、ビューはHTMLで書くのが自然ですね。(というか、先輩たちのHTMLアレルギーがナゾ) vue.jsさん 私はわたしですから。あんまりいろいろやりすぎるのはクールじゃないし。HTMLはHTML、JavaScri
【翻訳】「Front-end Developer Handbook 2017」 2016年のまとめと2017年の予測 - Qiita
会社のWebフロントエンドチームによる活動で、Cody Lindleyのfront-end-handbook-2017 を読んで2017年のWebフロントエンド開発のトレンドをつかむことにしました。多少のバイアスはあると思うものの全体感を得るにはちょうど良さそうと思います。2016年のまとめと2017年の予測が面白いのでここだけ翻訳しました。原文には至る所にリンクが貼られておりリンク先も面白いので原文もオススメします。誤訳があったらご指摘ください。 UIコンポーネントやUIコンポーネントツリーの一年だった。 1ファイルにHTML、CSS、JSを詰め込むのは、もはや神への冒涜ではなくなった。 React, Redux, Webpack, ECMAScript 2015 (またはES6), Babelが非常によく使われるようになった。投票の結果、これらのソリューションが最も使われる技術のトップ
Railsの技: "プログレッシブエンハンスメント"でHotwire的思考を身につける（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Thinking in Hotwire: Progressive Enhancement | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/08/16 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 Turboについては以下の記事もどうぞ。 参考: 猫でもわかるHotwire入門 Turbo編 Hotwireを始める方法や個別のパーツの利用法を学べるチュートリアルはたくさんあります。しかし私は「Hotwireで考える」コツを会得するのにしばらく時間がかかりました。 Hotwireそのものは「HTML-over-the-wire」という包括的なコンセプトに過ぎず、以下のような部品をいつどのように
（※2016/07追記： redux使ってみたら悪くなかったので宗旨替えしました。こちらの記事とかをどうぞ。http://qiita.com/uryyyyyyy/items/7d4b0ede3f2b973d6951 ） タイトルは半分くらい釣りですが、半分くらい本気です。 目的 Fluxわからん Facebook公式の例の図を見て、「うっ、複雑だ。。。」って受け付けなかった人は僕だけじゃないと思ってます。 そのわりにはメリットもピンとこないし実装も乱立していて、正直『MVC』『オブジェクト指向』のようにバズワード化してる印象を受けています。 そのうち、「やっぱりお前らのFluxは間違ってる」とか、「お前の言うFluxはどこのFluxだよ」とか言い出すんじゃないかと思ってます。 そもそもFluxとかMVC要らなくね？ また、「ReactはViewしか提供しない」という意見がありますが、個人的
※こちらの記事は過去に個人のブログで投稿したものになります。 最近、マイクロフロントエンドという技術を知っていろいろ調べていたら以下のような記事を見つけました。 マイクロフロントエンドとは何か、非常に分かりやすくまとまっています。 なので日本語で要約・加筆して後で読み返しやすくしていこうと思います。 マイクロフロントエンドとは マイクロフロントエンドとは、 単体で実行可能な、サイトから切り出された特定のUI領域 であり、Webフロントエンドの新たなアーキテクチャです。 この特徴から以下のようなメリットがあります。 インクリメンタルアップグレード シンプルで分離されたコードベース 独立したデプロイ 自立したチーム インクリメンタルアップグレード マイクロフロントエンドは単体で実行可能にするため、使用するフレームワーク、ライブラリが他のマイクロフロントエンドと共通ではありません。 このため、他
The javascript spreadsheet
Spreadsheet data Create from a HTML table Importing data Headers Nested headers Spreadsheet formulas Formulas Formulas on table footer Spreadsheet columns Column types Advanced dropdown Date and datetime picker Images Richtext column Spreadsheet cells Cell comments Meta information Readonly Spreadsheet integrations Webcomponent React Implementation VUE Implementation Angular Implementation Jquery
次世代UIフレームワークとしてOnsen UI 2を考える――UIフレームワークの変遷とOnsen UI 2のこれから – Tech Tech Kansai｜テクテク関西
こんにちは、榊原@rdlaboです。 先日、東京にいったついでに五反田で「フロントエンド 日本酒フェス＠五反田」を開催しました。フロントエンドを嗜んでいるメンバーでただ飲むだけのつもりだったのですが、私がCTOをしている会社のオフィスが近くにあったので二次会はなぜかLT+「OnsenUI2とは？」という議論に（参加者にOnsenUI2の開発者もいたので）。 そこで見えてきたOnsenUI2の役割は思った以上に夢があるものでしたのでちゃんとまとめておきます。 この記事はOnsen UI Advent Calendar 2016の25日目の記事です。 本稿の概要 UIフレームワークはWebデザインを変えた UIフレームワークは、CSSフレームワークからはじまりデザインの幅を広げていってる WebComponentsを利用したフレームワークであるOnsenUI2は、UIフレームワークの最先端 だ
「YOUはどうしてエンジニアに？」は開発現場のエキスパートから滋養深い洞察を聞き出し、皆様のキャリアにお役立てればというインタビュー企画です。エッジな人がどういう考えをお持ちなのか、気になりますよね。第一回は @kitak さんをお迎えしました。（聞き手：こんぴゅ） こん: 今回はkitakさんにお越しいただきました。めちゃんこ出来るエンジニアだと僕は尊敬してるんです。さっそくなんですが、YOUは技術領域ではどこがお得意ですか？ kitak: webのフロントエンドを仕事で担当しているのでそこですかねえ。前職ではRailsをやってました。Vagrantやpuppetを使って環境構築をしたりするのも得意でしたね。 こん: そすよね。とりあえずフロントエンドで困ったらkitakさんに聞いちゃいます。そんなプロフェッショナルなkitakさんですが、YOUの仕事道具でこだわりポイントはあります？
Angular界隈における年に1度のお祭りイベント、ng-conf。今年(2016年)は5/4~5/6にSalt Lake Cityで開催されました。 現地には行っていませんが、ng-conf extend Tokyoというイベントに参加し、1日目と3日目のSessionをpublic viewing的に眺めてきたので、その覚え書きです。 1日目(5/4) Keynote 動画 Angular2の性能の話や周辺エコシステムの話など。聴きながら触ってみたい！と思ったのは下記： Augury AngularJS 1.xでいうところのBatarangle的なツール. 後述. Angular CLI Angular2の雛形プロジェクトや、componentのscaffoldingをしてくれたりするツール。後述. NativeScript 2.0 Mobile向けのプラットフォームであるNative
「いつか使いたいの」なので ほとんどちゃんと使ったことないやつです。 Tool Hubot https://github.com/github/hubot チャットbot開発・実行フレームワーク Botを作ってみたいと言う理由で使ってみたい。 あと人工無能もこれで作れそう(粉ミカン)とか理由は様々 MobileChromeApps ChromeAppsをAndroidやiOSで動かすためのライブラリと変換ツール ChromeApps jsAPIを追随して実装しているようなので chrome.socketsなど新しいAPIは開発中だったりAndroidでは使えるけどiOSでは使えないなどもある。詳細はここで 実は少し使ってるけど ちゃんと使ってないので これでアプリを作ってリリースしたい。 nexe Node.jsをバイナリ化してくれるツール Node.jsの入ってない環境でバイナリだけ移し
やりたかったこと： Reactから子に関数参照を渡すのを綺麗に実装したい 前回からの変化 lit-extended を使えば、テンプレートにコールバックを渡せることを知った 子に対して関数参照を渡すのではなく、 CustomEvent を生成するようにして dispatchEvent するようにした 一旦変換用のイベント定義辞書を渡すようにした WebComponent定義 /* @flow */ import { html, render } from 'lit-html/lib/lit-extended' type Props = { onClick?: Function, text: string } const template = (props: Props) => { return html` <button on-click=${props.onClick}>${props.
HTML5のコミュニティであるhtml5j.orgは2012年9月8日、「HTML5 Conference 2012」を開催した（写真1）。基調講演では、シーエー・モバイル Web先端技術フェロー 白石俊平氏（写真2）とGoogleシニアエンジニアリングマネージャー及川卓也氏（写真3）がHTML5とコミュニティの過去と現在、未来を語った。 最初に白石氏がコミュニティの過去と現在を紹介した。html5.orgは2011年にグーグルとの共催でChrome+HTML5 Conferenceを開催したが、その参加者数は約200人。今回のHTML5 Conference 2012では1000人の参加者枠を用意したが、約30時間で満席となった。コミュニティの参加人数も2011年8月の3785人から2012年9月には4956人へと急増。HTML5への関心の急速な高まりを示すものとなっている。 及川氏はH
こんにちは、@yoheiMuneです。 React.jsでの開発は飽きたなーと思い、次はVue.jsに手を出し始めました。今日はVue.jsがどんなものかをふんわりと理解できる、ハローワールド的なところをブログに書きたいと思います。 目次 Vue.jsとは Vue.js（日本語はこちら）は、フロントエンドJavaScriptのライブラリの1つで、画面描画を行うために使うライブラリです。似たようなものに、Angular.jsやReact.jsやWebComponentなどがありますが、それらと同じく画面描画を行うことができます。 他のライブラリと違うところは「軽量である & 学習コストが低い」というところかなと感じています。使うと分かりますが、非常に楽チンに物事を進めることができます。ということで、これからの案件で使おうと思っている次第です。 あと、公式の日本語サイトが非常に充実しているとい
![[フロントエンド] 軽量モダンライブラリのVue.jsに入門する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/6519d57d01c8d33ad652b2698eeaaf9ef28fba4b/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F500.jpg)
JSer.info #564 - Babel 7.16.0がリリースされました。 7.16.0 Released: ESLint 8 and TypeScript 4.5 · Babel Babel 7.16.0ではClass static blocksが@babel/preset-envに含まれるようになっています。 また、TypeScript 4.5 Betaへの対応、Stage 2であるPipe Operatorへのオプションの追加などが行われています。 また、@babel/eslint-parserがESLint 8へ対応しています。 Node.js向けのTest RunnerであるAVA 4 RC1がリリースされました。 Release AVA 4 Release Candidate 1 · avajs/ava AVA 4 RC1の破壊的な変更としてNode 10のサポート終了、
intro 恒例の振り返りです。 去年の年末に「Go で SPDY サーバを書くと」 言った目標を立ててスタートした年なのでその辺が中心だったと思います。 年の初めにちょろっと SPDY のパッチを go.net に投げて、そっからは HTTP2.0 仕様を追いかけながらサーバ/クライアントのインプリなどをしていました。 Input HTTP2.0 周りを追いかける中で、ネットワーク周りの知識の圧倒的な不足を痛感した。 そのおかげで、今年はアプリケーションよりは、ネットワークプログラミングな年になった気がする。 「若者のプロトコル離れ」が叫ばれていますが、このレイヤを色々と勉強したし、 RFC も色々と読んだ、標準化プロセスにもちょっと参加してみたりした。 ネットワークプログラミングは難しい。 Erlang ずるい。 そして、このレイヤのプログラムを今年ずっと Go でやっていました。 去
JSフレームワークの末端がWebComponentsになるのか、なれるのか、検証してみた - Qiita の記事を読んで、Vue だとどうなるかな、と思って軽く検証した。自分の手に馴染んているのが Vue というだけの理由で、決して React dis ではないです( React は React で、そのうちいいかんじの仕組みが入るような気がする )。 結論、問題なく使えると思う。 そもそも WebComponent を末端で利用するモチベーションは? 現状、CSS フレームワーク、UI フレームワークがあり、そのフレームワークをラップして View フレームワーク( React, Vue, Angular )のコンポーネントとして提供するライブラリをよく見かける( react-xxx とか vue-xxx みたいなの )。こういったライブラリの組み合わせは、UI フレームワークの数を M
JSer.info #390 - Firefox 61がリリースされました。 Firefox — Notes (61.0) — Mozilla Firefox 61 for developers - Mozilla | MDN Firefox 61 サイト互換性情報 | Firefox サイト互換性情報 TLS 1.3のサポートをデフォルトで有効化、アクセシビリティインスペクタの実装、 PerformanceServerTimingのサポートなどが行われています。 AvastやAVGを使っている場合にTLS 1.3での接続に問題が出るケースもあるようです。 1468892 - SSLERRORRXRECORDTOO_LONG with Avast intercepting TLS 1.3 connections またFetch APIのcredentialsのデフォルト値をomitからsa
{ source: 'VIEW_ACTION', action: { type: 'TODO_CREATE', text: 'Write blog post about Flux' } } Select action type by muddydixon · Pull Request #115 · facebook/fluxというPRでは、イベントネームみたいにactionのtypeを指定出来るようにして、シンプルにそのtypeのコールバックを書けるようにしてる。 (今までのやつだとコールバック内でswitchを並べる感じになってる Flux | Application Architecture for Building User Interfaces ) React.js使ってみた - @ ama-ch 資料: React.js使ってみた Reactを使ってみて思った疑問点 先駆者からの
AtroposAtropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and as WebComponent (for use with Angular, Vue, Svelte, Solid and other frameworks)
Vue.js + Vuex でゼロからササッと2週間でフロントアプリ作り直してみて。 - FLINTERS Engineer's Blog
元記事はこちら→http://qiita.com/h0ng0yut0/items/9e1bb519966c905641ca この記事は、ただのFlux的な実装してみたことの雑記です。m( )m "なんとなく"JSのブラウザクライアント側の仕事めんどくさいなぁ〜と思ってた 巷でよくきく話 「なんか、いじるの怖い〜」 「なんか、少しいじったらアプリ壊れた〜」 一言でいうと、改修の影響範囲が見づらい問題ですよね。 こういうことってしばしば起こるんですが、結構 俗に言う"バケツリレー"たくさんある＆多岐に渡る → めんどいなぁわからんなぁ の流れが多い気がします。 そんなこんなで、 バケツリレー辞めたい。 → データのフローが1方通行で、アプリの状態が1箇所にまとまるFlux的なものやりましょう。 という流れはどこもありそう。 やってみて 基本的なVuexの考え方 以下の感じですね。 なんか、こう
JSer.info #373 - TestCafe v0.19.0がリリースされました。 TestCafe v0.19.0 Released - Rapid Test Development Tool, Screenshots of Page Elements, etc | TestCafe ファイルの変更を監視し、更新されたら再実行できるtestcafe-liveコマンドの追加されています。 Cypressもそうですが、テストを書く際にトライアンドエラーがしやすい機能を持ったテストフレームワークが増えている印象です。 また、セレクタの結果をフィルターするfilterVisibleとfilterHidden、テキストマッチした要素を取得するwithExactTextの追加などが行われています。 typewizというTypeScriptの型付を補助するツールが公開されています。 このツールで
マイナーリリースとパッチリリースについては、それぞれのプロジェクトで都度発行されていくようです。 Angular CLIに新たなサブコマンド追加 ng update ng updateを使ってアップデートすると依存関係の更新に加えて、アップデート後でも動作するようにプロジェクトに必要な変更を適用してくれるようです。 例としては、$ ng update angular/coreでアップデートした際に、AngularフレームワークパッケージとRxJSおよびTypeScriptをすべてアップデートし、アップデート後も動作するように互換性のあるrxjs-compatを自動的にインストールしてくれるようです。 https://github.com/angular/angular-cli/wiki/update ng add ng addを使うことによって、プロジェクトに新しい機能を簡単に追加でき、ま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io
CSS勉強するだるさ - mizchi's blog
JavaScriptで最近試そうとしてるライブラリ - mizchi's blog
2016年に使った&来年使いそうな JavaScript 関連のものと所感 - kitak blog
生みの親が語る“Vimの27年”とこれから ―「VimConf 2018」レポート：レポート｜gihyo.jp … 技術評論社
Ionicの全体像、React Native・Flutterとの比較 2020年5月 | Takumon Blog
次世代 Web カンファレンス 2019 アウトラインメモ
Frontrend Conference アウトラインメモ
Micro Frontends導入の覚書｜Dentsu Digital Tech Blog
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話
Webbundle によるサブリソース取得の最適化 | blog.jxck.io
Vue.jsでWeb Componentを作ってみた - アクトインディ開発者ブログ
All the Ways to Make a Web Component - Feb 2022 Update
HTMLってどうなの? JSそれぞれの立場 - Qiita
FluxもMVCも不要？コンポーネント指向Webプログラミング - Qiita
『Micro Frontends』という記事を読んだのでまとめる
YOUはどうしてエンジニアに？ kitakさん編｜こんぴゅ
NG-CONF 2016の雑な覚え書き - Qiita
いつか使いたいJavaScript(Node.js)ライブラリとか - Qiita
続・JSフレームワークの末端がWebComponentsになるのか、なれるのか、検証してみた - Qiita
「HTML5コミュニティと技術の過去・現在・未来」---HTML5 Conference 2012 開催
[フロントエンド] 軽量モダンライブラリのVue.jsに入門する - YoheiM .NET
2021-11-02のJS: Babel 7.16.0、AVA 4 RC1、ウェブサイトのセキュリティヘッダー
2013 年をふりかえる - Block Rockin’ Codes
WebComponent を Vue コンポーネントツリーの末端として使う - kitak blog
2018-07-02のJS: Firefox 61、ECMAScript 2018リリース、CSS4はどこにある？
#pxgridjs でJavaScript忘年会をしてきた
Atropos - Stunning touch-friendly 3D parallax hover effects
2018-03-06のJS: TestCafe v0.19.0、ランタイム情報を使ったTypeScriptの型付け、Web Componentsでの開発
Angular v6がリリースされたのでアップデート内容をまとめてみた！ | DevelopersIO