Things To Keep In Mind When Working In The World Of Responsive Design
•
0 likes•585 views
Things To Keep In Mind When Working In The World Of Responsive Design Haris Mahmood Overview The term ‘responsive design’ has evolved over the past years to mean more than just fitting a site onto your phone’s screen. Responsiveness now caters to a wide range of needs and concerns, which isn’t always clear or easy to navigate. In this talk, we’ll explore multiple responsive concepts and techniques, their pitfalls and limitations, and explore a range of solutions, tips and tricks to help in the ways of responsive design. Objective To explore various concepts and techniques, pitfalls and limitations, and a range of solutions, tips and tricks revolving around the world of responsive design. Target Audience Web designers, UX designers, front-end developers Five Things Audience Members Will Learn The evolution of responsive design What responsive design means today A wide range of techniques used to achieve responsive design The limitations and pitfalls of responsive design Where the future of responsive design is headed
Report
Share
Report
Share
Download to read offline
Recommended
Designing True Cross-Platform Apps
Alexander Blom
Isle of Code
Overview
Some people consider responsive design to be cross-platform, and responsive design to be resizing for containers. However, this misses the distinction of fluid design & often leads to slow and bad programmatic implementations. This talk will cover the distinction and provide pointers on how to implement responsive apps that are also performant.
Attendees should understand a differing view on how to build cross-platform apps, and the difference between fluid & responsive design.
Target Audience
Programmers, designers & cssers who think a single page with lots of media queries is a good idea.
Five Things Audience Members Will Learn
What is fluid design?
The difference between responsive & fluid design
Why are responsive designs often slow?
How to implement responsive designs that are performant
Bonus points to be revealed in talk!
Tech talk on Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows for rapidly building custom designs using utility classes rather than pre-designed components. It provides low-level utility classes that can be used to style self-created components and build completely custom designs directly in HTML without needing to leave the file. The document then outlines how to install Tailwind CSS, its workflow, examples of how to build common components like alerts and buttons, and advantages like being responsive, customizable and friendly for building components.
How to develop a CSS Framework
The document discusses steps for developing a CSS framework, including defining layout rules, framework files, resets, grids and units, forms, tables, and generic classes. The framework is designed to be easily reusable, have a short source code, increase productivity, and decrease bugs. Key steps involve defining the layout, grids and units, resets, typography, forms and tables, and generic classes through separate CSS files.
Roll Your Own CSS Framework
This document discusses rolling your own CSS framework by starting from scratch rather than using an existing framework. It recommends using CSS preprocessors like SASS or LESS to write CSS code. It also provides many links to additional CSS resources on topics like responsive design, grids, typography, and existing frameworks. The document is presented by Mike Aparicio and encourages the reader to contact him with any other questions.
Tackling Umbraco: Case Study on NFL Ops Site Design
This document provides an overview of the design process for a new website created for the NFL Football Operations division. Key points include:
- The site was designed to differentiate itself from NFL.com and honor the history of football while showcasing innovation.
- An extensive design process included style tiles, mood boards, typography and photography tests to establish visual identity.
- The navigation drew inspiration from other NFL properties but was tested in various formats to create a flexible design optimized for different devices.
- Templates and content blocks were created to structure information in a logical and manageable way for both users and future editors.
- The Archetype package was leveraged to create reusable content modules that
An Introduction to Umbraco
Moving from classic web development to a CMS like Umbraco:
- A CMS allows editing of content directly in the browser rather than uploading files, and stores content in a database rather than HTML files.
- With a CMS, the URL contains a key to the associated database record rather than directly linking to files.
- For development, you interact with the CMS interface rather than directly editing files, abstracting the underlying technical details.
Going Multi-Tenant with dotCMS
ehc takes us on a tour of how they are leveraging dotCMS v1.9's advanced multi-tenant capabilities to manage 700 web sites that include; hospitals, outpatient facilities, physician practices and other medical service organizations.
Web design
This document provides guidance on redesigning a webpage, beginning with organizing files locally before uploading to a server. It discusses using HTML code and CSS to structure pages and separate presentation from content. The document recommends planning the design with a mock-up and site map, developing a style guide, and considering what content to include. It offers tips like using optimized image types, careful file naming, and closing all statements in code. Resources for inspiration, tutorials, and free website building tools are also provided.
Recommended
Designing True Cross-Platform Apps
Alexander Blom
Isle of Code
Overview
Some people consider responsive design to be cross-platform, and responsive design to be resizing for containers. However, this misses the distinction of fluid design & often leads to slow and bad programmatic implementations. This talk will cover the distinction and provide pointers on how to implement responsive apps that are also performant.
Attendees should understand a differing view on how to build cross-platform apps, and the difference between fluid & responsive design.
Target Audience
Programmers, designers & cssers who think a single page with lots of media queries is a good idea.
Five Things Audience Members Will Learn
What is fluid design?
The difference between responsive & fluid design
Why are responsive designs often slow?
How to implement responsive designs that are performant
Bonus points to be revealed in talk!
Tech talk on Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows for rapidly building custom designs using utility classes rather than pre-designed components. It provides low-level utility classes that can be used to style self-created components and build completely custom designs directly in HTML without needing to leave the file. The document then outlines how to install Tailwind CSS, its workflow, examples of how to build common components like alerts and buttons, and advantages like being responsive, customizable and friendly for building components.
How to develop a CSS Framework
The document discusses steps for developing a CSS framework, including defining layout rules, framework files, resets, grids and units, forms, tables, and generic classes. The framework is designed to be easily reusable, have a short source code, increase productivity, and decrease bugs. Key steps involve defining the layout, grids and units, resets, typography, forms and tables, and generic classes through separate CSS files.
Roll Your Own CSS Framework
This document discusses rolling your own CSS framework by starting from scratch rather than using an existing framework. It recommends using CSS preprocessors like SASS or LESS to write CSS code. It also provides many links to additional CSS resources on topics like responsive design, grids, typography, and existing frameworks. The document is presented by Mike Aparicio and encourages the reader to contact him with any other questions.
Tackling Umbraco: Case Study on NFL Ops Site Design
This document provides an overview of the design process for a new website created for the NFL Football Operations division. Key points include:
- The site was designed to differentiate itself from NFL.com and honor the history of football while showcasing innovation.
- An extensive design process included style tiles, mood boards, typography and photography tests to establish visual identity.
- The navigation drew inspiration from other NFL properties but was tested in various formats to create a flexible design optimized for different devices.
- Templates and content blocks were created to structure information in a logical and manageable way for both users and future editors.
- The Archetype package was leveraged to create reusable content modules that
An Introduction to Umbraco
Moving from classic web development to a CMS like Umbraco:
- A CMS allows editing of content directly in the browser rather than uploading files, and stores content in a database rather than HTML files.
- With a CMS, the URL contains a key to the associated database record rather than directly linking to files.
- For development, you interact with the CMS interface rather than directly editing files, abstracting the underlying technical details.
Going Multi-Tenant with dotCMS
ehc takes us on a tour of how they are leveraging dotCMS v1.9's advanced multi-tenant capabilities to manage 700 web sites that include; hospitals, outpatient facilities, physician practices and other medical service organizations.
Web design
This document provides guidance on redesigning a webpage, beginning with organizing files locally before uploading to a server. It discusses using HTML code and CSS to structure pages and separate presentation from content. The document recommends planning the design with a mock-up and site map, developing a style guide, and considering what content to include. It offers tips like using optimized image types, careful file naming, and closing all statements in code. Resources for inspiration, tutorials, and free website building tools are also provided.
Bootstrap 3
Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML and CSS templates for common elements like typography, forms, buttons, navigation, tables, images and more. Bootstrap also utilizes a responsive 12-column grid system and is compatible with all modern browsers. Websites built with Bootstrap are automatically responsive on devices ranging from small phones to large desktops.
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
“Custom CSS” is often touted as a feature for blogging and website services like WordPress, Tumblr, Blogger, and Squarespace. But a blank code editor can be a daunting thing for non-coders. Where do you even begin?
We’re going to tackle that problem in this session. We’ll explore the fundamentals of HTML & CSS, the building blocks of the web. You’ll learn how to use your browser to inspect page code, and how to write basic CSS to customize the look and feel of your blog or website.
Design Systems are Coming... Are you Ready?
Responsive Web Design has flipped the workflow of multi-discipline organizations on its head. Waterfall methodologies no longer work due to new points of collaboration needed between design and development. These intersection points leave many asking, "What does a wireframe look like?" or "What happened to comps?" This talk will look at how building pattern libraries can also help to build better teams.
HTML5 and CSS3: does now really mean now?
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
Web Development Intro
The document discusses the history and categories of web development. It begins with early technologies like HTML, CSS, and JavaScript. It then discusses how PHP and ASP allowed programming concepts and connecting to databases. Now there are many ways to have an online presence without knowing every technology, including blog platforms, content management systems, and web frameworks. Data visualization is highlighted as an important future area, with open source tools mentioned. Challenges of learning new skills and innovating are also noted.
Taking Your Website Mobile with TYPO3 (again)
Jeremy Greenawalt gave a presentation on taking websites mobile with TYPO3. He discussed that mobile design involves many small decisions that add up across a whole site. During discovery, questions should be asked about the target audience, maintenance needs, and budget. Design for mobile should start with responsive wireframes and mockups instead of static comps. Development focuses on images, adaptive layouts, and flexible content elements. The presentation covered options for images, templates, and content elements to create a seamless mobile experience.
Web Components
Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu
Web Components
with Jeff Tapper
OVERVIEW
Web Components provide a necessary element for large scale applications: the ability to build Web Apps as a set of encapsulated, maintainable and reusable components. In order to use Web Components, a series of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements need to be used, each of which have varying support in browsers today. However, with the help of the Polymer project – a set of polyfills and an application framework using these principles – Web Components can be used today.
In this session Jeff Tapper will explore Web Components, and walk through the creation of a Web Component for a modern JavaScript project.
OBJECTIVE
Learn to use Web Components to create reusable elements for your web application.
TARGET AUDIENCE
JavaScript Developers looking to understand how to build large scale applications.
ASSUMED AUDIENCE KNOWLEDGE
Audience should be comfortable working in JavaScript and manipulating the DOM.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What are Web Components
What is the current state of support for Web Components
When do I need to use the Polymer Project to implement Web Components
How to build a Web Component
How to use a Web Component
Getting started with flexbox
An introduction to the CSS Flexible Box Layout Module. Presented at the December 2016 meeting of the DublinCSS group - https://www.meetup.com/DublinCSS/events/233315123/
Drupal Theming with CSS Frameworks (960grid)
The document discusses CSS frameworks and grid-based design. It introduces CSS frameworks as sets of tools and best practices that abstract routine tasks into reusable modules. Grid-based design uses a grid system to organize content spatially on a page in a clear, meaningful way for users. The document examines specific CSS frameworks, Blueprint and 960gs, and discusses advantages and disadvantages of working with grids, including how grids can facilitate creativity but also impose restrictions. It also explores using the 960gs framework with the Drupal CMS.
Introduction to Bootstrap
This document provides an introduction to Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web applications. It discusses the basics of web development using HTML, CSS, and JavaScript. It then explains what Bootstrap is, how to add it to a website, and how to use its grid system, forms, buttons, and other common elements. Resources for using, customizing and finding additional components for Bootstrap are also provided.
Wheel.js
Does the world need another front-end JavaScript framework. Apparently it does. This is a presentation on the need for a mobile and desktop web framework, and one possible rebuilding of the wheel.
Presentation of bootstrap
This document provides an overview and introduction to responsive design using Bootstrap. It defines responsive design as designs that work on any resolution and are user friendly. It explains Bootstrap's grid system and standard device resolutions for extra small, small, medium, and large devices. Key Bootstrap components are summarized like the grid system, Glyphicons, and JavaScript plugins. The basic differences between HTML, CSS, and Bootstrap are outlined. Finally, the main purposes of using Bootstrap are listed as decreasing costs and code while providing an excellent and understandable user experience.
Responsive Design in Drupal with Zen and Zen Grids
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
Bootstrap for Beginners
This document provides an overview and introduction to Bootstrap for beginners. It discusses what Bootstrap is, the benefits of using it, and its basic grid system including containers, rows, and columns. It also covers responsive design, integrating Bootstrap with SharePoint, common issues and bugs, and includes examples of live Bootstrap implementations. The presenter is D'arce Hess, a SharePoint interface developer, and the content is from a SharePoint Saturday event in October 2014.
Levent-Gurses' Introduction to Web Components & Polymer
This is in a developer-focused session on developing iOS apps with Web Components and Google Polymer.
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
Bootstrap 3 + responsive
The document discusses the differences between Bootstrap 3 and Bootstrap 2, including a smaller file size, refined components, more use of HTML5 tags instead of divs, font-based vector icons, and no support for older browsers. It also discusses responsive, mobile-first design which adapts layouts using fluid grids, flexible images, and CSS3 media queries. Responsive design focuses on mobile-first approaches and adding elements as viewports get larger rather than removing them.
Css to-scss
Rob Walker from Papertrail takes us through his recent journey from regular CSS to SCSS. If you’re thinking of making the switch yourself and just need a little push, this is the talk for you.
Responsive Design is NOT a Mobile Strategy
This document discusses responsive design and mobile strategies. It begins by introducing Jason Goldberg of Razorfish, Brooke Wolf of eBags, and Gary Penn of True Religion Brand Jeans. It then states that responsive design is not a full mobile strategy on its own. The document goes on to cover different approaches to mobile including responsive design, dynamic serving, separate mobile sites, and a hybrid approach. It also discusses problems with each approach and the need to blend client- and server-side solutions. Key topics are responsive design, adaptive design, separate mobile sites, and taking a step-wise approach to improving a mobile experience.
My app is secure... I think
With more and more sites falling victim to data theft, you've probably read the list of things (not) to do to write secure code. But what else should you do to make sure your code and the rest of your web stack is secure ? In this tutorial we'll go through the basic and more advanced techniques of securing your web and database servers, securing your backend PHP code and your frontend javascript code. We'll also look at how you can build code that detects and blocks intrusion attempts and a bunch of other tips and tricks to make sure your customer data stays secure.
Building interactivity with websockets
The time of static or dynamically generated sites is long gone. Non-stop interaction with users is the new normal. However, polling with Ajax requests is processor intensive and cumbersome. Websockets allow you to interact with users in real-time without increasing system load. We'll go through the basics and see all the different options, illustrated with live examples of how and when to use it.
The Little Shop of TDD Horrors
Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu
The Little Shop of TDD Horrors
with Giorgio Natili
OVERVIEW
When used properly, the TDD (Test Driven Development) cycle is one of the most effective ways to improve the efficiency of a team and overall code quality. However, most of the time, misuse of this powerful technique brings unsatisfactory results. During this talk we’ll explore how to identify “testing smells” and how to prevent bad tests that negatively impact the design and architecture of a Web app.
We’ll investigate some real world mobile app examples in JavaScript, Swift, and Java for Android that threaten to eat us alive!
OBJECTIVE
Learn to write effective tests for your apps.
TARGET AUDIENCE
Software and QA Engineers.
ASSUMED AUDIENCE KNOWLEDGE
Good understanding of software development and a basic knowledge of test driven development.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Write clean tests
Dealing with legacy code
The differences between unit tests and behaviour tests
How to debug a test
How to keep the test code base clean
Learning from Science Fiction with Greg Borenstein
This document discusses the relationship between science fiction and technology. It contains quotes about how science fiction can predict issues like traffic jams rather than specific technologies. It also discusses the concept of design fiction versus science fiction and includes examples of design fiction works. The document advocates that technology should inspire storytelling and imagination rather than just prediction, and notes that science fiction is ultimately about understanding the present.
More Related Content
What's hot
Bootstrap 3
Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML and CSS templates for common elements like typography, forms, buttons, navigation, tables, images and more. Bootstrap also utilizes a responsive 12-column grid system and is compatible with all modern browsers. Websites built with Bootstrap are automatically responsive on devices ranging from small phones to large desktops.
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
“Custom CSS” is often touted as a feature for blogging and website services like WordPress, Tumblr, Blogger, and Squarespace. But a blank code editor can be a daunting thing for non-coders. Where do you even begin?
We’re going to tackle that problem in this session. We’ll explore the fundamentals of HTML & CSS, the building blocks of the web. You’ll learn how to use your browser to inspect page code, and how to write basic CSS to customize the look and feel of your blog or website.
Design Systems are Coming... Are you Ready?
Responsive Web Design has flipped the workflow of multi-discipline organizations on its head. Waterfall methodologies no longer work due to new points of collaboration needed between design and development. These intersection points leave many asking, "What does a wireframe look like?" or "What happened to comps?" This talk will look at how building pattern libraries can also help to build better teams.
HTML5 and CSS3: does now really mean now?
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
Web Development Intro
The document discusses the history and categories of web development. It begins with early technologies like HTML, CSS, and JavaScript. It then discusses how PHP and ASP allowed programming concepts and connecting to databases. Now there are many ways to have an online presence without knowing every technology, including blog platforms, content management systems, and web frameworks. Data visualization is highlighted as an important future area, with open source tools mentioned. Challenges of learning new skills and innovating are also noted.
Taking Your Website Mobile with TYPO3 (again)
Jeremy Greenawalt gave a presentation on taking websites mobile with TYPO3. He discussed that mobile design involves many small decisions that add up across a whole site. During discovery, questions should be asked about the target audience, maintenance needs, and budget. Design for mobile should start with responsive wireframes and mockups instead of static comps. Development focuses on images, adaptive layouts, and flexible content elements. The presentation covered options for images, templates, and content elements to create a seamless mobile experience.
Web Components
Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu
Web Components
with Jeff Tapper
OVERVIEW
Web Components provide a necessary element for large scale applications: the ability to build Web Apps as a set of encapsulated, maintainable and reusable components. In order to use Web Components, a series of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements need to be used, each of which have varying support in browsers today. However, with the help of the Polymer project – a set of polyfills and an application framework using these principles – Web Components can be used today.
In this session Jeff Tapper will explore Web Components, and walk through the creation of a Web Component for a modern JavaScript project.
OBJECTIVE
Learn to use Web Components to create reusable elements for your web application.
TARGET AUDIENCE
JavaScript Developers looking to understand how to build large scale applications.
ASSUMED AUDIENCE KNOWLEDGE
Audience should be comfortable working in JavaScript and manipulating the DOM.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What are Web Components
What is the current state of support for Web Components
When do I need to use the Polymer Project to implement Web Components
How to build a Web Component
How to use a Web Component
Getting started with flexbox
An introduction to the CSS Flexible Box Layout Module. Presented at the December 2016 meeting of the DublinCSS group - https://www.meetup.com/DublinCSS/events/233315123/
Drupal Theming with CSS Frameworks (960grid)
The document discusses CSS frameworks and grid-based design. It introduces CSS frameworks as sets of tools and best practices that abstract routine tasks into reusable modules. Grid-based design uses a grid system to organize content spatially on a page in a clear, meaningful way for users. The document examines specific CSS frameworks, Blueprint and 960gs, and discusses advantages and disadvantages of working with grids, including how grids can facilitate creativity but also impose restrictions. It also explores using the 960gs framework with the Drupal CMS.
Introduction to Bootstrap
This document provides an introduction to Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web applications. It discusses the basics of web development using HTML, CSS, and JavaScript. It then explains what Bootstrap is, how to add it to a website, and how to use its grid system, forms, buttons, and other common elements. Resources for using, customizing and finding additional components for Bootstrap are also provided.
Wheel.js
Does the world need another front-end JavaScript framework. Apparently it does. This is a presentation on the need for a mobile and desktop web framework, and one possible rebuilding of the wheel.
Presentation of bootstrap
This document provides an overview and introduction to responsive design using Bootstrap. It defines responsive design as designs that work on any resolution and are user friendly. It explains Bootstrap's grid system and standard device resolutions for extra small, small, medium, and large devices. Key Bootstrap components are summarized like the grid system, Glyphicons, and JavaScript plugins. The basic differences between HTML, CSS, and Bootstrap are outlined. Finally, the main purposes of using Bootstrap are listed as decreasing costs and code while providing an excellent and understandable user experience.
Responsive Design in Drupal with Zen and Zen Grids
Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.
Bootstrap for Beginners
This document provides an overview and introduction to Bootstrap for beginners. It discusses what Bootstrap is, the benefits of using it, and its basic grid system including containers, rows, and columns. It also covers responsive design, integrating Bootstrap with SharePoint, common issues and bugs, and includes examples of live Bootstrap implementations. The presenter is D'arce Hess, a SharePoint interface developer, and the content is from a SharePoint Saturday event in October 2014.
Levent-Gurses' Introduction to Web Components & Polymer
This is in a developer-focused session on developing iOS apps with Web Components and Google Polymer.
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
Bootstrap 3 + responsive
The document discusses the differences between Bootstrap 3 and Bootstrap 2, including a smaller file size, refined components, more use of HTML5 tags instead of divs, font-based vector icons, and no support for older browsers. It also discusses responsive, mobile-first design which adapts layouts using fluid grids, flexible images, and CSS3 media queries. Responsive design focuses on mobile-first approaches and adding elements as viewports get larger rather than removing them.
Css to-scss
Rob Walker from Papertrail takes us through his recent journey from regular CSS to SCSS. If you’re thinking of making the switch yourself and just need a little push, this is the talk for you.
What's hot (17)
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Viewers also liked
Responsive Design is NOT a Mobile Strategy
This document discusses responsive design and mobile strategies. It begins by introducing Jason Goldberg of Razorfish, Brooke Wolf of eBags, and Gary Penn of True Religion Brand Jeans. It then states that responsive design is not a full mobile strategy on its own. The document goes on to cover different approaches to mobile including responsive design, dynamic serving, separate mobile sites, and a hybrid approach. It also discusses problems with each approach and the need to blend client- and server-side solutions. Key topics are responsive design, adaptive design, separate mobile sites, and taking a step-wise approach to improving a mobile experience.
My app is secure... I think
With more and more sites falling victim to data theft, you've probably read the list of things (not) to do to write secure code. But what else should you do to make sure your code and the rest of your web stack is secure ? In this tutorial we'll go through the basic and more advanced techniques of securing your web and database servers, securing your backend PHP code and your frontend javascript code. We'll also look at how you can build code that detects and blocks intrusion attempts and a bunch of other tips and tricks to make sure your customer data stays secure.
Building interactivity with websockets
The time of static or dynamically generated sites is long gone. Non-stop interaction with users is the new normal. However, polling with Ajax requests is processor intensive and cumbersome. Websockets allow you to interact with users in real-time without increasing system load. We'll go through the basics and see all the different options, illustrated with live examples of how and when to use it.
The Little Shop of TDD Horrors
Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu
The Little Shop of TDD Horrors
with Giorgio Natili
OVERVIEW
When used properly, the TDD (Test Driven Development) cycle is one of the most effective ways to improve the efficiency of a team and overall code quality. However, most of the time, misuse of this powerful technique brings unsatisfactory results. During this talk we’ll explore how to identify “testing smells” and how to prevent bad tests that negatively impact the design and architecture of a Web app.
We’ll investigate some real world mobile app examples in JavaScript, Swift, and Java for Android that threaten to eat us alive!
OBJECTIVE
Learn to write effective tests for your apps.
TARGET AUDIENCE
Software and QA Engineers.
ASSUMED AUDIENCE KNOWLEDGE
Good understanding of software development and a basic knowledge of test driven development.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Write clean tests
Dealing with legacy code
The differences between unit tests and behaviour tests
How to debug a test
How to keep the test code base clean
Learning from Science Fiction with Greg Borenstein
This document discusses the relationship between science fiction and technology. It contains quotes about how science fiction can predict issues like traffic jams rather than specific technologies. It also discusses the concept of design fiction versus science fiction and includes examples of design fiction works. The document advocates that technology should inspire storytelling and imagination rather than just prediction, and notes that science fiction is ultimately about understanding the present.
Ryan Christiani I Heard React Was Good
I Heard React Was Good
with Ryan Christiani
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concepts of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
OBJECTIVE
Break down the concepts behind React and make it easy for people to start building with it.
TARGET AUDIENCE
JavaScript developers or project mangers looking to get a better understanding of React.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate understanding of JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
Untangle The Mess In Your Team’s Process
Untangle The Mess In Your Team’s Process
with Daniel Schutzsmith
Presented at FITC Toronto 2015
More info at www.fitc.ca
OVERVIEW
Project management in a studio or agency seems to be a black art. Some do it well, others struggle. There are numerous methodologies and frameworks out there to manage your projects well, but what about just managing the entire process, from conception to execution?
The truth is, we can learn a lot about managing our projects better by looking at how the programming world is evolving. We’ll learn to stay DRY, not become WET and define how each of us can individually lead our teams to better communication and morale.
We’ll take a look at some of the main ingredients behind a good creative and programming process, how to interact with clients and the team, look at some tools that will help (but not overwhelm us), and establish some really easy techniques that will make the whole thing run much smoother.
OBJECTIVE
Open the audiences eyes to following their own process that works best for their team.
TARGET AUDIENCE
Ideally a great session for freelancers, smallish studios, or teams at an agency. Designers, programmers, project managers, producers, etc…
ASSUMED AUDIENCE KNOWLEDGE
Have worked in a client – vendor relationship before. Familiar with the general creative process.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Some of the main ingredients behind a good creative and programming process.
How to interact with clients and the team.
Look at some tools that will help (but not overwhelm us)
Establish some really easy techniques that will make the whole thing run much smoother.
Give the audience member a good direction to go in to simplify their own process.
How We Used To, How We Will
How We Used To, How We Will
with Eric Socolofsky
Presented live at FITC Toronto 2015
More info at www.fitc.ca/toronto
OVERVIEW
The photo-sharing website Flickr has a ten-year history of trying out new things. From its origin as a feature spun off of a massively-multiplayer game, through the dark days of neglect, to its current reincarnation, many different people have advanced new ideas via many different paths.
Which roads are the smoothest and which are full of potholes? Which lead to the most interesting discoveries and which to the staid and expected? Are new ideas the sole province of product teams, or should engineers and designers participate in the process?
In his talk, Eric explores a brief history of Flickr’s long tenure on the Web, and provides a platform from which to examine these questions.
OBJECTIVE
Examine the sources of inspiration and innovation, and the paths from idea to execution.
TARGET AUDIENCE
People who make things, people who use web services, people with ideas for new products.
ASSUMED AUDIENCE KNOWLEDGE
Familiarity with web products and user experiences.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
How to make things with a team.
How to avoid, and avoid being consumed by, office politics.
How to be an engineer with design and product skills.
How to be a designer with engineering and product skills.
How to be a product person with design and engineering skills.
Building Apps with Ember
The document discusses data binding techniques in frontend frameworks. It explains that data binding involves instantiation, parent mutation, and child mutation. It provides examples of how different frameworks handle instantiation during app bootstrap and navigation. It also compares approaches for handling parent mutation from external sources like AJAX responses as well as internal mutations, and discusses the benefits and tradeoffs of various techniques like object observation, pub/sub, and virtual DOM approaches.
The Shifting Nature of FED Role
The document discusses the results of a study on the effects of exercise on memory and thinking abilities in older adults. The study found that regular exercise can help reduce the decline in thinking abilities that often occurs with age. Older adults who exercised regularly performed better on cognitive tests and brain scans showed they had greater activity in important areas for memory and learning compared to less active peers.
(Re)aligning The Way 400,000 People Think
Presented at FITC Toronto 2016
See details at www.fitc.ca
Overview
Companies are beginning to understand that great design incites an emotional connection. This doesn’t occur at the enterprise level, but in the hearts of each individual user. Changing a 100+ year old company to be design-led isn’t a walk in the park.
IBM Design Thinking was developed to unite IBM and deliver solutions that delight their users individually, and deliver increasing value for every additional IBM touchpoint they experience.
Hear how Adam has brought design thinking to the enterprise at a scale never attempted before. He’ll share how IBM Design Thinking works and how it has been changing the way that IBM works from the inside out and the outside in.
OBJECTIVE
Provide an overview of IBM Design Thinking and the value it brings to the enterprise.
TARGET AUDIENCE
Those interested in design, design thinking and how to be design-led.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
A behavioral model for continuous understanding.
A framework for teaming and action.
How to be comfortable with failure.
How to slow down to move faster.
How IBM is practicing design at scale.
Fitc whats new in es6 for web devs
Rami Sayar presented on ECMAScript 6 (ES6) features including block scoping with let and const, destructuring, modules and classes, and iterators and generators. ES6 aims to significantly update the JavaScript language and major engines are implementing features as the standard is targeted for ratification in mid-2015. Browser and Node.js support is increasing for many ES6 features through flags or transpilation with tools like Babel and Traceur.
! or ? with Chip Kidd
This document appears to be a book cover or magazine spread featuring summaries and images promoting various books. It includes summaries and images for books by Chip Kidd, David Rakoff, Oliver Sacks, James Ellroy, Gina Barnett, Robert Gates, Haruki Murakami, and Tsukuru Takami. The document also includes brief quotes or questions about clarity versus mystery and features Chip Kidd's website at the bottom.
Everydays
Everydays with beeple
Presented live at FITC Toronto 2015
More info at www.fitc.ca/toronto
OVERVIEW
A conversation about motivation and getting a bit better each day. Everyday projects are a great way to learn a new skill or tackle something bigger. They help you get better at starting projects and they help you get better at finishing them. Beeple helps you learn ways to avoid the pitfalls that end most people’s everydays and how to keep the momentum going.
OBJECTIVE
To teach viewers how to successfully start (and stick with) an everyday project.
TARGET AUDIENCE
Designers, Coders, Artist, and anyone who wants to learn something new / get better / finish a big project.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What type of projects make a good everyday.
How to start an everyday (how to structure things that will make it more objective).
How to stick with an everyday (how to avoid pitfalls and things that kill your momentum).
Why it helps to make everydays public.
Additional benefits of an everyday project.
beeple is presented by the Collective Podcast
Defying Definition: The Path to Eschewing Traditional Design Genres with Davi...
Overview
David will show how one small design gesture in an animation can plant the seed for a much larger-scale physical experience. Through the personal and collective journeys he has taken, he’ll prove that design at its core easily transcends mediums and disciplines.
Looking back to some foundational design projects at HUSH, David will explore how outside and personal influences, when paired with an ability to remain curious, creates evolution and growth for both designers and design itself.
Objective
To paraphrase Ray Bradbury: to encourage designers to “jump off the cliff, and build their wings on the way down”.
Target Audience
Anyone who wants to embrace the concept of true design not being limited to or by individual disciplines.
Five Things Audience Members Will Learn
It’s OK to not be an expert
It’s possible (and exciting!) to continuously reinvent yourself and your work
How to free yourself from the constraints of traditional career tracks
How to embrace and harness your own excitement for many different disciplines, through inspiring examples of others from non-design fields
How fearlessness in the face of “not knowing things” will allow you to create new and unique work, no matter the endeavour
Getting to Know Grunt By Writing Your Own Plugin
The document discusses how to create your own Grunt plugin by scaffolding it, developing it with testing in mind, and publishing it on npm. It recommends using tools like grunt-init and Yeoman to scaffold the plugin, developing the plugin code alongside unit and integration tests, and publishing it on npm after addressing dependencies. The overall goal is to learn how to create well-tested and publishable plugins by going through the full process.
Building Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for Wikipedia
with Rob Kenedi
Presented at FITC Toronto 2015
More info at www.fitc.ca
OVERVIEW
Wikipedia is one of the most frequently visited websites in the world. The vast online encyclopedia, editable by anyone, has become the go-to source for general information on any subject. Building user-friendly apps that people can actually use on top of Wikipedia’s massive dataset involves overcoming a number of challenges, but it can also be a lot of fun. Join Rob Kenedi, Entrepreneur In Residence at The Working Group (TWG) as he shares lessons learned in TWG’s Lab building WikiWash, a free tool for journalists that helps them uncover spin and bias in Wikipedia.
OBJECTIVE
Learn how to build useful products using Wikipedia’s dataset.
TARGET AUDIENCE
Software developers, data journalists, product managers
ASSUMED AUDIENCE KNOWLEDGE
What Wikipedia is, and how web applications work
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
How we built an open-source tool for journalists using Wikipedia
How to manage the massive amounts of data in Wikipedia
How to turn a non-technical pitch presentation into a working product that the client loves
How TWG labs treats its projects, products and prototypes and what happens to them once they launch
How WikiWash can be used to expose bias and spin on Wikipedia
Programming Play
Presented at FITC Toronto 2016
See details at www.fitc.ca
Overview
The dreaded moment: you feel stagnant, creatively uninspired, maybe even, dare I say it… burnt out? Whether it’s a result of long hours or boredom through familiarity, being blocked can be disheartening —something we all experience in varying degrees. How can you bounce back from a creative block as a developer? How can you re-discover your own motivation and desire to make work that interests you?
This session will propose ideas and strategies to ban your inner critic and to embrace your inner 5 year old to stomp through creative blocks. We will look at the output of some of these ideas a from slightly burnt out developer – from programming experiments to mentoring initiatives.
Objective
Inspire attendees to find ways to keep their technical skills fresh by employing fun in their every day practice.
Target Audience
Developers and Designers looking for ways to re-discover motivation, and find ways to express what they want to say.
Five Things Audience Members Will Learn
How to identify the feeling of being burnt out
How to create a schedule that encourages play
How to get buy in from your employer
How to get work doing things you like
How to face the mundane stuff you need to do on a day to day
Emergent Narrative: What We Can Learn From Dungeons & Dragons
Presented at FITC Toronto 2016
See details at www.fitc.ca
Interactive narrative hasn’t changed much in forty years – it’s still ruled by limited options and predestined outcomes. While digital RPG gameplay has become more sophisticated, the stories remain rather basic (albeit better disguised). Remarkably, we still haven’t matched the tabletop role-playing experience.
We need to approach interactive story from a different angle, one that’s natively digital and that takes full advantage of the new content platform paradigm. It won’t be easy, it’ll take a lot of time… but WE’RE WIZARDS, right?!
Objective
To explore the potential of a truly emergent narrative, and explain how playing tabletop role-playing games can get us there.
Target Audience
Storytellers, creators, writers, game developers, and gamers.
Five Things Audience Members Will Learn
An abbreviated history of interactive storytelling
Different approaches to interactive narrative; their pros and cons
Sneaky tricks good Game Masters use to get players invested in a game
How to convert player agency into dramatic agency (also great for GMs)
That they want to play a tabletop RPG (if they haven’t already).
Unleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJS
with Mickey MacDonald
Presented on September 17 2014 at
FITC's Web Unleashed Toronto 2014
WebGL is a powerful JavaScript API used for rendering interactive 3D graphics within any compatible web browser, without the use of plug-ins. In this talk, Mickey will look at how HTML, JavaScript, and WebGL are related. He will even walk through setting up a WebGL application and creating a 3D scene. So come out and see how amazing this graphics library really is.
OBJECTIVE
To show the power and ease that WebJS offers
TARGET AUDIENCE
Web based game developers
ASSUMED AUDIENCE KNOWLEDGE
Basic understanding of 3D game development
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
How HTML, JavaScript and WebGL are related
Setting up a WebGL application
How to create a 3D scene
Importing shaders
Advance settings available in WebGL
Viewers also liked (20)
Learning from Science Fiction with Greg Borenstein
Learning from Science Fiction with Greg Borenstein
Defying Definition: The Path to Eschewing Traditional Design Genres with Davi...
Defying Definition: The Path to Eschewing Traditional Design Genres with Davi...
Building Real Time, Open-Source Tools for Wikipedia
Building Real Time, Open-Source Tools for Wikipedia
Emergent Narrative: What We Can Learn From Dungeons & Dragons
Emergent Narrative: What We Can Learn From Dungeons & Dragons
Similar to Things To Keep In Mind When Working In The World Of Responsive Design
Responsive webdesign WordCampNL 2012
A presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.
Developing for Responsive Design - Frederic Welterlin
This document discusses responsive design and how it has evolved from Tim Berners-Lee's original vision of a universal linked information system. It defines responsive design as a web development approach where design and development respond to the user's behavior, environment, screen size, platform and orientation. The presenter discusses crafting responsive user experiences using flexible grids, flexible media, and media queries. He provides examples of when responsive design is and isn't warranted, using sites like Ford and United Airlines as examples. The presenter concludes by noting responsive design is still evolving and different solutions may be needed based on user needs and business tasks.
Houdini - What lies ahead
This talk aims at covering the CSS Houdini spec and its amalgamation with JavaScript.
CSS Houdini is a W3C effort to define lower-level CSS APIs for developers to understand, recreate, and extend high level CSS authoring features.
This talk will focus on current ideas (being discussed by the CSS Houdini working group), finalised specifications, future plans for development of CSS Houdini and how it will change the way we use JavaScript APIs to create rich user experiences.
Mobile Monday Presentation: Responsive Web Design
Real world aspects of implementing flexible, mobile and future-friendly sites through responsive design.
Rwd slidedeck
presportal.ru is the biggest Russian knowledge bank about presentations. We publish best presentations.
Responsive Web Design tips and tricks.
This document summarizes Vitaly Friedman's talk on responsive design techniques and tricks. The talk covered resolution independence using SVG/icon fonts, content choreography with Flexbox, compressive images that maintain quality at different sizes, conditional loading of assets based on breakpoints, and lazy loading of JavaScript and social buttons. It also discussed maintaining aspect ratios for images and videos across screens, and serving different video files for different devices. The overall message was that responsive design requires a new mindset and pragmatic solutions rather than rigid rules.
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
In this session, I will present a CSS-based approach for providing responsive content. This method can be used with HTML5’s responsive output option to adapt topic content for desktops, tablets, and phones. We will discuss how to use this approach to show/hide, redesign, and reword/replace content based on the device. I will share working examples that attendees can apply to their own projects, and we will explore options for extending this method for complex situations.
Bridging the gap between designers and developers at theguardian.com
There is often a vocabulary gap between designers an developers, who should aim towards a ubiquitous way of conversing about colours, typography, viewport sizes, or the responsive grid system of a digital product… To bridge this gap at the Guardian, we use a CSS pre-processor as a communication enabler through the abstractions it allows us to put in place.
Talk given at the Front-end London meet-up on April 24, 2014. Listen to the talk + slides on YouTube: https://www.youtube.com/watch?v=DAfW1RSWYDA
Slow kinda sucks
This document provides an overview of Object Oriented CSS (OOCSS), HTML5, and web performance. It discusses what OOCSS is, how to implement it, and why it is useful. It also briefly covers some HTML5 forms and communication features. Finally, it examines how to improve website speed. The goal is to look at these topics and discuss elegant and lean CSS as opposed to "fat sack of crap" code.
CSS Architecture - JSIL.pdf
Elad Shechter presents a methodology for CSS storytelling architecture. The methodology involves organizing CSS into folders and partial files that follow specific conventions. Configuration files define base styles and variables. Local files override base styles. Elements, components, sequences, entities and pages are defined in partial files for reusability and organization. Mixins and utilities are also defined. The methodology aims to make CSS more maintainable, scalable and organized through logical grouping and naming.
CSS: A Slippery Slope to the Backend
Save 10% off any FITC upcoming event with discount code 'slideshare'. Details at www.fitc.ca
OVERVIEW
Think CSS isn’t important? Or just for girls? Or an afterthought like accessibility or security? Spoiler alert: you’re wrong (about all of those)! CSS has become the gateway drug for most novices and designers-turned-programmer; with preprocessors like LESS and SASS making it easier and easier for web developers to get further down the rabbit hole. In this talk, Kacey will cover a brief history of CSS and where it stands today, the difference between and how to use preprocessors, and where we can likely expect CSS to go in the future. If you’ve ever wondered why UX developers love LESS/SASS, why preprocessors are essential in todays tech stack, then this talk is for you!
OBJECTIVE
Attempt to explain/dismystify CSS as it stands today
TARGET AUDIENCE
Anyone working in, or interested in, web development
ASSUMED AUDIENCE KNOWLEDGE
Little to no web development knowledge needed
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why is CSS important
What preprocessors do
Some basic Sass mixins
How preprocessors make your life easier
How CSS is becoming more like JS
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
This document discusses approaches to web development for mobile devices. It begins by noting the increasing importance of the mobile web. It then examines three approaches: 1) Doing nothing and hoping modern mobile browsers can handle desktop sites, 2) Creating a separate mobile site, and 3) Having a single adaptive site that refactors content for different screens using fluid layouts, progressive enhancement and media queries. The document dives into techniques for adaptive design like viewport meta tags, touch events, and responsive images. It also notes remaining challenges like viewport interpretation and high-DPI screens lying about resolution.
Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE
Web components are a tale of four w3c specifications. They are a hot topic now. We’ve all seen big headlines, for instance, “The Web Components revolution”, “Web Components are a game changer”, “A Tectonic Shift for Web Development”, … and so many others. They are certainly exciting and promising, nevertheless, there are some factors holding them back such as performance issues and lack of browser support. Some features seems to be more hassle than they’re worth. In this talk you’ll examine web components from a pragmatic stand point. So if you want to start using web components in production, come to learn what features can you use today. Actually, despite the still short browser support, some of web components features seems to be the best choice to start with . The assessment you’ll learn is the reflection of my personal research and work on my spare time and also feedbacks from my co-workers.
Responsive Web Design in iMIS (NiUG Austin 2015)
This document discusses responsive web design (RWD) and its implementation in the iMIS platform. It begins with an overview of RWD and how users access the internet on mobile devices. It then provides recommendations for achieving RWD, including flexible layouts, images/video, and CSS media queries. It also discusses mobile-first design and testing RWD across browsers and devices. Tools for RWD like Chrome DevTools and responsive frameworks like Bootstrap are also mentioned. Resources for learning more about RWD best practices in iMIS and examples of responsive sites built in iMIS are provided.
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
My presentation from WordCamp Miami 2011, Beyond "Responsive Web Design". This is a totally re-worked version of my previous presentation, with a focus on how to actually implement responsive design.
HTML5 the new applications
HTML 5 is the new standard for building web applications that provides semantic structure and support for multimedia. It introduces useful new elements like <header>, <nav>, <article>, and <section> to replace non-semantic <div> tags. New features like <video>, <audio>, and the <canvas> element allow embedding multimedia content. While still evolving, many CSS 3 features can be used now like rounded corners, drop shadows, and new input types to create eye-catching designs. HTML 5 is not fully supported by all browsers yet, but continues advancing to become the standard for building modern web applications and sites.
HTML5 The new web applications - Gustavo Delgado R.
HTML 5 is the new standard for building web applications that provides semantic structure and support for multimedia. It introduces useful new elements like <header>, <nav>, <article>, and <section> to replace non-semantic <div> tags. New features like <video>, <audio>, and the <canvas> element allow embedding multimedia content. While still evolving, many CSS 3 features can be used now like rounded corners, drop shadows, and new input types to create eye-catching designs. HTML 5 is not fully supported by all browsers yet, but continues advancing to become the primary language for building modern interactive websites.
Create Responsive Website Design with Bootstrap 3
This document provides an overview of how to create responsive website designs using Bootstrap 3. It discusses how Bootstrap is a popular framework for responsive, mobile-first projects. It then covers the basics of getting started with Bootstrap, including downloading Bootstrap, including the necessary files, and using Bootstrap's grid system and other components to create responsive designs.
Accelerated Stylesheets
This document discusses accelerated CSS techniques using tools like CSS frameworks, JavaScript, and CSS preprocessors. It introduces concepts like nested rules, variables, mixins, extends, imports, and powerful functions in CSS preprocessors that allow generating complex CSS from simpler code. CSS frameworks like Blueprint and modules for CSS3 properties are demonstrated. Image sprites are also mentioned briefly.
Volunteer.rb
The document summarizes several front-end development tools including Bootstrap, Less.css, Ember.js, Yeoman, OpenStreetMap, and ElasticSearch. Bootstrap is an open-source framework created at Twitter that provides pre-defined grid systems and components. Less.css extends CSS with features like variables and mixins. Ember.js is a JavaScript framework based on MVC that provides two-way data binding and automatically updating templates. Yeoman scaffolds workflows and best practices for creating modern web apps. OpenStreetMap is a collaborative project to create a free editable map of the world. ElasticSearch is a popular open source search and analytics engine.
Similar to Things To Keep In Mind When Working In The World Of Responsive Design (20)
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, Clic...
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE
Web Components: It’s all rainbows and unicorns! Is it? par Sara HARKOUSSE
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
HTML5 The new web applications - Gustavo Delgado R.
HTML5 The new web applications - Gustavo Delgado R.
More from FITC
Cut it up
1) The document discusses code splitting strategies for bundling JavaScript applications, including route-based code splitting, splitting on-demand components, and using the Split Chunks plugin.
2) It recommends optimizing lazy loading through techniques like prefetching and using IntersectionObserver to preload resources the user may visit.
3) The key code splitting strategies discussed are route-based splitting, splitting common dependencies, and splitting asynchronous or on-demand components.
Designing for Digital Health
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Andréa Crofts
League
Overview
Examining our responsibility as creators to design for disconnection.
The “restore connection” alert isn’t just for devices– it applies to people too. And it’s more important now than ever before.
Digital creators, we need to talk. The rise in mental health as a result of situational stress is a prevailing theme in today’s society, and some of the products we’re building are the root cause. But we have the power to change this. As creators of digital products, how might we enable our users to be more present in their lives? How might we invest in features like Instagram’s activity timer, despite the fact that they’re fundamentally counterintuitive to the usage metrics most behemoth tech companies are driving towards?
We have a responsibility as creators of digital products to enable others to disconnect …and re-connect with themselves, physically and mentally. This intersection is an emerging category Andrea likes to call digital health, and it’s something we can create together.
Objective
To share actionable strategies, principles and considerations for designing with digital health top of mind. Andrea will get into some #realtalk about how we can collectively create more balance and presence for the humans using our products.
Target Audience
Designers and digital creators of all kinds – especially those building digital products at scale!
Level
Open to audience members of any skill level (this is a more high-level talk)
Five Things Audience Members Will Learn
Tips and best-in-class examples of designing for digital health
Design guidelines and principles for designing with digital health in mind
Evidence-based practices to ground your future design decisions
Strategies for re-framing the success metrics of digital products
Design ethics resources
Profiling JavaScript Performance
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Luke DeWitt
REDspace
Overview
JavaScript’s popularity has exploded over the last decade, taking it from a laughable scripting language to one that powers much of the web today. Because it’s so flexible and so easy to learn, it’s extremely popular with new developers looking to cut their teeth in programming. However, these strengths are also weaknesses, as it’s incredibly easy to write bad JavaScript without even knowing it.
A lot of these newer developers jump from “Hello, World!”, to TodoMVC in order to find the library that makes their life easier. By doing this, they skip over some of the important details of not only how JavaScript works, but also how to optimize its performance to ensure the best user experience.
The Chrome profiler is a very handy tool that not a lot of developers have experience with. In this talk, we’ll take a beginner’s look at the profiler tool and examine how to use it to best improve your web application, and identify bottlenecks in your code without having to rely only on console.log statements.
Objective
To help developers understand how to better make use of the JavaScript profiler.
Target Audience
Any JavaScript developers
Assumed Audience Knowledge
Basic JavaScript
Level
Beginner / intermediate
Five Things Audience Members Will Learn
Javascript inner-workings
Profiling concepts
Identifying bottlenecks
Profiling node applications
Tooling
Surviving Your Tech Stack
presented at Web Unleashed 2019
For more info see https://fitc.ca/event/webu19/
Kevin Daly RBC Ventures
Every developer has faced the difficult choice of deciding what tech stack they should use for a new project. Should you use the latest tech or something that everyone knows? Which framework is the best for your team? To survive your tech stack, developers must make trade-offs with developing on new tech stacks and the ability to maintain and scale their applications.
In this presentation, you’ll learn how to evaluate your tech stack and understand the pros and cons of using bleeding edge technology. Using his past experiences, Kevin will also share his lessons learned and how his team tackles managing their tech stack today.
How to Pitch Your First AR Project
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Bushra Mahmood
Unity Technologies
Overview
In this talk, Bushra Mahmood will explain how to articulate and pitch augmented reality as a viable medium to help solve problems. Learn about what makes an AR application come together on both mobile devices and headsets. Uncover different tools and methodologies for problem-solving and making a compelling story.
By properly understanding this technology and its parts, creatives can take an active role in shaping and defining this new space in computing.
Objective
Learn the tools and techniques required to pitch an augmented reality project.
Target Audience
Designers, product managers, product stakeholders.
Assumed Audience Knowledge
An understanding of product design and an awareness of AR
Five Things Audience Members Will Learn
The right language to use when explaining ‘spatial’ design
The different requirements and considerations for scoping an AR project
The tools that are currently available for AR authoring
Insights into what the near and far future will hold for this medium.
An example of an AR application pitch
Start by Understanding the Problem, Not by Delivering the Answer
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Karri Ojanen
RBC Royal Bank of Canada
Overview
Over the past number of years companies have adopted the idea of customer-centricity. People across functions can fluently talk about the importance of paying special attention to end-user needs and overall customer experience.
But innovation and forward-thinking ideas that connect both customer and business needs can’t simply be squeezed out of brainstorm sessions and sticky notes if the organization doesn’t learn how to effectively look outside of its own silos. In this session, Karri will show how to move from jumping to solutions to driving innovation by understanding the question first.
Target Audience
Designers, researchers, strategists, product managers, and technology leads
Three Things Audience Members Will Learn
Methodologies and tools to form insights out of a holistic understanding of customer challenges
How to synthesize data to form a vision of the better future
How to break the vision into manageable chunks that drive value for the business and the customer at every launch
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Alan Williams
Imaginary Forces
Overview
During dailies as an intern at Imaginary Forces, Alan’s director, Karin Fong, would follow her animation feedback with one of the scariest and empowering questions of his career, “what do you think?” Over the last eight years, Alan’s transition from technician to creative director came from a dramatic shift in how he approached and answered that question. By examining larger conceptual principles to practical application in commercial and tv/film design, such as HBO’s Vinyl and Netflix’s Anne with an E, he will share hard-learned lessons that can empower you, whether in Photoshop, behind a camera, or pitching to clients, in developing and selling your creative voice.
Target Audience
Visual communicators eager to become more evocative storytellers
Five Things Audience Members Will Learn
‘Method branding’ in a selfie culture
O.C.D. (observe, collect, dissect) & the imagination
The resuscitating power of rearrangement
Pertinence vs pipeline: the crippling cage of routine
Less pitching, more poetry
Everyday Innovation
Everyday innovation is defined as a daily process of introducing new ideas, devices, or methods through small improvements. There are different types of innovation, including empowering, sustaining, efficiency, and disruptive innovation. Everyday innovation focuses on making incremental improvements through collaboration, identifying opportunities by listening for user needs, and building habits of innovation. Effective collaboration and feedback are important to driving everyday innovation, with feedback working best when it is specific, goal-oriented, organized, relevant and timely.
HyperLight Websites
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Chris Zacharias
imgix
Overview
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way to than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
Objective
Learn a process for building a hyper-lightweight version of your website for establishing reasonable performance budgets, grounded in reality, to work from.
Target Audience
Web developers
Assumed Audience Knowledge
HTML, CSS, Javascript, some server-side awareness.
Level
Intermediate
Five Things Audience Members Will Learn
How to analyze a web page for performance issues
A holistic approach to deconstructing an existing website
A clear process for building a hyper-lightweight version of your website
Translating your findings into real performance priorities
Establishing a realistic performance budget
Everything is Terrifying
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Michael Fullman
VT Pro Design
Overview
An exploration of the process of creation. We live in a time where technology and inspiration are more readily available and accessible than ever before. That being said we also live in a time that mostly highlights the successes of projects and process. In this particular talk Michael wants to touch on the process of creation with technology at VT Pro, to further explore a full circle approach to inspiration and creation where often times our next project is inspired by something learned in the process of creating something else.
By exploring what went wrong and what went right in a number of different projects he’s created, Michael will touch on points where inspiration can be found in this world of seemingly endless technology; the importance of collaboration; what can be learned from the moments that don’t necessarily go as planned; and how often projects come close to failure than the audience ever knows. Lastly he wants to touch on the process of finding personal inspiration to inspire an audience, and the momentum to push further that comes from their energy.
Objective
Things often don’t go as planned, but often that’s the fun part.
Target Audience
Creative technologists and experience designers
Five Things Audience Members Will Learn
Collaborative process
Giving personality to a piece of technology
How to learn from the unexpected
We all start somewhere (the journey is just as important as the destination)
Everything is possible now
Post-Earth Visions: Designing for Space and the Future Human
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Sands Fish
MIT Media Lab
Overview
Today, the environments that humans occupy in space are designed for survival. Humans are carefully shuttled to and from space, and during their relatively short stays, they are provided with minimum supplies to remain alive and able to perform experiments. As we begin to plan less for short visits and more for life in space (such as a six to eight month trip to Mars and beyond) the question becomes: What does human culture look like in space?
This talk will explore how human culture, design, and creativity might evolve as we begin to live in space, and the unique environmental conditions that might guide us in certain directions, just as the environment on Earth has. It will discuss space tourism, living in zero gravity, and some experiments in art and design that hint at future aesthetics.
Objective
Convey what opportunities exist at the outset of a more democratized New Space age, and call out the aesthetics, ethics, and cultural frontiers we find ourselves faced with at the end of the second decade of this century.
Target Audience
Those interested in the future of human life in space
Five Things Audience Members Will Learn
The history of human culture in space
Unique design constraints and considerations when designing for zero gravity
The experience of flying in a zero-g flight
The aesthetics at play in human spacefaring — (what has been)
New forms, new materials, new ideas — (what might be)
The Rise of the Creative Social Influencer (and How to Become One)
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Lindsay Munro
Adobe XD
Overview
Your social network could be more valuable than the work you’re doing today, because it could (and should) lead to the opportunities you get tomorrow. Your next post could result in your next recommendation, job, collaboration, exhibit, and next level experience.
In this session, you’ll learn how to hone and build your online social media presence to attract brands and engage in the modern-day endorsement deal. Get a behind-the-scenes perspective on the things brands look for in creative profiles and the rules of engagement.
Objective
Teach the ins and outs of what it means to be a creative social influencer.
Target Audience
Creatives looking to up level their social media presence and strike brand partnerships.
Things Audience Members Will Learn
How to set yourself up for “success” on social media
The importance of working with the right brands
Figuring out compensation and negotiating contracts
The ins and outs of disclosure and liability
How to not mess it up
East of the Rockies: Developing an AR Game
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Amelie Rosser
Jam3
Overview
For the past two years Jam3 worked alongside Joy Kogawa and the NFB to create East of the Rockies, an augmented reality storytelling experience.
East of the Rockies is the first interactive AR game of its kind. The story takes users through a piece of Canadian history where Japanese Canadians were forced to leave their homes and live at internment camps during WWII.
This talk will cover the creation of the game: from concept and storyboarding, to the development process in Unity and various challenges and questions to consider from a creator’s perspective.
Objective
To let the audience in on the behind the scenes of developing an AR experience like East of the Rockies.
Target Audience
For those interested in Augmented Reality storytelling and game development.
Five Things Audience Members Will Learn
AR techniques using Unity
Storytelling in AR
Prototyping interactions in AR
Game state management using Unidux
Game optimization techniques in Unity
Creating a Proactive Healthcare System
The Knowledge Society: Three Talks About the Future
Futurism Innovation Science
Isabella Grandic
The Knowledge Society
Overview
Join three incredible, young, and brilliant minds as they present their findings on topics that we’ll all have to deal with in the not so distant future. This series of talks will explore how exponential technologies like synthetic farming, nanotechnology, and quantum computing can be used to solve some of the world’s most difficult problems.
The speakers are all students of The Knowledge Society (TKS), a human accelerator for high school students designed to help them impact billions. TKS encourages students to take risks and think big.
Ayaan Esmail‘s talk will cover creating a proactive healthcare system
World Transformation: The Secret Agenda of Product Design
R.C. Woodmass
Crescendo
Overview
The reports are in: how we relate to technology directly affects how we relate to other humans, to our environments, and to ourselves. Are we headed for a technological dystopia, where robots are in charge and empathy is just a word for the history books? Not necessarily! Learn how the interfaces we interact with can teach us how to be better communicators, increase our understanding of each other, and how product design might be the key to building a positive future for all.
Objective
Directly address fear and skepticism about technology, inspiring all who design and build tech to think more empathetically when building UX and UI.
Target Audience
Product designers, HR specialists, and anyone skeptical about technology
Three Things Audience Members Will Learn
How to create user interfaces that are flexible enough to include everyone, even if they can’t keep up with all the different identities and new labels that people are using
What is conversation design, and how it has the power to teach people how to communicate
How AI has the potential to be more inclusive than previous data analysis systems, if we leverage its weaknesses to the human advantage
The Power of Now
This document discusses various topics related to video games and digital media including the power of now, video games from PlayStation and PC demos, games editors, live events featuring popular musicians, current uses of augmented reality, and real-time ray tracing technology. It features various images related to the topics.
High Performance PWAs
Hasan Ahmad
Aquent DEV6
Overview
PWAs are a newly emerging delivery format for web, desktop apps. The fact that they can be installed on a client device and behave like natively installed apps means that special care should be taken when designing and building these types of apps, above and beyond a typical browser-only web application. One of the most important (potential) differentiators in the user experience of a PWA app vs a traditional web app is the ability to provide a high-performance UI because of their ability to do things like cache resources offline, including entire pieces of Web UI code, and the use of background services. In this talk we are going to do an exhaustive overview of the entire landscape of building PWAs from a performance-first perspective.
Target Audience
Web development teams
Assumed Audience Knowledge
Web Development fundamentals
Objective
Large enterprise applications
Five Things Audience Members Will Learn
Why PWA’s require performance engineering
What tools are available to measure performance metrics
Offline caching strategies
Host device considerations: desktop and mobile
Taking advantage of background code: Service Workers
Rise of the JAMstack
The document discusses the rise of the JAMstack, which stands for JavaScript, APIs, and Markup. It describes how the JAMstack architecture uses static sites, content managed by headless CMSes, and APIs to provide performance and security benefits compared to traditional monolithic frameworks. Key advantages of the JAMstack include faster load times, higher security since there are fewer moving parts, and easier scalability using CDNs. The document outlines the various ingredients that make up the JAMstack like static site generators, hosting providers, and serverless functions, and provides examples of how popular sites have benefited from adopting this architecture.
From Closed to Open: A Journey of Self Discovery
Midge “Mantissa” Sinnaeve
Mantissa
Overview
Midge will be speaking about his experience of switching to open source applications for his freelance work. From ditching expensive software subscriptions to going down the linux rabbit hole, he’ll take you along for the ride and show you some cool stuff along the way.
It’s an in-depth look at what happens when your digital tools become an extension of yourself and how that can in turn inspire you to get better as an artist and find your style.
Objective
Taking a critical look at how you work and why.
Target Audience
(Motion) designers, 3D & VFX artists
Four Things Audience Members Will Learn
Open Source Design Tools
Self-criticism
Inspiration
Letting go
Projects Ain’t Nobody Got Time For
This document discusses several art projects including 42 SKULLS which offers limited edition prints, THE LIGHTS, and SOFT BOTS. It also mentions UWATELA's new materials and presentation as well as AMERDAHL.
More from FITC (20)
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
Recently uploaded
Bengaluru Dreamin' 24 - Personal Branding
Session on Personal Branding presented at Bengaluru Dreamin
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
学校原件一模一样【微信：741003700 】《(Vic毕业证书)惠灵顿维多利亚大学毕业证》【微信：741003700 】学位证，留信认证（真实可查，永久存档）原件一模一样纸张工艺/offer、雅思、外壳等材料/诚信可靠,可直接看成品样本，帮您解决无法毕业带来的各种难题！外壳，原版制作，诚信可靠，可直接看成品样本。行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备。十五年致力于帮助留学生解决难题，包您满意。
本公司拥有海外各大学样板无数，能完美还原。
1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。材料咨询办理、认证咨询办理请加学历顾问Q/微741003700
【主营项目】
一.毕业证【q微741003700】成绩单、使馆认证、教育部认证、雅思托福成绩单、学生卡等！
二.真实使馆公证(即留学回国人员证明,不成功不收费)
三.真实教育部学历学位认证（教育部存档！教育部留服网站永久可查）
四.办理各国各大学文凭(一对一专业服务,可全程监控跟踪进度)
如果您处于以下几种情况：
◇在校期间，因各种原因未能顺利毕业……拿不到官方毕业证【q/微741003700】
◇面对父母的压力，希望尽快拿到；
◇不清楚认证流程以及材料该如何准备；
◇回国时间很长，忘记办理；
◇回国马上就要找工作，办给用人单位看；
◇企事业单位必须要求办理的
◇需要报考公务员、购买免税车、落转户口
◇申请留学生创业基金
留信网认证的作用:
1:该专业认证可证明留学生真实身份
2:同时对留学生所学专业登记给予评定
3:国家专业人才认证中心颁发入库证书
4:这个认证书并且可以归档倒地方
5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息
6:个人职称评审加20分
7:个人信誉贷款加10分
8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Md. Zobair Khan,
Network Analyst and Technical Trainer at APNIC, presented 'Securing BGP: Operational Strategies and Best Practices for Network Defenders' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
原版一模一样【微信：741003700 】【(uc毕业证书)加拿大卡尔加里大学毕业证成绩单】【微信：741003700 】学位证，留信认证（真实可查，永久存档）原件一模一样纸张工艺/offer、雅思、外壳等材料/诚信可靠,可直接看成品样本，帮您解决无法毕业带来的各种难题！外壳，原版制作，诚信可靠，可直接看成品样本。行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备。十五年致力于帮助留学生解决难题，包您满意。
本公司拥有海外各大学样板无数，能完美还原。
1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。材料咨询办理、认证咨询办理请加学历顾问Q/微741003700
【主营项目】
一.毕业证【q微741003700】成绩单、使馆认证、教育部认证、雅思托福成绩单、学生卡等！
二.真实使馆公证(即留学回国人员证明,不成功不收费)
三.真实教育部学历学位认证（教育部存档！教育部留服网站永久可查）
四.办理各国各大学文凭(一对一专业服务,可全程监控跟踪进度)
如果您处于以下几种情况：
◇在校期间，因各种原因未能顺利毕业……拿不到官方毕业证【q/微741003700】
◇面对父母的压力，希望尽快拿到；
◇不清楚认证流程以及材料该如何准备；
◇回国时间很长，忘记办理；
◇回国马上就要找工作，办给用人单位看；
◇企事业单位必须要求办理的
◇需要报考公务员、购买免税车、落转户口
◇申请留学生创业基金
留信网认证的作用:
1:该专业认证可证明留学生真实身份
2:同时对留学生所学专业登记给予评定
3:国家专业人才认证中心颁发入库证书
4:这个认证书并且可以归档倒地方
5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息
6:个人职称评审加20分
7:个人信誉贷款加10分
8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才
办理(uc毕业证书)加拿大卡尔加里大学毕业证【微信：741003700 】外观非常简单，由纸质材料制成，上面印有校徽、校名、毕业生姓名、专业等信息。
办理(uc毕业证书)加拿大卡尔加里大学毕业证【微信：741003700 】格式相对统一，各专业都有相应的模板。通常包括以下部分：
校徽：象征着学校的荣誉和传承。
校名:学校英文全称
授予学位：本部分将注明获得的具体学位名称。
毕业生姓名：这是最重要的信息之一，标志着该证书是由特定人员获得的。
颁发日期：这是毕业正式生效的时间，也代表着毕业生学业的结束。
其他信息：根据不同的专业和学位，可能会有一些特定的信息或章节。
办理(uc毕业证书)加拿大卡尔加里大学毕业证【微信：741003700 】价值很高，需要妥善保管。一般来说，应放置在安全、干燥、防潮的地方，避免长时间暴露在阳光下。如需使用，最好使用复印件而不是原件，以免丢失。
综上所述，办理(uc毕业证书)加拿大卡尔加里大学毕业证【微信：741003700 】是证明身份和学历的高价值文件。外观简单庄重，格式统一，包括重要的个人信息和发布日期。对持有人来说，妥善保管是非常重要的。
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
原版定制【微信:bwp0011】《(umiami毕业证书)美国迈阿密大学毕业证文凭证书》【微信:bwp0011】成绩单 、雅思、外壳、留信学历认证永久存档查询，采用学校原版纸张、特殊工艺完全按照原版一比一制作（包括：隐形水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠，文字图案浮雕，激光镭射，紫外荧光，温感，复印防伪）行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备，十五年致力于帮助留学生解决难题，业务范围有加拿大、英国、澳洲、韩国、美国、新加坡，新西兰等学历材料，包您满意。
【业务选择办理准则】
一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理一份就读学校的毕业证【微信bwp0011】文凭即可
二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理一份毕业证【微信bwp0011】即可
三、进国企，银行，事业单位，考公务员等等，这些单位是必需要提供真实教育部认证的，办理教育部认证所需资料众多且烦琐，所有材料您都必须提供原件，我们凭借丰富的经验，快捷的绿色通道帮您快速整合材料，让您少走弯路。
留信网认证的作用:
1:该专业认证可证明留学生真实身份
2:同时对留学生所学专业登记给予评定
3:国家专业人才认证中心颁发入库证书
4:这个认证书并且可以归档倒地方
5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息
6:个人职称评审加20分
7:个人信誉贷款加10分
8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才
【关于价格问题（保证一手价格）】
我们所定的价格是非常合理的，而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格，因为我想坦诚对待大家 不想跟大家在价格方面浪费时间
对于老客户或者被老客户介绍过来的朋友，我们都会适当给一些优惠。
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Adli Wahid, Senior Internet Security Specialist at APNIC, delivered a presentation titled 'Honeypots Unveiled: Proactive Defense Tactics for Cyber Security' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
HijackLoader Evolution: Interactive Process Hollowing
CrowdStrike researchers have identified a HijackLoader (aka IDAT Loader) sample that employs sophisticated evasion techniques to enhance the complexity of the threat. HijackLoader, an increasingly popular tool among adversaries for deploying additional payloads and tooling, continues to evolve as its developers experiment and enhance its capabilities.
In their analysis of a recent HijackLoader sample, CrowdStrike researchers discovered new techniques designed to increase the defense evasion capabilities of the loader. The malware developer used a standard process hollowing technique coupled with an additional trigger that was activated by the parent process writing to a pipe. This new approach, called "Interactive Process Hollowing", has the potential to make defense evasion stealthier.
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
学校原件一模一样【微信：741003700 】《(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书》【微信：741003700 】学位证，留信认证（真实可查，永久存档）原件一模一样纸张工艺/offer、雅思、外壳等材料/诚信可靠,可直接看成品样本，帮您解决无法毕业带来的各种难题！外壳，原版制作，诚信可靠，可直接看成品样本。行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备。十五年致力于帮助留学生解决难题，包您满意。
本公司拥有海外各大学样板无数，能完美还原。
1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。材料咨询办理、认证咨询办理请加学历顾问Q/微741003700
【主营项目】
一.毕业证【q微741003700】成绩单、使馆认证、教育部认证、雅思托福成绩单、学生卡等！
二.真实使馆公证(即留学回国人员证明,不成功不收费)
三.真实教育部学历学位认证（教育部存档！教育部留服网站永久可查）
四.办理各国各大学文凭(一对一专业服务,可全程监控跟踪进度)
如果您处于以下几种情况：
◇在校期间，因各种原因未能顺利毕业……拿不到官方毕业证【q/微741003700】
◇面对父母的压力，希望尽快拿到；
◇不清楚认证流程以及材料该如何准备；
◇回国时间很长，忘记办理；
◇回国马上就要找工作，办给用人单位看；
◇企事业单位必须要求办理的
◇需要报考公务员、购买免税车、落转户口
◇申请留学生创业基金
留信网认证的作用:
1:该专业认证可证明留学生真实身份
2:同时对留学生所学专业登记给予评定
3:国家专业人才认证中心颁发入库证书
4:这个认证书并且可以归档倒地方
5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息
6:个人职称评审加20分
7:个人信誉贷款加10分
8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
原版办【微信号:95270640】【新西兰林肯大学毕业证(Lincoln毕业证书)】【微信号:95270640】《成绩单、外壳、雅思、offer、真实留信官方学历认证（永久存档/真实可查）》采用学校原版纸张、特殊工艺完全按照原版一比一制作（包括：隐形水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠，文字图案浮雕，激光镭射，紫外荧光，温感，复印防伪）行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备，十五年致力于帮助留学生解决难题，业务范围有加拿大、英国、澳洲、韩国、美国、新加坡，新西兰等学历材料，包您满意。
【我们承诺采用的是学校原版纸张（纸质、底色、纹路）我们拥有全套进口原装设备，特殊工艺都是采用不同机器制作，仿真度基本可以达到100%，所有工艺效果都可提前给客户展示，不满意可以根据客户要求进行调整，直到满意为止！】
【业务选择办理准则】
一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理一份就读学校的毕业证【微信号95270640】文凭即可
二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理一份毕业证【微信号95270640】即可
三、进国企，银行，事业单位，考公务员等等，这些单位是必需要提供真实教育部认证的，办理教育部认证所需资料众多且烦琐，所有材料您都必须提供原件，我们凭借丰富的经验，快捷的绿色通道帮您快速整合材料，让您少走弯路。
留信网认证的作用:
1:该专业认证可证明留学生真实身份
2:同时对留学生所学专业登记给予评定
3:国家专业人才认证中心颁发入库证书
4:这个认证书并且可以归档倒地方
5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息
6:个人职称评审加20分
7:个人信誉贷款加10分
8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才
留信网服务项目：
1、留学生专业人才库服务（留信分析）
2、国（境）学习人员提供就业推荐信服务
3、留学人员区块链存储服务
【关于价格问题（保证一手价格）】
我们所定的价格是非常合理的，而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格，因为我想坦诚对待大家 不想跟大家在价格方面浪费时间
对于老客户或者被老客户介绍过来的朋友，我们都会适当给一些优惠。
选择实体注册公司办理，更放心，更安全！我们的承诺：客户在留信官方认证查询网站查询到认证通过结果后付款，不成功不收费！
Recently uploaded (11)
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Things To Keep In Mind When Working In The World Of Responsive Design
- 1. this is a slide
- 2. we will see lots of them
- 3. things to keep in mind when working in the world of responsive design
- 4. firstly
- 5. booklets + website + etc
- 8. excited
- 9. the hype is real
- 10. slow down the hype train
- 11. $#!+
- 12. shopify
- 13. hackeryou
- 16. focuspocus.io
- 17. devtoast.io
- 18. repitsupply.com
- 19. repitsupply.com
- 22. emma watson
- 23. our story starts
- 24. 300 BC
- 25. table layouts
- 28. time went by
- 29. mobile browsers
- 30. website.com
- 31. m.website.com
- 32. ibm
- 33. 2010
- 34. ethan marcotte
- 37. fluid grids
- 38. flexible images
- 39. media queries
- 41. most importantly
- 42. “… a different way of thinking”
- 43. 6 years later
- 45. features + tools + tips + pointers
- 46. I
- 47. css layouts
- 48. floats
- 50. flexbox
- 52. no longer about individual elements
- 53. flow
- 54. container
- 55. flow of elements
- 56. flow of flex children
- 58. cohesive whole
- 59. sizing
- 60. “what width does x need to be?”
- 61. “what width/ratio does x need to be relative to its siblings?”
- 63. width: 66% width: 33%
- 64. flex-grow: 2 flex-grow: 1
- 65. how do these items flow together
- 71. yuck.
- 73. flexbox
- 80. II
- 82. px
- 84. percentage based
- 86. push further
- 87. %, em, rem, vh, vw
- 88. foundation 5
- 89. bootstrap 4
- 90. h1 { font-size: 70px; } p.large { font-size: 16px; }
- 91. h1 { font-size: 70px; } p.large { font-size: 16px; } @media query { h1 { font-size: 50px; } p.large { font-size: 13px; } }
- 92. html { font-size: 14px; } h1 { font-size: 3rem; } p.large { font-size: 1.2rem; }
- 93. html { font-size: 14px; } h1 { font-size: 3rem; } p.large { font-size: 1.2rem; } @media query { html { font-size: 10px; } }
- 95. rip px
- 96. III
- 97. media queries
- 98. <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="small.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 760px)" href="medium.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 960px)" href="big.css" />
- 99. @media screen and min-width(480px) { //css } @media screen and min-width(760px) { //css } @media screen and min-width(960px) { //css }
- 100. if you notice yourself doing this:
- 101. @media screen and min-width(480px) { //css } @media screen and min-width(490px) { //css } @media screen and min-width(530px) { //css }
- 103. avoid fixed measurements + absolute positioning + magic numbers
- 104. width: 43px;
- 105. width: 43px;
- 106. shitty magic
- 108. IV
- 109. rwd at scale
- 111. maintain + organize
- 112. large projects
- 113. large teams
- 114. two recommendations
- 115. preprocessed css
- 117. breakpoint mixin
- 118. @mixin breakpoint($point) { @if $point == desktop { @media (min-width: 70em) { @content ; } } @else if $point == tablet { @media (min-width: 50em) { @content ; } } @else if $point == mobile { @media (max-width: 37.5em) { @content ; } } }
- 119. .something { @include breakpoint(mobile) { padding: 10px; } }
- 121. ensures consistency
- 122. active discussion and proper maintenance
- 123. modular css
- 124. separate your css into ‘objects’ and ‘concerns’
- 125. // main.scss @import ‘base’; @import ‘typography’; @import ‘wrapper’; @import ‘buttons’; @import ‘tiles’;
- 126. // _base.scss body { margin: 0; } * { box-sizing: border-box; }
- 127. // _tiles.scss .tile { padding: 30px; @include breakpoint(mobile) { padding: 10px; } }
- 128. keeps all code related to a module together
- 129. helpers + utility classes
- 130. @import ‘helpers’;
- 131. // _helpers.scss .h-textCenter { text-align: center; } .h-textCenter-mobile { @include breakpoint(mobile) { text-align: center; } }
- 132. oocss + bem
- 133. harry roberts
- 134. shopify
- 135. better reusable and maintainable responsive code
- 136. really sexy code
- 137. oh. you bet.
- 138. V
- 140. iPad, iPhone, a couple others
- 141. no longer sufficient
- 143. Hundreds of device sizes + pixel density
- 144. iPhone VS iPhone
- 145. HD TV + IE/Edge + Kinect
- 146. apple watch
- 147. apple watch
- 148. never leave a feature unusable on supported platforms
- 149. hover states
- 150. media queries + device detection + feature detection
- 155. facebook app
- 162. do you even need one?
- 163. seriously.
- 164. hiding menu items reduce visibility and impact ux
- 170. don’t just make things fit
- 171. purpose + reason
- 172. rwd is more important than ever
- 173. mobile > desktop
- 176. no longer sufficient
- 177. harmful to business, conversions, etc
- 178. google ranking
- 179. algorithm updates that will have a “significant impact” on mobile search results worldwide for mobile searchers
- 181. google amp
- 183. html subset
- 188. mobile only
- 189. <html ⚡>
- 195. incredibly fast
- 196. looking ahead + things i’m excited about
- 197. more amp + instant articles
- 198. css grid layout
- 199. new css spec
- 201. early days
- 204. experimental flags
- 205. gridbyexample.com
- 206. web components
- 207. modular elements
- 208. ‘scoped’ css
- 209. html video element
- 210. polymer
- 212. element queries
- 213. css spec
- 214. js polyfill
- 215. VR
- 216. 360 experiences
- 217. minority report
- 219. my hope
- 221. just web design
- 222. “Responsive Web Design is an approach to creating websites that can respond to all known web browsing devices, with content delivery and UI interaction optimized to the greatest degree possible for all visitors.”
- 223. make emma proud