Home - Wicket
Announcing Apache Wicket 10 : build modern web applications with Java! The Apache Wicket project announces the 10th major release of the open source Java web framework servicing websites and applications across the globe since 2004. Built on top of Java 17, this version of Wicket brings web development into the modern Java world, offering a fundamental tool to write modern and robust web applicati
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 (編注：2016/7/27、いただいたフィードバックをもとに記事を修正いたしました。) 概要 この投稿は、HOCパターンを利用してみたいという 上級ユーザ 向けの記事です。もしReactが初めての方は、まず Reactのドキュメント を読むところから始めるとよいでしょう。 Higher Order Componentsは、さまざまなReactライブラリにとって価値があることがわかっている素晴らしいパターンです。この投稿で、HOCとは何か、できることは何か、制約は何か、どのように実装するのか……という点について詳細に見ていきます。 付録として、関連トピックについても見ていきます。それらは、HOCを学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので
シンプルさとパフォーマンスを両立した API 設計と実装の一例 - HeartRails Tech Blog
こんにちは、エンジニアの村田です。今回はシンプルさとパフォーマンスを両立した API を作るためにはどうすればよいのかについて述べていきます。 背景 いままで API サーバーを作ってきて、シンプルな API にすればパフォーマンスが犠牲に、パフォーマンスを優先すれば実装が複雑になって保守が大変になるということを経験してきました。具体的には、 関連リソースの Entity が何重にもネストしていたり、同じリソースに一覧用、詳細用などの Entity があり実装、保守が大変 1. の問題を解消するためにシンプルな API にする 2. では N+1 の問題がありパフォーマンスが悪い 1. 2. の問題を解消するためにリソースの Entity はシンプルにしつつ、パラメーターで関連リソースを指定すると関連リソースの Entity を埋め込んで返すようにする 4. だと関連リソースの権限管理やペ
Astro
One frontend architecture with endless possibilities Step into the future with Islands — Astro's next-gen frontend architecture. Supercharge your development with automatic JS-to-HTML streaming and a beloved developer experience. Content-first websites Fetch data from your CMS or work locally with type-safe Markdown and MDX APIs. Astro automatically removes unused JavaScript and renders to HTML fo
「経年劣化に耐えるコード」というのは、だれもが目指すものでしょう。「そもそもフロントエンドのコードは、今ある技術で最良のものを書き捨てるべき」という意見も理解できますが「備えあれば憂いなし」ということもありますので、ここにメモを残します。あくまで、私なりのベストプラクティスですのでご了承ください。 5層に別れた SFC 私はレイヤーによる技術の分離で、ReactComponent の経年劣化に備えています。ここでいうSFCとは「Stateless Functional Component」の略称ではありません。Vue.js の文脈にある「Single File Component」を指します。 // (1) import層 import React from 'react' import styled from 'styled-components' // (2) Types層 type
IBM Lotus User Interface Developer Documentation - Home
This documentation was created as part of a Lotus® initiative to remove arbitrary differences in our product user interfaces. It describes the CSS and HTML markup structure used in many Lotus® products. Use the information in this documentation to help you customize Lotus® products for deployment in your enterprise or to help you build componentry that seamlessly integrates with Lotus® products. Q
Componentによるフロントエンドのパッケージ管理
直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー兼、依存解決込みのビルドツールです。クライアントサイドについて、JSのパッケージマネージャーやビルダーは既にありますが、Componentは HTML/CSS/JSをセットにして扱うことができます。 npmでいうpackage.jsonと同様に、component.jsonという定義ファイルによって、パッケージの依存関係やリポジトリなどの各種情報を示します。 component/component コア部分のリポジト
React.jsでの開発を始めてから微妙にハマったポイント、また「これを早めに知っておけばもっとコードを簡潔に書けたのに・・！」という点がいくつかあったので、それらのTipsを共有します。 renderで返すComponentは単一の親でなければならない まずは入門編。Reactを始めた人は一度はエラーになったことがあるかも。 renderメソッドで返すのは単一の親のComponentであり、複数の親のComponentを返すことは出来ません。 必ず一つの親になるようにWrapしてあげましょう。 // エラーになる render(){ return( <div>aaa</div> <div>bbb</div> ); } // 正常 render(){ return( <div> <div>aaa</div> <div>bbb</div> </div> ); } renderで空を返す 子コ
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
Angular 2から6までの主要な進化をまとめた記事を読みたい。— Masahiko Sakakibara (@rdlabo) 2018年4月20日 逆にIonicの変遷が知りたいですね 最近Stencilも出てきたしその辺の絡みとか俯瞰的に見てみたいです— lacolaco (@laco2net) 2018年4月20日 rdlaboさんがしっかりGW明けにIonicの記事書いてくれたので、僕もAngularのv2からv6まで、3年弱の変遷についてまとめます。 Ionic 2 から 4 への、この2年間の進化を振り返る 前Angular v2時代 Angular v2 オフラインコンパイル AngularJSへの .component 逆輸入 Animation API Language Service Angular CLIとスタイルガイド SystemJSからwebpackへ For
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
MeCab: Yet Another Part-of-Speech and Morphological Analyzer
MeCab に至るまでの形態素解析器開発の歴史等はこちらをご覧ください メーリングリスト 一般ユーザ向けメーリングリスト 開発者向けメーリングリスト 新着情報 2008-02-03 MeCab 0.97 マルチスレッド環境で辞書を開くときの排他制御がうまくいっていなかったバグの修正 Windows版でインストール時に辞書の文字コードを指定できるようになった 一部のコンパイラで正しくコンパイルできなかった問題の修正 部分解析モードを変更するAPI の追加 (Tagger::set_partial()) ラティスの生成レベルを変更するAPI の追加 (Tagger::set_lattice_level()) 温度パラメータを変更するAPIの追加 (Tagger::set_theta()) 全候補出力モードを変更するAPIの追加 (Tagger::set_all_morphs()) 2007-
なぜReactなのか - しゅみは人間の分析です
なぜReactなのか React, Cyclejs, Reduxを学んだ上でこれらの技術が何を解決したのかまとめてみる。発想はオリジナルではなく、今まで私が読んだ記事から拝借した解釈などが含まれている。たぶんReact, Fluxを学んだ人にとっては当たり前の感覚を言語化しているだけの内容となる。 TL;DR Q: なぜReactなのか A: フロントエンドが自由度の高いGUIアプリケーションになった。既存の手法では自由度の高いGUI実装を人間にわかりやすく管理することが難しくなった。 自由度の高いGUIな世界 自由度(複雑さ)の低い時代ではrender済みのDOMの上にDOMを操作する(jQueryによる)UIを載せる設計でも十分だった 現代のwebフロントエンドではVisual StudioやXcodeで作るネイティブGUIと同等の複雑さを求められる時代になっている jQueryだけで
React Component 視点でのアトミックデザインの解釈といくつかの疑問 - mizchi's blog
フロントエンドの中でも、JS書くプログラマと、CSSを書くマークアップと、デザインカンプを作るデザイナで、コンポーネントという概念がズレる。だいたいこれらが一人だったり兼任だったりで1~2レイヤーの開発ステップになるが、完全分業だったり人が多くなると混乱の元になる。 誰かが決定的に間違ってるというつもりはない。正直、どっちかというと本来のデザイナ側の用語定義に倒した方がいい気がしているが、プログラム上の都合もいろいろ混ざってきて、話が簡単ではない。 自分の理解が間違ってる可能性もある。この記事はレビューをもらうために書いている側面もあり、指摘されたら追記していく。 読んだもの。 Atomic DesignとCSS設計 - Atomic Designとは何か | CodeGrid Atomic Designの考え方と利点・欠点 – wkr. Atomic Design の大雑把な理解 基本的
UI Document
情報アーキテクチャ、インタラクションデザイン記述のためのビジュアルボキャブラリー version 1.1b-j (29 June, 2002) based on version 1.1b (6 March 2002) 目次 サマリー バージョン履歴 はじめに 基本概念 基本要素：ページ、ファイル、そしてそれらの集まり 関係性の記述：コネクターと矢印 すべてを一度に：並列セット 一時中断：連続ポイント 共通要素：エリアと反復エリア 再利用可能な要素：フローエリアと参照 条件要素の基本概念 選択せよ：意志決定点 探検者(パスの誘導)：条件的なコネクターと矢印 複数の選択：条件的な分岐 一つか複数か：条件的な選択肢 一つの決定、複数のパス：クラスター 制約条件あり：条件的なエリア 結論 ダウンロード可能なパーツライブラリ サマリー ダイアグラムはウェブ開発チーム内で情報アーキテクチャやインタラク
React.jsとは - Qiita
このAdvent Calendarについて 今年になって急に盛り上がってきたように感じるReact.jsですが、「ちょっと前まではAngular.jsって言ってたのに！」っていう人も多いと思うので、Advent Calendar形式で簡単に紹介していきたいと思います。 React.jsの重要な要素であるVirtualDOMについては別にAdevent Calendarがありますのでそちらも是非見てください。 ※既に↑のAdvent Calendarがあったため、これは1人で書くように作ったものなので書く人が誰もいなかったわけではないです。 React.jsについて なぜ盛り上がってきたのかは正直よくわかっていないのですが、個人的にはgithubのatomがパフォーマンス向上のためにReact.jsを使うことにしたという記事を見て興味を持つようになりました。 React.jsはFaceboo
All Microsoft Global Microsoft Security Azure Dynamics 365 Microsoft 365 Microsoft Teams Windows 365 Tech & innovation Microsoft Cloud AI Azure Space Mixed reality Microsoft HoloLens Microsoft Viva Quantum computing Sustainability Industries Education Automotive Financial services Government Healthcare Manufacturing Retail All industries Partners Find a partner Become a partner Partner Network Fin
Open standards for building event-driven applications in the cloud
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
SPAを考える会 (D3勉強会 2016.10.06) by @kitaly (twitter: @kita_ly) 自己紹介 @kitaly Twitter: @kita_ly ソフトウェアエンジニア REST API開発 (Scala/Play) SPA開発 (TypeScript, Angular.js, React.js) ビズリーチ HRMOS プロダクト開発部 採用管理 (2016年6月リリース) 勤怠管理, 評価管理, その他HR系サービス (Coming Soon..) 過去の発表資料 サーバサイドエンジニアが 1年間まじめにSPAやってみた ビズリーチではDBFluteハンズオンやってます はじめに React / Redux / Webpack 前提の話ですが 他のコンポーネント志向FWなどでも、ユースケースやワークフローは応用可能だと思っています 新しいツール
[archived] メンテナブルな React Component を目指すための小技集 - Qiita
Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
![[archived] メンテナブルな React Component を目指すための小技集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7cb674b8df50065447b8523b0d6ff79fd4daff89/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCYXJjaGl2ZWQlNUQlMjAlRTMlODMlQTElRTMlODMlQjMlRTMlODMlODYlRTMlODMlOEElRTMlODMlOTYlRTMlODMlQUIlRTMlODElQUElMjBSZWFjdCUyMENvbXBvbmVudCUyMCVFMyU4MiU5MiVFNyU5QiVBRSVFNiU4QyU4NyVFMyU4MSU5OSVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFNSVCMCU4RiVFNiU4QSU4MCVFOSU5QiU4NiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTRiMjczMDE3NTRjZjY5MGM2YjE4ZDk1OGM3YTQ0N2M%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGVycmllcnNjcmlwdCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTFkZjZjZDM1M2Y2ODg4ZDVlMjFmNTY0MWQ2N2QyNWQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D67d5b855250304fbfd5b3ced00c9b48a)
Components are interactive building blocks for creating a user interface.
Tailwind UI - Official Tailwind CSS Components & Templates
Build your next idea even faster.Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.
Composable な UI 設計を目指したフロントエンド開発 | MEDLEY Developer Portal
2018-02-27Composable な UI 設計を目指したフロントエンド開発こんにちは、開発本部の舘野です。医療介護の求人サイト「ジョブメドレー」の開発を担当しています。 昨年、ジョブメドレーでは事業所が利用する採用管理画面の UI リニューアルを行いました。ユーザが使いやすい UI づくりを目指すために、長期間にわたり誰が開発しても一貫性ある UI を実現できるようなシステムが必要です。そこで今回は「Composable」な UI システムの実現をテーマに、どのように開発を行ったのかについて、共有させていただきます。 背景：画面や機能追加のたびに UI の一貫性がなくなっていたジョブメドレーの採用管理画面とは、医療機関や介護施設の採用担当者が求人情報の管理や応募者の選考状況の管理などを行う画面です。 この採用管理画面ですが、リニューアル以前はAngularをフレームワークとして採
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
真のコンポーネント粒度を求めて
Object Oriented CSS https://www.slideshare.net/stubbornella/object-oriented-css Bootstrap - Components http://getbootstrap.com/components/ BEM https://en.bem.info/ Atomic Design http://atomicdesign.bradfrost.com/ Enduring CSS http://ecss.io/
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
React – A JavaScript library for building user interfaces
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is writ
Takuto Wada @t_wada TJ が component を開発するにあたっての所信表明エントリ。なぜ npm や bower や browserify とは別のものを開発することにしたか。 / “Components - TJ Holowaychuk” htn.to/713F39 2014-06-17 17:36:01
GitHub - azu/large-scale-javascript: 複雑なJavaScriptアプリケーションを作るために考えること
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
ng-kyoto 主催「ng-kyoto Angular Meetup #3」での発表資料です。 http://ng-kyoto.connpass.com/event/20512/
昨日01/21に【サポーターズ】React×ReduxにおけるTypeScript入門(https://supporterzcolab.com/event/679/) というイベントで登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。 内容はTypeScriptの基本的な部分とReactやReduxの経験者向けのTypeScriptでの書き方の説明をサンプルコード付きでさせていただきました。 TypescriptとはTypeScriptをはじめる方法 TypeScriptの型について 一緒に入れると良いライブラリ ReactのComponentを書く Reduxのフローを書く TypeScriptを導入してみて
Android で使用する基本的な UI Components の紹介をしていこうと思います。 エンジニアが実装する時の Class 名と Material Design の名称が違うものもあるのですが、デザイナーは Material Design のガイドラインを参考にすることが多いと思うので、基本はガイドラインの名称を使っています。 # NavigationDrawer、BottomNavigation が抜けていたので追記しました (2018/10/27) OS 系 ・StatusBar ・NavigationBar ナビゲーション系 ・TopAppBar ・BottomAppBar ・NavigationDrawer ・BottomNavigation ・Tab ・BottomSheet コントロール系 ・Button ・FloatingActionButton (FAB) ・Sw
BismuthUpdate from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separ
Flat Rounded Square UI Kit
Flat Rounded Square UI Kit Download for Free Return to the Article
React.js in patterns
Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript. Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | POSTD
経年劣化に耐える ReactComponent の書き方 - Qiita
React.jsの知っておいて損はないTips - Qiita
Angular v2からv6までの変化をまとめてみた - 余白
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
Home - Office UI Fabric
CSS Architecture on Vue.js
Next.js App Router (app ディレクトリ) の逆引き辞典
React Storybook で変わるUI開発フロー (Redux Flavor) - Qiita
Components – Material Design 3
http://duojs.org/
Web フロントエンド開発用パッケージマネージャ component について
CSS in JS と CSS Modules // Speaker Deck
デザイナー・エンジニアの
コンポーネント分類基準と
その理想郷 - Speaker Deck
React×ReduxにおけるTypeScript入門
エンジニア以外にも知ってほしい Android の UI Components｜NUmero｜note
Presentational and Container Components