新しい IE と JavaScriptで動く最近のWebアプリケーション

•

10 likes•11,881 views

yomotsu

Technology

•Quirks Modeで実装している
•IE独自拡張を使っている
•プラグインに頼っている
•よくわからないけど動作保証できない
Saturday, August 3, 13

div{
width: 300px;
padding: 100px;
border: 3px solid #000;
background: #EEEEEE;
}
Saturday, August 3, 13

Standards Mode
Quirks Mode
Saturday, August 3, 13

DOCTYPE宣言モード
なし
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
Q
Q
S
S
S
Saturday, August 3, 13

•ActiveXObject
•VBScript
•Data Binding
•VML
and others...
Saturday, August 3, 13

•ActiveXObject
•VBScript
•Data Binding
•VML
and others...
•Data属性
•SVG
•JavaScript
多くはHTML5でもできます
Saturday, August 3, 13

動画ストリーミングなどはまだ依存せざるを得ませんが
多くのことはJavaScriptでも可能です
Saturday, August 3, 13

•Doctypeをしっかり宣言
•IE独自拡張に頼らない
•プラグインに頼らない
Saturday, August 3, 13

Quirks Modeと
IE独自拡張の延命
Saturday, August 3, 13

...
<head>
...
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>...<title>
...
</head>
...
...
...
Saturday, August 3, 13

http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
Saturday, August 3, 13

•古いIEをほぼ再現できる
•Tridentのバージョンは変わる
•JScriptのバージョンは変わらない
Saturday, August 3, 13

Trident (MSHTML) JScript
IE6
IE7
IE8
IE9
IE10
3.0? (6.0) 5.6
3.1? (7.0) 5.7
4.0 (8.0) 5.8
5.0 (9.0) 9
6.0 (10.0) 10
Saturday, August 3, 13

demo
navigator.userAgent
document.compatMode
document.documentMode
ScriptEngineMajorVersion()
の比較
Saturday, August 3, 13

0
2500
5000
7500
10000
IE7 IE8 IE9 IE10 IE11
SunSpider
JavaScript Benchmark Results
Saturday, August 3, 13

新技術をサポート
(主にIE9以降)
Saturday, August 3, 13

ほぼ標準技術だけで
Webアプリケーションを作れる
Saturday, August 3, 13

•サーバーからはJSONを吐き出す
•ブラウザーはJSONを受け取る
•画面はJavaScriptで構築
Saturday, August 3, 13

最近のJavaScriptに注目を
Saturday, August 3, 13

政府専用メールサービスを作ることになったとしても
フロントエンドでは
標準の技術を使おう
Saturday, August 3, 13

Thank you
@yomotsu
Saturday, August 3, 13

Similar to 新しい IE と JavaScriptで動く最近のWebアプリケーション

jQuery Mobile Deep Dive

Troy Miles

Storyplayer

Stuart Herbert

夜宴39期《Seven》

Koubei Banquet

Websites designed for smart phones are one of the fastest growing segments of the internet. jQuery Mobile makes it easy to create sites for mobile devices, but it is mostly about UI. It doesn’t address the needs of an enterprise application. Things like how to load data from and persist data to the server, how to tie the JavaScript and HTML together, and minimize the amount of data transmitted. In this session I will show how to combine jQuery Mobile with Backbone.js and a ASP.NET Web API back-end. The end result is a website which is fast, efficient, and easy to enhance and maintain.

jQuery Mobile, Backbone.js, and ASP.NET MVC

Troy Miles

JSDay 2013 - Practical Responsive Web Design

Jonathan Klein

Being a developer for years its very easy to get type-cast. You become "The CodeIgniter Guy", the one dev in the office that knows how FooCMS works or just end up farming out CRUD day after day. Well I decided to say "nope" to that & accepted a job where I'd need to know how to do…everything. This talk aims to give you an overview of what you should be looking to learn next if you want to stop being "just a developer" & move into the devops/architecture arena.

Become Master of Your Own Universe - DIBI 2013

Phil Sturgeon

Similar to 新しい IE と JavaScriptで動く最近のWebアプリケーション (6)

jQuery Mobile Deep Dive

Storyplayer

夜宴39期《Seven》

jQuery Mobile, Backbone.js, and ASP.NET MVC

JSDay 2013 - Practical Responsive Web Design

Become Master of Your Own Universe - DIBI 2013

Recently uploaded

Dubai, often portrayed as a shimmering oasis in the desert, faces its own set of challenges, including the occasional threat of flooding. Despite its reputation for opulence and modernity, the emirate is not immune to the forces of nature. In recent years, Dubai has experienced sporadic but significant floods, testing the resilience of its infrastructure and communities. Among the critical lifelines in this bustling metropolis is the Dubai International Airport, a bustling hub that connects the city to the world. This article explores the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Orbitshub

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

Retrieval augmented generation (RAG) is the most popular style of large language model application to emerge from 2023. The most basic style of RAG works by vectorizing your data and injecting it into a vector database like Milvus for retrieval to augment the text output generated by an LLM. This is just the beginning. One of the ways that we can extend RAG, and extend AI, is through multilingual use cases. Typical RAG is done in English using embedding models that are trained in English. In this talk, we’ll explore how RAG could work in languages other than English. We’ll explore French, Chinese, and Polish.

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Zilliz

Exploring Multimodal Embeddings with Milvus

Zilliz

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

ICT role in 21st century education and its challenges

rafiqahmad00786416

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Architecting Cloud Native Applications

WSO2

Artificial Intelligence Chap.5 : Uncertainty

Khushali Kathiriya

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the deployment of external web forms using Jotform for Bonterra Impact Management. This solution can be customized to your organization’s needs and deployed to support the common use cases below: - Intake and consent - Assessments - Surveys - Applications - Program registration Interested in deploying web form automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Jeffrey Haguewood

Vector Search -An Introduction in Oracle Database 23ai.pptx

Remote DBA Services

FWD Group - Insurer Innovation Award 2024

The Digital Insurer

Scaling API-first – The story of a global engineering organization Ian Reasor, Senior Computer Scientist - Adobe Radu Cotescu, Senior Computer Scientist - Adobe Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

apidays

Tracing the root cause of a performance issue requires a lot of patience, experience, and focus. It’s so hard that we sometimes attempt to guess by trying out tentative fixes, but that usually results in frustration, messy code, and a considerable waste of time and money. This talk explains how to correctly zoom in on a performance bottleneck using three levels of profiling: distributed tracing, metrics, and method profiling. After we learn to read the JVM profiler output as a flame graph, we explore a series of bottlenecks typical for backend systems, like connection/thread pool starvation, invisible aspects, blocking code, hot CPU methods, lock contention, and Virtual Thread pinning, and we learn to trace them even if they occur in library code you are not familiar with. Attend this talk and prepare for the performance issues that will eventually hit any successful system. About authorWith two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Victor Rentea

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

MadyBayot

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

Recently uploaded (20)

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Exploring Multimodal Embeddings with Milvus

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

ICT role in 21st century education and its challenges

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Architecting Cloud Native Applications

Artificial Intelligence Chap.5 : Uncertainty

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Vector Search -An Introduction in Oracle Database 23ai.pptx

FWD Group - Insurer Innovation Award 2024

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

AWS Community Day CPH - Three problems of Terraform

新しい IE と JavaScriptで動く最近のWebアプリケーション

1. 新しいIEとHTML5JavaScriptで動く最近のWebアプリケーション小山田晃浩 | @yomotsu | (株)ピクセルグリッド Saturday, August 3, 13

2. Saturday, August 3, 13

3. 新しいIEで動かない？ Saturday, August 3, 13

4. Saturday, August 3, 13

5. Saturday, August 3, 13

6. Saturday, August 3, 13

7. Saturday, August 3, 13

8. •Quirks Modeで実装している •IE独自拡張を使っている •プラグインに頼っている •よくわからないけど動作保証できない Saturday, August 3, 13

9. Quirks Mode Saturday, August 3, 13

10. div{ width: 300px; padding: 100px; border: 3px solid #000; background: #EEEEEE; } Saturday, August 3, 13

11. Standards Mode Saturday, August 3, 13

12. Standards Mode Quirks Mode Saturday, August 3, 13

13. Saturday, August 3, 13

14. DOCTYPE宣言モードなし <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html> Q Q S S S Saturday, August 3, 13

15. IE独自拡張 Saturday, August 3, 13

16. •ActiveXObject •VBScript •Data Binding •VML and others... Saturday, August 3, 13

17. •ActiveXObject •VBScript •Data Binding •VML and others... •Data属性 •SVG •JavaScript 多くはHTML5でもできます Saturday, August 3, 13

18. 要プラグイン技術 Saturday, August 3, 13

19. 動画ストリーミングなどはまだ依存せざるを得ませんが多くのことはJavaScriptでも可能です Saturday, August 3, 13

20. Saturday, August 3, 13

21. •Doctypeをしっかり宣言 •IE独自拡張に頼らない •プラグインに頼らない Saturday, August 3, 13

22. Quirks Modeと IE独自拡張の延命 Saturday, August 3, 13

23. IEは古いエンジンも備えています Saturday, August 3, 13

24. Saturday, August 3, 13

25. Saturday, August 3, 13

26. Saturday, August 3, 13