Image for post
Image for post

I’ve used the toggle method so many times when building out a new web feature. Often times, a button on a webpage that uses the hide/show functionality — aka toggle — are a common part of the user experience.

That’s where toggle comes in! Think of toggle like a switch for ‘on’ and ‘off.’ It hides or shows an element alternatively. Read more on toggle on the MDN Web Docs.

When using toggle, I code with vanilla JavaScript while accessing the DOM. I’ll place a CSS style property of “display:none;” on an element, and use a JS Event (for example, onClick) to activate the toggle method.

Here’s my codepen snippet to see toggle in action with a hide/show button on some article content.

Happy coding!

-D.


At a recent code review with my development team, another developer mentioned that my code reminded him of Atomic CSS. I had not heard of Atomic CSS before, so I started doing some research.

Q. What is Atomic CSS?

Quoting from CSS Tricks -

“Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.”

Small classes have one function and have simple names, and are created similar to the idea of reusable components. …


My company is in the process of redesigning and rebuilding our website.

A couple months ago, I suggested doing user testing at our weekly meeting. The idea was met with enthusiasm, and I embarked on leading user testing with our Senior Web Designer. I had been a participant as a user tester for a few companies in Silicon Valley before, but had never directed user testing.

Image for post
Image for post

What is User Testing?

User Testing, also known as Usability Testing, is a process to evaluate a website or product by testing on users. These users are given a set of tasks to perform on a website and provide feedback on how easy or difficult each of the tasks were. …

About

Daphne Watson

Front-end developer + occasional writer. Norcal native based in Sacramento, CA.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store