by Mark | Feb 16, 2018 | Web Security
We are now midway through the second month of the new year. This should be a good time for web professionals to review and update their individual security practices. Do your daily practices keep you secure? Are you certain? It is easy to to become complacent with our practices, credentials and equipment. This might be a good time to review individual security fundamentals.
We have all seen the examples where passwords are taped to a monitor or under a keyboard. We know not to do that. But do we periodically stop to consider our daily practices and how they affect security? This might be a good time to ask ourselves the following questions…
Best practices
With respect to passwords – are yours long and complex? Do you use passphrases? Are they impossible to guess? Do you use a different password on each site? Do you keep your passwords in a vault? Do you change your passwords from time to time?
Do you use two factor authentication (because passwords alone are no longer enough)?
When you are traveling – do you use a VPN (if you must connect to a public network – such as a hotel or airport)? Do you keep your phone and tablet backed up? Do you have the ability to track a device (in the event you lose it)? Do you have the ability to remotely wipe said device (again if it is lost or stolen)?
Do you routinely update your applications and operating system? Do you do this on your phone and tablet as well?
Additionally, do you do a factory reset on devices before you dispose of them (or recycle them)? Do you confirm that all data has really been erased from the device?
Hopefully you have been able to answer in the affirmative to all the above questions. If not, this might be a good time to rethink your practices. This also might be a good time to discuss these topics with colleagues and clients.
Resources
We have found the following resources helpful (you might want to share some of these with your colleagues and clients as well). All are links to the SANS website. I am a reviewer of their OUCH newsletter. These are provided because they can also be easily shared with colleagues and clients. Hopefully you find them useful.
What other security practices do you employ periodically? Care to share stories of “best practices” and how they helped (either personally or a client)?
As always, we look forward to your comments.
Best always,
Mark DuBois
Executive Director and Community Evangelist
by Harshala | Feb 9, 2018 | CSS3, Industry News, State of the Web
In January we reviewed recent CSS updates. As a web professional you must be aware of constant changes taking place in our world. CSS Grid Layout is now supported by nearly 90% of modern browsers. It was adopted as a candidate recommendation by the W3C on December 17, 2017.
CSS Grid Layout
In this article I would like to focus on CSS Grid – a powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.
CSS Grid Layout
In the article A Complete Guide to Grid, Chris House provides many details about CSS Grid Layout along with examples.
Here are some key-points:
- In his introduction, Chris references two great resources – Rachel Andrew’s book (Get Ready for CSS Grid Layout) and Chris Coyier’s Complete Guide to Flexbox.
- He reviews the basics (including getting started with your container element display:grid, setting rows and columns and placing child elements).
- Of course, it is important to know the proper terminology (including grid container, grid item, grid line and more).
- He then provides a very useful overview of properties for the grid container and grid items.
Everything you need to learn CSS Grid Layout
In Rachel Andrews article Grid by Example explained basic concepts of Grid Layout which gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts. Her 2016 book “Get Ready for CSS Grid Layout” has a meaningful quote by Eric Meyer in the forward. We think this nicely sums up the importance of CSS Grid Layout.
“Grid Layout is to Flexbox as PNG is to BMP, and then some.”
Resources
Here are additional resources about CSS Grid we believe are useful for Web Professionals.
- A collection of resources & tools to help you manage the Grid link
- Great examples which include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Examples by Rachel Andrews
- This is an older example (but still useful) which tells how CSS grid are becoming popular these days. As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module.
- CSS Grid Layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. MDN Web Docs also have great examples of CSS Grid.
We hope you find these overviews and examples in CSS Grid world useful. As always, we look forward to your comments and feedback (whether you are a member or not). What have been your experiences with employing CSS Grid in real world applications for clients. How was the work received? Did any issues arise?
For those who would like to have a little fun, try out CSS Grid Garden.
If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. These include the fundamentals of CSS and HTML (and much more). As a member, your first class is free.
by Harshala | Feb 2, 2018 | Industry News
User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. As an aspiring or practicing web professional, we should make every effort to enhance user satisfaction.
UX Term origin
User Experience Architect Donald Norman – it has been said that he has invented this term as he thought human interface and usability were too narrow and he wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose its meaning. He has written his personal reflection about this in his Wikipedia article.
(more…)
by Mark | Jan 26, 2018 | Content Management Systems, Industry News
As a web professional, you are likely aware that WordPress is used as the principle technology for over 25% of the top 10 million websites (actually now 29% based on the December WordCamp US State of the Word 2017). To better understand the reach of this technology – in the above mentioned State of the Word presentation, it was mentioned there are now over 47,000 plugins and said plugins have been downloaded over 633 million times.
Version 5 coming (Project Gutenberg)
We have recently learned that the next major update (version 5.0) will be based on Project Gutenberg. We understand this will be the most extensive update since version 2.0 of WordPress. As a web professional, it is important you understand the implications of this upgrade (and the potential effects with your clients). These include:
- the default editor is changing from the current TinyMCE editor (and changing significantly). If your clients are editing their own content, you need to either train them on the new editor or make certain you use the classic editor plugin (you might want to try both out to better understand the changes). Note this is beta software at the time of this writing so you do not want to install this on any production WordPress sites.
- although you can presently test Project Gutenberg, it is presently available as a plugin (meaning you may not be able to fully test your current themes and plugins at the moment).
- the new focus will be on conceptual editing (similar to what you may have experienced with LinkedIn Pulse or similar approaches).
- the focus is on “identifying and adding meaning to content using blocks and block contests.” See below for what this means.
(more…)
by Harshala | Jan 19, 2018 | CSS3, HTML5
What’s been happening with HTML and CSS?
Just like having the ability to speak a foreign language, this sort of skill is helpful in almost all professions. HTML and CSS are the foundational languages of the web. As web professionals we should know what updates are taking place in HTML and CSS world. I came across few articles about what’s new about both CSS grid and HTML.
CSS Grid Layout excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. (more…)
by Mark | Jan 12, 2018 | Industry News, JavaScript, Web Development
As web professionals are undoubtedly aware, many changes are happening with JavaScript these days. Yes, there is a fair amount of churn in frameworks employed on various projects. We did ask the question (some time ago) – are we relying too much on JavaScript? Regardless of your opinion about that question, we need to be aware that major changes are happening to core JavaScript as well. ES6/ ES2015 (ECMAScript 6) is the latest version making its way into browsers near you (and many other places). For those who have been working with web technologies for quite a while, you may recall that ES5 was released in 2009. Yes, nearly a decade ago. (more…)
by Mark | Jan 5, 2018 | Industry News, Web Accessibility
As we begin a new year, we thought it summarize some recent information regarding web accessibility. As a web professional, one should already know that making your pages accessible helps your search engine ranking and much more. As an organization, we have been promoting (and encouraging members) to participate in Project Silver (this initiative is focused on a new version of accessibility guidelines) for some time. We encourage you to consider helping with this initiative.
Of course, it is important to understand what we should be doing now to make certain our projects are accessible. We found the following articles to be a helpful review of what is presently happening with respect to accessibility.
In December, Scott O’Hara discussed the trials and tribulations of the title attribute. This is a great review of the current state of use/ disuse of this attribute. In a nutshell, Scott review this venerable attribute since it’s inception in the HTML 1.2 draft (yes, that was in 1993). One of the main issues with this attribute is that most browsers assume a visitor is using a mouse [for example, to see a title tooltip, you must hover your cursor]. Surprisingly, Internet Explorer 10, 11 (and MS Edge) display tooltips (after a short delay) as if the visitor hovered over them. Additionally, when you long press an image in iOS 11, the title attribute also displays in the popover menu. Of course, these sorts of examples do not help much with overall user experience (and are not consistently implemented). Scott also reviews how this attribute is somewhat useful on select elements for screen readers. NVDA and other readers will announce title on landmark elements (header, footer and so forth), but will not on div or other elements (unless role updates are provided as well). Scott provides a number of use cases where the title attribute can be helpful. The bottom line is that the title attribute can be potentially quite useful, but a number of previous bad practices and lack of consistent support among browsers and screen readers is hampering more consistent use. We encourage readers to review Scott’s entire article. It takes about 20 minutes to review and is well worth the read.
In July, IBM updated their accessibility checklist (now at version 7.0). We encourage readers to review it (if you haven’t already). In addition to providing a thorough checklist, we like the approach of combining the revised US Section 508 standards (which also incorporates Web Content Accessibility Guidelines) along with the additional requirements needed to meet European standard EN 301 549. One central checklist for multiple countries. That alone should be useful for those who conduct business in the U.S. and E.U. We encourage web professionals everywhere to make certain they review (and use) such a checklist.
Dennis Lembree provided a very useful article on the topic of building a culture of accessibility (with a focus on leadership roles). Many of us have encountered situations where initiatives fail because there is no clear leadership. What we like most about this article is the specific breakdown (by corporate division) how individual leaders can contribute to a culture of accessibility. We already look forward to follow ups to Dennis’ post and additional insights. We encourage web professionals to take 5 to 7 minutes and read his entire article.
For those using the React framework, Scott Vinkle provides a very useful overview of React’s accessibility code linter. What we found most helpful is that Scott walks you through creating a new React app and describes in detail how to employ the code linter for maximum accessibility. As a web professional, you are employing linting as part of your continuous improvement strategy (aren’t you?). We encourage you to review Scott’s article (particularly if you are considering employing React in applications you develop in 2018). It will take you a couple of hours to review this article (if you work along with his examples).
For those web professionals who are new to web accessibility, we offer a foundational course on this topic via our School of Web initiative. As a current member of Web Professionals, you first course is free.
As you surmise from the above overview, a lot has been happening in the past months regarding accessibility. We encourage you to provide comments regarding your efforts to incorporate accessibility in your projects and tell us what you have been doing to develop a culture of accessibility in your organization. We may be in contact with you to do a follow up post on the specifics you provide.
All the best for a great 2018,
Mark DuBois
Community Evangelist and Executive Director.
by Mark | Dec 29, 2017 | Job and Resume Tips from the Pros
As 2017 draws to a close, we thought it might be helpful to discuss the tools we use for various activities. These tools are not directly used for web design and development; they help our overall processes. Web Professionals considering freelance work or those working in enterprises may find this list helpful. Obviously, these are the choices we have made; we are not endorsing these particular tools – they just work for us. Your mileage will (and should) vary. We also include a brief overview of why it is important to consider using a tool for a specific task.
- Accounting – many prefer QuickBooks. Others prefer Freshbooks. Regardless of the tool you use, it is important to keep track of income and expenditures.
- Advice – mentoring is particularly important when you are starting. Obviously, Web Professionals members are here to help. Additionally, you may wish to consider the Small Business Administration and SCORE. The latter provides free business mentoring.
- File management – we often work across multiple computers (and need access to files in a variety of situations). We have come to rely on tools such as Google docs, One Drive, Dropbox and similar services.
- Graphics and video – we have come to rely more and more on Adobe Spark. It is a free tool and provides the ability to rapidly create messages for social media and more.
- Networking – we should not be working alone; it is important to network with peers. We often rely on Meetup to find local groups with similar interests. Our members also know we use Slack to enhance member to member communication.
- Password vault – passwords should be long and complex and not reused on various sites. This is why a password vault is so handy these days. If you are not using one, you should be. Examples include Dashlane, LastPass, or KeePass (there are other alternatives as well). You only need to remember one password to open the vault and can then copy and paste passwords for a specific site as needed. We also recommend using two factor authentication where possible (see below).
- Portable Apps – when there is a need to use Windows computers in client locations (or you simply want to take your browser favorites/ bookmarks) with you from computer to computer, we have found PortableApps to be a reasonable solution.
- Project management – we often use Trello (yes, there are many alternatives). Trello fits with our work flows. We find it easy to share boards, checklists and more with others as needed.
- Screen capture – we typically rely on SnagIt. However, there are times when using computers while working with clients, we have used Greenshot. The latter also has a zip version (so we can take it with us on a USB drive) along with other portable apps (see above). Yes, you can use the snipping tool (and the Mac equivalent), but tools (such as SnagIt) provide greater control and the ability to rapidly crop and annotate the screen capture.
- Sharing/ collaborating – we typically use Connect and Zoom. There are many alternatives as well, such as Join.me. The advantage of using these tools (in addition to collaboration) is that you can record your screen (with narration) and use these for training, demonstrations and more.
- Time tracking – Toggl is what we use to keep track of time spent on various activities. It is important to measure how much time you are spending on various tasks and projects.
- Two factor authentication – Passwords are no longer enough to provide access to sites. We recommend using two factor authentication where possible. Google Authenticator, Duo, and Microsoft Authenticator are examples. The SANS OUCH newsletter provided a timely overview of 2 factor authentication recently. Disclosure, I (Mark) am one of the reviewers of that newsletter.
- WordPress site management – if you are running multiple WordPress sites (and roughly 1/4 of all sites in the U.S. these days are based on this technology), you might want to consider using ManageWP. This is a freemium service offered by GoDaddy. It has a number of useful features in the free version (and you can get site monitoring for a nominal amount per site per month). This can save you a lot of time updating plugins, dealing with SPAM and more.
This is our list of tools that we often use. What did we forget? What tools in the above list do you use? Do you have alternative tools you prefer? Why do you prefer those? We look forward to your comments and further discussions. Let us know if you would like to have a separate Slack channel devoted to tools as well.
Best always,
Mark DuBois
Community Evangelist and Executive Director
by Harshala | Dec 22, 2017 | Industry News, State of the Web, Usability, User Experience, Web Professional Trends
Web professionals should be aware of this discussion concerning Web Typography & Layout: Past, Present, and Future. As a web professional, it is important to know what the future holds.
Key takeaways include:
- how to avoid being overwhelmed by all the tools and typefaces available today. We need to think of typography and layout as one.
- how to move away from frameworks and bring creativity back into layout. We should focus on larger type and readable layout, including proper use of whitespace.
- we should help the reader feel like a collaborator.
Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and Jeffrey Zeldman (A List Apart)—discuss typography and layout on today’s web: where we are now, and where we’re going. CSS grid can be a very helpful tool. Jen Simmons provides a number of examples on her labs.jensimmons.com site.
Typography can encourage long-form reading and not just scanning.
What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? At a minimum, we should understand CSS grid and variable fonts and how they can be properly applied. Layout and typography were connected in the age of metal type, and they will be again. We must make our pages readable and employ the time tested skills that were employed by typesetters so long ago. We should think in terms of properly sized type (which is responsive given that our content may be consumed on phones, tablets, desktops, or other devices).
This discussion also reviews the history of layout on the web, and what multi-device reading and orbital publishing means to the practice of publication design as we move away from frameworks. We need to bring creativity back into layout (including layouts that break the mold). We must fully understand the implications of CSS Grid and its portents and help the reader feel like a collaborator. There is a new wave of user customization, and we need to understand how it impacts our designs.
We encourage you to watch the discussion video and review the associated transcript.
For those aspiring web professionals who need a better understanding of these concepts, we recommend the following resources:
by Mark | Dec 13, 2017 | SVG
Earlier this year, I had the distinct honor of speaking with Christopher Schmitt about SVG (especially SVG filters). In this 6 minute overview, he discusses why these are important to web professionals everywhere. The full discussion is available to our members (once you login, scroll down to find the link).
Some of the sites mentioned by Christopher in this interview include the following:
Books he mentioned include:
Best always,
Mark DuBois
Executive Director and Community Evangelist
For those who are interested in a transcript of this interview, we provide the following:
[Mark DuBois] I’m speaking with Christopher Schmitt today. Christopher thank you so much for taking the time to be with us and to help web professionals better understand SVG filters.
To use an anology – they are similar to CSS rules; they can enhance text and images and so forth but I know that is an over simplification. Could you help our listeners better understand the technology please.
[Christopher Schmitt] I’ll be happy to. Thanks for having me on Mark.
With SVG filters, I think your analogy is good except that with SVG filters you to actually create a SVG file (which is pretty easy to do) and then you can associate that to an image and apply filters to that. What I really like about it is that you can apply SVG filters to almost any web element you have on the page like a div or the whole page, that is where the power of SVG applies. You can expand to more and more things. Ok.
[Mark] Thank you very much for that. What’s happening with them today? What’s the future looking like with respect to SVG filters. I know you’ve been doing some things recently.
[Christopher] This week my company Environment for Humans we did an online SVG conference are with seven speakers with wide ranging topics. You wouldn’t expect to have an all day conference on jpeg. But you could if you want to be ultra nerdy about it, but just for practical purposes of SVG. We had talks about SVG animation and are we talked about some responsive logos where you actually create a logo that is like a vector image a word type of logo mark. A prime example is like Disney’s castle logo that you see at the beginning of every movie that they do with a simple two color inclusion and the words Walt Disney underneath. One example that always been shown around is that if you have a browser fully expanded you shorten the browser and the castle goes away and you see the words Walt Disney you shorten the browser more and you just see that trademark script D from Disney’s name no matter what size your viewport is, you actually see the Walt Disney trademark.
That’s a great thing you can do to deal with the flexible nature of responsive web design where you have to deal with a lot of the not just resolution independence that you need (because of browser resolutions retina and all that), but you also have to deal with connectivity of the Internet too. Some people have very slow connections to the Internet so you don’t want to be throwing down a lot images for one logo. An example too, we also did stuff with the work flows with Sketch app which is a nice alternative to Illustrator and it’s also great for making wireframe mockups. There is not a lot out there in terms of dealing with Sketch and dealing with SVG exports and high upper level things like that too. There are a lot of things we can do with SVG. I have fun geeking out. There are so many things you can do with it.
[Mark] Definitely, I think the idea that it’s a vector based is very helpful today with all the different resolutions out there. It seems (in my view of the world) a pixel is no longer a pixel. With respect to SVG and filters and so forth why should practicing web professionals care? Why should they be interested in this today other than what you just talked about?
[Christopher] What I like about it is we can jettison Photoshop in some ways to do simple digital imaging effects. So, if you wanted to do a sepia tone, you can do that with SVG filters and can reuse over and over again without having to go back into Photoshop. One example I love was a few years back, Andy Clarke had this great example of making a print style sheet and use CSS filters for converting images to the black and white so when they printout it wouldn’t use color ink which is expensive, so you conserve it. He also did that to old versions of IE so you get a generic black and white version of it (which was pretty funny), but you can also do it with SVG to create images.
There is a kind of filter you can use called color matrix and you can do a whole lot of cool things with it. Before I get to that, I want to say that I’m an old guy in terms of the web. Been on the web since 1993 and I love Photoshop, so when I say get rid of Photoshop, it saddens me to say that. I have been working with Photoshop since version 1.5.
[Mark] Is there anything else you’d like to share with web professionals about this or other technologies, Christopher?
[Christopher] I have a weekly newsletter, I started this year, it’s called UXDesignNewsletter.com. Every week I send out a list of resources at least 10 plus more. That I think are really great. It comes out every Monday. If you want to sign up UXDesignNewsletter.com.
[Mark] Fantastic! We will put the link out there and encourage our members to sign up or anyone else listening to this as well. Christopher, thank you so much for taking the time today in helping us better understand what’s going on in the world of SVG, SVG filters ad more. Thank you again.
[Christopher] Thank you so much for having me.
