This document provides instructions on using JavaScript to allow website visitors to select different cascading style sheets (CSS) and have their preference remembered via cookies. It discusses linking different types of style sheets, detecting browsers and objects, creating and reading cookies, and programming functions to get the current active style sheet and toggle between them when pages load and unload. Code snippets are provided to implement these functions to enable style sheet selection and remember the user's preference on future page visits.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
Introduction to jquery mobile with PhonegapRakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
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.
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...Evan Mullins
WordPress is for more than just blogging. Create and manage more types of content, like a portfolio, events, testimonials, images, people, cats anything you can think of you’d like to have a website about. Learn how to add content types like they were built in.
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
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
Responsive web design is a must these days but it can be a little tricky to make your design work on all devices and screen sizes, especially if you have to start from scratch each time. Front-end frameworks make it very easy to quickly create responsive, standard-complaint websites by providing a reusable structure (HTML, CSS, JS), with configurable components, that allows you to hit the ground running with minimum effort. And the two most powerful frameworks? Bootstrap and Foundation. Rachel has used both Bootstrap and Foundation with numerous WordPress projects and will not only show you how to get started using these frameworks, but will also present a comparison of these two systems and the differences you’ll face when using them to create a WordPress theme.
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
Web sites can be fast and responsive once you understand the process web browsers use to load and run web pages. We'll look at using tools like WebPageTest to analyze and optimize web pages.
Introduction to jquery mobile with PhonegapRakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
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.
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
Custom post types- Choose Your Own Adventure - WordCamp Atlanta 2014 - Evan M...Evan Mullins
WordPress is for more than just blogging. Create and manage more types of content, like a portfolio, events, testimonials, images, people, cats anything you can think of you’d like to have a website about. Learn how to add content types like they were built in.
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
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
Responsive web design is a must these days but it can be a little tricky to make your design work on all devices and screen sizes, especially if you have to start from scratch each time. Front-end frameworks make it very easy to quickly create responsive, standard-complaint websites by providing a reusable structure (HTML, CSS, JS), with configurable components, that allows you to hit the ground running with minimum effort. And the two most powerful frameworks? Bootstrap and Foundation. Rachel has used both Bootstrap and Foundation with numerous WordPress projects and will not only show you how to get started using these frameworks, but will also present a comparison of these two systems and the differences you’ll face when using them to create a WordPress theme.
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
Web sites can be fast and responsive once you understand the process web browsers use to load and run web pages. We'll look at using tools like WebPageTest to analyze and optimize web pages.
Shanzhai vs. Qi Inside: Making Legal Open Source Hardware in ChinaJon Phillips
Shanzhai products, often derided as knock-off fake products, literally means "mountain village" in Chinese. These products are sold by the cargo ship, but massively to the large populace internal to China. "Shanzhai" refers to the older times in China where thieves and pirates would stockpile illegal goods high up in the mountains. Others simply refer to Shanzhai products accessibility to everyone. With Shanzhai, even the poor people who live on a mountain can have the expensive famous brands.
This presentation investigates the Shanzhai technology culture in China, analyzes its positive and negative aspects, and announces a new legal approach to build off the best parts of Shanzhai technology. This approach uses a mixture of Creative Commons licensing for hardware plans, Free Software licensing for software used to run the hardware, and open patents for the novel technological innovations. Do you have Qi Inside your hardware?
IDC Energy Insights - Enterprise Risk ManagementFindWhitePapers
Operational risk management is a rising priority for companies in asset-intensive industry segments. Disparate and disconnected efforts in safety, environmental compliance, and asset utilization at the individual facility are converging to provide better enterprise-wide control and management accountability. Companies that make substantial efforts today will not only improve risk mitigation but create an enduring competitive advantage.
The presentation of the Drupal frontend optimizations from Drupal Camp LA 2011. The slides go over optimizations you do in the backend to serve files in the frontend faster and optimizations in the front end to css and javascript to make that aspect run faster.
This is the presentation slide used in my recent workshop around "Building Frontend Webapps" - Basics.
Original slides - https://lnkd.in/guFG57x
Detailed self help steps from start to end can be found here - https://lnkd.in/gvZc6MH
#frontend #learning #education #elearning
Making Your Site Printable: CSS Summit 2014Adrian Roselli
The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts.
It should now be easier than ever to respond to a format that has existed since the start of the web -- print.
I'll walk through the process for making your responsive sites respond to the format we most often forget and show you how to use Google Analytics to track what pages are printed from your site.
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentEvan Mullins
Crash course introduction to web development for WordPress covering acronyms, buzzwords and concepts that often leave outsiders mystified. Overview of primary development processes and what software and tools are needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way. WordPress development tools explained for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the Loop, hooks, APIs, CLI, agile, bootstrap, slack, linting, sniffing … etc.
AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se
My slide deck from my session, AD113: Speed Up Your Applications with Nginx + PageSpeed, at MWLUG 2015 in Atlanta, GA at the Ritz-Carlton.
For more, see:
- https://edm00se.io/self-promotion/mwlug-ad113-success
- https://github.com/edm00se/AD113-Speed-Up-Your-Apps-with-Nginx-and-PageSpeed
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
Introduction in the JavaScript Programming language typically used in the front end of Web Applications. More information can be found at : https://www.spiraltrain.nl/course-javascript-programming/?lang=en
Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details.
"What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5.
You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.
Site Manager rocks! This presentation goes up to 11.
Presentation I gave at the T44U conference in Dublin (12-13 November 2009).about our tops tips for using the Site Manager Web content management system (http://www.terminalfour.com/)
Released under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland Licence.
http://creativecommons.org/licenses/by-sa/2.5/scotland/
Similar to Winter%200405%20-%20Advanced%20Javascript (20)
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/
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
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.
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.
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.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
1. Advanced Javascript
Webworks – A Workshop Series in Web Design (Session 5)
Table of Contents:
1. Browser and Object detection
2. Cookies and Stylesheets
Browser and Object Detection
1. Introduction
There are many browsers out in the great unknown of the internet today. Internet
Explorer, Netscape, Mozilla Firefox, and Opera are just a few of them, and even
they have internal version numbers as well. As you can imagine, each has
slightly different, or even vastly different, ways of interpreting your JavaScript or
HTML code. Some HTML tags are supported in some but not in others. Not all
browsers support the same version of JavaScript. Some functions may be
support on one browser, but not on the next. Displayed text or boxes could even
look misaligned. How can you limit the number of bugs on your page?
2. Browser Detection vs Object Detection
Browser detection sniffs out the browser of the entire page, while object detection
is a more dynamic way of checking the validity of each function as it gets called.
Browser detection leverages the navigator object that is available to all
JavaScript code, and while it had its glory days, object detection is now the more
popular way to sniff out incompatibility. First, we’ll go over browser detection.
3. Browser Detection
Browser detection was widely popular in the past. JavaScript gets a “navigator”
object, from which browser data can be collected.
Useful properties:
Property Description
Navigator.appName Name of the browser (for ex, Microsoft Internet Explorer
Navigator.appVersion Version of the browser (for ex, 6.0)
Navigator.userAgent User agent header (for ex, Mozilla/4.0 (compatible; MSIE
5.5; Windows 98; Hotbar 3.0))
For example,
<script language="JavaScript"
type="text/JavaScript">
if(navigator.appName == "Netscape"){
window.location = "http://www.netscape.com"
}
if(navigator.appName == "Microsoft Internet Explorer"){
window.location = "http://www.msn.com"
}
window.location == "meh.html"
</script>
2. Webworks: Advanced Javascript Page 2 of 9
So, we could use this to set up many variables that detect the browser type and
version, and then use this to either detect which version of our code to use, or to
phase out parts of our code that might not work under other browsers.
4. Object Detection
So what’s the problem with using browser detection? Well, as you can see, it’s
pretty tedious. Many browsers hide their names or have different formats for
displaying version numbers. You can to check for every browser, and since there
are so many different kinds, it’s almost impossible to preplan for each. Besides,
who wants to do that? Here’s where object detection comes in. It actually figures
out whether the visiting browser supports the object that is going to be used
before it uses it.
Let’s look at the classic rollover example. Rollovers use the document.images
object to get the images on a page. However, this object is only supported by
Netscape 3+ and IE 4+.
Here’s how to do it:
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "ON").src;
}
}
Notice that I called the object, document.images. If it exists, it will return true and
execute the following code. Notice that if it does not exist, the code will continue
as if nothing had happened.
Cookies – Quick Overview
What are They?
A very small text file placed on your hard drive by a web page server when you access a
site on that server. It serves as an identification the next time you access web pages on
that server so as to extend the capabilities of web-
based client/server applications. It is uniquely yours
and can only be read by the server that gave it to you.
What are They For?
To let the server know that you have returned to a
page/site you have previously visited. This can be
useful in the following situations:
• Suppose you are filling a form and then
accidentally close the window. A cookie set on
your machine lets the server remember fields
already filled-out.
• Allows you to customize what you want to see
3. Webworks: Advanced Javascript Page 3 of 9
when you visit a portal like myway.com
• Monitors which advertisements were shown to you and how often each was
shown.
Types of Cookies
There are two types:
• Session cookies – expire after your session on that site
• Persistent cookies – remain until you clear your cache and delete cookies
Types of Values a Cookie can Pass
• The name of the cookie.
• The value of the cookie.
• The expiration date of the cookie - how long the cookie is active in your
browser.
• The path of the cookie is valid for - the URL path the cookie us valid in. Web
pages outside of that path cannot use the cookie.
• The domain the cookie is valid for - makes the cookie accessible to pages on
any of the servers on a multi-server domain.
• The need for a secure connection – states if the cookie can only be used on a
secure server connection, such as on a site using SSL.
Let’s Bake some Cookies
Stage 1 – Cascading Style-Sheets
Task 1
• Visit CSS-Zen Garden <http://www.csszengarden.com/>
• Click on any of the links to the left and observe the content of the pages
As you might have observed, although the index pages all have the same text, their
formatting and layouts differ radically. Each uses a Cascading Style-Sheet (CSS).
Questions:
• What is a style-sheet?
• Do you find all the layouts equally appealing?
• What is the chance that everyone finds your favorite one most appealing?
Stage 2 – Creating the Style-Sheets
Lets now apply the knowledge about cookies to allow each one of us to be able select
how they want their site to be displayed. But first we need to have a style-sheet created
for each new look we want to make available.
4. Webworks: Advanced Javascript Page 4 of 9
In real life you would do this when you start designing your site. If you want to learn
more about style-sheets, use Google, visit WC3.org (http://www.w3.org/Style/CSS/) or
come to our Spring CSS tutorial.
For now:
Task 2
• Download and unzip cookies.zip to the desktop
• Open the index file for editing in Macromedia DreamWeaver.
Stage 3 – Attaching the Style-Sheets to the Page
The link element is used to declare the style-sheet. There are three different
relationships external style sheets can have with their parent document: persistent,
preferred, and alternate.
Persistent Sheets
Always on. To make a style sheet persistent, the rel attribute is set to
“stylesheet” and NO title attribute is set.
To make the style sheet “style1.css” persistent, add this code in the head:
<link rel="stylesheet" type="text/css" href="style1.css" />
Preferred Sheets
These style sheets are enabled by default. They can, however, be disabled them if an
alternate style sheet is selected.
To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style
sheet is given a title attribute. For instance, this code makes sheet “style2.css”
preferred.
<link rel="stylesheet" type="text/css" href="style2.css"
title="preferred"/>
Note: It is preferred not because its title is “preferred” but because it has a title.
Style sheets having identical title attributes are form a group. Grouped sheets can be
enabled and disabled in one go. If more than one group of preferred style sheets are
declared, the first group takes precedence.
Alternate Sheets
These style sheets can be selected by the visitor as an alternatives to the author’s
preferred style sheet. This allows the visitor to personalize a site and choose his or her
favorite scheme. They can also be used for accessibility.
5. Webworks: Advanced Javascript Page 5 of 9
To specify an alternate style sheet, the rel attribute is set to “alternate
stylesheet” and the style sheet is named with a title attribute. As with preferred
sheets, these style sheets can also be grouped together by giving them identical title
attributes. To make style-sheet “style3.css” an alternate sheet, we place this code in the
head of the document.
<link rel="alternate stylesheet" type="text/css"
href="style2.css" title="alternate" />
Task 3
• There are three style-sheets in the cookie folder you created from the zip-
file you downloaded.
• Add sheets “style1.css”, “style2.css” and “style3.css” to the
head of your “index.html“ file
• Make sheet “style1.css” the persistent sheet.
• Make sheet “style2.css” the preferred sheet entitled “sassy”
• Make sheet “style3.css” the alternate sheet entitled “boring”
Swapping Styles
Stage 4 – Programmatically Differentiating Sheets
Ideally, users should be able to select the style-sheet of their choice from the available
list. Sadly, this is not the case so we have to use JavaScript to allow users to make that
choice and remember it for them using a cookie.
The Script
First we need the script to be able to differentiate between the three different types of
style-sheet. This is relatively easy to do, as we only need to check two of the attributes
of each link element.
Is it a link to a style sheet?
HTMLLinkElement.getAttribute("rel").indexOf("style") != -1
Is there a title attribute?
HTMLListElement.getAttribute("title")
Does the rel attribute contain the keyword "alternate"?
HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1
6. Webworks: Advanced Javascript Page 6 of 9
Using these three checks we can check every link element in the document, disabling all
preferred and alternate style sheets that we don’t want active, and enabling all preferred
and alternate style sheets that we do want active.
Note: Only preferred and alternate style sheet link elements have a title attribute.
The function to do this looks like this:
function setActiveStyleSheet(title) {
var i, a, tagNames;
tagNames = document.getElementsByTagName("link");
for(i=0; i < tagNames.length; i++) {
a = tagNames[i];
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title)
a.disabled = false;
}
}
}
Stage 5 - Baking Cookies
Now we can change the style sheet. However, the preference only persists on the
current page. To remember the preference, we use cookies.
Cookie processing involves storing the preference to the hard-drive in the form of a
cookie and reading it another time.
The following snippet creates a cookie.
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
7. Webworks: Advanced Javascript Page 7 of 9
To read the cookie we use this snippet
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length,c.length);
}
return null;
}
Stage 6 - Getting the Current Active Style-sheet
To return the current style sheet we locate an active preferred or alternate style sheet
and check its title. To do this we look at all link elements on the page to decide if each is
a style sheets. If it is, we check if has a title. This tells us that the style sheet is either
preferred or alternative.
Finally, we check if the style sheet is active. If all three checks return true, we have the
current style sheet and we can return the title. If not, then we return null.
The function looks like this:
function getActiveStyleSheet() {
var i, a, tagNames;
tagNames = document.getElementsByTagName("link");
for(i=0; i < tagNames.length; i++) {
a = tagNames[i];
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
8. Webworks: Advanced Javascript Page 8 of 9
Stage 5 - Using the Cookies
To use these cookie functions, we need to add onload() and onUnload() event listener
handles to the window.
OnLoad()
When document is loaded, we need to tell the browser which style-sheet (our preferred
style-sheet) we want to use as our active style-sheet. The function
setActiveStyleSheet() (see page4) does this.
To find out which style sheet is the preferred style sheet, we need another function -
getActiveStyleSheet() which may look like this:
function getPreferredStyleSheet() {
var i, a, tagNames;
tagNames = document.getElementsByTagName("link");
for(i=0; i < tagNames.length; i++) {
a = tagNames[i];
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
In the onload() function, we first set a title variable. This either holds the value of the
previous style sheet that was retrieved from the cookie, or if there isn’t one, the title of
the author’s preferred style sheet. To keep things logical, let’s call the cookie “style.”
Next we call up the setActiveStyleSheet() function passing the title variable as the
title. Our onload function looks something like this:
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
9. Webworks: Advanced Javascript Page 9 of 9
onUnload()
When we leave the page, we want to remember the style-sheet for another day, so we
save it. We use the onUnload listener message handle to do this. This function gets the
current active style-sheet, and saves it in a cookie:
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
Stage 6 - Integrating it all
We store all these functions in a JavaScript file named styleswitcher.js, and load
the file inside the head of the document, making sure the script file is loaded after all the
style-sheet link elements like this:
<script type="text/JavaScript" src="styleswitcher.js"></script>
To allow visitors to change the active style sheet, we use hyperlinks with a JavaScript
onClick() events. For example, to have the option to switch between two themes with
titles “boring” and “sassy,” we would use the following HTML:
<a href="#"
onclick="setActiveStyleSheet('boring');
return false;">
Boring Theme
</a>
<a href="#"
onclick="setActiveStyleSheet('sassy');
return false;">
Sassy Theme
Finally, we attach the script that makes all this work to the html file
</a>
Task 4
• Attach the “style-switcher.js” file to the “index.html” file
• Add the hyperlinks that allow the user to switch style sheets
Resources Used
Cookie-Central < http://www.cookiecentral.com/faq/>
Webopedia.Com < http://www.webopedia.com/DidYouKnow/Internet/2002/Cookies.asp>
Adapted from Sowden, Paul. “Alternative Style: Working With Alternate Style Sheets.”
< http://www.alistapart.com/articles/alternate/>