Software Refactoring Group

Slides:

Advertisements

Similar presentations

ASP.NET Intro An introduction to the languages and communication of an ASP.NET system.

Advertisements

Introduction to HTML & CSS

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.

1 Styles and CSS David Douglas Sam M. Walton College of Business, University of Arkansas “Connecting scholarship and research with business practice”

Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

Discovering Refactoring Opportunities in Cascading Style Sheets Davood Mazinanian Nikolaos Tsantalis Ali Mesbah Concordia University, Montréal, Canada.

An empirical study on the use of CSS Preprocessors Davood Mazinanian - Nikolaos Tsantalis Department of Computer Science and Software Engineering Concordia.

Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.

CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.

XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.

Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.

© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.

1 Computer and IT Assignment 1 Lt Cdr Ravi Saini Centre for Advance Technology INS Valsura.

Web Technologies COMP6115 Session 2: Planning, Designing, Constructing and Testing Static Web Sites Dr. Paul Walcott Department of Computer Science, Mathematics.

 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)

By Jonathan French. What is CSS? Cascading Style Sheet Style sheet language Used for the look and formatting of a document written in a markup language.

NetTech Solutions Working with Web Elements Lesson 6.

Web Design I Spring 2009 Kevin Cole Gallaudet University

18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,

Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.

INTRODUCTION TO CSS. OBJECTIVES: D EFINE WHAT CSS IS. K NOW THE HISTORY OF CSS. K NOW THE REASON WHY CSS IS USED. CSS SYNTAX. CSS ID AND CLASS.

HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.

 cascade Style Sheets (CSS) is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. CSS works in conjunction with HTML to greatly increase.

Davood Mazinanian, Nikolaos Tsantalis Concordia University, Montreal CSER FALL 2013 MEETING 1 An Empirical Study of Duplication in Cascading Style Sheets.

CSE 403 Software Engineering Richard Anderson, David Notkin, Valentin Razmov Spring 2005.

Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.

Daveandal.net Cascading Style Sheets 101 “How I learnt to love CSS and found my inner designer”

INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.

How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.

1 CSS-PREPROCESSORS as a way to speed up the process of interfaces developing and achieve Customer goals DMITRY SHURSHILIN AUGUST 3, 2015.

Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.

Kyle Zimmermann.  What are CSS?  History  The Box Model  CSS Styles  Rules and Selectors  Cascade & Specificity  Inheritance  Video  Demo.

Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.

Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)

IT Accessibility Committee Cascading Style Sheets Presented by Michael B. Short Prepared by The NYS Forum IT Accessibility Committee

HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.

Canvas Styles Adding Color with HTML / CSS Marley - Jan

CSS Cascading Style Sheets Prepared By

What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,

S.MD.FAROOQ M.Tech., [Ph.D] Assistant Professor Department of CSE Santhiram Engineering College.

An empirical study on the use of CSS Preprocessors Davood Mazinanian Nikolaos Tsantalis Department of Computer Science and Software Engineering Concordia.

WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.

Introduction to CSS: Selectors

Migrating CSS to Preprocessors by Introducing Mixins

Web Basics: HTML/CSS/JavaScript What are they?

Module: Software Engineering of Web Applications

Responsive Web Pages.

Naoya Ujihara1, Ali Ouni2, Takashi Ishio1, Katsuro Inoue1

>> Introduction to CSS

Cascading Style Sheets (CSS)

Web Design History By Jayam Web Solutions.

Accurate and Efficient Refactoring Detection in Commit History

: Clone Refactoring Davood Mazinanian Nikolaos Tsantalis Raphael Stein

Cascading Style Sheets

CSS: Cascading Style Sheets

Building ASP.NET Applications 2

Training & Development

Unit 4 Test CSS Test.

CSS Styles Introduction.

Apply procedures to create cascading style sheets.

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

Cascading Style Sheets III B. Com (Paper - VI) & III B

INTERNATIONAL INSTITUTE OF IFORMATION TECHNOLOGY, (I²IT)

CASCADING STYLE SHEET WEB TECHNOLOGY

Presentation transcript:

Software Refactoring Group Nikolaos Tsantalis Assistant Professor Concordia Research Chair in Web Software Technologies Laleh Eshkevari Postdoctoral Fellow Davood Mazinanian PhD Student Shahriar Rostami M.Sc. Student Asif Al-Waqfi M.Sc. Student Matin Mansouri M.Sc. Student

Recent Projects and Highlights Software Clone Refactoring Assessing the Refactorability of Software Clones IEEE Transactions on Software Engineering, 2015 Featured article of the Nov. 2015 issue JDeodorant: Clone Refactoring 38th International Conference on Software Engineering (ICSE’16) Tool Demo Cascading Style Sheets (CSS) Refactoring Discovering Refactoring Opportunities in Cascading Style Sheets 22nd ACM SIGSOFT International Symposium on the Foundations of Software Engineering (FSE'14) Artifact evaluated An Empirical Study on the Use of CSS Preprocessors 23rd IEEE International Conference on Software Analysis, Evolution, and Reengineering (SANER'16) Best paper candidate

The Cascading Style Sheets that we do Or CSS Habits Die Hard Davood Mazinanian PhD Candidate Department of Computer Science & Software Engineering Concordia University

I don’t recall…. what was it again? CSS is a Style Sheet language Presentation for documents written in a markup language (HTML, SVG, …) Layout, colors, fonts, …

CSS can make links blue.

Use CSS for style reusability HTML CSS <html> … <a>My cool link</a> </html> a { color: blue; } Style Structure + Content

So, CSS can make links blue.

And its only that.

Håkon Wium Lie

Håkon Wium Lie

Developing it is not a big deal. Because it has a simple syntax. What if I tell you…. 200,000 LoC of CSS

How do we do that then?

How do we do that then?

What the heck academia is doing then? Finding dead code in CSS (3 works) One CSS for multiple pages (states)

What the heck academia is doing then? Quality of CSS code (1 work) Code smells in CSS (1 M.Sc. Thesis) Change impact analysis (1 work)

What did we do? Code duplication in CSS (Mazinanian et al, FSE’14) color: red } table { color: #f00 On average, 60% duplication in CSS

What did we do? Code duplication in CSS (Mazinanian et al, FSE’14) Up to 40% size reduction in CSS Using refactoring Refactoring is not always possible! p { color: red } table { color: #f00 p, table { color: red; } Refactoring

Why duplication in CSS? No notion of functions Limited support for CSS variables p { color: red } table { color: blue

Why duplication in CSS? Solution: CSS Preprocessors! .function(@color) { color: @color; } p { .function(red); table { .function(blue); p { color: red; } … table { color: blue; Transpile

What did we do? How developers use preprocessors? (Mazinanian and Tsantalis, Saner’16) Some of the findings: Functions are called mostly more than two times Often they have 1 or less parameters …

What the heck academia is doing then? Migrating CSS to Preprocessors (just submitted!) .function(@color) { color: @color; } p { .function(red); table { .function(blue); p { color: red; } … table { color: blue; Migration

The road ahead More empirical studies on how developers develop and maintain CSS Seriously, 200K LoC?! How do bugs look like in CSS? Developing tools for extracting existing “style semantics” for reuse Refactoring for removing code smells Refactoring for improving performance/power consumption