UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog
はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデザインにステートマシンを導入するメリット 振る舞いに集中できる チームの共通認識として使える 変更に強い おわりに 関連ドキュメント ALPS-ASD UIは2つの要素からなっている Android
【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks
【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks 【お知らせ】 内容を2024年に向けて更新、追加した改訂版を公開しました！ →https://zenn.dev/hideki_climax/books/0e124eb17a67b3 ・HTML/CSSの次は何を勉強すれば良いの？ ・案件が取れない ・未経験だけど転職を考えている ・フリーランスで実績を積みたい そんなあなたの悩み、全て解決します。 JavaScriptをどこまで深めれば案件が獲得できて、収入に繋がるのか。 フリーランスで7年間エンジニアをしてきた僕が思う 「Web制作領域においてJavaScriptで何ができれば良いか」 をまとめました。 そして圧倒的に頻出のUIパーツ8つの作り方を徹底解説しました。初心者でもすぐに実践できます。実際
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
App.js | Mobile webapps made easy
Mobile webapps made easy. Download Get Started App.js is a lightweight JavaScript UI library for creating mobile webapps that behave like native apps, sacrificing neither performance nor polish.
WebアプリケーションにリッチUIをもたらす高機能JavaScriptライブラリ「Wijmo」（ウィジモ）
はじめに 一般にアプリケーション開発環境や実行環境において、標準で備える基本的な機能よりも高度な機能を備えるソフトウェア部品（コンポーネント）が有料で提供される場合があります。開発者はこれらのコンポーネントを活用することで、より少ない工数で品質の高いアプリケーションを作成することができます。グレープシティは.NETやJavaなどの環境に向けてこのようなコンポーネントを提供しています。 今回紹介する「Wijmo（ウィジモ）」は、同社がHTML/JavaScript環境に向けて提供しているJavaScriptライブラリです。JavaScriptライブラリとして広く活用されているjQueryやjQuery UI、jQuery Mobileをベースにして、WebサイトやWebアプリケーションで活用できる高機能で多様なUI部品を利用できます。 本記事ではこのWijmoについて、まず機能やライセンス形
ScaleOut | Supership
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
Breaking down Amazon's mega dropdown
The hover effects on Amazon’s big ‘ole “Shop by Department” mega dropdown are super fast. Look'it how quick each submenu fills in as your mouse moves down the list: It’s instant. I got nerd sniped by this. Most dropdown menus have to include a bit of a delay when activating submenus. Here’s an old Khan Academy dropdown as an example: See the delay? You need that, because otherwise when you try to
New JavaScript UI Library
I have been using it quite substantially for a number of different projects now and must say that I absolutely love the way it works. - Soteri Panagou I've been using your grid on a couple of small projects and I've got to say it's an awesome piece of work. It's very easy to configure and offers a lot of features while staying really responsive. As a programmer it inspires me to write better code.
New JavaScript UI Library
I have been using it quite substantially for a number of different projects now and must say that I absolutely love the way it works. - Soteri Panagou I've been using your grid on a couple of small projects and I've got to say it's an awesome piece of work. It's very easy to configure and offers a lot of features while staying really responsive. As a programmer it inspires me to write better code.
Ratchet
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
お手軽高機能！Closure UI【goog.ui.ColorMenuButton】 | DevelopersIO
デモコード index.html <!DOCTYPE html> <html lang="ja"> <head> <title>goog.ui.ColorMenuButton</title> <meta charset=utf-8> <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script> <script> goog.require('goog.ui.ColorMenuButton'); goog.require('goog.ui.CustomColorPalette'); goog.require('goog.ui.Component.EventType'); goog.require('goog.ui.Menu'); goog.require('goog.ui
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
32. //set Full Screen without StatusBar var ua = navigator.userAgent.toLowerCase(); $.browser.android = /android/.test(ua); $.browser.iphone = /iphone/.test(ua); var portraitHeight,landscapeHeight; window.onload = function(){ ! $("html,body").height("1000px"); ! if($.browser.iphone){ ! ! $("body").css("position","relative"); ! } ! setTimeout(function(){ ! ! scrollTo(1,0); ! ! setTimeout(function()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Notyf: A minimalist JavaScript library for toast notifications.
簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp) - Qiita
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
Reusable Component UI Design
お前自分ちのページャUIが本当に速いと思ってんの？
MVCの先、状態管理、ジェスチャー
GitHub - jakiestfu/Snap.js: A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)
