Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.
Each technological age has been marked by a shift in how the industrial platform enables companies to rethink their business processes and create wealth. In the talk I argue that we are limiting our view of what this next industrial/digital age can offer because of how we read, measure and through that perceive the world (how we cherry pick data). Companies are locked in metrics and quantitative measures, data that can fit into a spreadsheet. And by that they see the digital transformation merely as an efficiency tool to the fossil fuel age. But we need to stretch further…
Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.
Each technological age has been marked by a shift in how the industrial platform enables companies to rethink their business processes and create wealth. In the talk I argue that we are limiting our view of what this next industrial/digital age can offer because of how we read, measure and through that perceive the world (how we cherry pick data). Companies are locked in metrics and quantitative measures, data that can fit into a spreadsheet. And by that they see the digital transformation merely as an efficiency tool to the fossil fuel age. But we need to stretch further…
Web 3.0 - Concepts, Technologies, and Evolving Business Modelscghollins
A dramatic shift in business and technology is taking place as the Social Web (Web 2.0) evolves into the Semantic Web (Web 3.0) of the future. Networks link smartphones, in-car computers, televisions and home media networks to collectively provide instant and universal access to personal information and entertainment media. Integrated marketing campaigns feature an enticing mix of content and location-based and contextual-aware advertising delivered through digital signs and billboards. Highly targeted advertising is generated based digital profiles that describe the habits and preferences of an individual without revealing personal identifiable information, and then delivered through entertainment systems and mobile applications. Vast interconnected systems of distributed applications ingest data, generate feeds, and intelligently filter content based on usage patterns and preferences. This presentation, part one of three, covers the evolution of the Web, business models on the Web, and core elements of the semantic Web. Part two highlights existing products and systems that contain semantic Web elements. Part three covers 17 semantic Web application scenarios and forecasts the impact of Web 3.0 on marketing, advertising and business models.
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudInternap
Many organizations are not leveraging the full benefits of the cloud. How does your organization fare? And is cloud the right choice for all your applications or should you pursue a hybrid approach?
As you navigate the road to the cloud there are five common mistakes not to make to ensure a successful deployment and adoption. Register to attend this webinar to learn the top five mistakes as well as key success criteria needed for cloud adoption.
Additional topics include:
*How to maneuver around potential hazards
*How to build flexibility and security to avoid risks
*Cloud success stories
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.
This is an application that allows the user to verify the texturing performance in the system. Also enables re-use of code already written for texturing.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Web 3.0 - Concepts, Technologies, and Evolving Business Modelscghollins
A dramatic shift in business and technology is taking place as the Social Web (Web 2.0) evolves into the Semantic Web (Web 3.0) of the future. Networks link smartphones, in-car computers, televisions and home media networks to collectively provide instant and universal access to personal information and entertainment media. Integrated marketing campaigns feature an enticing mix of content and location-based and contextual-aware advertising delivered through digital signs and billboards. Highly targeted advertising is generated based digital profiles that describe the habits and preferences of an individual without revealing personal identifiable information, and then delivered through entertainment systems and mobile applications. Vast interconnected systems of distributed applications ingest data, generate feeds, and intelligently filter content based on usage patterns and preferences. This presentation, part one of three, covers the evolution of the Web, business models on the Web, and core elements of the semantic Web. Part two highlights existing products and systems that contain semantic Web elements. Part three covers 17 semantic Web application scenarios and forecasts the impact of Web 3.0 on marketing, advertising and business models.
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudInternap
Many organizations are not leveraging the full benefits of the cloud. How does your organization fare? And is cloud the right choice for all your applications or should you pursue a hybrid approach?
As you navigate the road to the cloud there are five common mistakes not to make to ensure a successful deployment and adoption. Register to attend this webinar to learn the top five mistakes as well as key success criteria needed for cloud adoption.
Additional topics include:
*How to maneuver around potential hazards
*How to build flexibility and security to avoid risks
*Cloud success stories
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.
This is an application that allows the user to verify the texturing performance in the system. Also enables re-use of code already written for texturing.
Similar to Responsive Web Design & Development (20)
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Full-RAG: A modern architecture for hyper-personalizationZilliz
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...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.
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:
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!SOFTTECHHUB
As the digital landscape continually evolves, operating systems play a critical role in shaping user experiences and productivity. The launch of Nitrux Linux 3.5.0 marks a significant milestone, offering a robust alternative to traditional systems such as Windows 11. This article delves into the essence of Nitrux Linux 3.5.0, exploring its unique features, advantages, and how it stands as a compelling choice for both casual users and tech enthusiasts.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
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.
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.
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.
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.
2. Overview
What is Responsive Web Design
Benefits of adoption
Challenges of adoption
Responsive methods (The Technical Part)
Helper Tools
3. What is RWD?
A method of building web views which
adapt to the display of the device on
which they are viewed
4. Benefits of Building
Responsively
Allows the development of a consolidated front-
end codebase for use on all devices
Improves maintainability of codebase
Reduces frequency of app submissions and allows
apps to be updated transparently, without forcing
users to download from iTunes or Android
Marketplace
Reduces expense of maintaining separate teams
to maintain codebases for different devices
5. The Challenges of
Becoming Responsive
More thought must go into designs
Designer and developer learning curve
Responsive views take more time to build than
fixed views*
Responsive views require more testing than fixed
views*
* but not more than 3 separate views.
12. Hazards of Percentages
Margin:
Calculated based on width of parent of the
element to which they’re assigned.
Padding:
Calculated based on the width of the element to
which they’re assigned.
15. Responsive Images
max-width: 100%;
Constrains image width to a maximum of the size
of the containing element
Supported in all modern browsers
Images sized in this way are downloaded at native
size, even if displayed at far smaller scale.
Background images and sprites have limited
usefulness in responsive web design, due to
currently-supported browser feature-sets.
16. Viewport Control
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>
Property Description
Width of the viewport in pixels (or device-width).
width
If width isn’t set, it defaults to a desktop size (980px on mobile Safari).
Height of the viewport in pixels (or device-height).
height
Generally you don’t need to worry about setting this property.
(0 to 10.0) Multiplier that sets the scale of the page after its initial display.
initial-scale Safe bet: if you need to set it, set it to 1.0.
Larger values = zoomed in, smaller values = zoomed out
minimum- (0 to 10.0) The minimum multiplier the user can “zoom out” to.
scale Defaults to 0.25 on mobile Safari.
maximum- (0 to 10.0) The minimum multiplier the user can “zoom in” to.
scale Defaults to 1.6 on mobile Safari.
(yes/no) Whether to allow a user from scaling in/out (zooming in/out).
user-scalable
Default to “yes” on mobile Safari.
17. CSS Media Queries
Two ways to use media queries:
<link rel="stylesheet" href="screen.css"
media="screen and (min-width: 1024px)" /
>
@media screen and (min-width: 1024px) {}
The logical “and” can be used to join multiple
queries
@media screen and (min-width: 1024px)
and (max-width: 1228px) {}
18. Media Query Features
Media queries test for the existence or extent of
device features to conditionally load CSS or apply
styles.
“Rendering Surface” is the device’s entire screen.
“Display Area” is the browser window on the
device.
19. HAS min- AND
FEATURE DEFINITION
max- PREFIXES
width The width of the display area YES
height The height of the display area YES
device-width The width of the device’s rendering surface YES
device-height The Height of the device’s rendering surface YES
orientation Accepts portrait or landscape value NO
Ratio of the display area’s width over its height. For example: on a desktop,
aspect-ratio YES
you’d be able to query if the browser window is at a 16:9 aspect ratio.
device-aspect- Ratio of the device’s rendering surface width over its height. For example: on
YES
ratio a desktop, you’d be able to query if the screen is at a 16:9 aspect ratio.
The number of bits per color component of the device. For example, an 8-bit
color color device would successfully pass a query of (color: 8). Non-color devices YES
should return a value of 0.
The number of entries in the color lookup table of the output device. For
color-index YES
example, @media screen and (min-color-index: 256).
The number of bits per pixel on a monochrome device If the device is not a
monochrome YES
monochrome device, the output device value will be 0.
Tests the density of the pixels in the device, such as:
resolution YES
screen and (resolution: 72dpi) or screen and (max-resolution: 300dpi).
For tv-based browsing, measures whether the scanning process is either
scan NO
progressive or scan.
Tests whether the device is a grid-based display, like feature phones with one
grid NO
fixed-width font. Can be expressed simply as (grid).
20. Device-specific Queries
/* Smartphones (portrait and landscape) */ /* iPads (portrait) */
@media only screen @media only screen
and (min-device-width : 320px) and (min-device-width : 768px)
and (max-device-width : 480px) { and (max-device-width : 1024px)
/* Styles */ and (orientation : portrait) {
} /* Styles */
}
/* Smartphones (landscape) */
@media only screen /* Desktops and laptops */
and (min-width : 321px) { @media only screen
/* Styles */ and (min-width : 1224px) {
} /* Styles */
}
/* Smartphones (portrait) */
@media only screen /* Large screens */
and (max-width : 320px) { @media only screen
/* Styles */ and (min-width : 1824px) {
} /* Styles */
}
/* iPads (portrait and landscape) */
@media only screen /* iPhone 4 */
and (min-device-width : 768px) @media
and (max-device-width : 1024px) { only screen and (-webkit-min-device-pixel-ratio :
/* Styles */ 1.5),
} only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
/* iPads (landscape) ----------- */ }
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
21. Helper Tools
Modernizr:
A JavaScript Library which allows web views
which take advantage of less-fully supported
features to display properly on older browsers.
modernizr.com
Skeleton:
A library of JavaScript and CSS files meant to
allow fast creation of responsive web views.
getskeleton.com
22. Final Thoughts
To achieve the best results, front-end devs and
designers should collaborate when creating
responsive mocks/templates.
Responsiveness is a mindset. When approaching
a new view, resist the urge to lock things down
and, instead, think fluidly.
Responsive Web Design is evolving as standards
and browser adoption of those standards change.
There is no substitute for looking at a view on the
devices on which users will be viewing it.