The document discusses various new elements in CSS3 including shadow effects, rounded corners, border images, colored borders, opacity transitions, RGBA/HSLA colors, attribute selectors, multi-column layouts, transitions, web fonts, and media queries. It also covers CSS preprocessors like Sass and Less, adding variables, nesting, mixins and other features to make CSS more powerful and modular. Best practices for performance include minimizing HTTP requests, caching, browser support, frameworks and tools.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
Coding conventions are style guidelines for any programming language. As, we are growing ourselves rapidly in learning new technology, the need for learning of the coding standards and conventions for the same language also arises.
So, here let us try to learn some coding guidelines for few frontend languages.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
Recent implementation of CSS3 features in modern browsers allow for greater design control and creativity in our Web sites.
In this three-hour workshop, attendees will learn about using colors through RGBa and opacity, multiple background and border images, text and box shadows, CSS-enabled gradients and transitions as well as laying out text in multiple columns.
In addition to font embedding techniques and third-party font bureaus, we look into designing with older browsers in mind when coding with CSS3.
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
Coding conventions are style guidelines for any programming language. As, we are growing ourselves rapidly in learning new technology, the need for learning of the coding standards and conventions for the same language also arises.
So, here let us try to learn some coding guidelines for few frontend languages.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Managing responsive websites with css preprocessors presented at Penn State Webconference Tuesday June 23, 2015. Sass and Less preprocessors simplify managing css for responsive websites.
CSS3 isn't the future, it's the present, and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
From this presentation, we will understand,
- Introduction to Sass
- Why adding Sass in our workflow
- Advantages of Sass
- How to convert our CSS into Sass
- Compass
- What is Compass
- How to use sass with compass
Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.
Code examples at: https://github.com/founddrama/vt-code-camp
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
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.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Managing responsive websites with css preprocessors presented at Penn State Webconference Tuesday June 23, 2015. Sass and Less preprocessors simplify managing css for responsive websites.
CSS3 isn't the future, it's the present, and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
From this presentation, we will understand,
- Introduction to Sass
- Why adding Sass in our workflow
- Advantages of Sass
- How to convert our CSS into Sass
- Compass
- What is Compass
- How to use sass with compass
Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.
Code examples at: https://github.com/founddrama/vt-code-camp
This presentation will introduce the audience to designing a WordPress theme in HTML5 and CSS3. We’ll discuss the history of HTML5, why HTML5 makes blog design easier, and what you need to do to get WordPress to output valid HTML5 code. You’ll also see how CSS3 can be used to generate an awesome-looking site using little to no graphics.
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
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.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
In this session, I explained the core concepts of SASS and how it can enhance your development workflow. Sketch Web Parts first in HTML move them to SPFx later...
[Stefan Bauer] For more than one decade no other SASS revolutionised the way we write CSS nowadays. In modern SharePoint development, this is the core ingredient to deliver optimised and well architecture.
SASS is also one of the core ingredients to develop new customisations for SharePoint through SPFX.
This session will give you an overview of the most useful concepts in SASS. Besides you will get to know some limitations in SPFX and how to handle those properly.
After this session you will be able to:
• Sketch and develop web parts faster
• Create your reusable CSS
• Apply themes to your web parts
• Handle external CSS properly in SPFX
I'm excited to announce that I've just released the stable version of Sass 3.5. This release focuses on compatibility with new CSS syntax, and helps lay the groundwork for the upcoming module system and compatibility with Dart Sass.
SCSS is a an extension of CSS that adds power and elegance to the basic language.
It helps keep large stylesheets well organized and get small stylesheets up and running quickly.
This recipe provides a structured approach for using SCSS Pre-processor for your web applications.
Features covered :
• Pre-processing
• Variables
• Nesting
• Partials
• Imports
• Mixins
• Inheritance
• Operators
SASS/SCSS Preprocessor can be a great help to create and manage complex css structures. It boosts css with pro features like defining and executing Variables, Functions and Mixins.
Stop your share point css become a di-sass-ter today - SPS MunichStefan Bauer
CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way…
SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more.
Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint.
Key Takeaways :
- I will explain what SASS is and where you would use it.
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple Rich Text Editor Styles using mixins and includes.
- How to apply a Grid layout and make it Responsive.
- How to structure your branding correctly to make it more maintainable.
- How CSS 4 fits into the picture and does it make SASS obsolete?
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/
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.
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.
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
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.
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.
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/
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
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
3. Shadow Effect in CSS3
• -moz-box-shadow: 7px 7px 5px #999; /* For shadow effect to work in supported
versions of Mozilla */
• -webkit-box-shadow: 7px 7px 7px #999; /* For shadow effect to work in
supported versions of Safari */
- See more at: http://blog.jmwhite.co.uk/2009/04/19/the-shadow-effect-in-css3/#sthash.XSkRPqSa.dpuf
4. CSS3 rounded
.rounded_STYLE
{
background-color: COLOR; /* if needed */
border: 1px solid BORDER_COLOR; /* if needed */
-webkit-border-radius: RADIUS; /* for Safari */
-moz-border-radius: RADIUS; /* for Firefox */
}
http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-
corners-ie/
10. HSLA Colors
• As RGBA is to RGB, HSLA is to HSL; that is, it allows a fourth value,
which sets the Opacity (via the Alpha channel)
11. CSS3 Attribute Selectors
The CSS3 Selectors module introduces three new attribute selectors,
which are grouped together under the heading “Substring Matching
Attribute Selectors”.
• [att^=val] – the “begins with” selector
• [att$=val] – the “ends with” selector
• [att*=val] – the “contains” selecto
12. CSS3 Attribute Selectors
[att^=val] – the “begins with” selector
The Syntax
• element[att^=val]
Examples
• a[href^="http://"]
• p[title^="Hello"]
13. Other modules
• CSS3 Transitions
• media queries
• multi-column layout
• Web fonts
• speech
19. Why Media Queries
• Change our layouts to fit the exact need of different devices without
changing the content
• “One size fits all” Liquid, elastic and fixed width layouts
21. CSS media types
Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and
terminals
tv Used for television-type devices
http://www.w3.org/TR/CSS21/media.html
22. Specify Media
Method 1: <link> within HTML
You can use a <link> element in the head of your HTML document to
specify the target media of an external style sheet. <link
rel="stylesheet" href="a.css" type="text/css" media=”screen" />
Method 2: <?xml stylesheet> within XML
You can use <?xml-stylesheet ?> in the head of your XML document to
specify the target media of an external style sheet. <?xml-stylesheet
media="screen" rel="stylesheet" href="example.css" ?>
23. Specify Media
Method 3: @import within HTML
You can use @import in the head if your HTML document to specify the
target media of an external style sheet. <style type="text/css"
media="screen"> @import "a.css";</style>
Warning: @import should be avoided as it can cause issues in some
versions of Internet Explorer.
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
24. Specify Media
Method 4: @import within CSS
You can specify the target medium within a CSS file using @import
@import url("a.css") screen;
Media-types within @import rules are not supported by IE5, IE6 or IE7.
The rule is ignored.
Method 5: @media within CSS
You can specify the target medium within a CSS file using @media
@media screen { body { color: blue; } }
25. Media Queries cont…
• It’s a logical type (yes, No)
• If expression is true, it will apply to device
@media all and (min-width: 640px) { #media-queries-1 { background-
color: #0f0; } } @media screen and (max-width: 2000px) { #media-
queries-2 { background-color: #0f0; } }
27. • Element queries are not part of any CSS Specification. They basically
do not exist as of today. There are a couple of JavaScript-based
polyfills involving various syntaxes, but there is still no draft for a
native support.
29. SASS
Sass is an extension of CSS3 which adds nested rules, variables, mixins,
selector inheritance, and more. Sass generates well formatted CSS and
makes your stylesheets easier to organize and maintain.
30. SASS - Preprocessing
• When stylesheets are getting larger, more complex, and harder to
maintain. This is where a preprocessor can help. Sass lets you use
features that don't exist in CSS yet like variables, nesting, mixins,
inheritance and other nifty goodies that make writing CSS
31. SASS - Variables
• Think of variables as a way to store information that you want to
reuse throughout your stylesheet. You can store things like colors,
font stacks, or any CSS value you think you'll want to reuse. Sass uses
the $ symbol to make something a variable. Here's an example:
Sass CSS
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font:100% $font-stack
color: $primary-color
body { font: 100% Helvetica, sans-serif;
color: #333; }
32. SASS - Nesting
• When writing HTML you've probably noticed that it has a clear nested
and visual hierarchy. CSS, on the other hand, doesn't.
Sass CSS
nav
ul margin: 0 padding: 0 list-style:
none
li display: inline-block
a display: block padding: 6px 12px
text-decoration: none
nav ul {
margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px;
text-decoration: none; }
33. SASS - Partials
• You can create partial Sass files that contain little snippets of CSS that
you can include in other Sass files. This is a great way to modularize
your CSS and help keep things easier to maintain. A partial is simply a
Sass file named with a leading underscore. You might name it
something like _partial.scss. The underscore lets Sass know that the
file is only a partial file and that it should not be generated into a CSS
file. Sass partials are used with the @import directive.
34. SASS - Import
• CSS has an import option that lets you split your CSS into smaller,
more maintainable portions. The only drawback is that each time you
use @import in CSS it creates another HTTP request. Sass builds on
top of the current CSS @import but instead of requiring an HTTP
request, Sass will take the file that you want to import and combine it
with the file you're importing into so you can serve a single CSS file to
the web browser.
Sass CSS
// _reset.sass html, body, ul, ol margin: 0
padding: 0
// base.sass @import reset body font:
100% Helvetica, sans-serif background-
color: #efefef
html, body, ul, ol { margin: 0; padding: 0;
}
body { font: 100% Helvetica, sans-serif;
background-color: #efefef; }
35. SASS - Mixins
• A mixin lets you make groups of CSS declarations that you want to
reuse throughout your site. You can even pass in values to make your
mixin more flexible. A good use of a mixin is for vendor prefixes
Sass CSS
=border-radius($radius) -webkit-border-
radius: $radius -moz-border-radius:
$radius -ms-border-radius: $radius
border-radius: $radius
.box +border-radius(10px)
.box { -webkit-border-radius: 10px; -moz-
border-radius: 10px; -ms-border-radius:
10px; border-radius: 10px; }
36. SASS - Extend/Inheritance
• This is one of the most useful features of Sass. Using @extend lets
you share a set of CSS properties from one selector to another.
Sass CSS
.message border: 1px solid #ccc padding:
10px color: #333
.success @extend
.message border-color: green
.error @extend .message border-color:
red
.warning @extend .message border-
color: yellow
.message, .success, .error, .warning {
border: 1px solid #cccccc; padding: 10px;
color: #333; }
.success { border-color: green; }
.error { border-color: red; }
.warning { border-color: yellow;
37. SASS - Operators
• Doing math in your CSS is very helpful. Sass has a handful of standard
math operators like +, -, *, /, and %. In our example we're going to do
some simple math to calculate widths for an aside & article.
Sass CSS
.container width: 100%
article[role="main"] float: left width:
600px / 960px * 100%
aside[role="complimentary"] float: right
width: 300px / 960px * 100%
.container { width: 100%; }
article[role="main"] { float: left; width:
62.5%; }
aside[role="complimentary"] { float:
right; width: 31.25%; }
39. LESS
• Less (also known as LESS) is a dynamic stylesheet language that can
be compiled into Cascading Style Sheets (CSS), or can run on the
client-side and server-side.
40. • Less was designed to be as close to CSS as possible, so the syntax is
identical to existing CSS code. As a result, existing CSS can be used as
valid Less code.
• The newer versions of Sass also introduced a CSS-like syntax called
SCSS (Sassy CSS).
41. Less
• Variables
• Mixins
• Nested rules
• Media query bubbling and nested media queries
• Operations
• Functions
• Namespaces and Accessors
• Scope
• Comments
• Importing
42. SASS vs LESS
05/16/12 01/12/13 06/25/13
Number of
open issues on
LESS
392 112 142
Number of
open issues on
Sass
84 83 110
Pending pull
requests on
LESS
86 10 5
Pending pull
requests on
Sass
3 7 11
Number of
commits in the
last month in
LESS
11 84 2
Number of
commits in the
last month in
Sass
35 14 14
http://css-tricks.com/sass-vs-less/
54. Minimize HTTP Requests
• Combined files
• CSS Sprites
• Image maps
• Inline images - This can increase the size of your HTML document.
• Convert to Base 64
55. • Use CDN
• Add an Expires or a Cache-Control Header
• For static components: implement "Never expire" policy by setting far future
Expires header
• For dynamic components: use an appropriate Cache-Control header to help
the browser with conditional requests
• Gzip Components
• Accept-Encoding: gzip, deflate
• Content-Encoding: gzip
56. • Put Stylesheets at the Top
• Put Scripts at the Bottom (if the script uses document.write to insert
part of the page's content)
• Make JavaScript and CSS External
• Reduce DNS Lookups (add more hostnames)
• Minify JavaScript and CSS
57. • Avoid Redirects
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
• Remove Duplicate Scripts
• Reduce the Number of DOM Elements
• Split Components Across Domains