UIkitUIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
Docz
Powered by GatsbyStarting from v2, Docz is entirely built using GatsbyJS. It's optimised for a lightning fast development experience and speedy build times. This also allows you to leverage GatsbyJS's huge ecosystem of plugins and tools. Zero configNo need to worry about complex configuration settings to build and run your documentation. With Docz you can create customizable sites with a single co
recomposeではじめるReact Higher-order Components(HoCs) - Qiita
最近、recompose を使用して React を書いており、ある程度知見が溜まって来た為、整理の意味を込めて纏めてみました。不備、不明点等がありましたら、コメント頂ければ幸いです。 TL;DR HoCs 、recompose とは recomposeの代表的な API の紹介・使い方 setDisplayName：Component に任意の名前付与 withStateHandlers：State 、handler の管理 compose：複数の recompose API を束ねる lifecycle： React のライフサイクル管理 pure：不要なレンダリング削減(パフォーマンス向上) onlyUpdateForkeys：不要なレンダリング削減(パフォーマンス向上) branch：Boolean を使用した Component の出し分け renderNothing： 常に n
コード設計編: context による縦軸分類とレイヤードアーキテクチャ（新規開発のメモ書きシリーズ3）
流行りの monorepo 風味と DDD 風味？ 今回はコードの設計について書き残します。主に JavaScript 界の話です。Web アプリケーション全体の設計は次回で、今回はコード面の設計に限定して書き留めています。プロダクト全体のアーキテクチャは次の記事で述べる予定ですが大雑把には、メディアっぽいサービスでありつつも SPA + SSR が許容される程度には要件定義の時点でコードの行数がかさむことが約束されたプロダクトです。 今回は大きく分けて下記について述べています ディレクトリ構造 オブジェクトの種類と責務 Flux 的なデータフロー あくまで風味なので今回、専門用語の意味ズレなどは優しくお願いします... このシリーズの他の記事はこちら。 技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選 ビルド設定編: UA に応じた最適な JS バンドルの配信と web
TypeScript 2.3 RC 変更点 - Qiita
追記1: plugins周りに参考Issueや @Quramy パイセンの記事へのリンクを追加。 こんばんは@vvakameです。 TypeScript 2.3 RCがアナウンスされましたね。 What's new in TypeScriptも更新されているようです。 TypeScriptのリリースサイクルの変更がアナウンスされた後の初めてのリリース候補です。 変更点まとめ --target es3 と --target es5 でもジェネレータが使えるようになった Generator support for ES3/ES5 非同期イテレータのサポート Asynchronous iterators async generatorsとasync iterationのサポート for-await-of のサポート --downlevelIteration オプションの追加 Genericsの型
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
ReactでTDD（テスト駆動開発）を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | POSTD
最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
React Native用の統合開発環境「Deco IDE」、オープンソースで公開
「React」は、2013年にFacebookがオープンソースとして公開したJavaScriptフレームワーク。仮想DOMなどの手法を用いてユーザーインターフェイスの開発を効率的に行えるのが特長です。 そのReactと同じ書き方のJavaScriptでiOSやAndroidに対応したモバイルアプリケーションを開発できるのが「React Native」です。 「Deco IDE」は、React Native用の統合開発環境としてDeco Softwareが開発したもの。オープンソースとして公開されました。 DecoはMac OS X用のソフトウェア（Xcodeのインストールが必要）。iOSシミュレータを内蔵し、iPhone 6s/6s Plus、iPad Pro、iPad Airなどでの見え方を確認できます。 Deco Componentsと呼ばれるコンポーネントをプログラムの中に組み込むこ
Oracle JavaScript Extension Toolkit (JET)
You are using an outdated and unsupported browser! The use of Internet Explorer with the JET Website is not supported! It is highly recommended that you use the latest version of browser from the vendor of your choice. For Microsoft, that would be Edge or Edge(Chromium) and not Internet Explorer. https://www.microsoft.com/en-us/windows/microsoft-edge
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita
想定しているシチュエーション 非SPA環境で個別にマウントされるコンポーネントがそれぞれで小さくFluxするような環境。 SPAガッツリ組むのでないなら、Fluxフレームワークは不要だと思っていて、とは言えオレオレ構成も行き過ぎると害になる。 その辺のバランスをとって、次のような構成がいいのではないか、と考えてみた。 考え方 コンテナがEventEmitterを1つ保持する コンテナはEventEmitterの各種イベントをListenする コンテナはpropsとstateを区別して扱い、stateを更新する コンテナはコンポーネントを一つだけ描画する コンポーネントはpropsとして渡されたEventEmitterを発火させる コンポーネントはEventEmitterをListenしない コンポーネントはpropsのみ扱う コード // src/components/header.js
OverReact - React File & QR Generator, Social Media Integration
The React File Generator Wireframe React components, download starter files with one click and create an app to stream posts from social media platforms (Twitter, etc.). This tool not only allows users to wireframe React components and stream posts from social platforms like Twitter, but it also integrates seamlessly with a generator to create QR code linking directly to the developed applications
Web SmartHome - Webの技術スタックで実現するスマートホームの世界 - Advanced Technology Lab
加藤(lyokato)です。 IoTの分野の中で、Smart Home, Smart Officeというカテゴリがあります。皆さんが耳にするのは、 例えば近接で自動的に開閉するドアロックの話や、AppleのHomeKitの話かもしれません。 こういった分野の技術の話は、ハードウェアに寄ったものであったり、あるいはAppleが決めた規格をiOSのSDKを通して利用するだけであったりするため、Web技術者の多くは距離を感じてるのではないでしょうか。 今回は、可能な限りオープンスタンダードなWebの技術を使い、この分野で新しい体験ができる環境を作ってみました。 キーとなるのはPhysical Web, Web Bluetooth, Web Componentsです。 Physical Webによる情報/サービスのフック まず、今回の環境で中核となるのはPhysical Webです。 Physic
Facebookのエンジニアも登壇！「React.js meetup #2」イベントレポート | Goodpatch Blog
こんにちは。グッドパッチのフロントエンドエンジニア/グロースデザイナーの右寺です。 今回は、9/8(火)にイベント＆コミュニティスペース dots.で行われたイベント「React.js meetup #2」のレポートをお届けします！ React.jsとは？ React.jsはFacebook謹製のJavaScriptライブラリです。一昨年のリリースから急激に人気が上昇しています。 その特徴は、同じJavaScriptライブラリであるAngularJSがMVCフレームワークとして全般的な機能を提供するのに対し、React.jsではMVCのViewにあたる部分をComponentとして提供することに特化している、と言えます。 現在、React.jsはFacebook社内だけではなくYahoo!やTwitter、Airbnbなどでも採用されているようです。 主催のお二人 今回のイベントは、昨年末
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！（後編）─技術の進化は必要か？
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！（後編）─技術の進化は必要か？ 白石 俊平（HTML5 Experts.jp編集長） 本対談記事は、Extensible Webが誕生してから2年で何が変わったのか、そしてこれからWebはどうなっていくのかを、有識者の方々にそれぞれの立場から語っていただこうという企画です。 後編である今回は、Extensible Webの現在、そしてWeb技術の未来にフォーカスしたお話になります。Extensible Webの概要や、Extensible Web以前からあるWebの問題点について知りたい方は、前編をご覧ください。 HTML5は（ついに）モジュール化される 白石 では、Extensible Webの考え方が提唱されてから2年が過ぎたわけですが、どのような変化が起きつつありますか？まずは皆さん、思いついたもの
TypeScriptでstaticなメンバを持つinterfaceみたいなものを実現する方法 - Qiita
ここ数日、TypeScript+Angularの書き味を試しているのですが、staticなメンバを持つinterfaceを作ったろと下記のような感じで書いてみました。 すると、staticキーワードに対してこんなエラーメッセージが。 Property or signature expected. （確認したTypeScrptバージョンはv1.5-betaです） 対応していないんだろうなとは思いましたが諦めきれずにぐぐってみると、stackoverflowの２年前のスレッドでstaticなメンバを持つinterfaceみたいなものを実現する方法が紹介されていました。 How to define static property in TypeScript interface この回答 方法としてはinstanceメンバを定義したinterfaceと、staticメンバとして扱うinstance
T3 JavaScript Framework - T3 JavaScript Framework
Modular Design T3’s modular approach to applications allows you to focus on building small pieces of functionality. Made for Collaboration T3 components can be developed and tested independently, making it perfect for large, distributed teams. Promotes Best Practices One of T3’s core goals is to prevent mistakes before they happen, by making it difficult for developers to do the wrong thing. Desig
脱PolymerなWeb Componentsデザパタ - ジンジャー研究室
はじめに 今朝話題になっていたWeb Componentsの基本的な使い方・まとめ に触発されてみる。 すごい…！私にはこんな緻密な資料は書けないorz だけど何か書きたい。書くぞ。 そろそろWeb Componentsしたい Web開発に革命をもたらすと噂のWeb Componentsだが、そろそろプロダクションへの導入を検討したい。 2014年12月現在、Chrome 36+で全機能が使えるので、デモ画面や開発（テスト）ツールでは既にPolyfillなしで色々出来る。積極的に遊んでみたい。 とはいえ、現状と言えばWeb Componentsに関する情報は紹介記事がほとんどで、あまりプラクティカルな領域に踏み込めていない感がある。まあそんなものは実際に使い始めればわんさか出るので、別にその時になってからでも良いのだが、せっかくなので戦略の一つや二つ練っておきたい。 もうひとつ、Googl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MUI: The React component library you always wanted
