If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
The document discusses a scalable and modular architecture for CSS that involves categorizing styles into base, layout, module, and state categories. This approach helps make CSS more flexible, maintainable, and avoids overly specific selectors. Key aspects include naming conventions, limiting the depth of styles, and using child selectors. An example of a "media object" pattern is provided to demonstrate how abstracting styles into reusable modules can significantly reduce code. While this approach goes against some conventional wisdom, it separates structure and skin while promoting reusability.
This document discusses CSS best practices and tips. It covers topics such as CSS selectors, properties, units, responsive design, animations, and creating shapes with CSS. Code examples are provided to demonstrate CSS techniques like creating fluid layouts, using media queries, properly formatting CSS rules, and perfectly centering elements.
This document provides an overview of CSS (Cascading Style Sheets) including its history, basic syntax and structure, common properties that can be styled, and different methods for applying styles. Key points covered include using CSS to style fonts, colors, links, and page layout with properties like padding, margin, and floats. The document also demonstrates how to select elements with IDs, classes, and other selectors to style them.
The document provides an introduction to HTML, CSS, and JavaScript for creating online news packages. It discusses the main HTML tags and attributes used, including <h1>, <h2>, <p>, id, class, and style. It then covers CSS selectors like #id, .class, and style properties. Examples are provided for adjusting font sizes and colors. Div tags are also introduced, including how they are block elements that stretch full width by default.
CSS3 is the latest standard for cascading style sheets (CSS). CSS3 introduces several new modules that expand the capabilities of CSS, including selectors, box model, backgrounds/borders, image values, text effects, transformations, animations, multiple column layout, and user interface. The document provides examples of CSS3 properties and modules, demonstrating borders, selectors, text effects, menus, and creating multiple columns. It concludes by thanking some websites for information on CSS3.
This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.
How to dominate a free theme WCTO 2014James Strang
Not everyone can afford to have a custom designed theme for their WordPress website. Often we have to resort to the themes that are available for free or cheap. But how do we avoid having the website look the same as everyone else’s who used the same theme?
I will show you how to take the most common WordPress.org themes and turn them into the unique look you want. Google Chrome or Firefox recommended. No coding knowledge is required, but you will learn some basic CSS.
1. The document discusses different topics in CSS including the basics of CSS, background properties, fonts, text properties, the box model, lists, styling links, and positioning.
2. It provides examples and explanations of key CSS concepts like selectors, declarations, background images and colors, fonts, padding, borders, margins, and different positioning techniques.
3. The document is intended to teach the fundamentals of CSS through clear explanations, syntax examples, and diagrams of the box model.
This document discusses how to write maintainable CSS through organizing CSS files according to a design language's components (e.g. layout, color), authoring semantic and portable CSS code using classes and IDs, and documenting CSS code and conventions either through inline comments or generated documentation from comment tags. It emphasizes organizing CSS files by concern rather than by site section, separating IE conditional code into separate files, using a system for declaration order and formatting for readability, and having an effective text editor for working with CSS code.
This document provides an introduction and overview of Cascading Style Sheets (CSS). It defines CSS as used to format and style web pages, describes the advantages of using CSS including simplifying design changes and creating style sheets for different audiences. It then explains the basic syntax of CSS using examples and describes the three types of CSS styles: internal, inline, and external styles. Finally, it outlines different CSS selectors including element, id, and class selectors and provides an example of how to use CSS to style an HTML table.
The document discusses various topics in CSS3 including selectors, properties, media queries, and visual effects. It provides examples and explanations of CSS3 concepts like gradients, rounded corners, box shadow, text shadow, opacity, and more. Browser support and cross-browser compatibility of CSS3 features are also covered.
This document provides an introduction to CSS (Cascading Style Sheets) and covers key concepts such as selectors, the box model, positioning, and responsive design. It explains that CSS is used to style and lay out elements on web pages and works together with HTML. The document outlines important CSS topics like selectors, properties and values, units of measurement, the box model, display types, flow, floats, and positioning. It emphasizes best practices like using relative units and media queries for responsive designs.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
Responsive Web Design (April 18th, Los Angeles)Thinkful
The document summarizes a responsive web design training session. It introduces key HTML concepts like tags, elements, and attributes. It also introduces CSS concepts like selectors, properties, values, and declarations. It demonstrates how to make a website responsive with media queries and percentage widths. It shows how to build a grid system using floating columns within rows, with clear fixes. It encourages practicing responsive design and lists additional learning resources.
The document discusses the differences between inline and block elements in HTML. Block elements like <div> stack vertically and can have widths and heights set, while inline elements like <span> stack horizontally and flow like text. Examples are provided of how to use CSS to style both types of elements. The box model is also explained, with padding, borders, and margins adding to the total width and height of a block element.
This document discusses responsive design and CSS frameworks. It explains that responsive design allows pages to adapt to different screen sizes using liquid layouts, scaling images, viewport meta tags, and media queries. Media queries allow applying styles based on device capabilities. CSS frameworks provide pre-built CSS classes and tools to make working with CSS easier. Popular frameworks include Bootstrap and Blueprint, which offer grid systems for multi-column layouts. CSS preprocessors allow variables, inheritance, and other programming techniques to be used with CSS.
This document discusses best practices for building modern AngularJS 1.x applications, including thinking of the app as a tree of components, keeping business logic and data in services, avoiding $scope and $watch, managing state consistently, using TypeScript for types, considering Observables with RxJS 5, and using the newest AngularJS release in production with optimizations like concatenation, minification, and gzipping. The document encourages treating directives like components, using one-way bindings, avoiding $apply and other AngularJS patterns that negatively impact performance, and cleaning up event listeners and references.
Beyond Media Queries: Anatomy of an Adaptive Web DesignBrad Frost
Media queries may be responsive design’s secret sauce, but we know there’s a whole lot more that goes into crafting amazing adaptive experiences. By dissecting an example of a mobile-first responsive design, we can uncover the principles of adaptive design and highlight some considerations for creating contextually-aware web experiences. This goes over emerging mobile web best practices and responsive patterns that can assist in our journey toward a future-friendly web.
Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.
Presentation from Denver Open Source Users Group in February 2015. http://www.meetup.com/DOSUG1/events/219099019/
AngularJS is one of today's hottest JavaScript MVC Frameworks. In this session, we'll explore many concepts it brings to the world of client-side development: dependency injection, directives, filters, routing and two-way data binding. We'll also look at its recommended testing tools and build systems. Finally, you'll learn about my experience developing several real-world applications using AngularJS, HTML5 and Bootstrap.
Mobile Email Design, Strategies, Workflow and Best PracticesLitmus
In this presentation, Justine Jordan and Alex Williams tackle some of the toughest questions and offer real-life advice for getting multiscreen email right. Topics include:
*The implications of each major screen size and device
*Determining what devices your subscriber base is using and how and where they are converting
*The different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise
*Creating a consistent user experience across email and Web/landing pages
*Examples and key best practices
*Communicating with your designer and programmer
*Testing, learning, optimization and measurement/analysis
*Future trends and predictions
The document outlines best practices for building applications with AngularJS. It discusses the differences between single page apps built with AngularJS and traditional apps, recommending approaches like following AngularJS style guides. The document also summarizes upcoming features for AngularJS 2.0 like improved directives and server-side rendering. Resources are provided for tools like Grunt, Bower, and techniques like search engine optimization for single page apps.
This document provides an overview of AngularJS best practices, covering topics such as file organization, naming conventions, modules, controllers, services, directives, and scope. It discusses organizing code by feature and type, using namespacing prefixes, understanding modules and their organization, defining controller, service and directive roles, communicating between components, avoiding FOUC, and thinking declaratively. Specific practices are covered for minification, services creation, directives usage, scope interfaces, and controllers versus link functions.
This document discusses web design workflow and front-end development. It covers the layers of front-end development including HTML, CSS, JavaScript, grids, and frameworks. It also discusses designing static comps versus in the browser, the mobile revolution and responsive design. The document then discusses information architecture, wireframes, and the languages of web design including HTML, CSS, JavaScript. It also discusses grids, frameworks, SASS/LESS, and responsive design.
This document provides an introduction to HTML, CSS, and JavaScript. It discusses the objectives of familiarizing the reader with the web browser, providing first steps into these languages, and motivating further exploration. It then covers HTML tags and document structure, how CSS is used to style and separate design from content, and how JavaScript can be used to add interactivity to webpages. It also discusses how to insert CSS and JavaScript into an HTML page through internal, external and inline methods.
This document provides practical strategies for improving front-end performance of websites. It discusses specific techniques like making fewer HTTP requests by combining files, leveraging browser caching with far-future expires headers, gzipping components, using CSS sprites, and deploying assets on a content delivery network. It also summarizes key rules from tools like YSlow and PageSpeed for optimizing front-end performance.
This document provides an overview of front-end web development. It discusses how the internet works using a client-server model and how websites are structured using HTML, CSS, and JavaScript. HTML provides structure, CSS handles styling, and JavaScript adds interactivity. The document also covers HTML tags, CSS selectors and properties, and using <div> and <span> tags. It concludes with mentioning a portfolio website project and learnings.
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
The document discusses organizing CSS for maintainability and readability. It recommends dividing CSS into separate style sheets for different media types, rule types, or site sections. Within style sheets, related rules should be indented and grouped with comments. Declarations should be formatted consistently, either each on its own line or all on one line. Class and ID names should be meaningful. Informational comments can provide context. The goal is to structure CSS so it is easily understood by anyone viewing it.
The document discusses various ways that web performance can be improved, including reducing the number of server requests, minimizing file sizes through compression and minification, leveraging caching, optimizing browser rendering through techniques like deferred parsing of JavaScript, and using tools to automate optimizations. It emphasizes that most of the end user response time is spent in the frontend and recommends starting performance improvements there.
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.
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...SPTechCon
This document provides an overview of how to create custom branding for SharePoint. It discusses the design process, using master pages and page layouts, and deploying branding solutions. The presenters are SharePoint MVPs who provide information on their backgrounds and expertise. They outline the SharePoint design process and discuss elements like vision, requirements, design, development, testing and deployment. Details are provided on master page history and functionality in ASP.NET and SharePoint. The use of controls, content placeholders and CSS are explained. Methods for creating and customizing SharePoint master pages are described. Finally, deployment options like sandboxed and farm solutions are covered.
This document provides an introduction to Cascading Style Sheets (CSS). It explains that CSS is used to describe the presentation and formatting of HTML documents, separating content from presentation. It describes various CSS concepts like selectors, declarations, properties, values, and the CSS cascade. It also covers linking CSS to HTML through inline, embedded and external stylesheets and provides examples of each.
The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that uses built-in media queries to make the site responsive. Each zone (group of regions) can be configured for content first layouts, that resize and rearrange themselves depending on the screen size of the user's device.
The presentation will walk-through the theory behind Omega's mobile-first approach, how to use the many configuration options on the theme settings page, pitfalls to avoid, and what's on the forecast for Omega 4.x!
Additional Resources:
bit.ly/omega-tips
W3Conf slides - The top web features from caniuse.com you can use todayadeveria
- Caniuse.com is a website that provides support information for web technologies like HTML5 and CSS3 across different browsers. It allows users to check browser support for over 130 features.
- Some of the top web features that have good support across browsers and don't require polyfills include CSS 2.1 selectors, @font-face, CSS tables, pseudo-elements, CSS counters, sessionStorage and localStorage.
- Caniuse.com is working to improve with a new design, more features, better notes on partial support, and selecting specific regions for usage data.
This document summarizes strategies for making content responsive including pruning content like images and secondary content for mobile using CSS classes. It discusses linking to content instead of showing it all at once using JavaScript or CSS interactions. Lazy loading images with AJAX calls after page load is also covered to improve performance. The document emphasizes testing content strategies based on device capabilities and making sites functional even without full media query support.
The document discusses an agenda for a class on CSS (Cascading Style Sheets). The agenda includes learning what CSS is and its importance, understanding CSS grammar and syntax, linking a CSS file to HTML, creating a designer's toolbox, designing a basic webpage with CSS, and commenting in CSS. It also provides examples of CSS code, instructions on adding CSS to HTML pages, and homework of creating a basic webpage and CSS file.
Introduction to Bootstrap: Design for DevelopersMelvin John
The document provides an introduction to Bootstrap, one of the most popular front-end frameworks. It discusses basic design principles like proximity, alignment, repetition and contrast. It then covers key aspects of Bootstrap like the grid system, CSS components, JavaScript plugins, customization options, and how it relates to basic design principles. The benefits of Bootstrap are faster development, powerful grid system, customizable styles and responsive components, while potential drawbacks include file size overhead and templates looking similar without customization.
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
In the last few years, we’ve seen an emergence of a modular way of thinking about code and design. We’ve seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We’ll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks.
The document provides information on CSS (Cascading Style Sheets). It discusses the different types of style sheets including inline, internal/embedded, and external stylesheets. It also covers various CSS properties such as text formatting, borders, margins, positioning elements with classes, and color properties. CSS is used to define styles and layouts for HTML documents and makes web pages more presentable.
This is my latest version of my client side performance presentations. This has been presented at TechEd NZ 2009 & to a couple of .NET user groups around NZ. This presentation focuses on the basics of client-side performance tuning.
This document provides an overview of various front-end frameworks and tools. It discusses HTML templating languages like HAML and templating engines like Handlebars. It also covers CSS preprocessors like SASS and LESS. JavaScript libraries and frameworks covered include jQuery, Backbone, Spine and CoffeeScript. Boilerplates like HTML5 Boilerplate and frameworks like Twitter Bootstrap and Zurb Foundation are also summarized. The document encourages trying new tools but not feeling overwhelmed by the many options and focusing on those most helpful.
HTML5 is the next wave of development for the web, with the support from IE9 and IE10. Even Windows 8 will support native apps written in HTML5. This session will give an overview and a deeper dive into writing effective HTML5 together with your existing ASP.NET experience to create the best next generation web experience.
Similar to Css best practices style guide and tips (20)
The Fetch API is a modern replacement of the XMLHTTPRequest object. It is based on promises and makes making AJAX/API calls easier to manage and code.
This slide deck is a quick introduction to the API.
Introduction to Progressive Web ApplicationsChris Love
Progressive Web Apps (PWAs) are websites that utilize modern web capabilities to deliver native app-like experiences to users. PWAs are built using common web technologies including HTTPS, service workers, and web app manifests. Service workers allow PWAs to work offline by caching app assets and responding to fetch events. When installed on a user's homescreen, PWAs can load quickly and feel like native applications while retaining the benefits of the web such as being discoverable, installable, and updatable.
Introduction to Progressive Web ApplicationsChris Love
Progressive Web Apps (PWAs) are websites that utilize modern web features to deliver native app-like experiences to users. The minimum requirements for a PWA are that it is served over HTTPS, includes a web app manifest, and registers a service worker. Service workers allow PWAs to work offline by handling fetch events and caching assets. While adding a PWA to a user's home screen can improve engagement, the true battleground is changing user perception of the capabilities of web apps versus native apps.
Website speed is a crucial aspect of on page SEO everyone can control. Your goal is to be interactive in under 3 seconds, even on a basic phone over a 3G connection.
However, most web sites have so many requests and large payloads this time limit or budget cannot be achieved. In fact, the average web page takes 22 seconds to load, according to Google's research.
But what if I told you there is a way to offload or even avoid loading page assets until they are needed?
This can give your website a distinct advantage over your competition because not only will Google like your pages better so will your visitors!
Progressive Web Applications are a new way to think about using the web to provide great user experiences using the best web platform features.
The education market has many opportunities to benefit their communities using PWAs to deliver information and application experiences across all devices and platforms.
The server is dead going serverless to create a highly scalable application y...Chris Love
This document discusses moving to a serverless architecture to build highly scalable applications. It defines serverless as developing applications without having to manage servers. Popular cloud services that enable serverless architectures are mentioned, including AWS Lambda, Amazon S3, API Gateway, and others. Serverless allows developers to focus on their applications instead of infrastructure.
A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love
This is an older slide deck I realized I never uploaded.
It is a slightly longer deck than the Night at the SPA deck. This features many concepts that are forerunners to the modern progressive web application.
There are slides related to web performance best practices, JavaScript architecture, responsive web design, touch and much more.
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
Over the past year we have seen a lot of excitement around Progressive Web Applications. Browser evangelist are selling developers and business owners on their advantages and promising future. But what is the real story? What are the details to proper execution? What do engineers need to know to make their web sites into Progressive Web Applications that not only meet the minimum criteria, but meet the sales hype?
Searching the Pokedex offline is fun, what is the real experience like caching a business application? Caching application assets and data can be complex, especially for larger applications. What to cache, how long to cache and how to cache are all valid questions. Often, in an effort to just ship something, we cache nothing. When we don't cache, we disappoint the customer and miss a key promise of progressive web applications.
Disrupting the application eco system with progressive web applicationsChris Love
Progressive Web Applications (PWA) is a comprehensive term describing web applications that implement a base set of browser platform features like HTTPS, Web Manifest and Service Workers. But it bleeds beyond the scope of an application's code because browsers are enabling qualified web applications to offer the same user experiences native application enjoy. This includes prominent home screen placement, push notifications, eliminated browser chrome and app store placement.
Become a Progressive Web App expert with my course: Progressive Web Apps (PWA) Beginner to Expert -> http://PWACourse.com
Service workers your applications never felt so goodChris Love
If you have not heard of service workers you must attend this session. Service Workers encompass new browser capabilities, along with shiny new version of AJAX called Fetch. If you have every wanted your web applications to experience many native application features, such as push notifications, service workers is the gateway to your happiness. Have you felt confused by application cache and going offline? Well service workers enable offline experiences in a much cleaner way. But that is not all! If you want to see some of the cool new, advanced web platform features that you will actually use come to this session!
https://love2dev.com/blog/what-is-a-service-worker/
Develop a vanilla.js spa you and your customers will loveChris Love
Do you want to leverage HTML, CSS and JavaScripts APIs to deliver rich user experiences that outlive the framework du jour? Do You want to understand good front-end application architecture and performance principles. Then you want to build applications in Vanilla JS. Despite popular belief Vanilla JS is not as difficult to master and implement as you might think.
In this tutorial Chris Love will demonstrate how to apply many common web performance optimization, good architecture and tricks to build a fast, native-like application user experience customers desire without dependency on large, fast food frameworks.
This tutorial will demonstrate the following concepts:
- Applying the 14kb Rule for Instant Loading
- Markup Management
- Eliminating Excess AJAX Calls
- Working With and Around Application Cache
- Applying Service Workers and HTTP/2 For Even Better User Experiences
- Leveraging common browser APIs & good architecture
JavaScript front end performance optimizationsChris Love
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
Advanced front end debugging with ms edge and ms toolsChris Love
All browsers have developer tools that help developers troubleshoot their applications. But each browser's tools are different and all have strengths and weaknesses. Microsoft Edge is no different.This session will highlight some deeper insights you can gain through the Edge developer tools and some advanced tools available from Microsoft. We will dive into advanced CSS and JavaScript debugging capabilities. We will also review how to chase memory leaks and diagnose common performance rendering issues. Finally we will do a quick review of Vorlon.js, a remote debugging library that enables you to troubleshoot issues on devices you do not have developer tool access.
According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate.
- Why has the web become obese?
- What actions can developers and stakeholders do to combat their morbid obesity?
- Are these actions expensive or hard to implement?
This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.
Using Responsive Web Design To Make Your Web Work Everywhere - UpdatedChris Love
Devices are as unique as their users. Detecting the end user’s platform is a fruitless expenditure that often leads to wrong assumptions. Maintaining multiple web applications for different platforms is not cost effective and stressful. Responsive web design is a way to design your applications for devices of all shapes, sizes and resolutions. This session covers a definition, examples and how to execute a proper mobile first responsive design. We will also cover how to use responsive images to ensure your application performs well.
Implementing a Responsive Image StrategyChris Love
Applications must implement responsive web design strategies today. However most developers are not experienced in responsive techniques. More over images have provided a difficult hurdle for developers and business stakeholders to make responsive.
A proper responsive web design strategy increases return on investment, reduces long term maintenance requirements and improves application performance. Images create many challenges in implementing responsive design.
This session will explain what responsive images are. How new web standards have enabled manageable responsive image practices. We will go over tooling and techniques to enable responsive images in your developer and line of business workflows.
When you leave this session you will have actionable knowledge of responsive images, techniques, tooling and workflow options you can apply to your projects now.
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes. It recommends taking a mobile-first approach, using fluid layouts and media queries to make content responsive. Key tips include starting small and resizing the browser, using Chrome's device mode to emulate different devices, and the matchMedia API to bind JavaScript to breakpoints. The overall goal is to provide an optimal viewing experience across all devices.
10 things you can do to speed up your web app today 2016Chris Love
Web Sites are to slow and this is costing businesses money. Most performance issues are easy to fix. In this session we review why web performance is important and 10 simple things you can do to make a faster user experience.
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
The document discusses responsive web design techniques for creating websites that work well across all device screens. It covers fluid layouts using relative units like percentages, media queries to apply styles conditionally based on screen width, and image optimization techniques like srcset and sizes attributes to serve the most appropriately sized image for different screens. The goal is to provide an optimal viewing experience for users on any device without needing separate mobile sites.
Microsoft is releasing a new Browser with Windows 10, called Edge. Edge is a fork of Internet Explorer that leaves legacy support behind and adds support for many new specs and features. This session attempts to highlight many of the changes and provide understanding of what the future holds for web developers.
The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.
Coordinate Systems in FME 101 - Webinar SlidesSafe Software
If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights.
During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to:
- Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value
- Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems
- Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors
- Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported
- Look Ahead: Gain insights into where FME is headed with coordinate systems in the future
Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!
YOUR RELIABLE WEB DESIGN & DEVELOPMENT TEAM — FOR LASTING SUCCESS
WPRiders is a web development company specialized in WordPress and WooCommerce websites and plugins for customers around the world. The company is headquartered in Bucharest, Romania, but our team members are located all over the world. Our customers are primarily from the US and Western Europe, but we have clients from Australia, Canada and other areas as well.
Some facts about WPRiders and why we are one of the best firms around:
More than 700 five-star reviews! You can check them here.
1500 WordPress projects delivered.
We respond 80% faster than other firms! Data provided by Freshdesk.
We’ve been in business since 2015.
We are located in 7 countries and have 22 team members.
With so many projects delivered, our team knows what works and what doesn’t when it comes to WordPress and WooCommerce.
Our team members are:
- highly experienced developers (employees & contractors with 5 -10+ years of experience),
- great designers with an eye for UX/UI with 10+ years of experience
- project managers with development background who speak both tech and non-tech
- QA specialists
- Conversion Rate Optimisation - CRO experts
They are all working together to provide you with the best possible service. We are passionate about WordPress, and we love creating custom solutions that help our clients achieve their goals.
At WPRiders, we are committed to building long-term relationships with our clients. We believe in accountability, in doing the right thing, as well as in transparency and open communication. You can read more about WPRiders on the About us page.
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsMydbops
This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization.
Key Takeaways:
* Understand why connection pooling is essential for high-traffic applications
* Explore various connection poolers available for PostgreSQL, including pgbouncer
* Learn the configuration options and functionalities of pgbouncer
* Discover best practices for monitoring and troubleshooting connection pooling setups
* Gain insights into real-world use cases and considerations for production environments
This presentation is ideal for:
* Database administrators (DBAs)
* Developers working with PostgreSQL
* DevOps engineers
* Anyone interested in optimizing PostgreSQL performance
Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxSynapseIndia
Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation
Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 :
- Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants.
- REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.
Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data.
The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs.
Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution!
Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.
Implementations of Fused Deposition Modeling in real worldEmerging Tech
The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries:
1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes.
2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions.
3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines.
4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors.
5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering.
6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands.
7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems.
8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering.
9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively.
Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.
Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.
The Rise of Supernetwork Data Intensive ComputingLarry Smarr
Invited Remote Lecture to SC21
The International Conference for High Performance Computing, Networking, Storage, and Analysis
St. Louis, Missouri
November 18, 2021
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Bert Blevins
Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Css best practices style guide and tips
1. CSS Best Practices, Style
Guide, and Tips
#ITDEVCON
Chris Love
http://love2dev.com
@ChrisLove
2. Who Am I?
• ASP.NET MVP
• ASP Insider
• MS Edge User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & HTML5
• @ChrisLove
• Love2Dev.com
#ITDEVCON
3. High Performance Single Page Web Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99
#ITDEVCON
6. CSS
.main-content {
overflow: hidden;
left: 6.3166666%;
right: 0;
top: 50px;
bottom: 4.166666%;
position: absolute;
border-radius: 5px 5px 0 0;
background-color: #000000;
-moz-transition: all 700ms ease-out;
-o-transition: all 700ms ease-out;
-webkit-transition: all 700ms ease-out;
transition: all 700ms ease-out;
}
#ITDEVCON
Selector/Rule
Properties
Vendor Specific
7. CSS
•Rules
• Defined using selector syntax
•Properties
• The specifics
•Media Queries
• Define Rules Based on Browser & Device Characteristics
#ITDEVCON
8. CSS Property Units
•px – pixels
•% - percent
•em – relative to the element’s font-size
•rem – Relative to the root element’s font-size
•vh/vw – Viewport Height/Viewport Width
•Any 0 does not require a unit
#ITDEVCON
9. CSS Selector Syntax
• Element
• H1, DIV, P
• Class
• .btn, . spa-child-view
• ID
• #tryToAvoid
#ITDEVCON
10. Advanced CSS Selector Syntax
• Nested Selectors
• Allows You To Apply Rules to Children of Matched Elements
• .main-content p
• Be careful to avoid complexity
• Dynamic By Attributes
• script[class='spa-view']
#ITDEVCON
17. psuedo-classes
• Define CSS Rules for Element States
• Hover
• Active
• Define Rules for hidden elements
• :before, :after
• Define Rules for nth Element
• :nth-of-type(3n)
18. Content Property
• Defines ‘text’ value for matched element
• Useful with :before and :after pseudo element
19. Responsive Table Trick
• Tables Create a Unique Responsive Design Problem
• Change CSS To Change Rendering Rules
• Turn Table into a fake set of DIVs
• Leverage content property to define value labels
• https://css-tricks.com/responsive-data-tables/
24. CSS Selector Specificity
• Complex Specificity
• .main-content > article #myArticleId p
• Leads to large CSS files
• Makes Code Unmanageable
• Lower the Score the Better
• Browsers Parse Selectors Right to Left
• * Avoid Universal Selector
25. Right-Left Rule
• .main-content > article #myArticleId p
• Translates to:
• #myArticleId p
• Think More Like the Browser When Defining Selectors
26. Calculate CSS Specificity
• Count the Inline Style
• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and pseudo-
classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the
selector (= c)
• ignore the universal selector
31. CSS Cascading
• Last, Most Specific Rule Wins
• Be mindful of your CSS Definition Order
• Overwrites Previously Defined Rules
• Simple rule make this easy to maintain and create
32. Responsive Design
“this unspoken agreement to pretend that we had a certain size. And that size
changed over the years. For a while, we all sort of tacitly agreed that 640 by 480
was the right size, and then later than changed to 800:600, and 1024; we seem
to have settled on this 960 pixel as being this like, default. It’s still unknown. We
still don’t know the size of the browser; it’s just like this consensual
hallucination that we’ve all agreed to participate in: “Let’s assume the browser
has a browser width of at least 960 pixels.”
Jeremy Keith
bit.ly/1bhH6rw
34. Responsive Web Design
• Introduced by Ethan Marcotte 2010 -
bit.ly/178an9e
• Web Design Approach To Create An Optimal
Viewing Experience Across All Browser ViewPorts
• Fluid Layouts
• Media Queries
• Minimal if any JavaScript Required
35. Fluid Layout
• Stretch as the Browser ViewPort Changes
• Browser’s Viewable Area Inside the Chrome
• Serve as the Foundation for the Web Application
Layout
• Great Way To Create Native Like Experience
38. Avoid Embedded Styles
• Don't separate content from design
• Cause more maintenance headaches
• Make your pages larger
• Do not take advantage of Http Caching
• Lead to Duplicate Rules
39. CSS - Files
• Should
• Use External Files
• Hosted on a CDN
• Bundled & Minified *
• HTTP/2 Changes the Bundling Rule
40. CSS – Debug Files
• Should
• Use Many Files
• They Should Correlate to a Purpose
• View
• Component
• Layout
42. CSS Best Practices
• Link to External Files in the HEAD
• Ensures CSS read before HTML
• Avoid Using @import
• Causes CSS to be Parsed After Document
43. CSS Reset
• Establishes a Common Base
• Each Browser has a default CSS stylesheet
• Many Resets Availble
• Normalize.css probably most popular
• Popular libraries have resets; ex bootstrap uses normalize
44. CSS Libraries
• Many Available
• Bootstrap is the current defacto standard
• Primer based on Boostrap
• Created by bootstrap author
• GitHub’s internal library
• https://github.com/primer/primer
45. CSS Libraries
• Be Careful to not be Completely Dependent on Library
• Understand How CSS Rules, Apply Best Practices
• Build Your Own Custom Version
• Grunt/Gulp
46. Critical CSS
• The CSS Required to Render The Above the Fold Content
• Embed Inline, in HEAD element
• Instant Render if HTML < 14kb
• Works great for a SPA
• criticalCSS Node Module
• https://www.npmjs.com/package/criticalcss
47. Critical CSS Grunt
grunt.initConfig({
criticalcss: {
custom: {
options: {
url: "http://localhost:4000",
width: 1200,
height: 900,
outputfile: "dist/critical.css",
filename: "/path/to/local/all.css", // Using path.resolve( path.join( ... ) ) is a good idea here
buffer: 800*1024,
ignoreConsole: false
}
}
},
});
50. CSS Rule Formatting
• Use one discrete selector per line in multi-selector rulesets.
• Include a single space before the opening brace of a
ruleset.
• Include one declaration per line in a declaration block.
• Use one level of indentation for each declaration.
• Include a single space after the colon of a declaration.
51. CSS Rule Formatting
• Use lowercase and shorthand hex values, e.g., `#aaa`.
• Use single or double quotes consistently. Preference is for
double quotes, e.g., `content: ""`.
• Quote attribute values in selectors, e.g.,
`input[type="checkbox"]`.
• _Where allowed_, avoid specifying units for zero-values,
e.g., `margin: 0`.
52. CSS Rule Formatting
• Include a space after each comma in comma-separated
property or function values.
• Include a semi-colon at the end of the last declaration in a
declaration block.
• Place the closing brace of a ruleset in the same column as
the first character of the ruleset.
• Separate each ruleset by a blank line.
58. CSS Animations
• Do Not Use JavaScript Libraries for Animations
• CSS Animations are Native
• Run on the GPU
59. CSS Key-Frame Animations
• Allow You To Define Complex Animations
• Define Rules/Properties Along a Timeline
• Animate.css is a collection of turn-key animations
• http://daneden.me/animate
60. CSS Key-Frame Animations
• Can be Applied by adding and removing CSS classes on
an element
loginDlg.classList.add("fadeInDown");
showLogin.classList.add("fadeOut");
loginDlg.classList.remove("fadeOutUp");
61. CSS Key-Frame Animations
• Can be Applied by adding and removing CSS classes on
an element
loginDlg.classList.add("fadeInDown");
showLogin.classList.add("fadeOut");
loginDlg.classList.remove("fadeOutUp");
• http://bit.ly/1Lt1kTb
62. CSS Shapes
• CSS Can be Used to Create All Sorts of Shapes
• http://www.cssshapes.com/
63. Create a CSS Heart
• My Site’s Logo is a CSS Heart
• Here is how to create it:
• http://bit.ly/1NF3Sjf
64. Perfectly Align to Center
.my-class-parent {
position:relative;
}
.my-class {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
65. High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Architecture
• Web Build and Workflow
• Goes Really Fast!
• ~395 Pages
• 20 Chapters
• $9.99