CIRCUIT 2015 - Glimpse of perceptual diff

1 like440 views

The document discusses various tools and methods for visual regression testing in web development, focusing on perceptual differences using tools like resemble.js, CSS Critic, and dpxdt. It includes setup instructions, comparisons of images, and limitations of each tool. Additionally, helpful resources and links to further information are provided for implementing these testing techniques.

Technology

CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Glimpse of
Perceptual Diﬀ
Rachel Ingles

Diﬀerent names
Perceptual

Diﬀ

User

Interface

Tes4ng

CSS

Regression

Tes4ng

Visual

Regression

Tes4ng

Visual comparison
Stable
New
Release

x
x
x
Image
from
scalingengineeringfordigital.ﬁles.wordpress.com

Site1: (Sample production)
Sample
site
from
Michael
Gilbert

Resemble.js (http://huddle.github.io/Resemble.js/)
Diﬀerent
Same

Compare

Analyze

Image

Resemble.js: Code snippet
resemble(file).compareTo(file2).onComplete
(function(data){

return
data;

/*

{

misMatchPercentage
:
100,
//
%

isSameDimensions:
true,
//
or
false

getImageDataUrl:
function(){}

}

*/

});

Other tools
Takes
screenshots

Compares
images

Generates

reports

Images
from
cliparts.co

CSS Critic (https://github.com/cburgmer/csscritic)
•  Lightweight
tool for CSS

CSS Critic: Setup
•  npm
install
csscritic

$CSS Critic: Setup •  Create RegressionRunner.html file •  Register page/s under test csscritic.add({ url: 'SOME_URL', // link to the test case HTML document // Optionally: desc: 'some text', // a description of the test case width: number, // the viewport width in pixel height: number, // the viewport height in pixel … });$

CSS Critic: Limitations
•  Firefox and Chrome only
•  Same origin restrictions

Dpxdt (https://github.com/bslatkin/dpxdt)
workers

$Dpxdt: YAML conﬁguration setup: | python -‐m SimpleHTTPServer waitFor: url: http://localhost/Site1/www/index.html timeout_secs: 5 tests: -‐ name: demo url: http://localhost/Site1/www/index.html config: viewportSize: width: 800 height: 600 injectCss: | body { background-‐color: white; }$

Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]

•  update
Image
from
cliparts.co

Baseline

Compare

?

Local Dpxdt: Modes
dpxdt
[update|test]
[test_directory]

•  test
Images
from
cliparts.co

Baseline

Compare

Dpxtd: Server Approach
•  Python virtual directory

Dpxtd: Server Approach options
•  Site Diff
•  Pair Diff
•  Diff My Images
•  Diff My URLs

Dpxtd: Site Diﬀ
Main

Page1

Page3

Page4

Page2
Page5

Dpxtd: Pair Diﬀ
Site
1
Site2

Img1

Img2

Img3

Img1

Img2

Dpxtd: Diﬀ My Images
Before

Img3

Img2

Img1

AMer

Img3

Img2

Img1

Dpxtd: Diﬀ My URLs
Before

URL3

URL2

URL1

AMer

URL3

URL2

URL1

EXAMPLE: Pair Diﬀ
./run_url_pair_diff.sh
[build
num]
[site1]
[site2]

Summary
Images
from
cliparts.co

Selenium

PhantomJS

ResembleJS

ImageMagick

CSSCri4c

Dpxtd

PhantomCSS

Wraith

Applitools

Capture
Compare
Report
Perceptual

Diﬀ

References
•  Responsive Started Kit Pro - https://github.com/
mpgilbertusa/Responsive-Starter-Kit-Pro
•  Resemble.js – http://huddle.github.io/Resemble.js/
•  CSS Critic - https://github.com/cburgmer/csscritic
•  Dpxdt - https://github.com/bslatkin/dpxdt

Rachel Ingles
Test Automation Developer
ICF Interactive
rachel.ingles@icﬁ.com

This document provides an outline for a Python programming workshop for ArcGIS. It discusses using Python to access ArcGIS commands, attribute tables, and geometries for geoprocessing. It covers Python data types like lists and tuples, string processing, functions, and accessing attribute tables using search cursors. Exercises demonstrate selecting features by attributes and location using cursors and layers.

Managing data workflows with LuigiTeemu Kurppa

The document discusses managing data workflows, particularly through the use of Luigi, a tool developed by Spotify for data pipelines. It details the extraction, transformation, and loading (ETL) processes involved in customer analytics and emphasizes the importance of handling complex data workflows. Additionally, it highlights features of Luigi such as task dependencies, targets, and the ability to resume workflows after failures.

Automation in ArcGIS using ArcpyGeodata AS

This document discusses how automation can be used with geodatabases in ArcGIS using the ArcPy module in Python. It provides examples of using ArcPy to explore geodatabase content, simplify administrative tasks like creating indexes and setting privileges, and implement data workflows like conversion and distribution. ArcPy allows access to common data structures, geoprocessing tools, and map documents through its modules. Understanding geodatabases, Python concepts, and the ArcPy package are required to automate tasks with the geodatabase.

CIRCUIT 2015 - Orchestrate your story with interactive video and web contentICF CIRCUIT

Robb Winkle presented on using PopcornJS, an open source JavaScript library, to create interactive and immersive media experiences within Adobe Experience Manager (AEM). He discussed PopcornJS and the ButterJS editor, lessons learned from converting a Popcorn Maker site to AEM, and ways PopcornJS has been used within AEM projects. Some suggested improvements included persisting timeline changes to components and adding read-only modes. Resources provided included code on GitHub and links to alternative timeline frameworks.

CIRCUIT 2015 - Responsive Websites & Grid-Based LayoutsICF CIRCUIT

The document outlines the features and functionalities of Adobe Experience Manager 6.1, focusing on responsive web design and grid-based layouts. It explains the differences between adaptive and responsive design, offers a workflow for creating responsive content, and provides detailed steps for setting up responsive editing and developing grid configurations. Additionally, it includes practical examples of grid markup and configuration for front-end developers.

Circuit 2015 Keynote - Carsten ZiegelerICF CIRCUIT

The document discusses the evolution of content management system architectures from monolithic to modular designs using OSGi and microservices. It covers how earlier systems became difficult to maintain and scale, and how a rewrite of the Day/Adobe CQ5 platform using OSGi and Apache Sling addressed these issues. The talk outlines benefits of modularity and microservices for building systems that can rapidly adapt, integrate, and scale massively to support modern web applications.

CIRCUIT 2015 - 10 Things Apache Sling Can DoICF CIRCUIT

The document outlines an Adobe developer event discussing the capabilities of Apache Sling, an open-source project, and its modular framework. It highlights the extensive features of Sling, including resource management, job distribution, and a query API, while emphasizing its stability and cloud compatibility. The presentation concludes by encouraging community participation in the development of Apache Sling.

Testing CSS - Front end ops by Arpit MaheshwariArpit Maheshwari

This document discusses different styles of testing web pages, including testing locally using a preferred editor and browser, broader testing across targeted browsers and devices, and testing on development and production environments. It also describes cross-browser testing, including manually testing across browsers, and automation tools for cross-browser testing using approaches like image diff testing and frozen DOM testing.

Web Pages Visual Similarity - Search Central Live Zurich 2024Giacomo Zecchini

The document discusses a research project led by Merj to define and implement a method for measuring visual similarity between web pages, in response to a client's need for brand consolidation. It details various machine learning approaches and the use of headless browser technology to compare elements on pages by their coordinates and dimensions, employing algorithms such as the Jaccard index for similarity calculation. The project yielded successful results, with visual similarity metrics integrated into business goals, alongside additional use cases for web page analysis.

Advanced Automated Visual Testingadamcarmi

Adam Carmi, co-founder and VP of R&D at Applitools, discusses the necessity and benefits of automated visual testing for quality assurance in software development, highlighting its ability to manage a broad testing matrix across various platforms. The document outlines how automated visual testing operates, the tools involved, and its integration within development workflows to ensure visual integrity. Key tools and methods for image comparison are also presented, emphasizing the efficiency and effectiveness of these automated processes.

Advanced automated visual testing with Seleniumadamcarmi

The document discusses the importance of automated visual testing in software development, particularly in relation to various web browsers, devices, and screen resolutions. It outlines the methods, tools, and technologies involved in conducting these tests, including the use of image comparison engines and the role of different UI testing tools. The presentation emphasizes the necessity for fast feedback and high-quality assurance as release cycles continue to shorten in the industry.

Authenticate Aadhar Card Picture with Current Image using Content Based Image...ijtsrd

This paper reviews algorithms for matching a person's Aadhar card photo with their current image using content-based image retrieval (CBIR) techniques. It discusses various image comparison methods, focusing on feature-based comparison techniques, such as SIFT, SURF, and ORB, and addresses challenges like image rotation and format discrepancies. The proposed methodology employs the OpenCV library combined with a FLANN matcher to enhance accuracy in facial recognition tasks.

AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdfApplitools

The document discusses AI-powered testing strategies for e-commerce during the holiday shopping season, focusing on statistics, challenges, and categories of AI in testing. It highlights the need for effective testing methods amidst increasing complexity, resource limitations, and dynamic content in online shopping environments. The document also outlines various AI applications, including visual testing and smart algorithms that help enhance testing efficiency and accuracy.

Test-proof CSSVittorio Vittori

This document discusses different tools for testing CSS including CSSLint for syntax checking, ResembleJS for regression testing layouts, UnCSS for removing unused selectors, and StyleStats for analyzing CSS statistics. It explains how each tool works and recommends which tools to use based on the size and complexity of projects, considering objectives, budgets, and development priorities. CSSLint and UnCSS are recommended for smaller projects while CSSLint, ResembleJS, UnCSS, and StyleStats are suggested for larger, more complex projects.

SeConf2015: Advanced Automated Visual Testing With Seleniumadamcarmi

This document discusses automated visual testing with Selenium. It explains that visual testing is used to verify a graphical user interface appears correctly. Visual bugs are shown as examples of issues automated testing can find. The document outlines why visual testing needs to be automated due to large test matrices across browsers, devices, OSs and more. It then covers various tools that can be used for visual testing, including Selenium-based and non-Selenium based tools. The typical workflow of taking screenshots, comparing to baselines and reporting differences is described. Challenges with visual testing like anti-aliasing and image differences are addressed. Advanced image comparison techniques are presented.

Web dev tools reviewChanghyun Lee

This document reviews various web development tools, including: - Command line tools for scripting tasks and setting terminal environments. - Text editors like Sublime Text along with plugins for tasks like autoprefixing CSS and JavaScript linting. - Chrome DevTools and its emulator for testing across devices/networks. - Integration tools that link editors to browsers for live editing and debugging like WebStorm. - Synchronization options for previewing on remote devices like Adobe Edge Inspect. - Visual regression testing with Wraith and PhantomCSS. - Services for cross-browser testing across devices like Sauce Labs and BrowserStack.

Advanced Visual Test Automation With Seleniumadamcarmi

The document discusses advanced visual test automation with Selenium, emphasizing the importance of automating visual tests for quality assurance in graphical user interfaces across various browsers, devices, and operating systems. It outlines the workflow for visual testing, the tools available for image comparison, and the necessity of automating this process to manage a vast test matrix effectively. Additionally, it highlights how visual testing integrates into development and QA processes, addressing key considerations like false positives and dynamic content.

Automated visual-regression-testingSriram Angajala

This document discusses visual regression testing, which compares the visual output of software to detect changes. It introduces the Antenna House Regression Testing System (AHRTS), a tool that automatically compares PDF output documents on a pixel-by-pixel level to test for regressions in new releases of Antenna House Formatter software. AHRTS addresses challenges with manual visual regression testing by offering high-speed performance on large document sets and generating detailed reports on any differences found. The automated approach significantly reduces testing time and effort while improving accuracy and reliability over manual methods.

Automated visual-regression-testing (1)Sriram Angajala

This document describes visual regression testing, which compares the visual output of software to detect changes. It introduces the Antenna House Regression Testing System (AHRTS), a tool that automatically compares PDF output documents on a pixel-by-pixel level to test for regressions in new releases of Antenna House Formatter software. AHRTS addresses challenges with manual visual regression testing by offering high-speed performance on large document sets and generating detailed reports on any differences found. The automated approach significantly reduces testing time and effort while improving accuracy and reliability over manual methods.

Colorful world-of-visual-automation-testing-latestOnur Baskirt

The document presents an extensive overview of visual test automation, detailing its importance, benefits, and challenges. It discusses various tools available for visual testing, such as Applitools Eyes, Percy, and the Galen Framework, along with their functionalities and integration methods. The information is aimed at enhancing the reader's understanding of visual testing processes in software development and delivery.

Automated Visual Testing That Does Not Suckadamcarmi

The document discusses the importance of automated visual testing to enhance quality assurance of graphical user interfaces by comparing screenshots with baseline images. It covers various tools and technologies, such as Applitools Eyes, PhantomCSS, and Wraith, that assist in visual testing and address challenges like false positives and image comparison. The workflow includes driving the application, capturing screenshots, and reporting differences, making it essential for developers, designers, and QA teams.

Automated Visual Testing That Doesn't Suck!Applitools

The document discusses automated visual testing as a key quality assurance activity to verify graphical user interfaces, emphasizing its necessity due to the complexity of manual testing across various environments. It highlights numerous tools and technologies available for visual testing, including Applitools Eyes and other image comparison tools. The workflow involves capturing screenshots, comparing them to baseline images, and reporting differences, which can enhance efficiency and reliability in the testing process.

documentSascha Nawrot

This document is a master's thesis submitted by Sascha Nawrot to Berlin University of Applied Sciences in partial fulfillment of the requirements for a Master of Science degree in Applied Computer Science. The thesis introduces novel, lightweight open source annotation tools for whole slide images that enable deep learning experts and pathology experts to cooperate in creating training samples by annotating regions of interest in whole slide images, regardless of platform or format, in a fast and easy manner. The tools consist of a conversion service to convert whole slide images to an open format, an annotation service for annotating regions of interest, and a tessellation service to extract the annotated regions from the images.

Advanced Visual Test Automation with Seleniumadamcarmi

Adam Carmi discusses the importance of automated visual testing, emphasizing its necessity due to the complexity of testing across various platforms and devices. He outlines the tools and technologies available for visual testing, such as Applitools and others, and describes the automation workflow for capturing and comparing screenshots against baseline images. The presentation also addresses common issues like false positives and the advantages of specialized image processing for enhanced accuracy.

Selenium-based Visual Test AutomationApplitools

The document discusses the importance of automating visual testing to ensure graphical user interfaces display correctly across various browsers, operating systems, and screen resolutions. It outlines the workflow for automated visual testing, including capturing and comparing screenshots with baseline images, and reviews various tools and technologies used for this purpose. Key benefits of automation include reduced manual errors and the ability to handle large test matrices efficiently.

Identifying Auxiliary Web Images Using Combinations of AnalysesTewson Seeoun

This document summarizes a study that aimed to identify auxiliary web images using a combination of analyses. The methodology involved analyzing features of web pages like image position, dimensions and number of images using the DOM, and analyzing image-level features like number of colors and faces using tools like PIL and OpenCV. A SVM classifier was trained on these features from a sample of pages to recognize auxiliary images with an average accuracy of 93.17% after optimization. While the current approach performed well, future work could involve context analysis, weighted features and adaptive page analysis to improve the system.

Selenium Based Visual Test Automationadamcarmi

The document discusses the necessity and benefits of automated visual testing, emphasizing its importance due to the complexity of test matrices that include various browsers and resolutions. It provides an overview of tools and technologies used for visual testing, including Applitools Eyes, PhantomCSS, and others. The document also outlines the workflow for visual testing and highlights potential challenges such as false positives and dynamic content.

Adam carmiCodeFest

This document discusses automating visual software testing. It begins by explaining that visual testing is used to verify a graphical user interface appears correctly. It then discusses why visual testing should be automated, such as because the test matrix is too large to cover manually across different browsers, devices, resolutions, etc. It also notes that mobile app quality is critical so testing needs to be thorough. The document outlines how visual testing works by taking screenshots, comparing them to baselines, and reporting differences. It provides examples of tools that can be used for visual testing and discusses how tests can be integrated into development pipelines from the code level through production.

CIRCUIT 2015 - Hybrid App Development with AEM AppsICF CIRCUIT

The document outlines the circuit, an Adobe developer event by ICF Interactive, focusing on hybrid app development using AEM apps, Cordova, and the Ionic framework from 2012 to present. It details application goals, technical overviews, content reuse strategies, and the integration of native mobile functionalities to enhance user engagement. Additionally, it discusses authoring expectations within AEM and how to achieve a seamless transition from web applications to Cordova applications.

CIRCUIT 2015 - AEM Infrastructure Automation with Chef CookbooksICF CIRCUIT

The document discusses the integration of DevOps practices with Adobe Experience Manager (AEM) through the use of Chef cookbooks to automate infrastructure provisioning. It covers essential concepts such as the roles of cookbooks, nodes, and Chef server, as well as deployment scenarios like local and cloud environments. Key elements highlighted include configuring AEM through attributes, recipes, and provisioning operations to streamline deployment and management processes.

More Related Content

Similar to CIRCUIT 2015 - Glimpse of perceptual diff (20)

Web Pages Visual Similarity - Search Central Live Zurich 2024Giacomo Zecchini

Advanced Automated Visual Testingadamcarmi

Advanced automated visual testing with Seleniumadamcarmi

Authenticate Aadhar Card Picture with Current Image using Content Based Image...ijtsrd

AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdfApplitools

Test-proof CSSVittorio Vittori

SeConf2015: Advanced Automated Visual Testing With Seleniumadamcarmi

Web dev tools reviewChanghyun Lee

Advanced Visual Test Automation With Seleniumadamcarmi

Automated visual-regression-testingSriram Angajala

Automated visual-regression-testing (1)Sriram Angajala

Colorful world-of-visual-automation-testing-latestOnur Baskirt

Automated Visual Testing That Does Not Suckadamcarmi

Automated Visual Testing That Doesn't Suck!Applitools

documentSascha Nawrot

Advanced Visual Test Automation with Seleniumadamcarmi

Selenium-based Visual Test AutomationApplitools

Identifying Auxiliary Web Images Using Combinations of AnalysesTewson Seeoun

Selenium Based Visual Test Automationadamcarmi

Adam carmiCodeFest

Web Pages Visual Similarity - Search Central Live Zurich 2024Giacomo Zecchini

Advanced Automated Visual Testingadamcarmi

Advanced automated visual testing with Seleniumadamcarmi

Authenticate Aadhar Card Picture with Current Image using Content Based Image...ijtsrd

AI-Powered Testing Strategies for the Seasonal Shopping Surge.pdfApplitools

Test-proof CSSVittorio Vittori

SeConf2015: Advanced Automated Visual Testing With Seleniumadamcarmi

Web dev tools reviewChanghyun Lee

Advanced Visual Test Automation With Seleniumadamcarmi

Automated visual-regression-testingSriram Angajala

Automated visual-regression-testing (1)Sriram Angajala

Colorful world-of-visual-automation-testing-latestOnur Baskirt

Automated Visual Testing That Does Not Suckadamcarmi

Automated Visual Testing That Doesn't Suck!Applitools

documentSascha Nawrot

Advanced Visual Test Automation with Seleniumadamcarmi

Selenium-based Visual Test AutomationApplitools

Identifying Auxiliary Web Images Using Combinations of AnalysesTewson Seeoun

Selenium Based Visual Test Automationadamcarmi

Adam carmiCodeFest

More from ICF CIRCUIT (9)

CIRCUIT 2015 - Hybrid App Development with AEM AppsICF CIRCUIT

CIRCUIT 2015 - AEM Infrastructure Automation with Chef CookbooksICF CIRCUIT

CIRCUIT 2015 - Monitoring AEMICF CIRCUIT

The document outlines a presentation by Michael Chan on systems monitoring, specifically for websites and the Adobe Experience Manager (AEM) stack. It details monitoring goals such as maintaining site availability, identifying performance issues, and troubleshooting; as well as introduces various tools and methods for effective monitoring. Practical examples and tips are provided to enhance monitoring practices while emphasizing customization to meet individual needs.

CIRCUIT 2015 - Akamai: Caching and BeyondICF CIRCUIT

The document discusses the importance and functionality of Content Delivery Networks (CDNs), particularly focusing on Akamai as a leading provider. It covers topics such as caching, security measures, performance optimization, and tuning parameters critical for enhancing website efficiency. Additionally, it addresses mobile optimization and highlights the significant costs associated with web application security threats.

CIRCUIT 2015 - Free Beer and TestingICF CIRCUIT

Testing is done to either verify expected functionality or learn something new. It involves observing a system under different controlled conditions to check actual responses against expectations. There are various types of testing like unit, functional, acceptance, and performance testing. Testing is important to do early in development to define requirements and catch issues early. It provides feedback to improve the system through iterations. Well-structured automated tests are key to ensuring quality and allowing refactoring.

CIRCUIT 2015 - UI Customization in AEM 6.1ICF CIRCUIT

CIRCUIT 2015 - Content API's For AEM SitesICF CIRCUIT

The document discusses various components and technologies related to Adobe Experience Manager (AEM), including content APIs, utilities, and frameworks such as Bedrock and Groovy. It highlights the purpose of content APIs, their architecture, and details several programming practices and libraries for building AEM projects. Additionally, it provides code examples and explanations of creating AEM components and using services to serve data in JSON or XML formats.

How to migrate from any CMS (thru the front-door)ICF CIRCUIT

The document outlines an Adobe developer event focused on migrating content management systems (CMS) to AEM, led by Chris Rockwell from the University of Michigan. It discusses the challenges of database migrations, the use of frontend tools for automation, and provides detailed information on using programming tools like Cucumber and Capybara for testing migrations. It concludes with a demonstration of techniques for successfully migrating content from legacy systems and resources for further reference.

Maximize the power of OSGi in AEM ICF CIRCUIT

The document discusses the application of OSGi within Adobe Experience Manager (AEM), focusing on asynchronous services, declarative services, and service management features. It covers concepts such as OSGi promises, dynamic service registration, and the architecture of game bundles. Additionally, it outlines the use of subsystems in AEM for deploying applications, along with guidelines for building and managing these systems.

CIRCUIT 2015 - Hybrid App Development with AEM AppsICF CIRCUIT

CIRCUIT 2015 - AEM Infrastructure Automation with Chef CookbooksICF CIRCUIT

CIRCUIT 2015 - Monitoring AEMICF CIRCUIT

CIRCUIT 2015 - Akamai: Caching and BeyondICF CIRCUIT

CIRCUIT 2015 - Free Beer and TestingICF CIRCUIT

CIRCUIT 2015 - UI Customization in AEM 6.1ICF CIRCUIT

CIRCUIT 2015 - Content API's For AEM SitesICF CIRCUIT

How to migrate from any CMS (thru the front-door)ICF CIRCUIT

Maximize the power of OSGi in AEM ICF CIRCUIT

Recently uploaded (20)

Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...janeliewang985

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdfPriyanka Aash

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash

Using the SQLExecutor for Data Quality Management: aka One man's love for the...Safe Software

The SQLExecutor is one of FME’s most powerful and flexible transformers. Pivvot maintains a robust internal metadata hierarchy used to support ingestion and curation of thousands of external data sources that must be managed for quality before entering our platform. By using the SQLExecutor, Pivvot can efficiently detect problems and perform analysis before data is extracted from our staging environment, removing the need for rollbacks or cycles waisted on a failed job. This presentation will walk through three distinct examples of how Pivvot uses the SQLExecutor to engage its metadata hierarchy and integrate with its Data Quality Management workflows efficiently and within the source postgres database. Spatial Validation –Validating spatial prerequisites before entering a production environment. Reference Data Validation - Dynamically validate domain-ed columns across any table and multiple columns per table. Practical De-duplication - Removing identical or near-identical well point locations from two distinct source datasets in the same table.

Python Conference Singapore - 19 Jun 2025ninefyi

AI Agents and FME: A How-to Guide on Generating Synthetic MetadataSafe Software

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

Delivering solutions to Azure may involve a variety of architecture patterns involving your applications, APIs data and associated Azure resources that comprise the solution. This session will use reference architectures to illustrate the security considerations to protect your Azure resources and data, how to achieve Zero Trust, and why it matters. Topics covered will include specific security recommendations for types Azure resources and related network security practices. The goal is to give you a breadth of understanding as to typical security requirements to meet compliance and security controls in an enterprise solution.

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

מרכז עיבודים תעשייתי בעל 3/4/5 צירים, עד 22 החלפות כלים עם כל אפשרויות העיבוד הדרושות. בעל שטח עבודה גדול ומחשב נוח וקל להפעלה בשפה העברית/רוסית/אנגלית/ספרדית/ערבית ועוד.. מסוגל לבצע פעולות עיבוד שונות המתאימות לענפים שונים: קידוח אנכי, אופקי, ניסור, וכרסום אנכי.

EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdfEarley Information Science

As AI reshapes expectations in retail and B2B commerce, organizations are recognizing a critical reality: meaningful AI outcomes depend on well-structured, adaptable infrastructure. In this session, Seth Earley is joined by Phil Ryan - AI strategist, search technologist, and founder of Glass Leopard Technologies - for a candid conversation on what it truly means to engineer systems for scale, agility, and intelligence. Phil draws on more than two decades of experience leading search and AI initiatives for enterprise organizations. Together, he and Seth explore the challenges businesses face when legacy architectures limit personalization, agility, and real-time decisioning - and what needs to change to support agentic technologies and next-best-action capabilities. Key themes from the webinar include: Composability as a prerequisite for AI - Why modular, loosely coupled systems are essential for adapting to rapid innovation and evolving business needs Search and relevance as foundational to AI - How techniques honed-in enterprise search have laid the groundwork for more responsive and intelligent customer experiences From MDM and CDP to agentic systems - How data platforms are evolving to support richer customer context and dynamic orchestration Engineering for business alignment - Why successful AI programs require architectural decisions grounded in measurable outcomes The conversation is practical and forward-looking, connecting deep technical understanding with real-world business needs. Whether you’re modernizing your commerce stack or exploring how AI can enhance product discovery, personalization, or customer journeys, this session provides a clear-eyed view of the capabilities, constraints, and priorities that matter most.

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.

Connecting Data and Intelligence: The Role of FME in Machine LearningSafe Software

In this presentation, we want to explore powerful data integration and preparation for Machine Learning. FME is known for its ability to manipulate and transform geospatial data, connecting diverse data sources into efficient and automated workflows. By integrating FME with Machine Learning techniques, it is possible to transform raw data into valuable insights faster and more accurately, enabling intelligent analysis and data-driven decision making.

2025_06_18 - OpenMetadata Community Meeting.pdfOpenMetadata

The community meetup was held Wednesday June 18, 2025 @ 9:00 AM PST. Catch the next OpenMetadata Community Meetup @ https://www.meetup.com/openmetadata-meetup-group/ In this month's OpenMetadata Community Meetup, "Enforcing Quality & SLAs with OpenMetadata Data Contracts," we covered data contracts, why they matter, and how to implement them in OpenMetadata to increase the quality of your data assets! Agenda Highlights: 👋 Introducing Data Contracts: An agreement between data producers and consumers 📝 Data Contracts key components: Understanding a contract and its purpose 🧑‍🎨 Writing your first contract: How to create your own contracts in OpenMetadata 🦾 An OpenMetadata MCP Server update! ➕ And More!

Salesforce Summer '25 Release Frenchgathering.pptx.pdfyosra Saidani

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

We live in an ever evolving landscape for cyber threats creating security risk for your production systems. Mitigating these risks requires participation throughout all stages from development through production delivery - and by every role including architects, developers QA and DevOps engineers, product owners and leadership. No one is excused! This session will cover examples of common mistakes or missed opportunities that can lead to vulnerabilities in production - and ways to do better throughout the development lifecycle.

Curietech AI in action - Accelerate MuleSoft developmentshyamraj55

CurieTech AI in Action – Accelerate MuleSoft Development Overview: This presentation demonstrates how CurieTech AI’s purpose-built agents empower MuleSoft developers to create integration workflows faster, more accurately, and with less manual effort linkedin.com +12 curietech.ai +12 meetups.mulesoft.com +12 . Key Highlights: Dedicated AI agents for every stage: Coding, Testing (MUnit), Documentation, Code Review, and Migration curietech.ai +7 curietech.ai +7 medium.com +7 DataWeave automation: Generate mappings from tables or samples—95%+ complete within minutes linkedin.com +7 curietech.ai +7 medium.com +7 Integration flow generation: Auto-create Mule flows based on specifications—speeds up boilerplate development curietech.ai +1 medium.com +1 Efficient code reviews: Gain intelligent feedback on flows, patterns, and error handling youtube.com +8 curietech.ai +8 curietech.ai +8 Test & documentation automation: Auto-generate MUnit test cases, sample data, and detailed docs from code curietech.ai +5 curietech.ai +5 medium.com +5 Why Now? Achieve 10× productivity gains, slashing development time from hours to minutes curietech.ai +3 curietech.ai +3 medium.com +3 Maintain high accuracy with code quality matching or exceeding manual efforts curietech.ai +2 curietech.ai +2 curietech.ai +2 Ideal for developers, architects, and teams wanting to scale MuleSoft projects with AI efficiency Conclusion: CurieTech AI transforms MuleSoft development into an AI-accelerated workflow—letting you focus on innovation, not repetition.

Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...janeliewang985

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash

Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...Josef Weingand

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdfPriyanka Aash

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdfPriyanka Aash

Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash

Using the SQLExecutor for Data Quality Management: aka One man's love for the...Safe Software

Python Conference Singapore - 19 Jun 2025ninefyi

AI Agents and FME: A How-to Guide on Generating Synthetic MetadataSafe Software

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

cnc-processing-centers-centateq-p-110-en.pdfAmirStern2

EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdfEarley Information Science

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

Connecting Data and Intelligence: The Role of FME in Machine LearningSafe Software

2025_06_18 - OpenMetadata Community Meeting.pdfOpenMetadata

Salesforce Summer '25 Release Frenchgathering.pptx.pdfyosra Saidani

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

Curietech AI in action - Accelerate MuleSoft developmentshyamraj55

CIRCUIT 2015 - Glimpse of perceptual diff

1. CIRCUIT – An Adobe Developer Event Presented by ICF Interactive Glimpse of Perceptual Diﬀ Rachel Ingles

2. Diﬀerent names Perceptual Diﬀ User Interface Tes4ng CSS Regression Tes4ng Visual Regression Tes4ng

3. Visual comparison Stable New Release x x x Image from scalingengineeringfordigital.ﬁles.wordpress.com

4. Site1: (Sample production) Sample site from Michael Gilbert

5. Site 2: New Release

6. Spot the diﬀerence

7. Resemble.js (http://huddle.github.io/Resemble.js/) Diﬀerent Same Compare Analyze Image

8. Interactive Site: Using sample images

9. Interactive Site: Other options

10. Interactive Site: Using Site1 and Site2

11. Resemble.js: Code snippet resemble(file).compareTo(file2).onComplete (function(data){ return data; /* { misMatchPercentage : 100, // % isSameDimensions: true, // or false getImageDataUrl: function(){} } */ });

12. Other tools Takes screenshots Compares images Generates reports Images from cliparts.co

13. Other tools

14. CSS Critic (https://github.com/cburgmer/csscritic) •  Lightweight tool for CSS

15. CSS Critic: Setup •  npm install csscritic

16. CSS Critic: Setup •  Create RegressionRunner.html file •  Register page/s under test csscritic.add({ url: 'SOME_URL', // link to the test case HTML document // Optionally: desc: 'some text', // a description of the test case width: number, // the viewport width in pixel height: number, // the viewport height in pixel … });

17. Initial Load: Need baseline

18. Accepted baseline

19. Diﬀerences found

20. CSS Critic: Limitations •  Firefox and Chrome only •  Same origin restrictions

21. Dpxdt (https://github.com/bslatkin/dpxdt) workers

22. Dpxdt: YAML conﬁguration setup: | python -‐m SimpleHTTPServer waitFor: url: http://localhost/Site1/www/index.html timeout_secs: 5 tests: -‐ name: demo url: http://localhost/Site1/www/index.html config: viewportSize: width: 800 height: 600 injectCss: | body { background-‐color: white; }

23. Local Dpxdt: Modes dpxdt [update|test] [test_directory] •  update Image from cliparts.co Baseline Compare ?

24. Local Dpxdt: Modes dpxdt [update|test] [test_directory] •  test Images from cliparts.co Baseline Compare

25. Dpxtd: Server Approach •  Python virtual directory

26. Dpxtd: Server Approach options •  Site Diff •  Pair Diff •  Diff My Images •  Diff My URLs

27. Dpxtd: Site Diﬀ Main Page1 Page3 Page4 Page2 Page5

28. Dpxtd: Pair Diﬀ Site 1 Site2 Img1 Img2 Img3 Img1 Img2

29. Dpxtd: Diﬀ My Images Before Img3 Img2 Img1 AMer Img3 Img2 Img1

30. Dpxtd: Diﬀ My URLs Before URL3 URL2 URL1 AMer URL3 URL2 URL1

31. EXAMPLE: Pair Diﬀ ./run_url_pair_diff.sh [build num] [site1] [site2]

32. EXAMPLE: Pair Diﬀ

33. Summary Images from cliparts.co Selenium PhantomJS ResembleJS ImageMagick CSSCri4c Dpxtd PhantomCSS Wraith Applitools Capture Compare Report Perceptual Diﬀ

34. References •  Responsive Started Kit Pro - https://github.com/ mpgilbertusa/Responsive-Starter-Kit-Pro •  Resemble.js – http://huddle.github.io/Resemble.js/ •  CSS Critic - https://github.com/cburgmer/csscritic •  Dpxdt - https://github.com/bslatkin/dpxdt

35. Rachel Ingles Test Automation Developer ICF Interactive rachel.ingles@icﬁ.com

CIRCUIT 2015 - Glimpse of perceptual diff

Recommended

More Related Content

Similar to CIRCUIT 2015 - Glimpse of perceptual diff (20)

More from ICF CIRCUIT (9)

Recently uploaded (20)

CIRCUIT 2015 - Glimpse of perceptual diff