Posts

Showing posts from February, 2020

How to Design for Screen Readers with Adobe XD CC

Image
When it comes to accessibility, designers tend to focus on colors (i.e. contrast) and UX copy (i.e. wording), whereas developers tend to focus on ARIA attributes (i.e. code that makes websites more accessible). This is due to the fact that, often enough, thick lines are drawn between “who does what”. Also, because creating accessible apps and websites isn’t considered to be exciting, this line is hardly ever questioned. Accessibility is still a black sheep, even in 2020. So , since UX copy is the responsibility of the designer and ARIA attributes are the responsibility of the developer, exactly whose responsibility is it to cater for screen readers? Since: Screen reader UX copy is expressed as Braille or dictation (so how do we communicate this when our UI tools are visual?) Implementation is developer territory (so can we really shift the responsibility of writing UX copy to developers?) As you can see, it’s a two-person job — and yet, the tools simply don’t exist to facilita

10 Ways to Hide Elements in CSS

Image
There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling. Animation Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible. Accessibility Each method described below will visually hide an element, but it may or may not hide the content from assistive technologies. For example, a screen reader could still announce tiny transparent text. Further CSS properties or ARIA attributes such as aria-hidden="true" may be necessary to describe the appropriate action. Be wary that animations can also cause disorientation, migraines, seizures, or other physical discomfort for some people. Consider using a prefers-reduced-motion media query to switch off animations when specified in user preferences. Event

An Introduction to MongoDB

Image
MongoDB is a cross-platform, open-source, NoSQL database, used by many modern Node-based web applications to persist data. In this beginner-friendly tutorial, I’ll demonstrate how to install Mongo, then start using it to store and query data. I’ll also look at how to interact with a Mongo database from within a Node program, and also highlight some of the differences between Mongo and a traditional relational database (such as MySQL) along the way. Terminology and Basic Concepts MongoDB is a document-oriented database. This means that it doesn’t use tables and rows to store its data, but instead collections of JSON-like documents . These documents support embedded fields, so related data can be stored within them. MongoDB is also a schema-less database, so we don’t need to specify the number or type of columns before inserting our data. Here’s an example of what a MongoDB document might look like: { _id: ObjectId(3da252d3902a), type: "Tutorial", title: "An I

How to Properly Organize Files in Your Codebase & Avoid Mayhem

Image
The main library, data, UI, docs and wiki, tests, legacy and third-party components … How do we keep track and maintain order within all of this? Organizing the files in your codebase can become a daunting task. Relax — we've got this! In this article, we’ll review the most common systems for both small and large projects, with some easy-to-follow best practices. Why Bother? As with pretty much all of the tasks related to project management — documentation, software commits, deployment — you’ll benefit from taking a conscious, programmatic approach. Not only it will reduce problems now, but it will also save you and your team quality time in the future when you need to quickly access and review things. You surely can recall function names from the top of your head for whatever is it that you're coding right now, and quickly find a file you need to edit, and sharply tell what works from what doesn't — or so you think. But could you say the same about that project you

Productive Remote Work (When Your Mental Health Says “No”)

Image
Remote work is not easy. It sounds like a dream (and it honestly is in a lot of ways), but there’s a darker side to remote work that one can’t understand until they’ve done it. Here’s the deal. People that work remotely often suffer from suboptimal mental health, and so you’re probably wondering, why on earth do they do it? Well, the fact is, while remote working comes with some very unique challenges, so does not working remotely. The difference is that remote work can offer the flexibility you need to build a lifestyle that suits you. Indeed, remote work isn’t a silver bullet for burnout or wanderlust, but if you do happen to try it out and eventually wind up succumbing to loneliness, or a lack of motivation or productivity (as many remote workers do), at least you’ll have the opportunity to change things up and make things better. In the eyes of many, it’s the lesser of two evils. That being said, attempting to diagnose what your mind and body needs isn’t that easy. What mig

Forms, File Uploads and Security with Node.js and Express

Image
If you’re building a web application, you’re likely to encounter the need to build HTML forms on day one. They’re a big part of the web experience, and they can be complicated. Typically the form-handling process involves: displaying an empty HTML form in response to an initial GET request user submitting the form with data in a POST request validation on both the client and the server re-displaying the form populated with escaped data and error messages if invalid doing something with the sanitized data on the server if it’s all valid redirecting the user or showing a success message after data is processed. Handling form data also comes with extra security considerations. We’ll go through all of these and explain how to build them with Node.js and Express — the most popular web framework for Node. First, we’ll build a simple contact form where people can send a message and email address securely and then take a look what’s involved in processing file uploads. As ever

How to Get Involved in the Booming Python Job Market

Image
From finance to artificial intelligence, data science to web development, there isn't an area in which Python isn't consolidated and flourishing. So let's discuss actual salaries, in-demand skills, marketplaces, and what to do in order to remain competitive. Find remote jobs in tech, including Python, on SitePoint Remote . The Job Market Today Information technology has created an extremely varied and dynamic market, and saying "computer science" alone is something of an umbrella term now. Pretty much everything has elements of IT in it to some degree — from the algorithms that recommend which TV series you should watch, to the code on this page, and even the software integrating your home appliances with your mobile. From this wide array of areas — all of them careers in their own right — we'll pick a handful. All of them are within multi-million/billion-dollar industries that are particularly hot as of 2020, and will most probably remain active in the

What Is Node and When Should I Use It?

Image
So you’ve heard of Node.js, but aren’t quite sure what it is or where it fits into your development workflow. Or maybe you’ve heard people singing Node’s praises and now you’re wondering if it’s something you need to learn. Perhaps you’re familiar with another back-end technology and want to find out what’s different about Node. If that sounds like you, then keep reading. In this article, I’ll take a beginner-friendly, high-level look at Node.js and its main paradigms. I’ll examine Node’s main use cases, as well as the current state of the Node landscape, and offer you a wide range of jumping off points (for further reading) along the way. Please note that, throughout the article, I’ll use “Node” and “Node.js” interchangeably. What Is Node.js? There are plenty of definitions to be found online. Let’s take a look at a couple of the more popular ones. This is what the project’s home page has to say : Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. And

Top 2020 WordPress Plugins for Supercharging Your Website

Image
WordPress has become far and away the most popular website-building platform of them all. It has a wealth of tools to help you design and build a professional-looking portfolio, blog, eCommerce site, or virtually any other type of website. Nothing is perfect. Even if this remarkable web-building platform comes close, there are certain tools or capabilities it lacks — tools or capabilities that could, for example, give your website an important extra feature, or simply put it on steroids. Help, as they say, is just around the corner — in the form of WordPress plugins. However, there are over 55,000 of them. Hopefully one or more of the eight premium plugins described in this article addresses a capability you’ve been searching for. In any event, we’re willing to bet that you’d like to take a few of these popular plugins for a spin. After all, they’re free to try or use. Sounds like a winner. 1. Brizy Website Builder for WordPress There’s no shortage of good reasons to add the Br