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.
There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror.
Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. In this workshop you will learn how to write modular HTML and CSS, and how reuse code to build maintainable websites. After spending some time playing with legos and writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
The workshop is geared towards intermediate front end developers, with a love of legos, looking grow their skill set. A laptop and good attitude are preferred.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. At the end of the workshop and after spending time writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
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.
There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror.
Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. In this workshop you will learn how to write modular HTML and CSS, and how reuse code to build maintainable websites. After spending some time playing with legos and writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
The workshop is geared towards intermediate front end developers, with a love of legos, looking grow their skill set. A laptop and good attitude are preferred.
All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. At the end of the workshop and after spending time writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
HTML and CSS can be a little daunting at first. This workshop covers the basics, breaks down the barrier to entry and shows you how you can start using HTML and CSS now.
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.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Yes, Designer, You CAN Be a Product LeaderShay Howe
There are many different ways to get into product leadership, and as a designer you are better suited than most. You have a knack for details, problem solving, and organization. And those skills, believe it or not, make you better suited to get your start in product leadership than many other career paths.
Over the course of my career I’ve been a designer, front-end engineer, and now, most recently, a product leader. I’m ready to demystify what it takes to become a product leader, share the steps I took, and provide advice so that you too may jump into product.
It’s not a journey without it’s struggles but it’s ripe with opportunity and enjoyment!
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.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Yes, Designer, You CAN Be a Product LeaderShay Howe
There are many different ways to get into product leadership, and as a designer you are better suited than most. You have a knack for details, problem solving, and organization. And those skills, believe it or not, make you better suited to get your start in product leadership than many other career paths.
Over the course of my career I’ve been a designer, front-end engineer, and now, most recently, a product leader. I’m ready to demystify what it takes to become a product leader, share the steps I took, and provide advice so that you too may jump into product.
It’s not a journey without it’s struggles but it’s ripe with opportunity and enjoyment!
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
Vortrag auf der Webtech 2012. Eine Webseite besteht aus vielen einzelnen Modulen, die alle als eigenes Universum betrachtet werden können. CSS-Präprozessoren helfen bei der effektiven Behandlung der Module. Prototyping im Browser und ein neuer Workflow werden dadurch einfacher.
Learn about web development, MVC frameworks, CRUD applications. Learn about Git, Github and Heroku, and how to create a basic Ruby on Rails web application.
We are born collaborators. As children we’re taught to share our toys, take turns on the playground, and, perhaps most powerful, use our imagination. These fundamental skills transcend from the playground to the classroom, and later into the workplace.
Overtime, though, we lose the spark once had on the playground. Innovation comes at the cost of time and frustration, and workplace collaboration becomes unproductive. It doesn’t have to, and shouldn’t, be this way.
Within this workshop we’ll cover collaboration in detail, outlining practices to help strengthen communication, establish understood roles, self-selected leaders, and work together. Collaboration shouldn’t be futile and a few simple practices can make all the difference in increasing team productivity and happiness.
Fleet & transport policy - Envision International (Conf 2010)Andre Knipe
Exploring fleet and transport policy and strategy in the public service, and providing fleet and transport managers with some guidelines as how to improve their units.
Slides from 'Back to Basics' quarterly theme presentation @Version 1 covering: general front-end best practice guidelines,HTML markup, CSS, Java Script, Accessibility, Performance, Cross-browser compatibility, Code Reviews and Tools & resources
Html css java script basics All about you needDipen Parmar
Hello Friends my name is Dipen parmar
and
today you got all you need in HTML ,CSS, andJavaScript
in just one document....
so please give like
and subscribe my youtube channel
https://www.youtube.com/channel/UChvhhqqFl23yYwq54ykoOQQ
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
We go over what parts of HTML5 and CSS3 you can use right away and how to degrade gracefully in order to appease the older browsers. Then, we play with some of the awesome visual candy you can make using the latest properties.
- Presented at PyGotham
HTML5 is the next wave of development for the web, with the support from IE9 and IE10. Even Windows 8 will support native apps written in HTML5. This session will give an overview and a deeper dive into writing effective HTML5 together with your existing ASP.NET experience to create the best next generation web experience.
Good CSS troubleshooting skills are important to decrease your workload and help you work better with others. Tips for clean code and targetting, as well as solutions to modern browser bugs are covered. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
Imagine a playground with no rules. The never-ending dodgeball game would dominate the entire blacktop space, pushing out the jump ropers and Red Rover players. It would never be your turn to go on the swings. And try as you might to remain honest, you'd still catch yourself cheating at Hot Lava Tag.
In order for peace and progress to occur, rules are necessary. The same thought can be applied to designing and developing websites. Nowadays, our options are endless and as designers and developers we can build any website or application we wish. What these options don't guarantee, however, is that what we build will be of any quality or fulfill our users' needs. Fortunately, we can rely on constraints, or "tech rules", to ensure our products are sound.
By settling constraints, we force ourselves to be more productive. They help us make decisions, creating focus around the problem we are trying to solve. They improve our consistency, which provides a better experience for our users. And they help us grow, a valuable asset in times of innovation.
Within this session, Shay will dive into different constraints and their benefits to building websites. Constraints are good and, when leveraged properly, allow us to truly flourish. It's your turn to go on the swings. Enjoy it.
HTML5 and CSS3 have taken shape and are being put to use everyday. What does this mean for you and how do you know if you are leveraging them correctly? Shay Howe, user interface engineer at Groupon, will break down HTML5 and CSS3 showing you how to build a better user interface and improve the over all user experience. New HTML5 input types and CSS3 rounded corners are just the begging, learn what else can help bring your website to the next level.
Semantics have been an underlining part of HTML for years, using elements, attributes, and values to reinforce the meaning of content. In the wake of popularity, HTML5 has expanded the library of semantic options and cleaned up former semantic options along the way. These improved semantics advocate accessibility and progressive enhancement, providing more intuitive user interfaces and mobile supplementation. One problem still looms, semantics are only of benefit when used properly. Adoption at large is necessary, and essential to building a better web.
Work on HTML5 began in 2004 to improve the existing markup language which has been in place for the past decade. In this decade the web has grown and evolved quite a bit, leaving web designers and developers much to ask for. HTML5 responds to those request and helps pave the way for a new frontier in front-end development. HTML5 introduces new elements, a more semantic structure, improved form functionality, better media control and more for the growing web.
The Web Design Process: A Strategy for SuccessShay Howe
Before diving into your next website take a step back and examine your design process. Evaluate how you approach building a website to see if it the most effective way possible.
All too often content is overlooked when designing and building a website. The problem is that users rarely come for the design or experience — they come for the content! Shay Howe will talk about developing the right strategy for web writing, the qualities of great web content, and how to bring that content to life with design.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
7 Alternatives to Bullet Points in PowerPointAlvis Oh
So you tried all the ways to beautify your bullet points on your pitch deck but it just got way uglier. These points are supposed to be memorable and leave a lasting impression on your audience. With these tips, you'll no longer have to spend so much time thinking how you should present your pointers.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
5. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Common Problems
• Websites have difficulty scaling
• Code bases become brittle
• Files and code bases begin to swell
6. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
What’s Wrong
• Best practices aren’t exactly best practices
• Standards need to evolve
7. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors
8. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
Avoiding classes
article#main
aside
ul
li
{...}
section:last-‐child
div:nth-‐child(7)
a
{...}
Leveraging selectors
a.btn
{...}
#main
a.btn
{...}
#main
div.feature
a.btn
{...}
9. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
Bad
#contact
li:nth-‐child(1)
input,
#contact
li:nth-‐child(2)
input
{
width:
50%;
}
#contact
li:nth-‐child(3)
textarea
{
width:
75%;
}
10. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
Good
.col-‐1
{
width:
50%;
}
.col-‐2
{
width:
75%;
}
20. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Specificity?
• Determines which styles are applied
• Each selector has a specificity weight
• High specificity beats low specificity
• Low specificity is key
27. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Abstract Structure
• Separate presentation(or theme) from layout
• Create an object layer for layout
• Create a skin layer for theme
• Use a grid
30. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Transparentize Elements
• Stylize elements to be transparent
• Keep visual properties apart from layout
properties
33. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Create Adaptable Layouts
• Height and width should be flexible
• Height should extend with content
• Width should extend with a grid
68. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Constructor Functions
When a function is called with the new
keyword it’s a constructor function
Constructor Functions
• Create a new instance of the object
• Create their own context accessible by the
this keyword
69. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Constructor Functions
var
Person
=
function(){}
me
=
new
Person();
typeof
me;
=>
object
me;
=>
Person
{}
me.name;
=>
undefined
me.name
=
'Darby
Frey';
me;
=>
Person
{name:
'Darby
Frey'}
70. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Constructor Functions
this is the Context
var
Person
=
function(name,
location){}
me
=
new
Person('Darby
Frey',
'Chicago');
me;
=>
Person
{}
71. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Constructor Functions
this is the Context
var
Person
=
function(name,
location){
this.name
=
name;
this.location
=
location;
};
me
=
new
Person('Darby
Frey',
'Chicago');
me;
=>
Person
{name:
"Darby
Frey",
location:
"Chicago"};
me.name;
=>
'Darby
Frey'
73. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Prototype
• A Prototype is a blueprint of Attributes and
Functions given to an Instance of an Object
created by a Constructor Function
• Attributes and Functions defined in a
Prototype will be available to every Instance
of that Object
78. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Approach
• Stop thinking about pages
• Start thinking about components
• Take visual inventory
79. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Themes
• Decouple HTML and CSS
• Separate presentation from layout
• Separate content from container
• Extend elements with classes
• Abstract functionality with objects
• Leverage JavaScript templates