Responsive designs are inherently slow so this presentation outlines emerging standards for optimizing image delivery.
This speeds up the load time on responsive web designs.
(Recording at: https://vimeo.com/139965928)
How to customize the User Interface in AEM 6.1?
- Extending Component Dialogs
- Customizing Page Properties view
- Customizing Search Forms
CIRCUIT 2015 - UI Customization in AEM 6.1ICF CIRCUIT
Andreea Corbeanu & Christian Meyer - Adobe
How to extend a dialog by purely providing the missing pieces via the Sling Resource Merger
* Customizable search facets
How to create custom search facets
* Custom page properties bulk editing
How to add a custom field to the bulk editing
(Recording at: https://vimeo.com/139965928)
How to customize the User Interface in AEM 6.1?
- Extending Component Dialogs
- Customizing Page Properties view
- Customizing Search Forms
CIRCUIT 2015 - UI Customization in AEM 6.1ICF CIRCUIT
Andreea Corbeanu & Christian Meyer - Adobe
How to extend a dialog by purely providing the missing pieces via the Sling Resource Merger
* Customizable search facets
How to create custom search facets
* Custom page properties bulk editing
How to add a custom field to the bulk editing
Delivering Optimal Images for Phones and Tablets on the Modern WebJoshua Marantz
Evolving mobile hardware and networks have made it challenging for web sites to deliver an optimal experience to each client. If you send the same image to both a WiFi Retina tablet and a 3G phone, you compromise speed and bandwidth cost against image quality. We'll look at using HTML and CSS image markup, CDNs, HTTP caching directives and how WPO can deliver a great UX with minimal effort.
CSS Day 2017 Faenza, Italy.
They are a W3C recommendation since novembre 2016, featuring the new "picture" tag and the "srcset" and "sizes" attributes in the "img" tag.
In this talk we'll see what they are, how to use them in which cases to prefer what usage, and some best practices to give a boost you your web applications or websites.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.
Alexa IT Solution Responsive Web designingRavi Panchal
Alexa IT Solution company specialising in Business and E-commerce website, mobile and web application and services. We are located in ahmedabad, india.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout
Responsive Web design is the approach that suggests
that design and development should respond to the
user’s behavior and environment based on screen size,
platform and orientation. The practice consists of a mix
of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically
switch to accommodate for resolution, image size and
scripting abilities. In other words, the website should
have the technology to automatically respond to the
user’s preferences. This would eliminate the need for a
different design and development phase for each new
gadget on the market.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Delivering Optimal Images for Phones and Tablets on the Modern WebJoshua Marantz
Evolving mobile hardware and networks have made it challenging for web sites to deliver an optimal experience to each client. If you send the same image to both a WiFi Retina tablet and a 3G phone, you compromise speed and bandwidth cost against image quality. We'll look at using HTML and CSS image markup, CDNs, HTTP caching directives and how WPO can deliver a great UX with minimal effort.
CSS Day 2017 Faenza, Italy.
They are a W3C recommendation since novembre 2016, featuring the new "picture" tag and the "srcset" and "sizes" attributes in the "img" tag.
In this talk we'll see what they are, how to use them in which cases to prefer what usage, and some best practices to give a boost you your web applications or websites.
Responsive Web Designed for your communication and marketing needsSEGIC
This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action
In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.
Alexa IT Solution Responsive Web designingRavi Panchal
Alexa IT Solution company specialising in Business and E-commerce website, mobile and web application and services. We are located in ahmedabad, india.
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
Responsive Images
Improving Performance
Responsive Typography
Media queries in JavaScript
Layout
Responsive Web design is the approach that suggests
that design and development should respond to the
user’s behavior and environment based on screen size,
platform and orientation. The practice consists of a mix
of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from
their laptop to iPad, the website should automatically
switch to accommodate for resolution, image size and
scripting abilities. In other words, the website should
have the technology to automatically respond to the
user’s preferences. This would eliminate the need for a
different design and development phase for each new
gadget on the market.
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
2. 2
Search
Experience
Op.miza.on®
Evolve
Responsively.
It’s
about
intercep(ng
the
most
produc.ve
audiences
and
delivering
experien(al
content
3. 3
Responsive
Design
Fits
the
Lifestyle
Make
the
experience
fast
so
it
responds
seamlessly
throughout
the
day
Commu(ng
(7am
–
10am)
Work
Time
(10am
–
5pm)
Leisure
Time
(8pm
–
12am)
Source:
4. Supercharge
Responsive
Design
Google’s
recommended
mobile
configura.on
is
inherently
slow
2.81
13.5
11.64
M. Site RWD Laptop
16
14
12
10
8
6
4
2
0
Responsive Design and Load Time
• Don’t
load
the
same
assets
to
web
and
mobile
• Use
SVG
images
for
icons
and
logos
• Leverage
emerging
standards
for
srcset
and
<picture>
• Responsive
backend
with
“Vary:
User-‐
Agent”
in
h]p
response
• Op.mize
for
PageSpeed
best
prac.ces
• Ensure
videos,
images,
stylesheets
and
scripts
are
fully
accessible
Avg.
Load
Times
for
Mobile
Configura.ons
(seconds)
Source: High Performance Responsive Design By Tom Barker – O'Reilly Media
5. Responsive
sites
ocen
serve
the
same
high-‐res
images
to
desktop
and
mobile
5
Responsive
Images
in
a
Re.na
World
Both
experiences
serve
the
same
heavy
image
6. Images
on
Responsive/Re.na
Templates
are
Heavy
6
Considering
the
web,
images
account
for
62%
of
total
weight
Avg.
PageSpeed
42%
Source: HTTP Archive – http://goo.gl/o4ucTh
7. Don’t
Serve
the
Same
Assets
to
Mobile
7
With
the
same
assets
served
to
mobile,
avg.
PageSpeed
is
13%
lower
Avg.
Mobile
PageSpeed
29%
8. SVG
Images
8
SVG
has
strong
browser
compa.bility
and
should
be
used
for
icons
and
logos
9. Scale
Images
Using
SRCSET
and
SIZES
Scale
images
across
varying
viewport
widths
and
screen
resolu.ons.
<img
src="yacht_race@fallback.jpg”
srcset=“
img/yacht_race@mobile.jpg
320w,
img/yacht_race@wide-‐mobile.jpg
480w,
img/yacht_race@tablet.jpg
768w,
img/yacht_race@desktop.jpg
1024w,
img/yacht_race@hires.jpg
1280w"
sizes=“
(max-‐width:
20em)
30vw,
(max-‐width:
30em)
60vw,
(max-‐width:
40em)
90vw"
alt="A
very
exci.ng
yacht
race.”
/>
9
• SRC
Source: http://goo.gl/qXGhlj
serves
as
the
fallback
image
• SRCSET
provides
alternate
images
for
varying
widths
• SIZES
provide
an
es.mated
image
layout
width
• Allows
media
condi.ons
10. Direct
Images
with
PICTURE
and
SOURCE
MEDIA
The
picture
element
allows
for
various
image
sizes
at
different
resolu.ons.
<picture>
<!-‐-‐
16:9
crop
-‐-‐>
<source
media="(min-‐width:
36em)"
srcset="quilt_2/detail/large.jpg
1920w,
quilt_2/detail/medium.jpg
960w,
quilt_2/detail/small.jpg
480w"
/>
<!-‐-‐
square
crop
-‐-‐>
<source
srcset="quilt_2/square/large.jpg
822w,
quilt_2/square/medium.jpg
640w,
quilt_2/square/small.jpg
320w"
/>
<img
• SOURCE
src="quilt_2/detail/medium.jpg"
alt="Detail
of
the
above
quilt,
highligh.ng
the
embroidery
and
exo.c
s.tchwork."
/>
</picture>
10
Source: http://goo.gl/qXGhlj
uses
media
queries
for
advanced
customiza.on
• Apply
CSS
to
the
IMG,
not
the
PICTURE
11. Desired
Results
from
<picture>
11
The
results
show
a
more
detailed
and
firng
image
to
mobile
users.
Source: http://goo.gl/qXGhlj
12. Responsive
Back-‐End
• WURFL
Cloud
is
useful
for
server-‐side
customiza.on
– Serve
unique
mobile
content
(e.g.
store
locator)
– Requires
“Vary:
User-‐Agent”
12
Server-‐side
customiza.on
is
fast.
Easy
to
retrieve
device
informa.on
13. Use
“Vary:
User-‐Agent”
when
Dynamic
• The
“Vary:
User-‐Agent”
direc.ve
should
be
used
when
the
content
is
different
on
mobile
vs
laptop
• “Vary:
User-‐Agent”
let’s
the
ISP
know
to
consider
the
user
agent
when
serving
cached
assets
13
GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
14. Op.mize
Load
Times
Purpose
Minimize
load
.me
because
users
and
engines
strongly
favor
pages
that
load
within
one
or
two
seconds.
Recommendations
• Reduce
server
response
.me
• Leverage
browser
caching
• Reduce
the
file
sizes
of
images
• Reduce
the
number
of
JavaScript
includes
• Reduce
h]p
requests
by
consolida.ng
include
files
• Minify
JavaScript
includes
to
reduce
file
size
• Move
JavaScript
includes
to
bo]om
of
markup
MOBILE
48
100
Figure 1. Mobile PageSpeed score for
SeroquelXR.com
15. Make
Assets
Fully
Accessible
Purpose
Google
requires
access
to
digital
assets
like
videos,
images,
stylesheets
and
scripts.
Robots.txt
Don’t
block
videos,
images,
stylesheets
or
scripts.
XML Sitemap
Include
videos
and
high
resolu.on
images
in
XML
sitemap.
Figure 1. 100% site saturation occurs when the number of
submitted pages matches the number of indexed pages.
17. A
Supercharged
Responsive
Design…
…uses the best attributes from each of the recommended mobile configurations
17
A
Supercharged
Responsive
Design
Source: metrics for illustrative purposes only
Separate
Dynamic
Responsive
§ Highly
customized
§ Very
fast
§ Customiza.on
from
client-‐side
§ Only
one
URL
§ No
Redirects
Average
Load
Time
in
Seconds
Post
Op.miza.on
Load
Time
5.81
9.14
1.34
1.65
10
8
6
4
2
0
Site
1
Site
2