If you’re of a certain age, you may remember a time when ASCII ruled the internet. Before snarky memes or even the widespread use of animated GIFs, ASCII artwork was passed around like a bowl of candy.
Some background:ASCII (American Standard Code for Information Interchange) is a standard way to encode the text characters seen on electronic devices. Letters, numbers, and all manner of various symbols can be displayed via the format.
Early communication on the internet was text-based. As such, people with way too much time on their hands had a little fun with these assorted characters. Some truly clever artwork was created and routinely shared in newsgroups, bulletin boards and email. It could be impressive, particularly when you consider the technological limitations.
Some very creative developers haven’t forgotten ASCII art. In fact, they’ve used the latest CSS and JavaScript techniques to add movement and other enhancements.
Want proof? That’s why we’re here! Take a look at our collection of code snippets that add a modern touch to an old-school artform.
Trippy Text by Angela Galliat
We’ve seen some pretty far-out textures over the years. But this ASCII-meets-acid-trip text shader is among the most mesmerizing.
Characters seemingly melt into each other within a cluster of rainbows. You may need to take a walk outside after viewing this one.
See the Pen Ascii Text Shader (single text element, no canvas) by Angela Galliat
Delicious Donut by Housamz
Bringing an element of 3D to simple characters is a challenge. That this rotating donut is able to pull off the effect speaks to the power of CSS and JavaScript.
Even better is that the JavaScript source code is itself donut-shaped. That’s a level of dedication not seen since Homer Simpson.
See the Pen JavaScript Donut – ASCII Art by Housamz
ASCII Yourself by Tamino Martinius
Original creations are cool and all, but what about the ability to turn an image into ASCII? That’s what this art generator does.
Paste in the URL of an image, and you’ll see it rendered in character output. Adjust the sliders to add your own personal touch.
See the Pen ASCII Art Generator by Tamino Martinius
CSS Trickery by Tom Lutzenberger
While this snippet isn’t traditional ASCII art, it simulates the effect quite well. By utilizing CSS background-clip, a layer of characters is placed on top of a standard image.
The result is a quick-and-dirty image effect. Bonus points for the ability to change the characters in the HTML to whatever you want.
See the Pen Pseudo ASCII-Art by Tom Lutzenberger
Around the World by thykka
This spinning globe features a beautiful retro look. Seriously, it looks like something out of an 80s arcade game.
The three.js technology behind this beauty is anything-but-old, however. The animation is smooth and the colors vibrant.
See the Pen Rotating ASCII Globe by thykka
Flipping Awesome Animation by Takane Ichinose
While ASCII art can be incredibly intricate, there are times when simple is better. This snippet features just a small collection of characters, but is still effective in getting its message across.
By the way, that message is for you to flip a table. Click anywhere within the presentation to do so. Now, don’t you feel better?
See the Pen CSS Only ASCII Table Flip by Takane Ichinose
Lego Characters by Praveen Puglia
Here’s a unique way to leverage ASCII characters. This snippet takes an ASCII input pattern and outputs them like Lego blocks.
Add your own characters to the textarea, click the button and see your new creation.
See the Pen Legoscii! by Praveen Puglia
Characters Flying through the Air by Dave Kwiatkowski
At its core, this 3D animation is a collection of characters. But it’s also quite stunning to watch.
Notice the use of color and sizing to create the illusion of space. Larger and brighter colors are the “closest,” while the smaller and darker ones hang out in the back.
See the Pen The ASCII Galaxy by Dave Kwiatkowski
Adding Cool Characters to Web Design
What the snippets above show is that, in the right hands, even text can become art. They’re also a reminder of how CSS and JavaScript can breathe life into virtually any project. Put the two together, and you have something fun and, at times, a bit jaw-dropping.
We hope you enjoyed this new spin on ASCII artwork! If you want even more unique examples, please do check out our CodePen collection.
The post 8 ASCII Artwork Snippets That Utilize CSS & JavaScript appeared first on Speckyboy Design Magazine.
Commenting is built right into WordPress – which is great. But utilizing the default setup is an invitation to a big old mess.
Annoyances such as spam and the potential for abuse can make a blogger seriously consider closing off comments altogether. It’s understandable but far from hopeless.
There are several quality plugins out there to help take the pain out of utilizing comments on your WordPress website. Here are 10 worth considering when you’re looking to improve an otherwise unruly situation.
A long thread of comments can be a drag on site performance. Lazy Load for Comments helps by deferring this content until it’s actually in view.
Choose between loading comments on scroll or via a button click. Either way, it should speed up your website.
Perhaps there are certain areas of your website where you’d like to turn off commenting. Disable Comments can help. The plugin lets you remove commenting from any WordPress post type.
If you’re using multisite, it will also let you turn off comments for individual network sites as well. And, if you no longer use comments, you can disable them completely.
Facebook has billions of users. Therefore, it’s likely that your site’s readers also have an account with the social media behemoth. WP Social Comments lets you take advantage by integrating Facebook-based comments onto your website.
The pro version of the plugin offers more customization and the ability to moderate comments directly from the Facebook app.
Community-based websites may find DCO Comment Attachment quite handy. As the name suggests, it allows file attachments to be uploaded in the WordPress comments area.
Administrators can restrict the feature to logged-in users, specific file types, and choose how those files are displayed. It even works in conjunction with various lightbox plugins.
Subscribe To Comments Reloaded provides your readers an opportunity to receive new comment notifications via email.
Admins will love that the emails can be fully customized (HTML is allowed) and that subscriptions can be disabled for specific posts.
Sure, everybody knows about this one. But if you haven’t used it, you’re missing out. There’s a reason why Akismet is included by default with every WordPress install – it works. Spam is reduced to rubble as the plugin scans incoming comments.
You can even choose to automatically discard comments marked as spam – a real timesaver. The plugin is free to use for personal blogs, but commercial use requires a subscription.
The biggest problem when it comes to comment spam is those pesky bots. They hammer away at any post with open comments. Trying to squash it on your own will drive you crazy. Anti-Spam is there to do away with spam that comes from bots.
Just install the plugin, and it will start detecting and removing the junk. Their pro version will also help you take care of spam from human sources as well.
wpDiscuz provides a boost to the native WordPress comment system. It uses Ajax, so everything loads super-fast. You can also create your own custom comment form fields to gather more extensive user info.
Plus, it’s compatible with other popular plugins such as Akismet and BuddyPress (commercial add-ons are available for more integrations). Overall, it’s a completely modern facelift for commenting.
So maybe your comments area doesn’t need a total facelift – just some more efficiency. WP Ajaxify Comments will do that in the form of adding in some common-sense Ajax.
That means comments will be validated and loaded in without the need to refresh your entire post. It takes some load off of your server and generally makes for a better user experience.
Decent Comments provides a highly-configurable widget, shortcode and API that enables you to display recent comments on your site.
Author avatars, excerpts, links and more can be included. Just about every aspect of the plugin is configurable to fit your needs.
A Few Worthy Comments
A well-managed commenting system can be of great benefit to a WordPress blog. While you can’t necessarily make everyone behave themselves, you certainly can provide readers with a place to voice their opinions and ask questions. Above all, it’s about making a connection.
The tools above can help get you by making the experience more pleasant for everybody.
The post 10 Free Plugins to Supercharge WordPress Comments appeared first on Speckyboy Design Magazine.
Xplorer – This cross-platform file explorer software works via web technologies.
Changing Hands: Should You Worry When a WordPress Plugin Has a New Owner? – Why a change in ownership can be a reason for cautious optimism.
Flowrift – Check out this library made of beautifully designed Tailwind CSS UI blocks.
Using Modern Image Formats: AVIF And WebP – A compression and performance comparison of old-school and modern image formats.
Access Guide – Bookmark this friendly resource that walks you through various accessibility guidelines.
What’s the right font size in web design? – Things to consider when setting the size of your type.
10 Free InDesign Templates for Creating Professional Resumes – Stand out from the competition by using one of these excellent resume templates.
How I Make CSS Art – A look at how you can express your creativity through CSS.
10 Free WordPress Plugins for Adding jQuery Effects to Your Site – Leverage the power of jQuery on your website without having to write any code.
How a Designer Might Create Timeless Designs – Exploring what makes a design “timeless”, and how you might go about creating one of your own.
Kinetic Typography Page Transition – Build a UI where background letters come into the foreground and reveal a new content level.
goodbrief – This design brief generator can help to get your creativity flowing.
The Impossible Question: How Long Does It Take to Build a Website? – Exploring some factors that can impact your project’s launch date, with tips for making more accurate projections.
DashNav – Grab a copy of this free dashboard navigation kit based on Bootstrap 5.
Creating the Perfect Commit in Git – How to make commits that are both clean and granular in focus.
The 15 Best Free eCommerce & Shopping Themes for WordPress – Take your online store to the next level with one of these free WordPress themes.
The post Weekly News for Designers № 613 appeared first on Speckyboy Design Magazine.