Categories
Online Marketing

What Is a CMS? Which One Should You Use for Your Website?

” All right, so today, We have a special guest Alycia from Sucuri. Thank you so much for coming on today. Yeah thanks, I’m happy to be here Awesome, so we’re Talking about what is a CMS and which one should you Use for your website, Can you tell us a little Bit about what a CMS is So CMS stands for. Content management system and it’s basically an easier way to put pages, live on your Website or blog post manage your image media Library all that kinda stuff Awesome and now, let’s Go over the top three CMSs, I’m going to be a little bit! Biased in this episode, That’s my disclaimer right there, I’m going to start with WordPress WordPress is the most popular Content management system out there today powers Over 1/3 of the internet, It has tons of plug-ins tons of options and it’s pretty resourceful And probably my favorite Reason for why I use WordPress is the community behind it.

They’re such a large community that that just all comes Together, there’s meetups, there’s wordcamps and everyone just helps each other out For sure, and I mean with 40,000 plugins almost like you, have no end to the kind of functionality you can add to your CMS Absolutely. So what are some other CMSs that we can possibly use For sure, yeah,,’cause everybody’s heard of WordPress, so Yeah Drupal is another very popular one.

It’s been described to me as Kinda, like a Swiss cheese, you need to be a bit more Technical to use Drupal, but it does have a lot Of different features compared to WordPress, it has A different user experience and ultimately it’s been Used for a lot of things like government websites, And that kinda thing because of its ability to be a little more secure in some areas: yeah Yeah and it’s definitely One not for like the smaller business type sites as Enterprise or large Corporation type sites right, Yeah, yeah for sure Yeah Joomla – is another really Popular one as well, It’s got a really good.

Community – and it’s got, I think, the second highest Market share after WordPress, Although WordPress is Like 30 % – and I think, like It’s, a giant Joomla’s like 6 %, so just A little bit of a gap there between the top two but Joomla’s, also a really awesome CMS to use You wan na make sure that you’re using the most latest version. If possible, There are two active versions: Available that you can use Yeah, you definitely wan na stay on the most recent branch.

Of any CMS, if possible, Yeah that’s just a best practice there. All right. Let’s talk! About really figuring out, which one should you use right Like what are some of the first Steps we wan na think about. Definitely you wan na Make sure that you know what your requirements Are for your website, So how does it need to Be for your users to use! How are you going to go about? Actually creating posts and what are the processes that you’re going to use as part of that And then once you have all that you can kinda look at each CMS and see what are the extensions and Themes that are available And see if they’ll match the Requirements that you have for your website, That makes sense and It all comes down to figuring out what’s right for you Like, I will stand by WordPress all day, but WordPress may not be Right for your situations, Figuring out those requirements, With those applications are super important, Yeah and usually a Lot of the CMS websites have a great community Because they are open-source, So tell us a little about open-source Yeah for sure.

So all Those top three CMSs they’re open-source they’re, also free, which is very important, Open-source, basically Means that the source code used to build WordPress Or Drupal or Joomal, it’s all open and available, and anybody can contribute to it as well Right on So that just means it’s Constantly being improved by the community and the Community’s also checking to make sure that, what’s Being added is secure All right, so we want our Website to look good right, So is that something to think About when we’re choosing what platform we use and how easy it is to create those sites Totally so different themes will have different attributes like They may have a sidebar on the left or the right, Or they may be all one column in a never-ending scrolling website.

Different themes will Allow you to accomplish, maybe what you need by Having custom backgrounds or custom menus, so you Wan na look at the options for your theme and you also don’t wan na discount like premium themes, A lot of premium themes out, there will add extra functionality, So you’re, essentially Paying for the theme, even though the CMS is free, That’s an awesome option. There’s premium plug-ins as well, Depending on what you Need the default themes that come with it are Sometimes a little restrictive, so you wan na take a look at What the default themes are: Try some different free themes and see what the options are to get your site to look.

The way you want it to Yeah and what was kind Of controversial at first in WordPress and 5.0 remember Gutenberg, Oh yeah, Gutenberg is essentially The new WordPress editor, The whole point is to kinda mirror the printing press of just Blocks and everything else, Yeah, what you see is what you get So as you’re typing — Whizzy, wig, Yeah whizzy wig, Thank you So as you’re typing Yeah, you see exactly what you would see on the website, So that comes default by WordPress.

It has made the experience. Especially for first-time users easier to create, Then there are page Builders like Elementor or Beaver Builder or WPBakery Builder, that makes that user-experience A little bit easier, If you’re going on the WordPress realm and really want something: That’s pretty customizable, you don’t have to be a Web developer or guru to build that website For sure CMSs are having to Make things a little easier, You know, there’s a lot of Different places out there that are creating website builders that are super easy for people to use, and so it’s helpful for These open-source CMSs to make the user-experience a little easier All right.

So another thing we probably have to think about. Is the hosting requirements We’re going to need for our applications? Talk us through a little Bit of what that looks like For sure, so most of These are running on PHP, so you want the most Updated version of PHP, especially if you want The latest features and to make sure that you’re Getting those security updates? Yes, So that’s really important.

A lot of hosting companies will offer one-click Install for most of these major CMS applications, Some hosting companies Especially when I first started creating websites – and I Was on a super budget, but also a very secure host, it took me a long time. It took me like three days to install WordPress and they have a famous 5-minute install You wan na look and see, and maybe talk to your hosting company.

About what the options are for getting this CMS Installed on your server Right,,’cause, taking three Days to get a website going just the beginning is not Something you wan na do There’s a lot of places out there that will do managed hosting Especially with WordPress There’s managed WordPress that has just already automatically installed some extra security features And then what most people End up going with is like a cPanel type Hosting Since it does have that one-click install with Installatron or Softaculous, Whatever they’re, using Totally Couple of clicks of a button and then it’s there, You can start building and Designing, however, you want All right, so the real Reason I brought you on to this.

Episode is really talking about security with CMSs They’re open-source. You Constantly have to update them, so there’s lots of things. That we need to really think about to make sure Our stuff’s protected Totally well with It being open-source not only are all the good People contributing code, but all the bad people can Also, look at that code as well and find vulnerabilities. So that’s something that a lot of people are concerned about.

Especially with WordPress being so popular, it is a large target. The CMS itself is actually quite secure because there’s a great Community checking things out. You wan na make sure that you’re Not installing more plug-ins than you need Trying to make sure that you’re keeping everything up to date. If you have a managed solution, They’ll, do it for you, Which is awesome. Yup, You wan na make sure That you have something some kind of security plug-in That’s monitoring your site, letting you know if there is A problem that they detect There are some that can also Add features for protection like adding Two-Factor Authentication, which is a second password on your phone that you need to enter in Order to get into your website There’s all kinds of Cool security, plug-ins security utilities that You can use with your CMS Yeah, I know with WordPress the top security plug-ins That come to mind, of course, Sucuri has This security plug-in, but there’s also Wordfence And then with having an SSL on your site, super important just to Encrypt that password,’cause, you have to login The beauty with CMSs that You can access them anywhere right, Yup, So you wan na make sure that wherever you’re accessing’em Your password isn’t being sniffed out by someone in the middle Yeah.

You wan na, be careful. You don’t wan na. Maybe do It in like an airport or coffee shop, Wi-Fi Unless you’re using a VPN.’Cause, if you are sitting There on public, Wi-Fi and there’s a hacker sitting next to you, they could sniff your password As you’re typing it in And then the next thing you know, there’s a bunch of spam pages on your site that you need to deal with. So what about firewall? I’ve heard that it should be important.

Should be added to the site, What’s the validity with that? Definitely one of the nice things about a website firewall Is that it will virtually patch your CMS? So if There is a security issue, essentially the firewall’s Taking care of that, It surrounds your website. And if somebody’s trying to exploit a vulnerable Plug-In on your site, the firewall will catch. That attempt and block it They’ll see a blocking page.

Meanwhile, all of your legitimate Visitors are being sped-up because of the global Network of the firewall and content delivery network, So we’ve figured out what Cms we’re wanting to use We’ve got it installed, how Do we go about documentation, learning the program itself? There are some awesome Resources out there, You talked about WordPress WPBeginner has some awesome? Training guides and tutorials There’s an awesome community.

For all of these CMSs, with very active, like support forums, That’s a great way to go about it And then, obviously, if you have a developer, Or something like that, that’s helping you get some customization. They can usually help you. You wan na make sure that You’re documenting everything as part of your website as well, so It’s just going to help you Later on down the line, if you know you have a List of all the users, all the plug-ins and that kind of stuff and you’re keeping that up-to-date Yeah, especially if you Have people on your team that needs to access the site, Giving them documentation on What they should be accessing, what they shouldn’t be, because sometimes the wrong click can Make just chaos happen Totally and good user passwords making sure that you’ve Got the right role levels assigned to your users? Whether they’re just an editor or author or contributor Right Those roles are usually built into the CMS to allow you to make Sure they can only access what they should be allowed to access.

You only wan na grant admin privileges to somebody for as long as they need it, and that kind of thing Now, with this website, I know many of the entrepreneurs or even solopreneurs out there with their stuff, has Many hats to wear right, Sometimes maintaining it, isn’t always something that they have time for Yeah. It may not be top of mind Right. What should we be? Doing with those updates Yeah, definitely I would say that it’s very important to make sure that you always retain Access to your property, your web property, So I’ve seen cases where a developer will leave a client and Leave with the passwords and then you can’t get Into your hosting account, or you can’t into WordPress, It’s not ideal, so make sure you always have access to those things And make sure that you’re just practicing safe security practices.

Throughout all of it Right on and with WordPress and Joomla everything else, we Talked about it earlier, make sure you’re at least going in there every now and then to update It to the next latest version: It’s not only for performance, but it is for security Yeah for sure I mean with some CMSs there might be different branches that are still being actively developed So having a firewall That can virtually patch and make sure if there Are any vulnerabilities you have a little bit of an extra window.

‘Cause whenever there’s a Security update released, the hackers are looking going. “: Okay, here’s the old file; “, here’s the new file; oh look: “! There’s the security flaw!”, So it can be –. Then send all our bots out Totally it can a matter of minutes hours after a security patch is released before there’s active attacks in the wild So definitely update your Sites as soon as possible, Auto-updates are amazing, WordPress has auto-updates on most hosts, Yeah and or you can hire developers like most designers or Developers will have like a website care plan, so you Can them just do it for you, If you’re using WordPress, Godaddy ProSites or ManageWP has the one-click updates.

So you can update all your Plug-Ins and your themes, You even have a safe update option. So what it does is It’ll update your site, take a snapshot of before and after and make sure they’re all the same. And if there’s an issue It’ll retract, back to it It’s a free option for you Yeah, that’s perfect! You hit on a good point, It’s not a set it and forget. It thing with a website: You need to make sure that You’re maintaining it And that it’s part of your business, it’s how your business looks.

So you should definitely Make sure that you have some kind of plan for keeping It up-to-date and maintained All right. The last point that we should really talk about is really your time and investment with the CMS of your choice. Talk us through a little Bit of that about that For sure we’ll you Wan na go in and realize that it’s going to take you Time to setup all the pages that you want Right: It may take you time to find the right plug-ins, so you wan na kinda think through whether You want to hire somebody or get some help with that To find the functionality and the look and feel that you’re after Definitely budget when It comes to free CMSs.

Well, you don’t have to pay for the CMS. So that’s helpful Right! But it’s customization and security and all Those things that you definitely wan na consider as part of the whole package of having a website On-going costs for domain WHOIS privacy, SSL certificates, Right firewall, All that kind of stuff, All that good things Totally yeah, there’s A lot of accessories that go on with having a website, So you wan na figure like I said at the beginning what those requirements are And then make sure you have a plan for how you’re going to budget and the timelines around When you wan na launch Perfect and with Drupal And Joomla they are, they do have that smaller market share, So there’s really specific requirements of when you wan na use those applications.

Those developers that you hire for Drupal or Joomla might cost more than a WordPress designer as well For sure yeah, and you wan na make sure that you’re really looking at the work that the developer has done and make sure that it Matches what you’re, after There’s lots of great Websites out there that you know can tell you more About how to pick a developer depending on what you’re after Well? Thank you so much for Coming out on the show today and helping us figuring Out what a CMS is why we should use one You’ve been awesome Thanks my pleasure.

Well, if you liked this article go ahead and smash that, like button, add a comment below on Something that you’ve learned and subscribe to this blog and ring that bell, if you’d like to see these episodes first, This is “ The Journey.,” we’ll see you next time.


 

Categories
Online Marketing

Payment Integration

This replaces the payment forms on a site with a much simpler experience on mobile devices. So let’s talk about paying for things on the web. This is a longer talk, so let me give you an idea of what’s coming up. First, we’ll talk about the user experience today and what could be better, we’ll look at the payment request, API twice.

First, to give you the big picture, then we’ll dive into the code. Finally, you’ll get the usual resources in lab. It’s no surprise, given the rise of mobile computing, that a majority of commercial traffic is coming from mobile devices, what is surprising is that 66 % of that mobile commerce is still happening on the web, even when people have native apps installed. Unfortunately, we also see a lot lower conversion rate on mobile web relative to desktop websites.

Mobile conversions are about one third of the desktop conversions. If you wonder why this is the answer is pretty simple. Checking out collecting payment from the user is still rather messy. People often give up while filling the checkout form some checkout forms have improved since the beginning of web Commerce. What hasn’t changed is you still have to manually input the same information credit card billing address and shipping address? Our first step to solving this problem is autofill, because autofill works on existing forms.

You don’t have to modify your site. Autofill just works to help users check out faster autofill alone increases conversion rates by 25 %. Autofill does a good job of identifying form fields, but it’s not perfect. If you want an even better experience, you can have the autocomplete attribute to your forms. In this example, we’ve annotated the credit card portion of a form using values such as CC name and CC.

Number autofill will know exactly where to place its information. If you want to learn more about autocomplete attributes search the web, using what WG autofill to find the specification, autofill gets rid of the manual nature of data entry and makes it much simpler for the user. The current checkout experience presents you with a form to fill out every time for users, though the ideal experience would be that, when it’s time to buy they just buy site should be able to focus on creating an amazing and engaging shopping experience without worrying about optimizing.

A long checkout form this is where the payment request API comes in, we’re going to look at it first from a user perspective and then look at the code. What if we could do away with the form using web payments when it’s time to pay the user? Just pays payment request is a simple JavaScript API that helps the browser collect payment information. Then it’s a simple one: tap checkout for the user and an easy way for a site to receive a payment.

With the payment request API, you can make the whole process much faster and simpler and since the browser is actually taking care of collecting payment information from the user, we go from end taps to one tap. Let’s take a quick look at the code flow here. First, the site initiates a payment request in this request. The website passes to the browser the parameters of the payment, for example, how much is being charged and the available forms of payment? Don’t worry about the details now we’ll come back in a few minutes and look at this in detail.

The browser then determines the intersection of payment methods from the site and what the user has. It then presents a selection UI where the user chooses their method of payment. You get the UI by calling show this displays a native UI over the browser within this UI, the user can change how to pay the delivery method and the delivery address. The payment method can be credit cards or one of the apps that’s installed on their device, such as Android pay and, finally, the user taps on pay.

Then the browser requests a response from the selected payment method. This might be an app on your device or going directly to a payment provider. The payment processor verifies the request by examining its details and then returns the response directly to the server and the website now has all the information it needs to process the payment. Is this safe? The API is more secure than forum based payments.

The new payments are based on modern cryptography. You don’t need to enter payment data that could be logged or observed at the point of entry. Autofill is safe from website access and is typically stored. An encrypted storage on the hard drive to prevent disclosure, even when the OS is compromised payment request, is not just a chrome only API. The API is currently under development in the w3c web payments working group.

The goal is to create a universal cross browser standard for any website to accept any form of payment so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser. The browser passes, addresses and credit card details immediately and securely to the site, and since the browser is collecting payment information from the user, we go from end taps to one tap: you’ve seen how payment request works for the user.

Now, let’s go over the code in more detail. First, a quick review. The site initiates a payment request in this request. The website passes to the browser the parameters of the payment, including the price and the payment methods accepted. The browser determines the intersection of payment methods for the site and the user and presents a selection. Ui payment can be anything from a simple credit card payment to a payment application installed on the user’s device.

The browser requests a response from the selected payment method and returns the response directly to the merchant. There are multiple code samples for this on: Google, Chrome, github, dot, io. Let’s start writing some code. Step 1 is to tell payment requests. All the ways you can get paid. Step 2 is to define the details about the actual transaction cost items, currency, shipping options and so on.

Here’s an example of how you would define shipping options notice. The selected bit you can include this: if you have multiple options, the browser will tell you which one the user selects step 3 is to define what information you want. The API to collect. Take the three data structures you just created and pass them to the payment request. Constructor. You often do this when the user indicates they’re ready to pay, take the request and call it show method.

This returns a promise and opens the user interface. The UI shows the details of the purchase and collects payment information when the user approves the prom resolves with a payment response object. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place when a request comes back, call complete to close the UI.

The complete method tells the user agent that the user interaction is over. The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Android pay. The response will be documented by the provider. There’s one loose end to tie up what happens if the user changes their shipping address or options.

This may change the total cost and in some cases, may change the shipping options. Payment requests can omit shipping address, change and shipping option change events. You should add event. Listeners for these and update the payment details. Accordingly, the sample code will show you how and that’s it. You can find a full set of resource links on this final slide. You may have noticed. I didn’t mention a lab, we’re just finishing it up at the time of filming, so check your lab notebook for a complete ecommerce example.


 

Categories
Online Marketing

Implementing the Web Payments API – Progressive Web App Training

Api is a w3c standard to eliminate payment forms for users and standardized payment collections for sites. It allows us to request payment and shipping information with a single API call.

This knows how to run Apple pay on iOS Safari and Google pay on Android. It’s not limited to those to any payment provider can write a plug-in. It’s not even restricted to one browser. It’s probably in the browser you’re using right now the browser simply acts as an intermediary collecting the information we need in a consistent way. Then returns a JSON object with the results that we can use to collect the payment.

If you have used a pay with Apple pay or pay with Google pay button in the browser, you already know what the experience will be, like developers previously used custom libraries to implement this, such as the Apple pay, API or the Google Wallet API, and if you Want to do that too great, but if you want to work with whatever payment system, the user has payment request. Is your friend, let’s take a quick look at the code flow and user experience? We want to buy this jacket, what happens when we tap buy now? This is an ordinary button with an ordinary event handler.

First, the site creates a payment request, object and populates it with some details. It typically has the price, a list of items being purchased and the available forms of payment. This is all invisible to the user. We need to trigger the payment user interface, you get the UI by calling payment request, dot, show this displays a native UI over the browser and returns a promise. The next few steps are all happening inside this promise.

The first screen is a summary of the information supplied by the app tapping on an item opens it the EPI stores, addresses and payment options securely. In this example, Larry can select his shipping address with one tap edit. The address or add another need to change. The shipping option no problem: it’s just kappa way note that changing this option may change the total price. The payment request api can handle this with a little help from your app notice, the multiple payment options, the api also handles country, specific payment methods and, finally, the user taps on pay.

At this point, the browser runs the selected payment service. This might be an app on your device or going across the network to a payment provider. The completed payment returns a special token that you can send to your server. The server has ways of verifying this token. Is this safe? The api is more secure than form based payments. The new payment instruments are based on modern cryptography. You don’t need to enter payment data that can be logged or observed at the point of entry, so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser.

It works across browsers across OS platforms and can work with any payment service that wants to write just a little code now that you’ve seen how payment request works for the user, let me show you how to code it remember that the payment UI contains multiple sections. We need to populate these sections before making the request. The request needs at least three data structures, the payment options, the order, details and shipping options so we’ll create those then generate a payment request.

We will call show and get back a promise that resolves when it’s time to contact the payment processor, finally notice that we may want to or three event handlers. These are called while the UI is visible and can trigger updates when the user changes addresses or shipping options. Let’s walk through the steps in the UI and the corresponding code. First, the user taps by now. So we want to set up a payment request.

Remember that we need some data structures before we can create the request. The payment methods lists all the payment services that your site understands. It’s an array of payment method, objects and each method may have its own specific properties here. We’re listing the basic credit card method and Google pay note that I’m leaving out the details of the Google pay object as it’s pretty involved.

We want the user to know what they’re buying. This includes the core details of the transaction, how much money? What currency? And what list items you want displayed? Keep the line items fairly high level. It isn’t meant to be used as an itemized receipt. If you want more than one shipping option, you can define this structure notice, it’s a property on the transaction details. If you have multiple options include a selected bit, the browser will highlight the selected option and fire an event when it changes.

Now you can define what information you want from the API by default. Payment requests will only return the payment info if the user is logged. In you may have the rest of their information. If you need more these options, let you collect what you need. Take the data structures, you’ve just created and pass them to the payment request constructor. This should happen in response to a button tap or other user initiated action.

Now so far the screen hasn’t changed. We need to trigger the UI, take the payment request and call the show method. This returns a promise and opens the user interface notice. There’s a big block of code. After this, we still have a couple of steps until we’re done. The UI shows the details of the purchase and collects payment information when the user approves the promise resolves with a payment response object.

The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Google pay. The response will be documented by the provider. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place. Okay.

So how do we remove the payment UI after we click payment? Even if it fails call payment response, not complete. You can include a message to the user. This tells the browser that the payment is complete and allows the app to notify the user of the result. Now, there’s one loose end to tie up what happens if the user changes their shipping address or options. This may change a total cost and, in some cases, may change a shipping options.

Payment requests can omit shipping, address, change, shipping, option, change and payment method change events. You should have event listeners for these and update details accordingly. Remember we’re making the update in the middle of a promise, just as we do installing the Service Worker, so we use a similar bit of code. We get the event and call update with on it. This takes a promise that resolves to a new transaction details record.

It’s not all that different from calling cache at all from the service workers install event that also returns its result via the event. The get new info method is something that you would write. It takes some data from the request and builds a new transaction details. Object. Here’s a reminder of what goes in the transaction details. Your code probably needs to copy from the old object to a new one.

We resolve the promise with the new details, update with then updates the payment request and the screen, and that’s it. You now have a seamless, easy to use checkout experience now that was a bit of a long example, but most of it is boilerplate check out the payment request. Samples at Google, Chrome, github, io, remember the process for easier payments starts with autofill. If you want more payment request, is there to help? You can also check out specific libraries for Apple pay, Google pay, Samsung pay and others they put up a pay with button on the screen.

They usually fall back to the payment request interface, but they may be an easier option for your users. The only way to know is to try them for yourself thanks for hanging in there through web payments. This is one of the most complex parts of building a PWA, yet it’s really satisfying and could be great for business. Take care and I’ll see you again soon.


 

Categories
Online Marketing

Testing Web Accessibility – Adrián Bolonio (A11yTalks – August 2019)

To accessibility talks where every month virtually and talk about all things, Accessibility focusing on website usability Each month. We invite a speaker To present an accessibility topic and afterward, we invite the community to ask Questions and participate in discussion. So if you have a question for our Speaker or for anyone on the blog, please post it in the zoom chat window.

Or with the hashtag a-1-1-y-t-a-l-k-s in Twitter, That’s A11yTalks, I’m today’s Host AmyJune, I’m the open source community ambassador for Kanopi Studios and our speaker today is Adrián. Bolonio, Oh and I might have messed that Up He’s a front-end developer and web team Lead in this month’s talk, which is testing web accessibility, Adrián will Speak a bit about automated accessibility tests and how they can Free up our QA team for manual testing every part of the application, but they Cannot do that automatically and magically to make our site accessible so He’s going to show us some testing tools, libraries and techniques to increase the Accessibility test coverage of our code And he’s going to do that by using a Simple react, application, so that’ll be great, So Adrián.

I wanted to ask you a Little bit about yourself, you know we had some discourse in email and you Mentioned that you had a love for traveling and that you recently went to Italy, with your girlfriend um, do you want to share with folks the exciting News that happened in Italy Yeah well, thank you for having me here. First of All Yeah we’ve been in Italy for a couple of Weeks and then yeah we’re engaged now so so all happy nice, but yes yeah.

I love Traveling, actually, that that’s your your your right, every time that that money, Allows it and time allows it, then I’m I’m traveling Right. Where is your next Trip my next trip is to Colombia, I’m going to be speaker in the JavaScript Conference in Colombia, Yeah, and so I can, I spend a week in Colombia, so it’s going to be very exciting, Fun, fun and when you get married, did you Guys pick a location, are you going to travel for the wedding? Not yet it’s Going to happen next year: yes, Oh, Oh fun! Okay! So um are you ready to get started? Absolutely yeah Perfect, take it away.

Yes, So it’s all good! You see my so. You see The presentation Yep Perfect, so yes, I would love to talk about testing web Accessibility today, So, let’s start again, my name is Adrián or Adrián Bolonio, I’m From Madrid, I’m from Spain as AmyJune said, I’m a web team lead of the front-end Developers in my company I’m a front-end developer of that team and you can find Me under my surname in Twitter Instagram keep health everywhere.

So let’s talk About web accessibility in the real world, we can see here three cases that Is obvious that are not implemented and build correct to the people that are Targeted to so Probably because they were built by not disabled people Or Maybe because they didn’t thought to put in their shoes, But it is very clear that Those three cases are wrongly done. Another is another case that that I can Show you in the real world from the wheelchair user perspective, this is Completely wrong and it’s clear that this was not tested from the end user.

Perspective, no one thought about sitting down and clicking the button and opening The door and see that there are stairs so why is it so clear in the real work But not in the online world, so let’s see how how can we translate this? This Reality to the online world, because it’s not so obvious and not clear when we not Visually impaired people when we see a website that is not accessible, so, let’s Make it an example: if you, you are in an online e-commerce and an online shop and You want to you call the IT support.

You want to know your latest purchases, so a Typical answer from the help desk would be: you need to click on the button in The top right corner – or you want to change your password, so they can say you Need to click on the button with the engine icon. The problem here is that People with visually impaired disabilities or blind people will not See anything there’s no such as tab top right corner, there’s no such as engine Icon, so we need to get these reality when we develop applications.

Why so? Important what accessibility? If we look at the numbers last year, we were around Seven point: six billion people in the world. The problem comes because more Than 1 billion people live with some form of this one impairment from light. Two hundred percent, which would be blind people, so we need to make our back Accessible as for as much users as possible, so my team and I, as I said, I’m We are working in a platform that allows people to sell secondhand goods, so we Are the second largest Austrian website in traffic? That means we need to to Reach these people and we need to to make our website accessible for for all These people, so we are not going to throw I’m not going to talk about developing Web accessibility today I gave a talk some time ago about developing web Accessibility is called, how does your website sound like, and anyone can read? It but today I want to focus in testing web accessibility, so, as you said in the Introduction automate tests can free up your your QA team for manual testing Every single bar of your application, but it cannot automatically make it Accessible magically, so we need to think about this ultimate accessibility test.

As one step of a larger testing process, so we don’t, we cannot forget about the Fact that only twenty to fifty percent of all accessibilities can can be Automatically detected, so we don’t. We cannot skip this this manual part so as I said: we’ve been using some libraries, some tools that I would like to show you A introduction about the tools, so we we will start or I will start talking about. Testing the code, so I create a very, very small react application with three tiny Components, one is the button.

One is a fake button, which is an anchor link and One is an image and I put a bunch of errors in the HTML, so the first one is Reax, which is built by the Qin and is probably one of the one, the the tools That I use more so is install as a developer dependency in your react. Application – and you can call it passing the react on object. Why so? Because it Scans, your code, and it keeps you in the chrome, dev tool console in my case.

I’m Using Chrome all the issues that your website does, the good thing is it’s: if The issues are group and it’s group as well by severity level, so you can have Front minor, which could be the warnings to critical, which is the things that you Need to tackle first so again you can automatically see while you are Developing in the in the browser, what issues to have Another thing, another tool that I that we use and we have in our code – Guidelines is the es link plugin for accessibility for JSX, which is the react Language, you need to configure the es lint our situation file and you can Configure the rules that you want to use as we see in the line 12, we extends they Recommended rules by the accessibility, all the accessibility rules as well.

We Can extend the a strict at once so instead of warnings, you will see errors So your application will not be able to build, and in the code you can see what Errors, viewer, you are having and basically hovering the the line that you Have the earth as well, when you run the application, you can see these issues as Well in the terminal so again very very helpful. While you are coding, you don’t Even need to pass any test, you will see them automatically one of my favorites Because we tend is Jax just acts because we tend to to forget the test in writing.

Test is part of the development process. It’s not a post development process is a Part of the development process, so you can write unit tests with just and with This library just acts as well as a developer dependency. You can render into A string the whole application and you can check if the application have Violations so again, if you pass the test in the terminal, you will see pretty much The same issues that you will see in the chrome tools in the ultimate tests, this Is very helpful in your testing.

I belong if you have end-to-end test With selenium or you can have unit test you will, you will see how the Application would not build or will not be deployed to production if the tests Are not fast and with the results you can build reports to your to your Product team or to your development team, so this we’ve seen how to test in the Code so let’s see, how can we test in the Dom structure, mainly from the terminal So again, acts library has an CLI in the terminal, so you need to install it.

Globally, to be able to use it and you can run the command in the terminal. Followed by the URL of the page, you wish to test as well. You can pass localhost, so you can test in your local environment or you can use The flags, the rule flags, so you can test only one rule, in particular in the Second example: I’m testing only the color contrast, so if it I want to test If it’s compliant with a double A or the Triple A the good thing for this library, Is that it gives you the issue, the violation give you why in and where and Give you an link to the deck where University, so you can read more about How to fix this issue? There is another library which is very similar to ax Which is pa-11? Why and it basically does the same so you can.

You have to install It globally, yes NPM package and you can run it in your terminal, followed by the Url of the page, do you wait to test again? You can test against localhost and You will see all the issues listed. What years? What are the issues? Where are the Issues so it will see, it will show you the HTML, where the issue is was found. And a bit of information for me, one interesting thing about this: Library is that it has a CI in the so you can use it in the code, so you will Have to create a P, a PA 11 y CI dot JSON file, and you can pack and the URLs that You want to test, you don’t need to test one by one.

You can generate a full Reaper so in the URLs you can use it blind. I have plain you can use it as a conflict, so you can see down about or You can screen capture, so you will at the end of the test. You will see the Results and you will have a screen shot of the page, so you can test the visual Inconsistency as well and for me again, one of the interesting things about this When is, are the actions, so not only you can load the page and see if the Accessibility tests are passed, but you can perform actions so, in the sake in The third case I’m calling the Drupal group’s website and I’m waiting for the Element with the class menu three four, seven, three, which I expect the element I Know is the event link to be visible.

Then I take a capture. I click the Element and I take another capture so at the end I will have a screenshot of both Hamza and google provides a library which can be used from the dev tools as Well, so you can run this directly from the browser, but in this case i’m running This from the terminal, so I will show you the article, so you can see how how it Runs so lighthouse run a drum instance and it Will start performing tests not only accessibility but performance and SEO Because it’s my experiences SEO as a accessibility and performance both has a Very huge impact in SEO for google, so at the end of the test you will see all the Tests at the pimple and it will generate a report inside the Report, you will have the accessibility tab and you can see the score that you Have and again some information about the issues where and how to fix them.

So This is how this is some tools that you can use to test the Dom structure and, as Well, you can test in the browser, and now we are going out of the out of my tester To go to the manual testing, because all these tests that I’ve been talking about Can be automated in scripts or in the pipeline of the of building and Deploying so in a in a continuous delivery and continuous deployment, System but in this case I’m going to talk a bit about manual testing in the browser So I just selected three like a three plugins that I think I I used quite Often so this is the small react, application that I create and created, and I’m going to show you the Okay, first riad acts as we as we said, so you can see the the element and they are Highlighted so you can see.

Where are we? Where are we, then? The first one is acts So if you click in an allah ice, you will see again the issues that you have some Information about the issue: where is the issue found, and the good thing is how to Solve it and if you want to learn more again, there’s a link to the tech way. University, the second one is the art and our so a RC toolkit. So if you run test Then you can see group pi test and, for example, and they the red column, is Errors and the yellow columns are warnings and, for example, let’s take aria Usage, the good thing of this library is that they are highlighted in the code as Well, in the interview – and you can highlight where you are inspecting so in The in this case, there is a fake button that has a role and any set in valia Invalid aria role specified and if you click, you will directly go to the Element in the HTML inspector other thing that the chrome dev tool has is Enact a new accessibility panel, where you can see the whole accessibility tree Which is the Aria tree, so you can see what the screen readers will read when When the element will be focused, I think Sergey hey, I know Sergey.

I talked about This a couple of months ago, very interesting, so really read this Talk because it’s really interested and some other manual testing the rice that I tend to do is climbing a Chrome extension called no coffee. Which is a vision simulator, so you can simulate how what what can happen when I When a person has a kind of blurry vision, so this is how your website will Appear for them or someone with protanopia.

In this case the colors are Different, so it’s very interesting how to to to simulate the disability of Someone so you can develop this application in a better way, so yeah Those are three extensions that you can use to test your application in the Browser again manual testing, the small react application that I create again is Just a test to to to use these tools, you can find it in the repository in github.

In my in my profile, and I want to leave with with the sentence that I found and I really really like it, which is it says it just it’s not just about disabled Users being able to access your website is about everyone being able to assess Your website, so when we develop and with web accessibility in mind, we just we Don’t develop for disabled people, we develop for everyone, so so we need to we Need to to think about this, and that’s it! Okay, thanks Adrian, do you want to put us On you know, stop sharing your screen there.

You go So are there any questions from anyone on the call today? I know that there was A question from from Andrew he was curious to know which Jas X, Alli air as You extend beyond the default recommended ones, yes, so the errors that I am used for this example and again you can see it in the in the repository. Are All tasks, and you can say which elements you are looking for alternatives in this Case I use image, object, area and inputs with the type image no interactive tab.

Index so I want to avoid table indexes and different numbers, so not interactive. So in a div or in a label, no static element interactions, so I don’t want to I’m looking not to have on click on mouse down on Mouse up on creep press on Key down and on key up in a non static element. So only the the elements that Could have on click should have on click, so no thieves that looked like a button. That you can click on them.

No redundant rolls label has associated control again. Labels with an input so no input without labels, interactive support, focus again. Focus focus of all elements should only be part on check box link search boards. Switch text box le Phaedra Phaedra, the anchor link is Valid – and this is very interested because you can specify here the Components do you looking for, so, if you remember at the beginning, I I create a Tiny component called fake button, which is an anchor link, so in This case, I’m extending anchor is Bartlett and I’m passing the component Fake button, so every time that in react, I’m using this fake button, the Linton Will say, look, this is not.

This is not an phallic anchor and I can look for Special link so href left and HOF right and no ATF. Obviously, anchor has content. So, for example, the most typical example for this is you have the logo of your Website and is wrapped into an anchor in the image or you have an anchor with Nothing inside so the every Ankara should have an a Content. I’m looking Forward language Aria roles, so in heaven heaven has content, so I’m looking for as Well, heading so h1: h2 that has content no empty h2 host because of we are Things you want to use it as separate or whatever things that you should not to That’s that’s the the extension.

So I’m doing but again, if you, if you want to Take a look of the of the repository you can find everything specify the labels So to one it depends on critical minor, whatever you want to do to treat them. Perfect um so certainly has a question for you. You wanted to know if you use Cypress js4 accessibility, testing and if you have yeah no, no, we don’t. We don’t Use Cypress, we use react testing library from Kent, art asked he said.

No, no. We Don’t use Cypress we evaluated to use Cypress at the beginning, I mean we use Playing just and and now we are starting to use, react testing library. If react. Used to have a react, thus I eleven, but it was deprecated Towards react, ax well done liquid, because hopefully it Will be included in further versions of react um. What do you do when the Different tools give you different reports or conflicting reports: sorry ii, What do you do when different tools give you different reports or conflicting Results: okay, it depends on first, you will.

I will check how each library Is configured so, for example, maybe in the linking that we were talking before I I was looking for Encore not valid in in my component, which is the fake button. But if I don’t specify that this, but because I’m specifying explicitly this Component is wrong, but react. Acts in the browser will not say anything because I’m not specifying to this library a this component is not a nun.

It’s not a Valid anchor so for other libraries will be a valid anchor. So first you need to See the configuration of each one if you have a conflicting one, I normally go to The w3c specification and read about like okay, what is the best practice and Why is this not correct in this library and wise is correct in this library or What is the levels? Maybe one is a warning and one is a error. I normally go.

Directly to the specification so and has a couple of questions in the chat Window, the first one he asked was: do you normally test the entire application for Violations in one assertion, as opposed to testing specific components or Screams we do we do both, so the test that you’ve seen is rendered the whole Thing and and pass it through the through the testing library text, yest Acts and we test component by component, but the problem with component by Component is that if you have a component, I receive an alternate test: For an image as a prop and the prop is not passed, you would need to have Several tests for this with the application you just know what is what Is there unless is obviously coming from database or an API The other issue for us is that we are a service site application based, so we use Next J’s, sometimes we have data render in the server that are not coming in the Client, so sometimes the data is not coming, so we sometimes we have Components that we cannot test, unfortunately, his second question in the chat was: do You ever find their violations that fail the test, suite that you need to write.

That you want to skip or ignore, and is that possible on a one-off basis or do You always need to make code changes to address accessibility, test failures and Then, following that up with, how do you account for testing the rendered app in Different states: okay, for the first question: yes, there’s violations that Fail the test suite that we need to ignore sometimes pick it again. There’s Something that I always say to my team, and not only the team that I that I Developed with, but product team in general is that we need to be the most Accessible as we can it’s very difficult to be hundred percent accessible, Unfortunately, but I can tell you an example because it happened today, we Have an image gallery and some of the thumbnails are not images – are our Background images, the good thing is that all the thumbnails are in the gallery, so All the images have their correct alternate test.

So if I look for images This thumbnail will not appear in my test, so it’s not that they failed. It is Just literally, they are not found so, for me is a failure, but I just keep it Because in favor of the other images, and sometimes we have to ignore them – the Better example for us is as our logo, the colors of our logo are not three pelican Compliant so it’s like our our corporate log, our corporate colors, it’s just blue And white: it’s something that I cannot change, because the board will kill me if I change the logo.

This is something that we need to ignore. How do you account for Testing the render up in different states mocking we normally model data That we pass to the test, so we mark some 500 errors. We mark some success. We mark Errors – and we test as much we can – is obvious that sometimes we miss Some stuff, but this is, I guess, that’s obvious and Kari asked in the chat if what you Thought of and I’m going to destroy this last name man, not you this article on Building the most inaccessible site possible with the perfect lighthouse Score, did you read that yeah absolutely absolutely, of course, actually actually He lives in Vienna and we are going to.

We are in the process of found in the Accessibility cloth, Vienna together so yeah, absolutely I mean again know all the all the libraries, the tools that we have seen. They are not perfect manual show us perfectly how to how to score 100 % with The list with with the worst website possible but yeah if you find the hole The best thing they can do or the best thing you can do – maybe it’s reported and Try to make this tool better, so yeah we need.

We need to use the tools knowing That it could happen and and again, as I said in my slide ultimate test, it’s just One part of the whole testing process, so manual test is very important as well. And I think manual said it in in a talk and Sergei as well the best testing tool That you can do is just is close your eyes and try to use your website with The screen reader, if you’re, able to perform an end-to-end action, you can log In you can purchase you can whatever Pro you’re selling or service, then then can You good yeah, there’s definitely limitations to automated testing, so this Is like a really broad question, but do you find that there’s one tool, that’s Better than another for finding certain issues, not not better but different, Situations so, for example, I use react, acts in the Browser instead of the acts, chrome, chrome, plugin, because I normally have The console log open, so for me it’s not that one is which is totally wrong.

Both Are developed by the same company, but one is better in one situation for Example, just I use testing in the terminal instead of using the CL eyes or The CI, so I prefer to write my own tests than to run PAE them in Y or or acts Directly in the terminal both are going to most likely most likely are going to give Me the same result but yeah I can run tests continuously and and the other one Is their one-time thing so yeah, it’s not it’s again, not not better than the other One, but with their situations Carrie asked well, she stated we captured A lot of the links, but do you have any other resources you want to recommend to The group for yes definitely, I mean a linear project.

Carrie, your your blog literally Scott ohhara Twitter account any any Accessibility guru, let’s say in Twitter, follow them they will. They are Continuously, sharing blog, post and and and tools to use in our development. Process you mentioned manual mitosis, which the His blog is a huge inspiration as well. He has a very cool section, which is Today I learned field section and every day is he posted he posts and heals Anything so my biggest resource is Twitter, follow probably the hashtag 11y And you will find would find a lot yeah.

It’s it’s social Media is really great for for targeting what you want to learn. The hashtag does Anybody else on the call any questions or discussion points for Adrienne Opening it up for people, no, nothing, okay, so I wanted to ask you something: About your music, playlist, Adrienne, okay, you said you liked jazz, but like what Kind of jazz, like comes you up when you’re doing the accessibility testing Like what like really gets you going like what really helps you get into that Groove, because sometimes you know I hate to say this – the testing can be a little Bit arduous and tedious, you know, so what do you recommend and I I just know, not a Specific art disorder – or I mean probably it’s more into the funk part, so Maceo Parker is my probably my favorite, Frank artist, but any just music is very Relaxing to tour with jazz doesn’t funk yeah.

I am not quite there in the jazz World you know I like the funky side of jazz, but some of the other stuff I Either are not cultured enough or I haven’t been exposed to the right. Artists to really have a deep sense of you know, love for the genre yet, but That’s okay: I can get there. Okay, I just want to give everyone else. One more Opportunity for questions or discussion points there’s a big group today, so I’m Just hoping someone has something to say it might be.

My Yeah, go on under you’re welcome to turn your microphone on to Andrew. If you want To do it that way, yeah! I can do that. Can you hear me yeah, okay, great yeah? This is Easier, so I’ve got lots of test suite questions, I’m in the middle of trying to Set up something for my team as full feature is this so when your tests are Failing that you choose to ignore, is that mean your test? Suite is literally Family, because a lot of test suites are gatekeepers for the CI to build.

So how Do you, how do you deal with that or how does that work? Yes, absolutely There’s this is something that you need to talk with your team of course, and so In our team again, this is what you just said: Our tests need to get to pass to continue building, so we have every pull Request that we make to the code, it has a test and the build breaks. We need to Look where is this the the wait break, what he braked – Oh buddy, Proctor, so Sometimes you need to analyze this this test.

We normally have our UX designer Sitting with us – and we need to talk – is this really a usability test? Failure is It an accessibility test failure is the accessibility. How is the level of Severity, so is it a warning, is in an error, is a huge error. Like okay, you have Links with with no ATF, you have images with no alt text. Okay, you need to fix That again, do you have color contrast that is not compliant with a triple-a or Not even double-a, okay, then we need to evaluate it and, if is if we need to in If we decided to ignore it either you delete the test.

Or either you make it past the test I mean, how can I say it like you: can Reduce the severity your tolerance today today to the test. So if you’re looking For errors in the industry, in in this specific test, you’re looking for Warnings so the error will go or the other around the warning will go: okay, That’s really helpful, so you’re you’re not letting a your test suite fail to be Green, you know indefinitely because that’s one Thing that’s important is that we trust the test suite.

So definitely I mean so In making a test with expect through and and passing to is just delete the test Makes no sense. Okay thanks. I really appreciate that good anybody else. Do you have anything else? You want to say Adrienne, one thing is just we need to understand that the Responsibility of web accessibility is not on the developers it has to be in The whole team so from product managers, product owners, you x-ray designers, UI Designers developers testers everyone, it’s not.

The developers needs to think Of everything, and if it’s not accessible, is part of the developments or the Developers fault, no. This is something that, if you, if your product owner Requests a new feature and if the feature is a button who perform an Action then it has to be a button and if it’s a link who goes to a place, then it Needs to be linked, ok, button against link. We talk about a different day, but But we have so HTML provides us with the correct tools.

We don’t need to download. Any polyfill we don’t need to download any library is everything. Is there to be Used so one is use with what you have correctly and again, it’s responsibility. Of everyone, so to argue, do not fight if it’s possible with your designer and say No, I’m not going to delete the outline of our focus only and an argue it Correctly, I will delete the outline only if we put something else or this this Button I want a button that looked like an icon and in small screens look way.

Way less this if it’s possible, because if it’s not possible, let’s look for a Different solution that that the UX, the user experience is not effective, so it’s Something that is is easy, because it is really really easy, because Aria, give you all the opportunity you have so you just need to do it and again Involve everyone in the process, so if you could involve the whole team, but I Prefer it for for your process, because if you have an accessible product, then Is a better product not again the same as they my last sentence, not for Disabled people, for everyone right – those are great words – well enjoy your time in Columbia, I hope you really enjoy the countryside, along with the conference.

And congratulations on your engagement. That’s really exciting! Thank you thanks for coming on today, we really appreciate everyone: who’s, not Thank you for having thank you for having me


 

Categories
Online Marketing

Solving SEO with Headless Chrome (Polymer Summit 2017)

If you manage to pick up on my accent in the last five words, I am indeed Australian and it’s honored to be followed up by Trey, my fellow Aussie, as well prior to joining this team. I’d worked on the beloved chrome dev tools, one of my smallest, but maybe my greatest contribution was adding the ability to rearrange tabs in dev tools, there’s probably the greatest five lines I’ve ever written.

I did work another five other features. So if you find me afterwards feel free to ask me about them, and I might share dev tools trickle to more recently, I’ve had the humbling experience of building web components at all and witnessing all the incredible components that all of you have built and published. For example, the one and only Pokemon selector and if you’re the person who says but there’s a Hanyu, only 151 pokemon in the original set well there’s even an option that lets you set that too, so all kudos to Sammy.

For this, it was, however, in the process of building web components at all, which brings us to what we’re here to talk about today. So, first I’m going to cover my story of how I came to encounter this SEO problem while building web components. Our dog will then look at how I used have less chrome to solve this before diving into all the details of how that actually works and how you can use it. So I’m going to take a step back for a moment and talk about what I learnt in the process of building web components.

A talk. The first thing I learned was how the platform supports encapsulation through the use of web components with this encapsulation comes with inherent code reuse, which leads to a specific architecture. I also learnt about progressive web apps and how they can provide us with fast engaging experiences. I learned how the platform provides api’s such as service workers, to help enable those experiences, as I learned how to compose web components, to build a progressive web.

App we’ve heard from Kevin yesterday about the purple pattern: push render precache lazy load as a method of optimizing delivery of this application to the user and one of the architectures which enables us to utilize. The purple panel is the app shell model. It provides us with instant, reliable performance by using an aggressively cached app shell. You can see that for all the requests which hit our server, we serve the entry point file which we serve regardless of the route.

The client then requests the app shell, which is similar, but because the same URL across the application, we can combine that with a serviceworker to achieve near-instant loading on repeated visits. The shell is then responsible for looking at the actual route that was requested and then request. The necessary resources to render that route. So this point I’d learned how to build a progressive web app using client-side technologies like web components in polymer and how to use patterns such as the purple pan to deliver this application quickly to the user.

Then there’s the elephant in the room SEO for some of these BOTS they’re, basically just running curl with that URL and stop right there, no rendering no JavaScript. So what are we left with with this PWA that we built using the app shell model? We’re left with just your entry point file, which has no information in it at all, and in fact it’s the same generic entry point file that you serve across your entire application.

So this is particularly problematic for web components, which require JavaScript to be executed for them to be useful. This issue applies to all search engine indexes that don’t render JavaScript, but it also applies to the plethora of link rendering BOTS out there. There’s a social BOTS like Facebook and to but don’t forget the enormous number of link renting BOTS such as slack hangouts Gmail, you name it.

So what is it about the app shell model that I’d really like to keep well? For me, this approach pushes our application complexity out to the client. You can see that the server has no understanding of routes. It just serves the entry point file and he has no real understanding of what the user is actually trying to achieve. This allows our server to be significantly decoupled from the front end application, since it now only needs to expose a simple API to read and manipulate data.

The client that we pushed out to the application that we pushed out to the client is then responsible for servicing. This data to the user and mediating user user interactions to manipulate this data, so I asked: can we keep this simple architecture that we know and we love and also solve this SEO use case with zero performance cost? So then we thought what, if we just use headless chrome to render on our behalf, so here’s a breakdown of how that would work.

We have our regular users who are making a request and they would like a cat picture because who wouldn’t and as part of this approach, we ask our robot and to answer this, we look at the user agent string and check if it’s an own bot that Doesn’t render in this case the user can render so we serve the page as we normally would. The server responds with the fetch cat picture function and then the client can go and execute that function to get the rendered result by the way.

This is one of my kittens, which I fostered recently, which is super adorable. Now, when we encounter a boss, we can look at a user agent string and determine that they don’t render, and instead of serving that fetch cat picture function, we fire for a quest to headless Chrome to render this page on our behalf, and then we send the Serialized rendered response back to the bar, so they can see the full contents of the page.

So I built a proof-of-concept of this approach for web components rock and it worked. I wrote a medium post about it, and people really interested in this approach and want to see more of it. So, based on this response, I eventually decided that instead of my hacky solution that I would build it properly but then came the most challenging part of any project and I know you’ve all experienced it as well naming.

So I asked on our team chat for some suggestions and I got a tongue, so these are some of our top ones. There’s some great ones in their power renders use the platform as a renderer. However, today I’m very pleased to introduce render Tron. Let me render that, for you. Brenda Tron is a doc arised, headless, chrome, rendering solution. So that’s a mouthful, so let’s break it down. First off what is docker and why did I use it? Well, no one knows what it means, but it’s provocative in all seriousness.

Docker containers allow you to create lightweight images and standalone executable packages which isolate software from its surrounding environment in render Tron. We have headless chrome packaged up in this container so that you can easily clone and deploy this to wherever you like. So what about headless chrome? It was introduced in chrome, 59 for Linux and Mac chrome 60 for Windows, and it allows chrome to be run in environments which don’t have a UI interface such as a server.

This means that you can now use Chrome as part of any any part of your tool chain. You can use it for automated testing. You can use it for measuring the performance of your application, generating PDFs amongst many other things. Headless chrome itself exposes a really basic JSON API for managing tabs with most of the power coming from the dev tools protocol. All of dev tools is built on top of this protocol.

So it’s a pretty powerful API, and one of the key reasons that headless chrome is great. Is that now we’re bringing the latest and greatest from chrome to ensure that all the latest web platform features are supported with render Truong? This means that net your SEO can now be a first-class environment which is no different, the rest of your users. So just a quick shout out. This all sounds really interesting to you and you would like to include headless chrome in some other way in your to a chain.

There’s a brand new library, node library that was published just last week, that exposes a high level API to control chrome, while also bundling all of chrome inside that node package. So you can check it out on github at google chrome, slash puppeteer, so we’ve looked at the high level of how headless chrome can fit into your application to fulfill your SEO needs now it’s time to dive to how it works.

But I’ve been talking a lot. So, who wants to see render tron in action alright. So this is the hacker news PWA created by some of my awesome colleagues and it’s built using polymer and web components. It loads really fast and all-round performs pretty well. We can see that there’s a separate network requests which loads the main content that we see and we can guess that it’s affected by this SEO problem, since it uses web components which require JavaScript and it pulls the in data asynchronously.

So one quick way to verify this is by disabling JavaScript and refreshing the page, and once we do that, we can see that we still get the app header, since that was in the initial request. But we lose the main content of the page which isn’t good. So we jump over to render Truong the headless chrome service that is meant to render and serialize this for you. So I wrote this UI as a quick way to put in a URL and test the output from render Tron so first off.

What are we hoping to see because these bots only perform one request? We want to see that whole page come back in that one network request. We also want to see that it doesn’t need any JavaScript to do this. So take a look, I’m going to put in the hacker news URL and tell render Tron to render and serialize this and that using web components, and it renders correctly I’m going to disable JavaScript and verify that it still works.

So you can see it’s still there and it all comes back in that single network requests render tron automatically detects. When your PWA has completed loading. It looks at the page load event and ensures that it has fired. But we know that’s a really poor indication of when the page is actually completed. Loading, so Rena Tron also ensures that any async work has been completed and it also looks at your network requests to make sure they’re finished as well.

In total, you have a ten-second rendering budget. This doesn’t mean that it waits 10 seconds, though it’ll finish as soon as your rendering is complete. If this is insufficient for you, you can also fire a custom event which signals to rent Ron that your PWA has completed. Loading serializing web components is tricky because of shadow Dom which it straps away part of the dom tree so to keep things simple.

Rennet ron uses shady Dom, which polyfills shadow Dom this allows render tron to effectively serialize the dom tree so that it can be preserved. In the output, so let’s take a look at the news PWA, which you’ve all seen – and it’s also built by some of my other colleagues and we’ll plug that in to render tron will then ask render tron to render this as well and that I’m also using Web components, and then we have it.

So what do you need to do to enable this behavior with polymer 1? This is super easy and render tron doesn’t actually need to do anything simply append D’Amico’s shady to the URLs that you pass to render Tron and polymer 1 will ensure that shady Dom is used with polymer 2 and with web web components. V1. It’s recommended you use web components, loader jeaious, which pulls in all the right polyfills on different browsers.

You then set a flag to render tron tell it that telling it that you’re using web components, and it will ensure that the necessary polyfills that it needs for serialization get enabled so another feature of render Tron is that it lets you set HTTP status codes, these Status codes are used by indexes as important signals, for example, if he comes across a 404, it’s not going to link to that page, because that will be a really poor search result.

Now server, though, it’s still returning that entry point bar with a status code of 200. Okay, so it looks like every URL exists. Rena-Chan lets you configure that status code from within your PW, a which understands when a page is invalid, simply add meta tags. Dynamically is fine to signal to render on what the status code should be render. Tron will then pick these up and return that status code to the bot, so this approach isn’t specific to polymer or even web components, let’s plug in Fahnestock google.

Com and sees what happens when we serialize it. So that looks pretty good. Who can guess what javascript library was used to build? Google fonts angular render Trond works with any and all client-side technologies that work in Chrome and whose Dom tree can be serialized. The render tron endpoint also features screenshot capabilities, so that you can check that headless, chrome and the load detecting function are performing as you expect.

Unfortunately, this service is not fast for each URL that we render we spin up headless Chrome to render that entire page, so performance is strictly tied to the performance of your PWA. Renat Ron does, however, implement a perfect cache. This means that if we have rendered the same page within a certain cache freshness threshold will serve the cached response instead of rear-ending it again. So how can you get your hands on this today and how do you use it? Well, first, you need to deploy the random tron service to an end.

You’ll need to clone the github repo at Google, Chrome, slash, magnetron, and it’s built primarily for Google cloud. So it’s easy to deploy there. But if you remember this is a darker container, so you can deploy this to anywhere, which supports a docker image. So to make things simple for you to test our. We have the demo service endpoint, which you can hit at render Tron appspot.Com and that’s the one with the UI that we saw earlier.

It is not intended to be used as a production endpoint. However, you are welcome to use it, but we make no guarantees on uptime. Having this as a ready to use service is something we might consider based on the interest receive. So, just in case you’re wondering my boss’s twitter handle is at met, Matt s McNulty, just in case. You want to tell him how awesome I am so once we have that endpoint up you’re going to need to install some middleware in your application to do the user agent splitting that I was talking about earlier.

So this middleware needs to look at the user agent figure out whether or not they can render and if not proxy, the requests through the render tron endpoint, if you’re using purple server, which is a node server designed to serve production applications using purple. You simply need to specify the bot proxy option and provide it with your rennet on endpoint, if you’re using Express, there’s a middleware that you can include directly by saying app, don’t use render on top make middleware with the proxy endpoint and whether or not you’re using Web components, if you’re not using either of these check the docs for a list of community maintained bit aware, there’s a firebase function there, as well as a list of existing middleware that render China is compatible with.

If it’s not listed, it’s also fairly simple to roll. Your own middleware by simply proxying based on the user agent string, and that’s it, that’s all the changes you need to make to use, render tron today and all these bots can now be happy. Brenda Tron is available to use today compatible with any client-side technologies, including both polymer 1 and polymer 2. Thank you.


 

Categories
Online Marketing

Web Accessibility: A Catalyst to Greatness #a11yMTL

So what we’re here to talk about today is A catalyst to greatness and accessibility. So, first of all, I want to start out with a little visual description. For those of you who can’t see I’m female and I’m wearing a shirt with Braille across the front across the chest And the translation of the Braille is If you can read this you’re too close [ laughter, ], Yeah yeah, So just a little visual description there.

So what we’re going to talk about is how you Can be great in usability user experience how you can be great in mobile design, how You can be great in innovation on the web. There’s a key to this and That key is accessibility, So we’re going to talk about how accessibility, Contributes to greatness in all these areas. Accessibility is really about user experience. It’s about adaptability, it’s about flexibility and we’re going to talk about That but, first of all a story Back in 1999, which seemed ages ago.

Now some of us started a small company And it was a usability company. We designed the website with A focus on accessibility, so it had to be highly accessible. We didn’t even think about accessing This website on a phone back, then We didn’t think about it, But then the founder of the company. She got one Of those new fangled phones that you can look at a web page on a screen, A little screen, okay, This is a big deal back then.

So, what’s the first website, she Went to look at on her new phone, Our company’s website It worked beautifully. This was before anyone knew Anything about website design, but just the fact that we had Designed it to be highly accessible and we’d, followed some basic accessibility, Principles meant that it was adaptable and flexible enough to be used on This rudimentary mobile browser, and that’s just because of accessibility, So a lot of what we do even today, For accessibility directly relates to what we need to do for mobile design, So a little bit more history.

How many of you have heard Of progressive enhancement, Okay, most Half the people, So progressive enhancement, Was coined around 2003? I — the name that pops into my head is Jeremy Keith’cause, he talked a lot about it, but I actually did some research And found it was coined before then, But progressive enhancement came around as People were designing advanced web applications to take advantage of the latest technologies.

And then were finding it wasn’t working well on older devices, older browsers, Older software et cetera, So the idea behind progressive enhancement was To start at the very basic make sure that say, your web application can be used. In older environments and then to progressively add enhancements, If the web application or the website is being used, In more advanced technology, So that was progressive enhancement of 2003.

Then in 2010 the idea of responsive Web design was coined, I think, by Ethan Marcotte in A List Apart, article And responsive web design is about Designing your website or web application so that it can respond to The device you’re using you’re looking at and on you’re using it with So whether I’m looking at a big desktop Or a small little phone that it will work and that’s responsive web design. I assume you’ve heard a lot about that Now, there’s something that Predates this by quite a bit In 1999, a similar idea came Out way before that, Anyone have any idea what that might be.

That’s the idea of transforming gracefully. So, in 1999 the web content accessibility, Guidelines talked about transforming gracefully, and that was again the idea. That we have the content that can transform no matter how it’s used So, whether it’s on a small device, whether it’s In a big device, whether it’s older technology, whether it’s newer technology, whether it’s Through a screen reader by a user who is blind, whether it’s in large magnification, however It is designed it will transform gracefully.

So the point in here is that These ideas aren’t new, We’ve been talking about those In accessibility for a long time, And when you start to think about Accessibility early, it can lead to a lot of these developments for what we’re talking. About now, for example, mobile web design, So if you want to be great, if you want To be great, get accessibility right And you may be hesitant and you Should be and I’ll tell you why It’s because you really need a Crack [ phonetic, ] accessibility.

You know that word. It means really understand. It really be one with it really understand the concept of accessibility, So that’s kind of the key to the key And I’m going to tell you a little bit about how that’s different than you May think of accessibility right now, So what I want to talk about is understanding. Accessibility differently totally differently than many people address accessibility.

A lot of people came to accessibility because They were forced to meet some standards or some regulations, so the web content Accessibility guidelines came out in 1999, although a lot of people didn’t directly Paid attention to them in the US, Then, when Section 508 came along all Of a sudden, this was a checklist. You had to pass the accessibility and there’s Been other regulations around the world where people then started approaching Accessibility as this thing, I need to do afterwards at the end of my Project I need to pass this checklist, But that’s not the right way to think About accessibility, so I’d like for you to change your mindset about accessibility, And we’ll talk a little bit about that As mentioned, I do work for the W3C the World Wide Web Consortium, and that is the organization that defines the Standards for the web, so html CSS et cetera.

We have a web accessibility initiative. That develops specific standards and guidelines for accessibility. So, given this is my employment, you Would probably assume I would say, step 1, the most important thing for accessibility, Is to know those standards and guidelines, But I don’t, even though that’s my Employment, that’s not the number one thing: If you just start out with the standards. And guidelines, it’s overwhelming You’ll be like a deer in the highlights right.

It’s too much, That’s not the place to start. Instead, the place to start is understanding. The basics of how people actually use the web: It’s not about standards. It’s about people, specifically people with Different disabilities and how they use web – That’s the number 1 thing and the Most important and the basic thing So, for example, I want to tell You about some people that some friends of mine that use the web One is Glenda.

I first got to know: Glenda Just from mailing list archive She was on a couple of similar mailing — Same mailing list that I was on, And I was just really impressed by how Articulate she was how clear how level headed when the conversation got kind. Of uncomfortable, sometimes she was always just clear and Not getting into the fray Really impressed with Glenda! Well, it wasn’t until years later that I Found out that Glenda has cerebral palsy, [ mumbling ], So that’s how she talks so Actually, interacting with Glenda face to face is much more difficult, but because Of accessible technology, she can contribute to this — the work just like anyone.

She has a blog. She is called the left thumb. Blogger, Because she also has limited motor control and she just types with one thumb. She slides her hand along the keyboard And there’s a article on there on YouTube. I think if you want to check that out, So Glenda is one of the people that we Need to focus on when we’re thinking about — thinking differently about accessibility, Another person who also has motor Impairment is a friend of mine named Carl and Carl lost use of his arms From polio from post polio, So he doesn’t use his arms at all.

He uses a mouth stick to type, So it’s just a dowel with a wooden tip at the End and his typing looks something like this [ Pause ]. He can type pretty fast. I don’t know what his words per minute are. He is also –. He can also Talk while he types as well, So we need to make sure that our Applications work for people like Carl. This is John Slatin John started losing his sight when he was middle Aged and eventually went all the way blind John was a professor English.

Professor at University of Texas, He embraced technology as a way for — in the Web –, as a way for anyone to communicate And John developed, leukemia And John needed to go to do research on Treatment options and what he found was that many of the websites That provided information on treatment for leukemia were inaccessible. He couldn’t get that information, So John is trying to make life decisions.

Life or death decisions literally, but the information is not accessible to Him and we need to make sure that all of our web applications website Is accessible to people like John He –, So people who are blind use screen readers That read aloud the information on the screen. I hope most of you have heard screen readers and Readed someone interact with screen readers. I won’t take the time to do that now.

But if you haven’t that’s top priority, Do it this really will help Change your thinking, Here’s another friend of mine, His name is John as well And John was born blind and he Started going deaf around age 8 All right, So he can’t use a screen reader. How does he interact with a computer Braille exactly? He has a dynamic Braille Display they are so cool, He has this rollup pins and it pops up and provides the Braille — The output from the computer, So that’s actually how John and I communicate.

We just have his notepad up and I’ll type on a Regular keyboard and he can read it in Braille and then he’ll type back in notepad And I can read it in notepad Because of accessible technology. John was Able to graduate top second in his class in Mathematics go on to get a master’s degree. In computer science and electrical engineering, So we need to make sure that all of our Work is accessible to people like John Now, one of the important things Is to be careful not to focus just on screen reader access and People who are blind So, for example, –, oh, you know I started out.

Talking about people with motor impairments, that was on purpose people who Have difficulty using their arms or such to interact with a computer? When we talk about visual disabilities, we Also need to be aware that a small percentage of the people with visual Disabilities are blind, A large percent are –, have low vision. So, for example, I have optic neuritis, It’s remitting, — remission — and comes and goes And a lot of times when I look at the screen, it looks something like this Which is the normal sized text? It is really too blurry to read, but The larger sized text is readable, So I usually use 120 150 percent Zoom in a browser and set up that way, But some people need more Significant screen magnification, So here’s an example of someone with Very significant screen magnification Okay, So they can only see Part of the screen at a time It has some overlap with, say, mobile design, where you can only see part Of the screen at the time, So again it’s really important when we’re Talking about even visual disabilities to realize a huge variation in user needs.

This is Tim Creagan. He is at the US. Access Board – and he is hard of hearing. This is another thing, that’s very important If you have audio on the web, whether It’s a article or a podcast or whatever, and you don’t have transcript or captions. That information is totally Inaccessible to a person who is deaf, A person who is deaf cannot get any Of that information in an audio, So if you’re not providing a text, Description, you are discriminating against those people who can’t hear Another very important thing to consider.

Another thing is this: — I’ve worked With a high school student named Sarah, who is going into a college program, Looking at her, you would not Assume she has a disability, but she actually has a fairly Significant visual processing disability. So when she reads text, she can’t understand it. So she uses a screen reader’cause when She hears text or she you know hears, she can process information, just fine.

She can see just fine, but she just can’t Process the information that she sees as well, So she uses a screen reader People with different cognitive disabilities. Are another group that we need to consider So if we think about all this, we think about People with auditory cognitive, neurological, physical speech, visual disabilities, you See how we can really open up our thinking. So if we think not about the checklist, not About the guidelines and the requirements, but who are we really designing for Who are the people? What are the issues? What are we really designing for? So this is to approach web design differently.

It’s a different approach to web design. Now, if you have a smartphone in your Pocket most of the technology developed for that smartphone came from Innovations for people with disabilities, So even the very basis of a phone — of the Phone comes from developments to accommodate and to help people with different disabilities. Elle Waters will do a presentation later. Where she’s going to talk some more about this, so I won’t go into the many many examples.

Of how something that was developed for a person, sometimes or People with disabilities is now in the mainstream technology. That you have in your pocket, But the idea is that thinking Differently leads to innovation When you’re thinking about all different people, On different situations, it really lead you to think differently and Innovate in new and unique ways, So how do you do that? How do you think differently? How do you consider all these people Any ideas You meet with them? Exactly you meet with them.

You can do very informal meetings. You can do more formal processes So, for example, a user-centered Design or user experience or usability has very specific Processes and techniques that you can use to understand how people use the web ISO has a definition of usability. Anyone know that You don’t have to repeat It but yeah yeah someone Yeah yeah, okay, So it’s the extent to which a Product can be used by specified users to achieve specified goals.

Effectively, efficiently and with satisfaction in a Specialized context of use, So that’s the definition of usability in ISO Now this is achieved through A user-centered design process How many people have heard of — know Basics of user-centered design process About half About half, So here’s the summary UCD is the user interface design. Process that focuses on usability goals, user characteristics, environment, Task and workflow It follows a series of well-defined methods and Techniques for analysis, design and evaluation.

It’s an iterative process with Steps built in from the first stage of projects through implementation, So the idea is that you can Follow user-centered design to understand accessibility, Understand how people use the web Now when we look at that definition, we looked at Earlier the ISO definition of usability. Look if we pick out a few words, so It says “ Use by specific users,.” And all you have to do – is Make sure your definition of those specific users includes People with disabilities, people with a wide range of abilities And then it says, “ In a specified Context of use.

”, So that’s making sure that the context of Use is broad that it includes, for example, assistive technologies like screen readers, And screen magnification et cetera. So if you know any usability specialists Or user-experienced professionals, this should be right up their alley. Now some people are onboard and some People have yet to see the light If you’re a developer and you Want to go beyond the checklists, follow usability principles will help — and Methods and techniques will help you with that.

So if you want to learn more About this, the W3C WAI has some information called Involving users in web projects for better easier accessibility – And this is mostly geared towards developers, Designers developers not particularly Usability specialist, but just you know you said, observe people This talks about finding people and Observing them talking to them, So that’s some basic information. Now, if you know someone who is usability, Specialist or really wants to get involved with this I’ve written a book called “.

Just Ask Integrating Accessibility Throughout Design,.” And the whole thing is online free, So it’s available from uiaccess.Com/justask. So it’s uiaccess.Com/justask And that’s all about –. It’s primarily Geared towards usability professionals, but the beginning is the basics. That you can implement, even if you’re not doing full User-Centered design process, If you’re interested in getting a print copy for those who are here, we Have a discount in November! So from that website you Just enter a11ymtl.

Html and you can get a discounted Version if you want to print a copy, But the whole thing is online for free as it is So that’s another resource We’re going to look at a few Other resources that we have from the W3C WAI on designing for inclusion. We have an extensive document on how People with disabilities use the web. It has several different Sections one it talks about just like the user stories to Help bring those to life.

There is a section on the Technology that people use There’s a section on what are the accessibility, Requirements of websites and web tools, So I encourage you to take a look at How people with disabilities use the web? We have another resource called Web accessibility and older people on meeting the needs of aging web users, So we had a three-year project that Was a European Commission-funded project to look at designing for older users And what we found at the end of that Three-Year project was that indeed, it’s a one-on-one overlap with Designing for accessibility, So we already know how to Design for accessibility And what we found is it’s the same issues.

If you’re designing for older users, because older users have a range of issues, Let’s do a little exercise to that and Give you a chance to stretch your feet So I’d like everyone to stand up. [ Pause, ], Okay. So what I’d like is for you to pick One of the gray figures on the screen, So on the screen we have a representation. Of the percentage of people with disabilities, This is in the age group, 18-24 years, okay And it’s 9.

5 percent. So pick one of the gray figures We’re going to go through aging And if your figure turns Color have a seat okay, So this is 25 to 34 years 10. Percent and we lost 2 3 people there. This is 34 to 44, 14.4 percent, 45 to 54, 21.2 percent 55 to 64 at 34 percent, So more people dropping 65 to 74, it’s 42.3 percent 75 and over 64 percent Now look around the room. We have less than 64 percent, We have four people standing, So those of you who are standing Unfortunately, this isn’t the true predictor of real life, so I can’t guarantee That you’re going to make it without Thanks, you can have a seat, But the point is, most of us will live to 75 and Most of us will acquire significant disability.

Minor disability at first may be from Declining eyesight from declining dexterity from declining hearing all These — cognitive disabilities – All these are significant. This can start out small. It can get really annoying And but can be much more of an impact. On how people use your web products Designing for people, older users is becoming More and more important and more and more of a focus of both government and Industry and on profits and everyone, This is focused on meeting the User — needs of older users And, if –, in order to do that, you can look At what we already know about accessibility, So that’s the –.

We have resource on that. We have another resource on web Content, accessibility and mobile web, So I’ve mentioned some just Briefly, the overlaps, but we have a specific document on that overlap. Now this talks about how the standards And best practices overlap between the two, So I just said that word standards, Even though at the beginning I said that The standards are not the first place and not the most — the first place to go.

They do play an important role, So I still say that the first Step is to understand the basics, But maybe around step 3 is to start Looking at the standards and guidelines and then probably again, maybe at Step 7 or somewhere around there, So they do have an important role. One other reason is there’s no way you Can fully incorporate enough people and enough variety in your design process. So, even if you have a huge budget and a Huge amount of time, there’s so much variety in people in how we use the web and how People with disabilities use the web that you won’t be able to cover it all, And the standards and guidelines do that.

For you, they consider this wide-range, So I’m not going to go into detail on these. I’m just going to make sure you know. What’s There and then hopefully you can –. If there’s any questions, we can Follow up with that afterwards, So again, the W3C defines its standards. For the web and the ones we have for accessibility are an integrated set, So you may have heard of WCAG or the Web. Content Accessibility, Guidelines that applies to websites that applies to web applications.

That applies to mobile applications. Everything Then another aspect of the Guidelines is that users use browsers and other technologies to access the web, And we have guidelines for those called The User Agent Accessibility Guidelines – Another one – is the Authoring Tool: Accessibility, Guidelines and that talks about what the tools that we use to design web content Need to do to support accessibility.

These are built on the technical Specifications from the W3C, We also have some specifically for Accessibility, such as the WAI-ARIA for Accessible, Rich Internet Applications and Indie UI, which is Independent User Interface, and that talks about how to Communicate a user action to an application, no matter how the user did It so whether they scrolled with a gesture whether they used a mouse, whether They used voice input, however, Okay, so just a brief introduction.

Also A note that WCAG 2 is now an ISO standard. So if you’re working on WCAG 2, now you can Say you’re also working on an ISO standard. It’s exactly the same. The same text, It’s just adopted now as ISO/IEC 4500. Again, if you have any questions I’ll Be around at the break and afterwards, So I just want to reiterate that Accessibility is about designing your website so that more people can use it.

Effectively in more situations, It’s much more broad than just Focusing on people with disabilities, that’s the most important aspect that we Focus on but the benefits are far reaching. So if you understand accessibility differently, It’s not about a checklist to do at the end, but it’s a fundamentally different Way of thinking about your web design and your web development It’s not about the checklist, If you understand accessibility differently.

You will approach web design differently And an interesting article from A List, Apart several years ago by John Allsopp, is called The “ Dao of Web Design.”, He says “, Firstly, think about what Your pages do not what they look like Make pages that are adaptable. The journey begins with letting go Of control and becoming flexible.”. So when you change your way of thinking, You’ll understand, accessibility differently, you approach web design differently, and this is A catalyst to greatness greatness in usability and user experience for a wide range of Users, whether it’s on the mobile platform, whether it’s because they are older, it’s All these things that you want to do better at you can learn from understanding Accessibility, So I encourage you to approach Accessibility as a catalyst to greatness – and I thank you for your time – [ Applause & Music, ],


 

Categories
Online Marketing

Hitchhikers Guide to Web Standards

This is my first time using a clicker, so bear with me here. The talk is called Hitchhiker’s Guide to web standards and to kick things off, I’d like to introduce myself, my name is DOM fairly. No, yes, I’m named after the platform that we all know and love, I’m a senior at the University of Cincinnati in Ohio, and previously I’ve held internships at Microsoft and Mozilla working out in Firefox, and I’m going to be doing a final internship at Google in Japan.

Actually, working on chromium in the web platform, so currently I’m a chromium committer, which is basically fancy speak for someone who has write access and you can approve certain stuff and I’m also what working group standards editor. So if you don’t know what that last one is, that’s that’s primarily we’re going to be talking about. Today. I said from that you can follow me on Twitter and check out my work on github and feel free to email.

Me anytime. You know, during or after the talk, Dom a crummy org, there’s any questions about getting involved in the web platform at web standards and browsers stuff in general. So I want to talk about what this talk actually is. I kind of have three overarching goals that I wanted to reach when working on this talk and the first one is just provide a background in history and to web standards and some of the organizations that are responsible for their governance and their authorship.

This could really be an its own talk, but I know we didn’t come here for a history lesson, so I’m just going to give a brief, a brief history on this to kind of set the stage. Next I want to talk about. You know as a web developer, how can you actually make use of a web standard right? A lot of us go to mdn or Google some API and figure out how it works. But I kind of want to talk about the technical bits of web standards and show how you can make use of them and how to read them and how to navigate that space.

Finally, I want to talk about how you can get involved. I want to share a bit about my own story of getting involved with web standards and working on the web platform and hopefully encourage some of you to do the same so to kind of set the stage for the talk I’d like to propose. You know the idea that we need a definition of a standard. Now largely this depends on context. If we’re going to define you know a new word, and so I’d like to propose my own definition for the purposes of this talk, it’s a little bit wordy so bear with me a document specifying observable effects of technology with multiple independent implementations.

Now it’s kind of wordy, like I said so, let’s just focus on some key points right we care about the observable effects of technology. What are the side effects of it? How if I run something, what does it do, how does it look and feel? How can I actually use it, and, and does it change depending on you know where I’m where I’m using it from, and this last part is multiple independent implementations technology with multiple independent implementations? I think this is really important and it’s it’s far from a new concept.

In technology you know, we’ve seen this with like UNIX operating systems, for example, I can kind of make my own version of you know my own of Linux distribution. You can have your own Linux, distribution and, and you get one and you get one and everybody can have their own. You know separate distribution with sugar on top of it, but what I really care about as a desktop app developer. If I were one is you know, can I write an application that works once everywhere and no matter what operating system I’m using for you know, that’s in the UNIX family of os is that it’s going to work uniformly so to kind of make that environment conducive To that you know: interoperable behavior among the different operating systems we’ve had the set of plastic standards developed to kind of unify this observable behavior.

The same thing goes for web tech, and this is primarily what I’m going to talk about today. Those these are not actually to scale, though, but I happen to know for a fact that you can’t go to the store and you buy one HTTP. You know it’s a protocol, it’s just it’s just an idea and it’s something that you can implement to kind of make it compatible with other versions of this. This protocol and the same basically goes for JavaScript as well right.

We can run JavaScript in a bunch of different places, unlike maybe Python, it’s kind of like we have one Python. We get from the Python people and that’s kind of it, but with JavaScript I can run it in chrome. I can run it in an edge on the chakra engine and I can run it a node in all kinds of different places and the same goes for kind of the star of the talk today, which is the web platform API.

So I’ve gone through a career change, I’m now no longer a UNIX app developer, but I’m a web developer. And so I need to know that the same api’s that exists in chrome also we’re going to be there in Firefox and, more importantly, that they’re all going to work the same and kind of function uniformly. That’s really important, probably the biggest thing I learned when making this slide is, though, that keynote is really cool and has a bunch of different goofy symbols that you can use.

So I thought that that little dude look like a face, so I dressed him up getting some underwear and a hat and stuff like that. So let’s talk about where web api’s come from right. This is important. We are. We are web developers and we kind of want know where the stuff comes from and how we can make more of them. I personally think the logical answer probably is JavaScript right. We use Web API when we’re using JavaScript.

For example, here’s a snapshot of the chrome dev tools and when I’m you know right, I can write things like a for loop and a while loop, but I can also fetch you know super prominent websites on the internet like that one and I can use set Timeout and all kinds of stuff like that, so it stands the reason that this kind of stuff is part of the language. Now we have to talk about what is the language or what does JavaScript I’m just going to fly through this slide, because we all know the big story of Brendan Eich and he created it in 10 days and whatever, but it’s just a general-purpose programming language.

That is created for the purposes of the web. I was plopped into netscape 2.0 and that made it a really interesting thing. It made it a candidate for Standardization because there was going to be multiple independent implementations of it, and so we needed some group that could come by and pick up. The task of standardizing and Ekman did this. They stand for the European computer Manufacturers Association and they created ACMA script and we’ve had some success with this with the various engines.

For example, there’s a bunch of different implementations of the same sort of technology, and you probably have seen this list or something similar to it before the standard looks something like this. It’s really big, it’s really hard to read, but it’s on github and it’s hosted under the tc39 s. Github page tc39 just stands for technical committee 39. So when we’re writing the standard writing atma script, how does it work right? What are we going to put in the standard we’re making a new language, so we have to make them make it really general.

So we need a really strict separation of concerns between all the contents in the standards in the standard. We just need to be dealing with the language syntax in the semantics and then some of the constructs and the primitives and that’s the true scripting language. It should be able to be plopped into any host environment, but the language itself shouldn’t actually have to know anything explicit about that environment.

Now we’re really used to using that language in a web browser, so we’re used to web api’s and stuff like that, but the language itself doesn’t actually know about those things. So web apos are not part of the ACMA script language or the jour JavaScript language they’re. Effectively, mix-ins and they’re baked into browsers and browsers, can support, basically, a version of echo script as their JavaScript engine and a bunch of web api is that we can use that kind of tag along alongside this version.

Rackham script, that kind of interplay with it, and so we have hakama right there responsible for and tc39 are responsible for standardizing ACMA script and javascript that we all know and love so who’s responsible for standardizing the web api. So we’ve kind of heard a little bit about this today from some of the talks. There’s two big groups right now that are responsible for this primarily you’ve, probably seen at least one of these logos before we have the w3c and the what working group and the what working group denoted by the question mark on the right is what I’m going to Be talking about primarily today, this is the organization.

I told you all that I was a part of at the beginning. So the what working group stands, it’s just an acronym. Unfortunately, so it stands for a long string of text that kind of summarizes what we do. It was formed in 2004 after a w3c workshop. Basically, they decided to kind of branch off from the w3c and create their own canonical standards that specified the web platform. So they have an HTML standard, which kind of defines HTML language and the parser and the event loop and a lot of the it’s.

Basically, the kitchen sink of the web platform is actually what it calls itself to, and they have. You know they specified the Dom API is the interface that we use to talk to the web and and some networking primitives like fetch and streams, and a lot of really cool things like notifications and primitives. But how are these things actually written right if we’re going to write a browser and we want to write ACMA script? You know we start with the JavaScript engine.

Okay. Now, if we read the ACMA scripts back, there’s a lot of stuff in there, but there’s also a bunch of exposed objects that would get for free and JavaScript. We get things like the array, constructor and you know date, objects and week, maps and all kinds of data structures that are natively exposed through ACMA scripts, but we want our browser to be a little more powerful. You know we want it to have me the Dom.

So we give it, you know a document object. We can add a couple more paragraphs onto the end and give it a query. Selector method and we’ve kind of extended our language a little bit more, the documents getting bigger, but it’s getting more powerful. So we also would love to to you know, contact the network as well, so we’ll give it some networking primitives things like fetch things like request and it’d, be really cool.

If we could do ourselves a good service and debug our code, so we’ll maybe give it a console object as well a bunch of methods. On top of that, this is one way to write. It just keep appending text onto the same to the same massive documents, but it’s going to get pretty lengthy and unmaintainable. So the what working group maintains separate standards for each of these kind of ideas that have a separation of concerns and each standard is responsible for talking about how they enter leave with the other specifications and the web as well as that can script and things like That and as a result, we get web api is alongside ACMA script and java script.

Now, if we want to read these web api’s as web developers as web developers, we want to make use of them. We need to kind of know the anatomy of a standard. We need to know what is actually in these documents, because it’s kind of a mystical thing in mystical process and and it’s actually really – you know not too difficult to get involved and it’s it’s all very open and happening right under right under our noses.

So I was thinking about this a lot for this talk, and I kind of came to the conclusion that there are two big parts of standards to kind of be aware of. The first is algorithms, so I don’t know about you guys. I love algorithms spend many. An evening as it were working on leet code and hacker ranked stuff – and I really like algorithms and data structures stuff, I think that kind of theory of computation is really really cool.

Algorithms are really just a set of steps to perform a task. So let’s go ahead and take a look at an algorithm inside a web standard right. We have the console standard and there’s a bunch of different methods on there. If you haven’t heard of it, there’s one called console dot count and here’s the algorithm specified in the standard. There’s five steps that run every time you invoke console dot, count, there’s a couple that we really care about.

For the purposes of this talk, though, you can see we’re given something called a label, and basically the idea of this algorithm is, if we’ve seen this label before, when we’ve called this in this function, then you know increment some number that we have that we have Associated with label, otherwise we can set it to one. This is the algorithm and then eventually we want to just print it to the screen.

This logger thing is just abstract text for saying, hey browser, you know show this to the user in whatever way you see fit. This is nice because I kiss a web developer. I could come in here check out the algorithm and it answers a couple questions for me. Like you know, what is the initial value of the number that is associated with a label and what happens every time? I call it and what can I expect, and so we can read the algorithm and kind of understand what’s going on now.

The second important thing about specifying and using web api is understanding the look in the so I think that’s really important. What’s it mean for an API to have a look and feel so I thought of this, and I think it’s kind of like you know: what’s it mean to to use the API as a developer? What’s it called? Where is it hanging off of some other object? Is it just globally exposed? Does it take anything? These are you know a bunch of parameters? How many parameters does it return? Anything? This stuff is really important for us to know, and a lot of us here are used to going to mdn and then maybe googling.

This kind of stuff to find it, but I also want to show that you can just go to the standard. So here’s another part of the console standard that the what working group maintains it’s a big scary block of text. But let’s focus on the bit. That’s complementary to what we were talking about before the count method, so we have this right. This kind of can tell you a little bit about it right, okay, so it’s called count.

It exists under the console, namespace, so console that count that kind of make sense. How I would use it it’s of type void, so I probably shouldn’t expect to get anything from it, just not going to really return anything, but I might do stuff and it takes in a single parameter called label it’s optional and its type is Dom string. So we don’t know what Dom string is right now, but let’s just assume it’s just a regular string.

That gives us some some cool information. It’s pretty expressive, but it’s not JavaScript, because we care about types and and it’s not C++, because we see other invalid things going on around here. So what exactly is this language? It’s called web IDL in a sense for web interface. Definition, language and you’ll see it in a lot of specifications and it kind of forms a contract for this. Basically, the signature of web api is that you use and that contract protects the algorithm, because when I go into the algorithm and I’m running these steps, I want to be able to know what label is I need to you know, maybe I’m making some assumptions that It’s a string and I’m operating it on on that accordingly, and that’s really important for me to know – and so I want to talk about how web IDL actually works in practice.

Okay, so you’re a while ejs dev, you got your Viking hat on and you really care about types right, so you’re going to call you’re going to mash in your keyboard and called console count and you’re going to just give it whatever you want. You can give it a symbol right, you can give it an object, seeing it whatever, but the second you do that the web IDL Sheriff is going to stick in it’s going to come in and it’s basically going to be like hold up.

Hold up, hold up. Hold up, you called console dot count and you could give it whatever you want right symbol if you wanted to be so inclined to do so, you give it a number whatever, but I’m going to make sure that you know this contract is obeyed, I’m expecting a Dom string and I’m going to make sure that whatever you give me can pass as a Dom string and if it does that’s cool, we go to the algorithm, continue with a hopefully successful call and and keep going, but just like a sheriff can throw someone in Jail, the web, buddy el sheriff so to speak, can throw a type error, resulting you in with you in code jail, it’s probably the worst place to be right, you’re staring at the terminal or sorry the dev tools, and you got all this red scary text around You don’t know what’s going on, so we want to stay away from that now.

Real sheriffs in the real world know who to arrest who not to arrest stuff like that. That’s that’s really important something part of their job, so they kind of basically have a rule book of things to follow here and just like they’re the real sheriffs of a rule book the web, IDL sheriff has a rule book in the form of the web. Idl standard and it basically defines a lot of the stuff that that it’s supposed to be enforcing, so we saw an example of conversion.

Here’s a snippet from the web IDL standard that basically is responsible for converting a Tekamah script value to what is called a Dom string, something that the web IDL has defined. Basically, the meat of this algorithm is just to kind of delegate to step two and call this two string thing. This is an abstract operation defined in the ACMA script standard, so we’re just kind of passing through right to the ActionScript spec, and we could of course, write to string everywhere we needed to instead of using web IDL but yeah.

This is really nice, because it’s pretty expressive, it tells us tells us how things should work in a really normative clear way, and if your techs are algorithms, when I get to here, I can know that I’m working on a string and that things have been accepted And the sheriff is okay with it. So why are we using this thing called web IDL anyways right? What exactly is it? So it’s it’s just an abstraction of arachno script text, as you saw all step two was we just kind of delegate to the echo script standard? It’s two string thing.

It does a lot of things for us, so it helps us write a lot with just a few words. Potentially, it takes care of a lot of like type conversions. We saw a really simple example of a type conversion, but you can imagine, perhaps potentially a much more complicated one and we would want to repeat all those steps to you know. It’s convert things and then kind of make our assumptions everywhere, where you need it to.

In the spec, so we can use web be able to kind of just abstract that stuff away. It also takes care of things like property initialization for us and other stuff, like that. It also helps us define where our interfaces are exposed in a really expressive way. It like we like we saw, but I think the most important thing about web IDL personally, is that you don’t actually have to use it. It’s as line1 suggests just an abstraction over action scripts over the ACMA script text and that’s really important, because we have some standards that are written without web IDL and that’s totally valid.

It just kind of speaks within the same language of the echo script. A standard space in that uses the same verbage and the same sort of stuff, but web by DL is just a nice way to be succinct and kind of foster interoperability on the platform, so you can always feel free to you know, hopefully that that little foray Into web by DL makes you a little bit more comfortable reading some of the standards that they that they come with in.

So. Finally, I want to talk about how I got involved in this and how and how you can do the same and hopefully motivate you to do the same as well. So who knows this logo? Let’s it raise show of hands right, hey a lot of people cool, so this is the angular logo, this flat designer believe this is new since angular 2 and basically, a couple years ago, I was like yeah, I’m going to start like giving more stuff with web Applications so I better learn a big heavy framework that can bog me down and figure out how to write all this stuff, and so angular 2 at the time was an alpha.

There’s a basically mess right. Things were always moving around and I would always hear people say yeah, you know, angular angular is getting uh, you know a new, router or angular is getting a new object or new this kind of stuff, and it was really easy to track the progress of this. It was happening on github. I knew some of the people working on it, so you could always just kind of dig around. At the same time, I heard another camp of people kind of talking about JavaScript there they were saying you know, hey javascript is getting.

You know async iterators or you know, did you know about custom elements? Can you figure out how to use this, and I was like? Well, that’s interesting, cuz! That’s not really angular specific, so I was really interested in digging around figuring out who’s deciding this stuff because, like like, how does this work? I want kind of wan na be a part of it seems pretty cool we’re evolving the platform.

So eventually it came across this guy’s profile. His name is Dominic Nicola and I just learned recently that he was actually a speaker at the first Cascadia j/s in 2012. It’s true that we both have the same name, that’s pretty cool, and so I reached out to him. I was like hey. I see you, you know you’re working on, you know the what working groups bit standards and all a lot of stuff like that big contributor to the tc39 proposals, and so I had reached out.

I was like hey. What do you do really, and how can I do it? It seems kind of cool. Are you actually paid to work on this stuff? It’s it’s pretty cool, and so he was basically like hey. You know. We both have the same name, we’re both Dom’s right and then working on the platform. So I’ll. Let you in on some secrets and the biggest the biggest piece of advice here, is probably to dig around on some of the what working group standards and actually just take a look at some issues.

There’s a lot of issue labels that the issues are kind of fixed if one of them is good first issue and basically, as the name implies, they are good first issues for people to get involved in and a lot of them are low-hanging fruit or some of Them are editorial in nature that you can just kind of go in and dig around in a web standard and figure out how to work with them. I want to cut away, though, from keynote and probably screw a lot of things that up in the process, but let’s see if I can just show what the what working groups page looks like hey.

Do we have it? Yes, okay. Now, if I can figure out where my mouse is, I would also be cool one. Second, all right cool. So so here’s here’s the what working groups github page, basically just to kind of show you you know it’s all open. It’s all happening right in front of you and it’s a very welcoming area you’re allowed inside. Basically, this is this was basically just a list of all the specifications that we maintains giant list of the HTML standard, the fetch standard and stuff like that, and so we can always just go to the one of these repositories and see what’s inside right.

There must be some sort of source code that the standard is you know existent and that it’s written in and a lot of times. This will take form in a take in the form of a BS file. So bs does not stand for we’re. Actually, very serious people here we’re working on standards right we’re on the platform so bs, since our bike shed and it’s basically this language that we kind of mix in with with HTML and pre process.

Before we build a standard kind of helps us with cross-linking and some other fancy things, it’s pretty easy to get the hang of. We could check out the source they’re, all the standards exist at spec or you know something dot, spec org and basically they look like this they’re, the ones with the green logos that the browser is actually trust, and so we go in yeah. We can check out the standard, all kinds of stuff like that and, more importantly, if you’re looking to get involved, you can go under the issues section here and we have a bunch of different labels that we use.

That’s not where I’d want to go so yeah. If we want to check out these issues, this, for example, this is the fetch standard. Where things like the fetch, your method exist and the request, object and stuff. We could go in and try to find the good first issues. You’re like oh yeah. This is really cool right. I can, I can dig around here and maybe help out on some issues, and so now we’re kind of on to evolving the web platform right.

We’re working with a standards body to help fix some of the problems that they’ve identified and the platform is so. This kind of this kind of goes back to interfacing with the community and the community groups online. So I want to talk a little bit about this when dealing with the what working group there’s a bunch of different ways to communicate with us we’re always on get up. Of course you can.

You know chime in on an issue and be like hey. I really want to work on this. This this looks really cool. I think it’s interesting. We’re always super super happy to provide mentoring, mentorship for people that are looking to get involved, also we’re on the really big bad scary place that is IRC we’re in the free. No under free node on the web working group blog, I’m always logged in a lot of us a lot of the others always logged in so always available to you also help with questions and stuff like that.

There’s a lot of information here that have thrown at you and things like that and at the very end of the presentation, I’ll kind of give you with a well one web page that you can go to kind of get a lot of this stuff from. But I want to talk about why to do this. Anyways right, there’s a lot of cool ways to read it, to learn reasons to learn angular until I react and to work on the web, but I think what’s really cool is, is you know? I know we’re in Seattle and Microsoft land basically, but if you have a problem with some Windows api’s, basically you kind of have to work in Microsoft to get them fixed or changed, or do something like that.

But what the web platform all this stuff is happening. Right in front of your face: it’s all in github, it’s all free to participate, and you know anybody. Anybody can do it and just go on and start working on stuff, and I think that’s really really. Cool web developers are in a really unique position of being able to influence and modify the platform that we all develop on every single day and that’s really exciting.

To me, and one of the reasons that I got involved, so I want to leave you with a repository that I just kind of started the other day. Now is the time to take pictures of the slides if you’re interested in getting involved. There’s a lot of information, there’s a lot more information beyond just what I’ve covered in this talk so check out the Cascadia j/s repository that I maintain on github. It’s just kind of got some getting started information and so the links to other talks that people have done on similar stuff and how to get involved in the web community and modify web standards and stuff like that.

Finally, I want to leave you with some of the things that I’ve worked on to hopefully, hopefully provide some motivation to show that you guys that you all can do the same. Recently. I’ve changed helfet works. The fetch API. I’ve worked on Chrome to basically modify when we said credential when we send credentials when we make a request stuff like that. Basically did the same for for module scripts and took part in some of the standardization work for there.

So that required, of course, talking to a bunch of the browsers and saying hey, you know we’re thinking about making this change. It kind of makes sense. What do you guys think and can I do it? I also standardized and implemented the referrer policy attribute. This is security, even private security privacy attribute and HTML. So I did this on the script Elementary simply so I like resource loading and then security privacy kind of stuff.

I’ve also implemented a bunch of console API eyes, so the console standard I mentioned is a really really good one to start getting involved with. So I encourage you to check it out. It’s what I started with and I also started working on Chrome partially. As a result of that, finally, I’ve been working on something called priority hints, which is just a new resource living API. That kind of lets developers tell the browser what priority they would like to be associated with a request.

It’s a new standard and so we’re digging through that I did the implementation work in Chrome and so we’re just kind of doing some experimentation to see if it’s going to be able to pull its own weight, but other than that. I hope I’ve left you with a good taste in your mouth and when it comes to web standards – and I hope that you all you know, feel motivated to get involved and contribute back to the platform thanks a lot.

That’s it


 

Categories
Online Marketing

How to Select the Right Keywords I Free Google Adwords Training

So there are tools available to find appropriate keywords. There’s a lot of different tools online that you can use. Google has what’s called their keyword planner. It’s right in Google’s under tools and settings here you come over here to planning and you can use the keyword planner and you can find keyword and AD group ideas.

You can get suggested budgets and you can find you know, search volume and forecast as well. So a lot of times we’ll be searching for a specific keyword or we’ll think. Oh, look. This keywords going to generates a lot of results. It gets a lot of activity, but then later we find out like the search volume, there’s some very low. So you can get all this information using the Google Keyword, planner right under tools and settings here.

So, let’s review the four targeted keyword, matching options to control which queries trigger hats. There’s four keyword match types that are important for you to really understand. If you don’t understand the different types of keyword match types, then you will burn that budget. I’m telling you you will lose money, I’ve seen people, you know waste tens of thousands of dollars just because you know they didn’t understand the difference between broad match and exact match.

So, let’s review the differences between each one.


 

Categories
Online Marketing

What Is a CMS? Which One Should You Use for Your Website?

” All right, so today, We have a special guest Alycia from Sucuri. Thank you so much for coming on today. Yeah thanks, I’m happy to be here Awesome, so we’re Talking about what is a CMS and which one should you Use for your website, Can you tell us a little Bit about what a CMS is So CMS stands for. Content management system and it’s basically an easier way to put pages, live on your Website or blog post manage your image media Library all that kinda stuff Awesome and now, let’s Go over the top three CMSs, I’m going to be a little bit! Biased in this episode, That’s my disclaimer right there, I’m going to start with WordPress WordPress is the most popular Content management system out there today powers Over 1/3 of the internet, It has tons of plug-ins tons of options and it’s pretty resourceful And probably my favorite Reason for why I use WordPress is the community behind it.

They’re such a large community that that just all comes Together, there’s meetups, there’s wordcamps and everyone just helps each other out For sure, and I mean with 40,000 plugins almost like you, have no end to the kind of functionality you can add to your CMS Absolutely. So what are some other CMSs that we can possibly use For sure, yeah,,’cause everybody’s heard of WordPress, so Yeah Drupal is another very popular one.

It’s been described to me as Kinda, like a Swiss cheese, you need to be a bit more Technical to use Drupal, but it does have a lot Of different features compared to WordPress, it has A different user experience and ultimately it’s been Used for a lot of things like government websites, And that kinda thing because of its ability to be a little more secure in some areas: yeah Yeah and it’s definitely One not for like the smaller business type sites as Enterprise or large Corporation type sites right, Yeah, yeah for sure Yeah Joomla – is another really Popular one as well, It’s got a really good.

Community – and it’s got, I think, the second highest Market share after WordPress, Although WordPress is Like 30 % – and I think, like It’s, a giant Joomla’s like 6 %, so just A little bit of a gap there between the top two but Joomla’s, also a really awesome CMS to use You wan na make sure that you’re using the most latest version. If possible, There are two active versions: Available that you can use Yeah, you definitely wan na stay on the most recent branch.

Of any CMS, if possible, Yeah that’s just a best practice there. All right. Let’s talk! About really figuring out, which one should you use right Like what are some of the first Steps we wan na think about. Definitely you wan na Make sure that you know what your requirements Are for your website, So how does it need to Be for your users to use! How are you going to go about? Actually creating posts and what are the processes that you’re going to use as part of that And then once you have all that you can kinda look at each CMS and see what are the extensions and Themes that are available And see if they’ll match the Requirements that you have for your website, That makes sense and It all comes down to figuring out what’s right for you Like, I will stand by WordPress all day, but WordPress may not be Right for your situations, Figuring out those requirements, With those applications are super important, Yeah and usually a Lot of the CMS websites have a great community Because they are open-source, So tell us a little about open-source Yeah for sure.

So all Those top three CMSs they’re open-source they’re, also free, which is very important, Open-source, basically Means that the source code used to build WordPress Or Drupal or Joomal, it’s all open and available, and anybody can contribute to it as well Right on So that just means it’s Constantly being improved by the community and the Community’s also checking to make sure that, what’s Being added is secure All right, so we want our Website to look good right, So is that something to think About when we’re choosing what platform we use and how easy it is to create those sites Totally so different themes will have different attributes like They may have a sidebar on the left or the right, Or they may be all one column in a never-ending scrolling website.

Different themes will Allow you to accomplish, maybe what you need by Having custom backgrounds or custom menus, so you Wan na look at the options for your theme and you also don’t wan na discount like premium themes, A lot of premium themes out, there will add extra functionality, So you’re, essentially Paying for the theme, even though the CMS is free, That’s an awesome option. There’s premium plug-ins as well, Depending on what you Need the default themes that come with it are Sometimes a little restrictive, so you wan na take a look at What the default themes are: Try some different free themes and see what the options are to get your site to look.

The way you want it to Yeah and what was kind Of controversial at first in WordPress and 5.0 remember Gutenberg, Oh yeah, Gutenberg is essentially The new WordPress editor, The whole point is to kinda mirror the printing press of just Blocks and everything else, Yeah, what you see is what you get So as you’re typing — Whizzy, wig, Yeah whizzy wig, Thank you So as you’re typing Yeah, you see exactly what you would see on the website, So that comes default by WordPress.

It has made the experience. Especially for first-time users easier to create, Then there are page Builders like Elementor or Beaver Builder or WPBakery Builder, that makes that user-experience A little bit easier, If you’re going on the WordPress realm and really want something: That’s pretty customizable, you don’t have to be a Web developer or guru to build that website For sure CMSs are having to Make things a little easier, You know, there’s a lot of Different places out there that are creating website builders that are super easy for people to use, and so it’s helpful for These open-source CMSs to make the user-experience a little easier All right.

So another thing we probably have to think about. Is the hosting requirements We’re going to need for our applications? Talk us through a little Bit of what that looks like For sure, so most of These are running on PHP, so you want the most Updated version of PHP, especially if you want The latest features and to make sure that you’re Getting those security updates? Yes, So that’s really important.

A lot of hosting companies will offer one-click Install for most of these major CMS applications, Some hosting companies Especially when I first started creating websites – and I Was on a super budget, but also a very secure host, it took me a long time. It took me like three days to install WordPress and they have a famous 5-minute install You wan na look and see, and maybe talk to your hosting company.

About what the options are for getting this CMS Installed on your server Right,,’cause, taking three Days to get a website going just the beginning is not Something you wan na do There’s a lot of places out there that will do managed hosting Especially with WordPress There’s managed WordPress that has just already automatically installed some extra security features And then what most people End up going with is like a cPanel type Hosting Since it does have that one-click install with Installatron or Softaculous, Whatever they’re, using Totally Couple of clicks of a button and then it’s there, You can start building and Designing, however, you want All right, so the real Reason I brought you on to this.

Episode is really talking about security with CMSs They’re open-source. You Constantly have to update them, so there’s lots of things. That we need to really think about to make sure Our stuff’s protected Totally well with It being open-source not only are all the good People contributing code, but all the bad people can Also, look at that code as well and find vulnerabilities. So that’s something that a lot of people are concerned about.

Especially with WordPress being so popular, it is a large target. The CMS itself is actually quite secure because there’s a great Community checking things out. You wan na make sure that you’re Not installing more plug-ins than you need Trying to make sure that you’re keeping everything up to date. If you have a managed solution, They’ll, do it for you, Which is awesome. Yup, You wan na make sure That you have something some kind of security plug-in That’s monitoring your site, letting you know if there is A problem that they detect There are some that can also Add features for protection like adding Two-Factor Authentication, which is a second password on your phone that you need to enter in Order to get into your website There’s all kinds of Cool security, plug-ins security utilities that You can use with your CMS Yeah, I know with WordPress the top security plug-ins That come to mind, of course, Sucuri has This security plug-in, but there’s also Wordfence And then with having an SSL on your site, super important just to Encrypt that password,’cause, you have to login The beauty with CMSs that You can access them anywhere right, Yup, So you wan na make sure that wherever you’re accessing’em Your password isn’t being sniffed out by someone in the middle Yeah.

You wan na, be careful. You don’t wan na. Maybe do It in like an airport or coffee shop, Wi-Fi Unless you’re using a VPN.’Cause, if you are sitting There on public, Wi-Fi and there’s a hacker sitting next to you, they could sniff your password As you’re typing it in And then the next thing you know, there’s a bunch of spam pages on your site that you need to deal with. So what about firewall? I’ve heard that it should be important.

Should be added to the site, What’s the validity with that? Definitely one of the nice things about a website firewall Is that it will virtually patch your CMS? So if There is a security issue, essentially the firewall’s Taking care of that, It surrounds your website. And if somebody’s trying to exploit a vulnerable Plug-In on your site, the firewall will catch. That attempt and block it They’ll see a blocking page.

Meanwhile, all of your legitimate Visitors are being sped-up because of the global Network of the firewall and content delivery network, So we’ve figured out what Cms we’re wanting to use We’ve got it installed, how Do we go about documentation, learning the program itself? There are some awesome Resources out there, You talked about WordPress WPBeginner has some awesome? Training guides and tutorials There’s an awesome community.

For all of these CMSs, with very active, like support forums, That’s a great way to go about it And then, obviously, if you have a developer, Or something like that, that’s helping you get some customization. They can usually help you. You wan na make sure that You’re documenting everything as part of your website as well, so It’s just going to help you Later on down the line, if you know you have a List of all the users, all the plug-ins and that kind of stuff and you’re keeping that up-to-date Yeah, especially if you Have people on your team that needs to access the site, Giving them documentation on What they should be accessing, what they shouldn’t be, because sometimes the wrong click can Make just chaos happen Totally and good user passwords making sure that you’ve Got the right role levels assigned to your users? Whether they’re just an editor or author or contributor Right Those roles are usually built into the CMS to allow you to make Sure they can only access what they should be allowed to access.

You only wan na grant admin privileges to somebody for as long as they need it, and that kind of thing Now, with this website, I know many of the entrepreneurs or even solopreneurs out there with their stuff, has Many hats to wear right, Sometimes maintaining it, isn’t always something that they have time for Yeah. It may not be top of mind Right. What should we be? Doing with those updates Yeah, definitely I would say that it’s very important to make sure that you always retain Access to your property, your web property, So I’ve seen cases where a developer will leave a client and Leave with the passwords and then you can’t get Into your hosting account, or you can’t into WordPress, It’s not ideal, so make sure you always have access to those things And make sure that you’re just practicing safe security practices.

Throughout all of it Right on and with WordPress and Joomla everything else, we Talked about it earlier, make sure you’re at least going in there every now and then to update It to the next latest version: It’s not only for performance, but it is for security Yeah for sure I mean with some CMSs there might be different branches that are still being actively developed So having a firewall That can virtually patch and make sure if there Are any vulnerabilities you have a little bit of an extra window.

‘Cause whenever there’s a Security update released, the hackers are looking going. “: Okay, here’s the old file; “, here’s the new file; oh look: “! There’s the security flaw!”, So it can be –. Then send all our bots out Totally it can a matter of minutes hours after a security patch is released before there’s active attacks in the wild So definitely update your Sites as soon as possible, Auto-updates are amazing, WordPress has auto-updates on most hosts, Yeah and or you can hire developers like most designers or Developers will have like a website care plan, so you Can them just do it for you, If you’re using WordPress, Godaddy ProSites or ManageWP has the one-click updates.

So you can update all your Plug-Ins and your themes, You even have a safe update option. So what it does is It’ll update your site, take a snapshot of before and after and make sure they’re all the same. And if there’s an issue It’ll retract, back to it It’s a free option for you Yeah, that’s perfect! You hit on a good point, It’s not a set it and forget. It thing with a website: You need to make sure that You’re maintaining it And that it’s part of your business, it’s how your business looks.

So you should definitely Make sure that you have some kind of plan for keeping It up-to-date and maintained All right. The last point that we should really talk about is really your time and investment with the CMS of your choice. Talk us through a little Bit of that about that For sure we’ll you Wan na go in and realize that it’s going to take you Time to setup all the pages that you want Right: It may take you time to find the right plug-ins, so you wan na kinda think through whether You want to hire somebody or get some help with that To find the functionality and the look and feel that you’re after Definitely budget when It comes to free CMSs.

Well, you don’t have to pay for the CMS. So that’s helpful Right! But it’s customization and security and all Those things that you definitely wan na consider as part of the whole package of having a website On-going costs for domain WHOIS privacy, SSL certificates, Right firewall, All that kind of stuff, All that good things Totally yeah, there’s A lot of accessories that go on with having a website, So you wan na figure like I said at the beginning what those requirements are And then make sure you have a plan for how you’re going to budget and the timelines around When you wan na launch Perfect and with Drupal And Joomla they are, they do have that smaller market share, So there’s really specific requirements of when you wan na use those applications.

Those developers that you hire for Drupal or Joomla might cost more than a WordPress designer as well For sure yeah, and you wan na make sure that you’re really looking at the work that the developer has done and make sure that it Matches what you’re, after There’s lots of great Websites out there that you know can tell you more About how to pick a developer depending on what you’re after Well? Thank you so much for Coming out on the show today and helping us figuring Out what a CMS is why we should use one You’ve been awesome Thanks my pleasure.

Well, if you liked this article go ahead and smash that, like button, add a comment below on Something that you’ve learned and subscribe to this blog and ring that bell, if you’d like to see these episodes first, This is “ The Journey.,” we’ll see you next time.


Who is helping with your digital business footprint?

 

Categories
Online Marketing

Web Fonts – The State of the Web

”, My guest is Dave. Crossland He’s the program manager For Google Fonts And today we’re Going to be talking about the state of web fonts –, what are they, how to use them? Effectively and what’s new, Let’s get started, [ MUSIC PLAYING ], So Dave. Thank you. For being here, My first question is: About why web fonts, What do they bring to a website? Beyond the standard fonts like Helvetica DAVE, CROSSLAND Well, Web fonts really express a certain kind of Feeling for organizations They express a brand And you can have a web Page without a article, but you can’t have a Web page without text You have to have fonts And so a brand at its core Would be like a logo, a color and a typeface or a font, And so web fonts bring The kind of rich design that we have in print Media to the web, RICK VISCOMI And according To the HTTP Archive nearly one third of Websites use a font from the Google Fonts API, So why are developers turning To the Google Fonts API DAVE CROSSLAND, I would say That Google Fonts is fast, easy and free And so on.

Our Analytics page we’ve clocked up over 22 trillion. Font views in total since the service Launched in 2010 – And I think that being on Google’s content, distribution networks, we benefit From cross-site caching, So when you visit the First website that uses a font like Roboto, it’s downloaded and you may see Some latency there, But then on all Subsequent websites, which use the font From Google Fonts, then it’s in a cache And loads instantly across the different websites, We also try and Make it really easy So the font’s API Abstracts, a lot of the complexities of web Font technology from you, So we serve different formats.

To different browsers, For example, with better Compression formats, like WOFF2, only the newer Browsers support those, And so we serve WOFF2 files. To those newer browsers And we serve other Formats to older browsers And then finally We make things free and we have a directory of Hundreds of choices which everybody can choose from Now, of course, if you Want a particular typeface, then it may not be Available in Google Fonts and you would go and license That font for your usage, But not everybody, has the Sophistication in design or the resources To license fonts And I think it’s important That everyone in the world is able to do typography, RICK VISCOMI, So I don’t Know if developers truly appreciate how complicated Web fonts are under the hood.

I got a taste of this when I Was at YouTube a few years ago, I helped change the Default font to Roboto, and it was not as easy as just Changing the font-family CSS style, There’s a lot you need to do to Make sure that it goes smoothly for the users and they Have a good experience, For example, like YouTube users, Are from all around the world, They have different languages. Different alphabets, What are some of the Things that developers need to be concerned about For an international audience, DAVE CROSSLAND International Users face a challenge because the file sizes Of fonts, for them can be larger than just For European languages Traditionally Google Fonts has done a kind of slicing of Fonts into language or writing system sets, So we might have, for example, Latin Latin Extended Cyrillic Cyrillic Extended Greek Greek, Extended and Vietnamese: That’s your current support for Roboto that’s used on YouTube.

We also support Other languages — Hebrew, Arabic, Thai, Many different Indian writing systems And the biggest Challenge has been for Chinese Japanese And Korean fonts, A typical font for Indian languages can maybe be two or three times Larger than a European font, But for East Asia it can Be a hundred times bigger And so we’ve been able to Use a number of technologies, for example WOFF2 Compression which is now a W3C standard this year, And also the @ font-face Css has a new aspect called unicode-range.

Unicode-Range allows us to Slice, the fonts into pieces, dynamically And the browser will Only download the pieces that it needs, So that means that We were able to slice a Chinese, Japanese or Korean Font into over a hundred slices And therefore the Latency of each slice is similar to your European font, This means that the experience Latency is much better And because the Slices are cached across different Domains then the font gets faster and faster To load over time, RICK VISCOMI Custom fonts have Also been used for icon fonts to show images And more recently, they’ve Been used for emoji as well, So we’re moving beyond just Text and on to these other ways that we’re using to communicate, But it’s not without its Own challenges, right, DAVE, CROSSLAND, That’s right! Font technologies are always Improving and evolving And the use of emoji as a kind Of special case of icon fonts is particularly interesting.

I think that there’s a Debate in the web development community about how To best approach this Using images for icons, whether That’s PNG or SVG vector images is –. There are some advantages there. One of the advantages To using icon fonts is that aligning icons with Text in labels is often is a common use case And getting the alignment Onto the baseline of text can be tricky when You’re dealing with two elements: — a text Element and a image element And so icon fonts can Play a good role there.

They also have good legacy. Support because obviously text systems work everywhere. Unfortunately, for Emoji and color fonts that’s a little bit. More complicated because there are Different color formats for different platforms, And so one font file needs To have a lot of data to support all of the Platforms at once And they can look different On different platforms, So yeah emoji as web fonts Is still I think, kind of — is a cutting-edge thing, But it can add.

Consistency – and I hope we see more developments – Of that in the future RICK VISCOMI And going Back to the Roboto at YouTube example: one Of the things I remembered that was kind of tricky Was when we would have font-weight bold in our styles, That would default to Weight 700 by the browser, But our designers decided that It looked best as weight 500, So we actually had to go back. And change all of our styles from font-weight, bold To font-weight 500 And it became kind Of a new way that we had to ingrain into Our style development, But there’s something new.

That’s Coming out called variable fonts, How would they help Address the situation, DAVE, CROSSLAND, Yeah Variable fonts can help a lot. It’s a very exciting. New technology, It’s part of the Opentype standard, which is the font format that that’s Widely supported in pretty much all platforms today And variations allows you To do runtime interpolation between different sort of styles, Or faces within a font family, So traditionally you would Have like a thin weight, a regular weight, a bold Weight and extra bold weight And in CSS you’ve only Had up to nine weights — 100 through 900 With variations, then you are Able to specify weight, 154 and dial in a very specific And dynamic weight You can animate these weight.

Changes using CSS animations And in CSS4 there’s more Direct support for this RICK VISCOMI So does that Mean that every font is now going to be able to be Completely customizable, Or are only a few fonts going To be eligible for this DAVE CROSSLAND Well, it is something that font developers Need to add to fonts, And so in that Way it breaks down the traditional wall between the Font maker and the font user And so variable Fonts create a kind of dialogue between the two, So as a font user, you Can customize the font, but only in ways which the Font maker has provided for, And so that means that you don’t Need to become a type designer yourself, but it means that you Have that flexibility that you didn’t have before And the variations are Not only for font weight, There’s, also font width, There’s slanting And there’s also optical size, And those are all part of The OpenType standard today Optical sizing, means that When you change your font size from 10 point to 70 Point then, the letter forms will actually react and Respond to that change, And so, as your font Size gets larger.

The letter forms will Become more elegant And as it gets smaller They can become more legible, more readable And there’s also all other kinds. Of variations, you can imagine, which aren’t part Of the standard and are specific to each font, Things like rounding and many creative options. Google Fonts is commissioned. To sort of experimental trial fonts from type designer David Berlow at Type Network.

The first is Decovar, which Has a lot of variations which are decorative so rounding Different kinds of serifs different kinds of Stroke patterns And this can be used as a Kind of graphical device, Because variations Can be animated, I think there’s a lot. Of potential there, The other typeface is Amstelvar And Amstelvar is A text typeface and it has a set Of parametric axes which go far beyond Just weight and width and into things like The ascender length descender length and A lot of variations which can be used together, To create more readable text, RICK VISCOMI, I’m Especially interested about variable fonts, We’re going to have to Have you back on the show once they’re a little Bit more established, Then we can talk about The state of them, But where could Developers go if they want to learn more about Any of these technologies DAVE CROSSLAND Microsoft Edge has on their developer site a Really good variable, fonts demo site That’s a great place to learn.

More about variable fonts, There’s also the Design.Google.Com/Fonts articles website, where the Google Fonts team publishes articles about type and Typography in collaboration with the Google Design team And then there’s Also material.Io, where you can get the Material Design, icons, font and learn more about Material Design guidelines, RICK VISCOMI, Well, there you go, The links are in The description so go check them out.

Share your web fonts stories. In the comments below Don’t forget to Like and subscribe so you can tune in For another episode of “, The State of the Web” Every other Wednesday, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]