This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.
As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
Slides for my Adobe MAX 2011 presentation on Optimizing Sites for Mobile Devices. In this hands-on lab, I explore the concept of developing a mobile strategy that approaches mobile as an equal partner in the design process, and explores techniques to help site content deploy across devices and contexts.
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Polandbrucelawson
Forget the empty "Web 2.0" buzzword! Web development, however, is changing. In this session, Bruce gives and overview of HTML5, its intelligent forms, scriptable images and native video. Together with CSS3 and SVG, it will change the way you work making it easier to develop exciting applications. The emergence of more and more Web-enabled devices presents headaches: do you write and test many sites for different devices, or make one site for all? Some simple techniques help you write one site to work everywhere, saving you time and grey hairs. Web development 2.0: Web workers of the world, relax!
As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
Slides for my Adobe MAX 2011 presentation on Optimizing Sites for Mobile Devices. In this hands-on lab, I explore the concept of developing a mobile strategy that approaches mobile as an equal partner in the design process, and explores techniques to help site content deploy across devices and contexts.
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Polandbrucelawson
Forget the empty "Web 2.0" buzzword! Web development, however, is changing. In this session, Bruce gives and overview of HTML5, its intelligent forms, scriptable images and native video. Together with CSS3 and SVG, it will change the way you work making it easier to develop exciting applications. The emergence of more and more Web-enabled devices presents headaches: do you write and test many sites for different devices, or make one site for all? Some simple techniques help you write one site to work everywhere, saving you time and grey hairs. Web development 2.0: Web workers of the world, relax!
RESS: An Evolution of Responsive Web DesignDave Olsen
Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. I’ll show how both front-end and server-side developers can take advantage of the new technique called RESS (Responsive Web Design with Server Side Components) that aims to be combine the best of both worlds for delivering mobile-optimized content.
Slides from my Ignite (20 slides, auto-advancing every 15 secs) talk at WebPerfDays, Mountain View.
Not sure they will make sense standalone but talk was recorded and will be available at some point.
Would also like to work this up into a longer talk at some point.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
10 things you can do to speed up your web app today 2016Chris Love
Web Sites are to slow and this is costing businesses money. Most performance issues are easy to fix. In this session we review why web performance is important and 10 simple things you can do to make a faster user experience.
Augmented Reality (AR) - The Future of Mobile Applications? Carin Campanario
Inspirational snippets of information (images and website links) about AR technologies, applications, concepts, ideas, events and blogs, gathered from the web for a Barcamp London 7 session on 25th October 2009, by Carin Campanario.
Pinkoi is Asia’s leading online marketplace for buying and selling original design. We are committed to selling products that reflect good taste. Many of the products can even be customized. On Pinkoi, people can find unique gifts for special occasions. With Pinkoi, achieving a lifestyle with good designs has never been easier.
RESS: An Evolution of Responsive Web DesignDave Olsen
Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. I’ll show how both front-end and server-side developers can take advantage of the new technique called RESS (Responsive Web Design with Server Side Components) that aims to be combine the best of both worlds for delivering mobile-optimized content.
Slides from my Ignite (20 slides, auto-advancing every 15 secs) talk at WebPerfDays, Mountain View.
Not sure they will make sense standalone but talk was recorded and will be available at some point.
Would also like to work this up into a longer talk at some point.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
10 things you can do to speed up your web app today 2016Chris Love
Web Sites are to slow and this is costing businesses money. Most performance issues are easy to fix. In this session we review why web performance is important and 10 simple things you can do to make a faster user experience.
Augmented Reality (AR) - The Future of Mobile Applications? Carin Campanario
Inspirational snippets of information (images and website links) about AR technologies, applications, concepts, ideas, events and blogs, gathered from the web for a Barcamp London 7 session on 25th October 2009, by Carin Campanario.
Pinkoi is Asia’s leading online marketplace for buying and selling original design. We are committed to selling products that reflect good taste. Many of the products can even be customized. On Pinkoi, people can find unique gifts for special occasions. With Pinkoi, achieving a lifestyle with good designs has never been easier.
In this slide, I wanna share the experience that how to integrate mobile web in native app, not just call webview and loadurl, but also somethings can improve user experience.
Buffer's Top 10 Learnings Growing to $10 Million ARRBuffer
Buffer's Co-founder, Leo Widrich, shares his top 10 learnings from five and a half years of growth at Buffer on the road to $10 annual recurring revenue (ARR).
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Author: Oleg Gomozov, Senior Software Engineer
Agenda:
- Chose yours: flexible, fluid, adaptive, responsive
- Some data about units
- Media Queries Magic
- JavaScript practices
- Browser, please, help me
- Mobile first, how and why
- Tricks, tools and hacks
3 Approaches to Mobile - An A to Z Primer.agup2009
A must see A to Z mobile web primer. If you still only have one website built for desktop then you need to review this presentation. Examples are about mapping but the concepts apply to everyone!
A talk given at Appspirina workshop on March 29th, 2012 organized by http://mobiledeveloper.pl/.
Event page: https://www.facebook.com/events/296799847060237/
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.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
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 notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
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.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
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.
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/
3. Our vision is to build the biggest online
community and marketplace for designers in Asia.
4. •25%
visitors
from
outside
of
Taiwan
-‐
Hong
Kong,
North
America,
China,
Japan,
Singapore,
Malaysia
•Help
designers
grow
business
to
7
countries
worldwide
What We’ve Accomplished
Internationally
10. Separate
styles
by
target
viewport
size
@media
only
screen
and
(min-‐width:
320px)
and
(max-‐with:
480px)
{
/*
styles
*/
}
Unfixed
Page
Width
(cont.)
@media
queries
Separate
styles
by
target
screen
size
@media
only
screen
and
(min-‐device-‐width:
320px)
and
(max-‐device-‐with:
480px)
{
/*
styles
*/
}
11. for
JavaScript
var
mq
=
window.matchMedia(‘(min-‐width:
321px)’);
if
(mq.matches)
{
//
window
width
is
at
least
321px
}
else
{
//
window
width
is
less
than
321px
}
Unfixed
Page
Width
(cont.)
@media
queries
12. High
DPI
(like
ReUna)
1
CSS
pixel
!=
1
device
pixel
@media
only
screen
and
(min-‐device-‐pixel-‐raDo:
2)
{
/*
some
styles
for
high
resoluDon
*/
}
var
dppx
=
window.devicePixelRaDo;
16. Images
Embrace
embedded
content
Inline
using
Data
URIs
li
{
background-‐image:
url("data:image/png;base64,iVBORw0KGgoA.....”);
}
Use
CSS
to
render
simple
images
CSS
Sprite
20. Redirect
(HTTP
301,
302)
From
150
to
1000ms
per
redirect
1.
www.mysite.com
2.
www.mysite.com/home
3.
m.mysite.com
4.
m.mysite.com/home
keep
your
redirect
to
zero
or
minimum
22. Minify
&
Bundle
StaUc
Files
Remove
comments,
spaces
Combine
all
files
into
single
bundle
#
reduce
round
trips
Umes
#
Increasing
bandwidth
efficiency
github.com/mishoo/UglifyJS
github.com/GoalSmashers/clean-‐css
UglifyJS
#
much
faster
than
Google
Closure
Clean-‐css
#
much
faster
than
YUI
Compressor
23. Gzip
Increasing
bandwidth
efficiency
Reduce
bytes,
every
byte
counts
More
consistent
data
will
compress
beher
#
CSS
properUes
in
same
order
#
HTML
ahributes
in
same
order
#
use
consistent
casing
#
use
consistent
quoUng
Avoid
gzip
for
image
or
binary
files
24. Apache
AddOutputFilterByType
DEFLATE
text/css
applicaDon/x-‐javascript
...
Nginx
gzip
on;
gzip_types
text/css
applicaDon/x-‐javascript
...;
If
you
do
one
thing
to
improve
performance,
do
this
Gzip
(cont.)
25. JavaScript
JavaScripts
at
the
bohom
Use
HTML5
new
ahributes
Load
asynchronously
Non-‐blocking
<script
src=””
async
defer></script>
26. JavaScript
(cont.)
Don’t
send
desktop
JS
to
mobile
#
jQuery
which
takes
1.5s~8s
to
be
downloaded
and
parsed
over
3G
Micro
libraries
can
ensure
you
only
use
what
you
need
Zepto
github.com/madrobby/zepto
28. .box
{
transiDon:
width
2s,
height
2s,
transform
2s;
}
@keyframes
move
{
from
{
margin-‐ler:-‐20%;
}
to
{
margin-‐ler:100%;
}
}
.box
{
animaDon:
move
4s
linear
0s
infinite
alternate;
}
CSS
(cont.)
Use
CSS
instead
of
JS
animaUon
29. Leverage
Local
Storage
1st
Ume
request
#
load
resource
#
set
local
storage
localStorage.setItem(key,
value)
Subsequent
requests
#
load
from
local
storage
localStorage.getItem(key)
#
reduce
upload
bandwidth
30. HTML5
Not
fully
supported
Polyfills
are
too
heavy
Progressive
enhancement
Feature
DetecUon
Modernizr
modernizr.com
if
(Modernizr.localstorage)
{
//
localstorage
works!
}
33. RWD
(Responsive
Web
Design)
The
browsers
get
the
same
code
base,
and
renders
it
as
defined
for
the
device
Fixed
width
is
dead,
forget
pixel
perfect!?
34. RWD
(cont.)
Heavy
pages
Extra
HTTP
requests
Slower
load
Umes
Images
are
not
fluid
Not
all
devices
support
media
queries
mobile
web
that
pretends
to
be
web
is
likely
to
disappoint
35. RWD
(cont.)
For
mobile
performance,
the
best
is
not
always
RWD
Don’t
use
it
just
because
it’s
cool
36. AWD
(AdapUve
Web
Design)
The
server
idenUfies
the
device
and
sends
a
different
code,
including
content,
presentaUon
and
behavior
37. AWD
(cont.)
Predefined
set
of
layout
sizes
Redirects
Different
URLs
(sub-‐domains)
Too
many
devices
Too
many
code
bases
SEO
issue
38. One
URL
works
across
the
browsers
No
heavy
resources
loading
Focus
on
user
experience
Concept
Pinkoi
used
Yay!!
RESS
(Responsive
Web
Design
+
Server
Side
Components)