Responsive design is forcing us to reevaluate our design and development practices. It's also forcing us to rethink how we communicate with our clients and what a project's deliverables might be. Pattern Lab helps bridge the gap by providing one tool that allows for the creation of modular systems as well as gives clients the tool review the work in the place it's going to be used: the browser.
This talk is a deep dive into how Pattern Lab is organized and how to take advantage of it.
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there’s still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
This text presentation attempts to hit on the highlight features and structure of Django and its ecco-system. It is intended as an introduction for those who are curious about , what is it?
Sauce Labs hosted a Selenium bootcamp webinar with guest speaker Dave Haeffner. This presentation will give you a basis for the detail given in Dave's like titled E-book and get you started with Selenium.
Selenium Best Practices with Jason HugginsSauce Labs
Selenium creator and Sauce Labs co-founder Jason Huggins recently gave a great presentation on 'Selenium Best Practices' to the San Francisco Selenium Meetup Group. Visit http://saucelabs.com.blog to see the presentation in its entirety.
This is the slides I used when I shared my humble insight on Django to the students in University of Taipei in 2016. Please feel free to correct me if there is anything wrong.
UI Testing Automation - Alex Kalinovsky - CreamTec LLCJim Lane
Presentation by CreamTec CEO Alex Kalinovsky at the March NoVA UX meetup at AddThis. Alex talks about the importance of visual interface testing, current tools and methodologies, and introduces his company's solution called Screenster.
This presentation summarizes tips, tricks, patterns and best practices on Django development. This presentation is prepared based on the great book "Two Scoops of Django: Best Practices For Django 1.5"
Nexthink Library - replacing a ruby on rails application with Scala and SprayMatthew Farwell
Applications without tests (legacy applications) present particular problems to developers when changes are required. Unless the change is very small, they require a lot of manual testing. This is even more true when we wish to completely replace such an application. At Nexthink, we replaced a legacy Ruby on Rails application with a web application written using Spray and Slick. There were two parts, a Rest API, accessed from lots of different version of our products, and an administration web interface to allow editing of the data. In replacing this application, we had to ensure that the new implementation returned exactly the same answers to requests as the old application for the same input criteria, without knowing in advance what the requests were. This presentation shows how a combination of technologies was used to achieve this goal, including: spray - for the reactive http container proxy - the new application was used as a proxy to the old application, and the results were compared with the new application (in production) scalacheck - to generate structured queries on the old and new application, for testing gatling - for performance tests This presentation covers both how the replacement was done, to ensure the minimum number of bugs in production, along with our subsequent experience in production.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there’s still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
This text presentation attempts to hit on the highlight features and structure of Django and its ecco-system. It is intended as an introduction for those who are curious about , what is it?
Sauce Labs hosted a Selenium bootcamp webinar with guest speaker Dave Haeffner. This presentation will give you a basis for the detail given in Dave's like titled E-book and get you started with Selenium.
Selenium Best Practices with Jason HugginsSauce Labs
Selenium creator and Sauce Labs co-founder Jason Huggins recently gave a great presentation on 'Selenium Best Practices' to the San Francisco Selenium Meetup Group. Visit http://saucelabs.com.blog to see the presentation in its entirety.
This is the slides I used when I shared my humble insight on Django to the students in University of Taipei in 2016. Please feel free to correct me if there is anything wrong.
UI Testing Automation - Alex Kalinovsky - CreamTec LLCJim Lane
Presentation by CreamTec CEO Alex Kalinovsky at the March NoVA UX meetup at AddThis. Alex talks about the importance of visual interface testing, current tools and methodologies, and introduces his company's solution called Screenster.
This presentation summarizes tips, tricks, patterns and best practices on Django development. This presentation is prepared based on the great book "Two Scoops of Django: Best Practices For Django 1.5"
Nexthink Library - replacing a ruby on rails application with Scala and SprayMatthew Farwell
Applications without tests (legacy applications) present particular problems to developers when changes are required. Unless the change is very small, they require a lot of manual testing. This is even more true when we wish to completely replace such an application. At Nexthink, we replaced a legacy Ruby on Rails application with a web application written using Spray and Slick. There were two parts, a Rest API, accessed from lots of different version of our products, and an administration web interface to allow editing of the data. In replacing this application, we had to ensure that the new implementation returned exactly the same answers to requests as the old application for the same input criteria, without knowing in advance what the requests were. This presentation shows how a combination of technologies was used to achieve this goal, including: spray - for the reactive http container proxy - the new application was used as a proxy to the old application, and the results were compared with the new application (in production) scalacheck - to generate structured queries on the old and new application, for testing gatling - for performance tests This presentation covers both how the replacement was done, to ensure the minimum number of bugs in production, along with our subsequent experience in production.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)Dave Olsen
A designer has been asked to mock up an example student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two perfectly aligned columns. The design just feels… right. Approvals are given and the production of a website with many different profiles is started. As more profiles are added the design no longer seems to work. It’s starting to seem like the website itself will no longer work. The cold, hard reality of varied and inconsistent web content has hit the project hard. Do we make large design changes or just live with it?
To head off this question we should utilize real content as we develop mock-ups. But it shouldn’t just be one set of real content. Delivering the best possible and most robust websites requires us to design using the best-case, worst-case, and every-case-in-between content. By combining the skills of content specialists, designers, and even developers designs will be that much stronger.
Responsive design is forcing us to reevaluate our design and development practices. It's also forcing us to rethink how we communicate with our clients and what a project's deliverables might be. Pattern Lab helps bridge the gap by providing one tool that allows for the creation of modular systems as well as gives clients the tools review the work in the place it's going to be used: the browser.
This deck reviews some of the features of Pattern Lab. It also discusses how I feel it can fit into the overall workflow of a team. It doesn't cover the technical aspects of the tool but I'm happy to follow-up if anyone wants me to. Also, be sure to check out the documentation at http://pattern-lab.info/docs/
Atomic Design, Living Style Guides and the Holy GrailNetcetera
This presentation was given at Magnolia Conference Basel, June 7-9 2016 by Adrian Heydecker and Marcel Kessler of Netcetera.
Find the recording (including the demo) here:
https://www.youtube.com/watch?v=0qkRYDeXagE
Find the sources here:
https://github.com/netceteragroup/hibiscus
Optimizing web performance (Fronteers edition)Dave Olsen
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
Case Study: Automating Outage Monitoring & CommunicationDave Olsen
This is a review of how West Virginia University's Digital Services unit monitors and communicates system outages. In the past we have had little coverage for our systems. Notices amounted to emails which didn't work well at 2am. We've now been able to combine a number of solutions (New Relic, Pingdom, Slack, PagerDuty, StatusPage.io) into one cohesive monitoring and communication workflow.
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseDave Olsen
A common refrain from both management and clients alike today (still!) is, "We need an app...." Unfortunately, over the long-term, mobile solutions will need to be more diversified than a single app or even a single platform. Not only will your customers be affected by the rapid adoption of smartphones but also your workforce and business processes. From optimizing web content to developing unique experiences mobile will touch and transform your entire enterprise. Together we’ll look ahead to see what kind of changes an enterprise needs to make to be future friendly.
This talk was presented at the Huawei Mobile Information Revolution Think Tank on November 19, 2015.
Over the past few years, we’ve seen the web community create style tiles, element collages, style guides, pattern libraries, and a slew of other tools in order to break interfaces down to their atomic elements. Our interfaces are going more places than ever before, so this shift is essential to help us better understand what our websites consist of in order for us create smart, scalable, maintainable designs.
This session will introduce atomic design, a methodology for creating robust design systems. We’ll cover how to apply atomic design to implement your very own design system in order to set you, your organization and clients up for success.
We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
Reimagining Your Website: What are prospective students looking for and how a...Dave Olsen
Review insights from the 2016 Ruffalo Noel Levitz E-expectations Report and discover tips and tools for implementing these strategies across your websites.
Presentation that I gave at the August Ruby Meetup at ODEO in San Francisco. A bit light on content as most of the presentation was a live coding session.
Future proofing design work with Web componentsbtopro
Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house).
As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them.
Talk structure:
What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility
Examples of who has adopted them and what they doing with them
Community resources like polymer slack, webcomponents, and open-wc.org
Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins
Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio
How teams can leverage web components across projects
Where Drupal 6,7,8,9 fit into the future with web components
Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management
Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!
Design patterns are known and tested solutions to common problem. In software engineering we constantly come across similar problems. The same problems or tasks need to be programmed again and again, hence patterns. Design patterns catalog and document these solutions.They are built on industry knowledge of what works and why. We will look at what design patterns are, their history and the structure of documenting patterns.
As an example we look at the Observer pattern.
We will also look at Liskov Substitution Principle and the Open Close Principle, both which are very useful in building enterprise systems. Finally we look at creating objects.
Efficient Rails Test Driven Development (class 4) by Wolfram ArnoldMarakana Inc.
Learn how to apply the test-first approach to all of your Rails projects. In this six class series, experienced Rails engineer and consultant, Wolfram Arnold applies his real-world perspective to teaching you effective patterns for testing.
In this fourth of six classes, Wolf covers:
- Refactoring code & tests, custom matchers
- API Testing
- Remote data setup
- Cucumber for API testing & documentation
** You can get the video and source code from this presentation at: http://marakana.com/f/204 **
All six classes will be available online, so stay tuned! And be sure to check out marakana.com/techtv for more videos on open source training.
Presented by: Wolfram Arnold, in collaboration with Sarah Allen, BlazingCloud.net
Produced by: Marakana
Adapter Pattern is an example of some Demo implementations for OOP PHP Design Patterns in the Drupal 7 and Drupal 8 environments. Presentation at the Toronto Drupal Group
Hönnunarmunstur er þekktar og reyndar lausnir við almennum vandamálum. Hugbúnaðargerð felur í sér að leysa vandamál og oft rekumst við að sömu vandamálin aftur og aftur. Þessi vandamál má leysa með þekktum leiðum, svo kölluðum munstrum. Hönnunarmunstur skjala þekktar lausnir. Þau eru byggð á þekkingu úr iðnaðnum, segja hvað virkar og af hverju.
Í þessum fyrirlestri skoðum við hönnunarmunstur, sögu þeirra og hvernig þau eru skjöluð. Við lítum á ýmis dæmi og tökum svo fyrir grunnmunstur - base patterns. Þá skoðum við Open Close Principle sem er eitt af þessum prinsippum sem við þurfum að hafa í huga.
Machine Learning with ML.NET and Azure - Andy CrossAndrew Flatters
ML.NET is an open source, machine learning framework built in .NET and runs on Windows, Linux and macOS. It allows developers to integrate custom machine learning into their applications without any prior expertise in developing or tuning machine learning models. Enhance your .NET apps with sentiment analysis, price prediction, fraud detection and more using custom models built with ML.NET
About Andy Cross
Andy Cross (@andyelastacloud) is a co-founder of Elastacloud, an Azure Insider, co-founder of the UK London Azure User Group, an Azure MVP and a Microsoft Regional Director. An international speaker, Andy has lead teams building the largest Hadoop and HDInsight specialist deployments on Azure.
His passion for embedded software and high performance compute clusters gives him a unique insight into a sphere of computation from the very small and resource constrained to the massively scalable, limitless potential of the cloud.
Patterns and Anti-patterns
How to learn design patterns?
Categories of GoF patterns
The Fundamental theorem of software engineering
Real-world problems and how design patterns solve them with GoF structural patterns
Workshop slides originally given at the WOPR Summit in Atlantic City. Use JavaScript parsers and generators like Shift combined with Puppeteer and Chrome to reverse engineer web applications
Taking Your HTML Email Communications from "Ew" to "Wow"Dave Olsen
HTML emails can suck. From the 1990s era code to uninspiring templates to fulfillment and statistics in an alien CRM HTML emails are something that many choose to ignore. Or, at best, develop and deliver outside of a CRM.
In the summer of 2018 University Relations at West Virginia University implemented a new way of delivering HTML emails in support of Enrollment Management. We found we could be more creative and focused in our messaging than we ever expected. Early numbers show we may have influenced our class with our new strategy.
In this session, you’ll follow along with a case study that will cover how we:
• Re-thought our email communication plans from the ground-up
• Helped designers and developers collaborate with Enrollment Management using Litmus
• Built a tool on top of MJML to help speed up our development time, as well as segment copy and imagery, for our emails
• Track the effectiveness of our email communications using a dashboard built in Data Studio
And it’s all CRM agnostic.
The rise of digital platforms has given marketers the ability to track everything that our customers are doing. Tracking “all the things” presents problems though. What metrics show that a platform is effective? How do we collect the data in the first-place? In this workshop we’ll cover how to combine three Google products into the ultimate data gathering and reporting workflow. One that will save you time while giving you the answers you need and moves beyond “page views.”
Building an Academic Program Database and API with Contentful and Amazon Web ...Dave Olsen
How many degree listings does your institution’s website have? How robust is that information? How consistent and on-brand is it? The amount of information related to academic programs is vast and varied. Tuition, scholarships, plans of study, facilities, profiles, media and more. Having clear and consistent academic information would be a differentiator for many schools. A single source-of-truth for academic content might be the holy grail.
This presentation shares how West Virginia University has started to tackle this problem. Their Academic Programs API combines Contentful, a headless CMS, with Amazon Web Services. This has led to a flexible, easy-to-update system for authors, developers and designers.
In this session, you’ll learn how to:
* Work with content owners to show them the importance of centralized content and how to source it
* Define content models and relationships in Contentful
* Use AWS’s Lambda, DynamoDB and API Gateway services to build an API
* Expand your efforts beyond academic information
* Take control of your institution’s content
Case Study: Rebuilding an Admissions Web PresenceDave Olsen
From print-heavy communication plans to ad hoc social media efforts to an ever expanding number of web sites we are very good at building silos of content. In this session we'll discuss the data, tools, and strategy that West Virginia University used to pare down and better integrate their Admissions-related communication efforts.
Ensuring the consistent adoption of brand elements across various channels can be a problem for many large organizations. As West Virginia University rolls out a new brand campaign our central Digital Services unit is sharing tools with our web development community to help them make this shift. In this talk you will learn how we’re using patterns to:
* modernize and standardize toolsets
* encourage broad and fast adoption of the new brand elements
* make it easier to incorporate future changes to brand elements
This process has not been without its challenges so expect many pitfalls and missteps to be shared.
The Squishy Future of Content - HEEMAC EditionDave Olsen
This talk was given as a keynote for the HEEMAC conference at the University of Southern Florida.
With the adoption of responsive design, we're finding that our pixel perfect content is no longer being placed in pixel perfect boxes on pixel perfect web sites. Placeholder content no longer suffices during development. Copy and paste doesn't work in migrating between designs. With the emergence of the small screen as a primary computing device, web site design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects layouts, and how we can best communicate these changes and engage with stakeholders to create future-friendly web sites.
Learn why we need to be advocates for content at all phases of a project.
Explore the fundamental content types and content rules that will shape how content flows and is viewed by visitors.
Learn how content choreography can help keep our stakeholders most important message the focus of your site.
Review and rethink our web development workflows to create a new process that is better suited to addressing the constraints of the small screen.
The Squishy Future of Content - Penn State EditionDave Olsen
With the adoption of responsive design, we’re finding that our pixel-perfect content is no longer being placed in pixel-perfect boxes on pixel-perfect websites. Placeholder content no longer suffices during development. Copy-and-paste doesn’t work in migrating between designs. Rather, website design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects our development workflow as well as understand how content and messaging affect layouts.
• Learn why you need to be an advocate for content at all phases of a project.
• Explore the fundamental content types and content rules that will shape how your content flows and is viewed by visitors.
• Learn how content choreography can help you keep your most important message the focus of your site.
With the adoption of responsive design, we’re finding that our pixel-perfect content is no longer being placed in pixel-perfect boxes on pixel-perfect websites. Placeholder content no longer suffices during development. Copy-and-paste doesn’t work in migrating between designs. Rather, website design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects our development workflow as well as understand how content and messaging affect layouts.
• Learn why you need to be an advocate for content at all phases of a project.
• Explore the fundamental content types and content rules that will shape how your content flows and is viewed by visitors.
• Learn how content choreography can help you keep your most important message the focus of your site.
The Server Side of Responsive Web DesignDave Olsen
Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. Depending on project requirements, team make-up and deployment environment combining these two techniques might lead to intriguing solutions for your organization. We'll discuss when it makes sense to take this extra step and we'll explore techniques for combining server-side technology, like server-side feature-detection, with your responsive web designs to deliver the most flexible solutions possible.
Measuring Web Performance - HighEdWeb EditionDave Olsen
Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
Web Performance & You - HighEdWeb Arkansas VersionDave Olsen
Today, a web page can be delivered to a desktop computer, a television, or a handheld device like a tablet or a phone. While a technique like responsive design helps ensure that our web sites look good across that spectrum of screen sizes we may forget our web sites should also be able to perform equally well across that same spectrum. While more and more of our users are shifting their Internet usage to these more varied platforms and connection speeds our development practices might not be keeping up.In this session we’ll review why optimizing web performance should be an important step in the development of responsive websites. We’ll look at the tools that can help you understand and measure the performance of those sites as well as discuss front-end and server-side techniques that can be used to help you improve their performance. Finally, since the best way to test your site is to have real devices in hand, we’ll share “lessons learned” so you can set-up your own device lab similar to what we have at West Virginia University.This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
A short talk on web performance given at Refresh Pittsburgh. Discusses how web performance fixes can be worked into a normal development workflow. Focuses on tweaks for responsive design sites.
Measuring Web Performance (HighEdWeb FL Edition)Dave Olsen
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at HighEdWeb Florida.
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Dave Olsen
We’re entering a new era where an increasing number of devices with wildly divergent features -- including phones, tablets, game consoles, and TVs -- are connected to the Internet. As the way people access the Internet changes, there is an urgent need to rethink how we use the web to communicate. This doesn't mean creating separate solutions for each device but rather preparing our existing content to meet this increasingly unpredictable future. Dave Olsen and Doug Gapinski will share and examine examples that show how responsive design will help institutions rethink and adjust for the future-friendly web.
Primary topics that are covered are: understanding the reality of web development today, example RWD design patterns, and understanding how to test and optimize the performance of your RWD website.
The Future Friendly Campus (Workshop Edition)Dave Olsen
Slides from my Future Friendly workshop at HighEdWeb Arkansas. Discusses why mobile is important, why we should pursue future friendly solutions and lays out a strategy for making your institution or organization future friendly.
RESS: An Evolution of Responsive Web DesignDave Olsen
Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. I’ll show how both front-end and server-side developers can take advantage of the new technique called RESS (Responsive Web Design with Server Side Components) that aims to be combine the best of both worlds for delivering mobile-optimized content.
Social media and mobile devices have combined to help create the always-with-us, always-on, always-connected campus. Not just student-to-student but, importantly, institution/faculty/staff-to-student as well as staff-to-staff. We need to look beyond the silo-ed, one-way web sites of the past towards more personal, two-way applications that take advantage of this sea change on campus. The ways in which our users will want to interact with us, the types of tasks they’ll want to complete, and the types of devices we’ll want to deliver to will just continue to proliferate.
Now is the time to reevaluate.
Using lessons learned at a large land-grant institution we’ll look at what the future friendly campus might look like, ways to plant the seed of that change and tips on how to accomplish it.
This presentation was given at the 2012 .eduGuru Summit on April 11, 2012.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
3. a roadmap for our talk:
‣ rethinking the web design process
- process: linear vs. collaborative
- communication: clients and RWD
- modular systems: systems vs. pages
‣ deep dive into pattern lab
- quick tour of the front-end
- installation
- working with patterns
- customizing data
- advanced features
9. rethinking the web design process: collaborate
Kick-off Design &
Develop Test Client
Review Production
10. rethinking how we communicate: deliverables
‣ mood boards
‣ style tiles
‣ wireframes
‣ low-fidelity HTML mock-ups
‣ high-fidelity HTML mock-ups
‣ “cut up” mark-up, CSS, & JS
‣ pattern libraries & style guides
11. Our hand-offs to clients should allow them
to re-mix common elements that we’ve
developed to build new things.
Our deliverables should
be systems, not pages.
12. Build, test, and review deliverables in the
place where a project is going to be used.
Get to the browser.
13. ...communicate better with one another?
...build robust systems and not pages?
...review everything in the browser?
So how do we...
15. Pattern Lab is a collection of
tools for creating modular
systems that involves your
entire team & your client every
step of the way and lets everyone
review in the browser.
21. the requirements:
PHP 5.3+
no web server required*
* - only required for page follow
Mustache is used for patterns.
JSON is used for dynamic data storage.
26. installation: generate for the first time
php
core/builder.php
-‐g
just in case you’re a fan of the command line, on linux or on windows.
php
core/builder.php
-‐-‐help will show you all of your options.
28. installation: review source/
the only required directories are _data/ & _patterns/. otherwise,
you can change source/ as much as you want. this is what we mean
about making your own Bootstrap. you can even use Bootstrap.
29. installation: open pattern lab’s index.html
don’t edit public/. always make changes in source/. public/ is for
your own and your client review purposes.
30. installation: done!
Pattern Lab doesn’t require Apache so no extra set-up. You can drop
Pattern Lab into a Dropbox folder for clients.
43. working with patterns: intro
Each pattern describes a problem that occurs
over and over again in our environment, and
then describes the core of the solution to
that problem, in such a way that you can use
this solution a million times over, without
ever doing it the same way twice.
— Christopher Alexander
44. working with patterns: intro
Pattern Lab provides a way to
help you develop, describe, &
stitch together mark-up and
style patterns.
45. Pattern Lab uses conventions
so that the filesystem acts as
its database.
working with patterns: intro
46. working with patterns: organization
all file paths in this presentation are located under source/.
00-‐organisms/01-‐global/00-‐header.mustache
50. _00-‐header.mustache
working with patterns: hiding patterns
the underscore hides a pattern in the navigation but the
pattern is still available for inclusion in other patterns.
51. 00-‐header@inreview.mustache
working with patterns: pattern states
anything after the “@” gets added as a class to the
pattern’s navigation element. “inprogress,” “inreview,” and
“complete” propagate to downstream patterns.
53. working with patterns: systems, not pages
Atomic Design as the basis for Pattern Lab’s pattern types.
54. working with patterns: systems, not pages
molecules-search
organisms-header
templates-homepage
55. Important: You don’t have to use the
Atomic Design metaphor to use Pattern
Lab. Change it to whatever you want.
working with patterns: systems, not pages
57. working with patterns: using atoms
Use atoms to help define
general styles. Good first step
for style tiles, mood boards, or
testing style changes. They
most likely won’t be used in
other patterns.
61. working with patterns: using molecules
Use molecules as your base
for common patterns that
will be included further up.
In general, they shouldn’t
have partial dependencies.
Will use variables.
64. working with patterns: molecule example
<li
class="comment-‐container">
<div
class="comment-‐meta">
<img
src=”{{
img.avatar
}}”
class=”avatar”>
<h4
class="comment-‐name">
<a
href="#">{{
name.first
}}
{{
name.last
}}</a>
</h4>
</div>
<div
class="comment-‐text">
<p>{{
description
}}</p>
</div>
</li>
these are variables and are defined in various JSON files.
molecules-single-comment:
66. customizing data: where to define it
Global data:
_data/_data.js
00-‐pages/00-‐homepage.json
Pattern-specific data:
00-‐pages/00-‐homepage~emergency.json
Pseudo-pattern:
specificity
67. customizing data: system/default data
<ul>
{{#
listItems.four
}}
<li>{{
name.first
}}
{{
name.last
}}</li>
{{/
listItems.four
}}
</ul>
the “listItems” variable:
the “link” variable:
<a
href=”{{
link.pages-‐blog
}}”>
provides the real path to a pattern
provides an easy-to-use set of data to iterate over for your mock-
ups. supports up to twelve iterations. randomized every time the
site is generated. more info: http://bit.ly/1jojXKR
69. working with patterns: using organisms
Use organisms when you
need combinations of
molecules. Also good when
defining patterns that may
match partials in a CMS.
72. working with patterns: organism example
<section
class="comments
section">
<div
class="comments-‐container"
id="comments-‐container">
<h2
class="section-‐title">59
Comments</h2>
{{>
molecules-‐comment-‐form
}}
<ul
class="comment-‐list">
{{#
listItems.five
}}
{{>
molecules-‐single-‐comment
}}
{{/
listItems.five
}}
</ul>
</div>
{{>
molecules-‐pagination
}}
</section>
these are mustache partials and are how we include one
pattern within another.
organisms-comment-thread:
73. 00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: partial syntax
if we want to include this pattern in another pattern...
default partial syntax uses only the pattern type and pattern name...
{{>
organisms-‐header
}}
fuzzy matching of the pattern name...
{{>
organisms-‐head
}}
{{>
00-‐organisms/01-‐global/00-‐header
}}
traditional mustache partial...
74. customizing data: pattern parameters
{{>
molecule-‐alert(message:
“hello”)
}}
<div
class=”alert”>
{{
message
}}
</div>
<div
class=”alert”>
hello
</div>
Mustache:
Partial:
Rendered:
pattern parameters allow for defining of variable replacement right in the partial.
77. working with patterns: using templates
Use templates to wireframe
and provide a low-fidelity
version of final pages. They’re
all about layout. Template
mark-up can and should
include sections that might not
show by default. After atoms,
templates will be the other
thing you show clients.
80. working with patterns: common header & footer
00-‐atoms/00-‐meta/_00-‐header.mustache
00-‐atoms/00-‐meta/_01-‐footer.mustache
if these patterns exist Pattern Lab automatically includes them as
your header and footer.
81. working with patterns: template example
<div
class="page"
id="page">
{{>
organisms-‐header
}}
<div
role="main">
{{#
emergency
}}
{{>
molecules-‐alert:error
}}
{{/
emergency
}}
{{#
hero
}}
{{>
molecules-‐block-‐hero
}}
{{/
hero}}
...
these are quasi-“if statements” and allow for the inclusion of multiple
layout possibilities for a template. turned on via JSON variables.
templates-homepage:
83. working with patterns: using pages
Use pages to provide high-
fidelity versions of a template.
They should include very
specific data.They’re all about
showing “real” content in the
wireframe.
85. working with patterns: page example
{{>
templates-‐homepage
}}
pages should simply include/reference templates. the majority of the power
of a page is in its associated JSON file and by using pseudo-patterns.
89. common workflow with advanced tools:
1. start watcher & auto-reload server at
the same time
2. edit & save files in source/
3. watch things change in your browser
90. integrating with grunt:
npm
install
-‐-‐save-‐dev
grunt-‐shell
shell:
{
patternlab:
{
command:
"php
core/builder.php
-‐gp"
}
},
shell:patternlab
install grunt-shell:
add to initConfig:
add to registerTask:
92. summing up:
‣ Our workflows are going to change.
‣ Involve entire team in the process.
‣ Create modular systems of mark-
up.
‣ Pattern Lab can be a central tool in
helping that happen.