Weekly News for Designers № 616

51 git commands that you’ll ever need to get started with Git – This handy reference provides need-to-know git commands.
Example from 51 git commands that you'll ever need to get started with Git

Repetitive Typography Animation – Check out this experimental typography animation, where words get duplicated several times.
Example from Repetitive Typography Animation

Typographica Library – Level up your typography game with this digital bookshelf of type and lettering resources.
Example from Typographica Library

8 Free Maintenance & Coming Soon Plugins for WordPress – Use these free plugins to inform your visitors about ongoing maintenance or a brand-new site.
Example from 8 Free Maintenance & Coming Soon Plugins for WordPress

CSS Squid Game – Squid Game challenges, recreated using pure CSS.
Example from CSS Squid Game

Expandable Sections Within a CSS Grid – Learn how to create a full-width, expandable section that works beautifully with CSS Grid.
Example from Expandable Sections Within a CSS Grid

For Casual Users, Information on New WordPress Features Can Be Hard to Find – Some ideas for closing the WordPress knowledge gap.
Example from For Casual Users, Information on New WordPress Features Can Be Hard to Find

HOCUS :FOCUS – Get into the Halloween spirit with this keyboard accessibility horror game.
Example from HOCUS :FOCUS

Lorem.space – This placeholder image API features movie posters, fashion images and other real-world items.
Example from Lorem.space

2021 Design Tools Survey – Take this annual survey and share your experience with design tools.
Example from 2021 Design Tools Survey

Is It Really Worthwhile Having a Personal Portfolio? – Why a portfolio site may not be as valuable as it used to be.
Example from Is It Really Worthwhile Having a Personal Portfolio?

Nord Design System – Get inspired by this publicly-available design system from Nordhealth.
Example from Nord Design System

Evaluating Clever CSS Solutions – Clever CSS tricks are nice, but usually not necessary.
Example from Evaluating Clever CSS Solutions

Definitive edition of “How to Favicon in 2021” – A look at implementing favicons that work across devices and use cases.
Example from Definitive edition of "How to Favicon in 2021"

Defining a Vision for Your Web Design Business – A look at some ways to better understand who you are and what you want out of web design.
Example from Defining a Vision for Your Web Design Business

uiGradients – Find your favorite gradients with this collection of copy-and-paste styles.
Example from uiGradients

Compressio – Save precious bandwidth with this image compression tool.
Example from Compressio

The post Weekly News for Designers № 616 appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

30 Free Responsive Email & Newsletter Templates

Newsletters have been a critical area of marketing since the inception of the web. They have been and continue to be an essential method of communication for brands and businesses to share new content and product updates. Even though social media is hugely popular, there is no replacement for email. Most users would rather keep their business within their private inbox – and their personal lives on social networks.

When you consider that there will be an estimated 330 billion emails sent and received per day next year (2022), and that over 90% of those emails will be checked or opened on a mobile device, the importance of using a responsive template for your email marketing campaigns has never been higher.

As you will probably already know, designing simple HTML emails is challenging in itself. But creating emails that work well across all email clients and also work on all of the various mobile devices and sceeen sizes is even more challenging.

Thankfully, there are many designers and developers that have done most of the work for you by creating easy to edit and free responsive newsletter templates that work well on all email clients and devices. You will find the best of them below.

Pre-Designed Responsive Newsletter Templates

Briar Free Responsive Email Template (by Slicejack)

Briar is a free responsive newsletter template with a simple design. It has been thoroughly tested with Litmus and EmailOnAcid, and works perfectly well in all email clients. This template is MailChimp-ready.

Green Village Free HTML Template (by Pixelbuddha)

Green Village is a clean pre-designed email template that is suitable for various purposes and business types. The download package includes both a layered PSD template and the HTML source files.

Green Village HTML free responsive newsletter template email

Olivia eCommerce Responsive Email Template (on Envato Elements)

Compatible with almost all email service providers, Olivia is a responsive newsletter template that comes bundled with thirteen pre-designed modules so you can create your newsletter exactly how you want it.

Olivia eCommerce responsive newsletter template email

Bussy Free HTML Email Template (by MailBakery)

Bussy is a free newsletter template that has been designed with a simple layout and dark blue and soft red color scheme, making it ideal for corporate business.

Bussy Free HTML responsive newsletter template email

Passion Free Responsive Email Template (by Pixelbuddha)

Modern and clean, Passion is a multi-purpose email template that various business types can use. It is compatible with both MailChimp and CampaignMonitor, and works in all major email clients.

Passion free responsive newsletter template email

Madeline eCommerce Responsive Email Template (on Envato Elements)

Easy to customize and bundled with nine pre‑designed modules, Madeline is the perfect responsive newsletter template for fashion and eCommerce businesses. You can create your newsletter without writing a single line of code by using the built-in email builder.

Madeline eCommerce responsive newsletter template email

MailPortfolio Free Responsive Email Template (by Slicejack)

With a simple and clean design, MailPortfolio is a free responsive email newsletter for sending personal portfolio or blogging updates to your readers and followers.

MailPortfolio free responsive newsletter template email

Emailology Responsive Email Template (by Email On Acid)

Released by Email on Acid, Emailology is a pre-designed template that offers three layouts that trigger based on the screen’s width. By default, it supports either one, two or three columns, and as you activate each media query, the template converts to a one column layout for mobile devices.

Emailology free responsive newsletter template email

Way Mail Email Template (on Envato Elements)

Way Mail is a collection of email templates that comes with over thirty pre-designed modules. Responsive, compatible with all major email service providers, and also includes the PSD templates of the original design.

Way Mail responsive newsletter template email

Creative Boost HTML Email Template (by MailBakery)

Creative Boost is a free newsletter template from MailBakery that is fully responsive and tested in all major email clients. It comes with a dark color scheme that would be perfect for most types of businesses.

Creative Boost HTML free responsive newsletter template email

Free Material Design HTML Email Template (by Paul Goddard)

Created by Paul Goddard and based on the design aesthetics of Google’s Material Design, this simple newsletter template has been fully Litmus tested and is completely free to use.

Material Design HTML free responsive newsletter template email

Dazzle Photography Email Newsletter Template (on Envato Elements)

Even though the minimally designed Dazzle newsletter template has been specifically built for photographers, it could easily be edited and used by any creative person or agency. It comes with an online builder, so you don’t need to know any coding to design your newsletter.

Dazzle Photography free responsive newsletter template email

Daily Times Email Template (by Email On Acid)

The free newsletter template Daily Times is perfect for online newspapers, magazines, and personal bloggers to share content with their followers and readers. It can even deliver dynamic ads when paired with LiveIntent’s software.

Daily Times free responsive newsletter template email

Shopilicious Free HTML Email Template (by MailBakery)

Thoroughly tested in all major email clients, Shopilicious is a free responsive newsletter template that has been designed specifically for eCommerce stores.

Shopilicious HTML free responsive newsletter template email

Litmus Responsive Email Templates (7 Templates, by Stamplia)

Designed by Stamplia and released by Litmus, this is a collection of seven pre-designed responsive email templates that been thoroughly ‘Litmus-tested.’ They also come with the PSD source files.

Litmus HTML free responsive newsletter template email

Barebones Responsive Newsletter Templates

Cerberus Responsive HTML Email Templates (3 Templates, by Ted Goas)

Cerberus is a small collection of robust and thoroughly tested barebones HTML email templates. The Fluid template is percentage-based and shrinks on mobile screens, the Responsive template uses media queries, and finally, there’s a Hybrid template which uses a blend of both percentages and media queries.

Antwort Responsive Layouts for Email (3 Templates)

Antwort offers a small collection of barebones responsive layouts for email that fits and adapts to client widths. The one, two, and three column templates work perfectly well on all major desktop and mobile email clients. The templates also come with extensive documentation.

Email Blueprints HTML Email Templates (6 Templates, by MailChimp)

MailChimp released this collection of six bare-bones responsive templates, entitled Email Blueprints, so that they could be used as a solid starting point for designing email newsletters. The templates include some MailChimp specific template language elements, but they can be easily removed if you are not a MailChimp user.

Basic Free HTML Email Template (by MailBakery)

Designed to be used as a base for your own responsive email newsletters, Basic is a free to download template that comes with just enough CSS and a simple layout so that you can get started quickly.

Responsive Table-Based Email Template (by Phil Wareham)

This barebones template has been based on MailChimp’s Email Blueprints and the Email Boilerplate from Sean Powell. It is a responsive table-based email template that includes MailChimp merge tags, but they can be removed if you don’t need them.

Responsive Newsletter Frameworks

Foundation for Emails (11 Templates)

Previously called Ink, Foundation for Emails is a responsive email framework from ZURB that includes a flexible grid system and some simple UI elements for rapid email prototyping. Foundation for Emails also has 11 responsive email templates available.

MJML Responsive Email Framework (21 Templates)

MJML is a markup language that has been designed to reduce the pain of coding a responsive email. Its semantic syntax makes the language straightforward, while its rich standard components library shortens your development time and lightens your email codebase. MJML’s open-source engine takes care of translating the MJML you wrote into responsive HTML.

Bojler Responsive Email Framework (2 Templates)

The Bojler Framework has been built by the team at Slicejack to make it easier for you to create lightweight and responsive newsletters. The framework has been thoroughly tested on numerous email clients and devices.

The HTML Email Framework (3 Templates)

The HTML Email Framework has been developed to help you build responsive HTML email templates using pre-set grid options and simple components needed for building responsive HTML email templates. It support’s over 60+ email clients.

Maizzle Framework for Rapid Email Prototyping (5 Templates)

Powered by Tailwind CSS and a Node.js build system, Maizzle is a modern framework for developing HTML emails and newsletters. The framework doesn’t use tags like row or column; instead, you use real HTML tags that you style with Tailwind CSS’s utility classes.

The post 30 Free Responsive Email & Newsletter Templates appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

The Symbiotic Relationship Between Designers and Copywriters

Designers and copywriters have a symbiotic relationship. In our modern, web-based industry, one can’t really exist without the other.

Copywriters provide the engaging content that snags users’ attention and prompts them to buy, and designers provide the overall framework that facilitates a great experience for said user.

In fact, designers and copywriters have quite a bit to learn from each other. Having done both for quite some time now, I’m going to let all of you designers in on some important secrets from the copywriting side.

Let’s explore some of the things that you designers can learn from copywriters to improve your problem-solving strategies and communicate better with your target audience.

Headlines Are All Important

If you can’t hook your audience with the first few words, you’re toast. Similarly, if you can’t catch your user’s attention with the initial impression of a design, no one will care how well it solves their problem.

There could be a really useful article behind that bad headline, or a really useful solution behind that ugly design, but no one will care.

Sure, many designers have written and spoken at length about the undue emphasis on “pretty” designs, especially among the crop of so-called “Dribbble designers.” Designers will post work specifically to get praise and positive feedback, and not be concerned about how it actually works.

But there’s something to be said about an eye-catching design. In fact, looking good is part of the function a design serves. You have to get people’s attention somehow, after all. Pretty up those “headline” elements.

Even If You’re Preaching To The Choir

Even if people know and like your work, a copywriter will still need to work to capture people’s attention and keep them coming back. People who subscribe to newsletters will quickly unsubscribe if the content gets boring or unengaging.

It works the exact same with design. Just because people enjoyed your work in the past, it doesn’t mean they will in the future. Especially nowadays, with so many things available to occupy our attention, both designers and copywriters have to work really hard to grab those all-important eyeballs.

Aim For Strategic Hooks

It’s impossible to create a winning piece of content every single time, even within the same project. Not everything can be a winner, as they say. That’s just the reality of any creative endeavor – you win some, you lose some.

Keeping this fact in mind a good copywriter needs to structure their releases to hook people at key times. Holidays and major life changes (buying a new house, weddings, children, etc.) are ideal for your most powerful hooks.

In fact, they might not even work any other time. Same thing for designers. You can get away with certain things for these types of events – crazy type, bold colors, skewed or unconventional compositions – that you would never be able to get away with at any other time.

People Have Less Time Than Ever

People are busier than they’ve ever been before. Everyone is multitasking – checking Twitter and Facebook while skimming their emails at work and texting their spouses about what to eat for dinner.

They don’t have time to slowly peruse your boring or slow website. A copywriter has a very short window to grab someone’s attention, and if they can’t do it, they can kiss that user goodbye.

Designers, you guessed it: the same applies to you. It might not be an ideal situation when someone is only giving an average of three seconds to your content, but there’s nothing you can do about it.

It’s your job to adapt to reality and make sure that people are intrigued enough by your designs to take a closer look.

The post The Symbiotic Relationship Between Designers and Copywriters appeared first on Speckyboy Design Magazine.

Weekly News for Designers № 619

UI cheat sheet: Accordions – There are more to accordions than meets the eye. This guide will show you everything you need to know.
Example from UI cheat sheet: Accordions

Free Practical Guide to Web Animation – The guide introduces web animation techniques with examples and tips on how to use them.
Example from Free Practical Guide to Web Animation

The 40 Best Free Bootstrap 5 Templates & Themes in 2021 – Find the perfect free Bootstrap template for your next project.
Example from The 40 Best Free Bootstrap 5 Templates & Themes in 2021

Useful React Hooks That You Can Use In Your Projects – Examples of how React Hooks make for an easier development experience.
Example from Useful React Hooks That You Can Use In Your Projects

Why developers are so divided over WordPress – The pros and cons of the world’s most popular CMS.
Example from Why developers are so divided over WordPress

HTML and CSS Handwritten Cheat Sheets – Use this small eBook to learn the ins and outs of CSS layouts
Example from HTML and CSS Handwritten Cheat Sheets

refine – Use this React-based framework to build data-intensive applications.
Example from refine React Framework

8 Powerful Plugins for Integrating Social Media into WordPress – Add all manner of social media functionality to your website with these plugins.
Example from 8 Powerful Plugins for Integrating Social Media into WordPress

Pearl UI – A design-system-driven UI framework for building mobile apps with React.
Example from Pearl UI

Repobeats – Add highly-visual insights to your GitHub repositories with this tool.
Example from Repobeats

Photorealistic Mockup: Shadows + Slides Grid – A free Figma mockup to show off your slide designs.
Example from Photorealistic Mockup: Shadows + Slides Grid

Exploring Web Development History with Richard MacManus – One writer’s quest to document the earliest days of web development technology.
Example from Exploring Web Development History with Richard MacManus

Add-to-Calendar Button – This JavaScript snippet lets users add your event to a multitude of calendar apps.
Example from Add-to-Calendar Button

Sizze – Figma to React Native – Create an app prototype and instantly export it to React Native code.
Example from Sizze - Figma to React Native

FaviconCheck – This tool will show you how your site’s favicon will look on various devices.
Example from FaviconCheck

8 HTML Code Snippets for Creating Responsive Newsletter Templates – A collection of sharply-designed snippets that cover a variety of potential use cases.
Example from 8 HTML Code Snippets for Creating Responsive Newsletter Templates

Quick and Dirty Bootstrap Overrides at Runtime – This tutorial can help you work around some challenging situations with Bootstrap.
Example from Quick and Dirty Bootstrap Overrides at Runtime

The post Weekly News for Designers № 619 appeared first on Speckyboy Design Magazine.

8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects

When it comes to creating a great piece of web-based art, the details are what stand out. Lighting and shading effects are prime examples. They can turn a flat, 2D work into an immersive 3D experience.

For quite a while, the ability to add realistic light and shade to an illustration or animation seemed like the holy grail. The technology wasn’t always there. Thus, developers had to find workarounds to approximate the effect.

Thankfully, the power of CSS and various JavaScript libraries have ushered in a new age. It’s now possible to add lighting and shading effects that are nearly on par with what we see in video games.

Today, we’ll share some CSS and JavaScript code snippets that bring these effects to life. Enjoy!

Creativity Now✨(click anywhere) by Anna the Scavenger

Text seems like a natural place to add lighting and shading. But this example takes it to a whole other level. The creative makeup of each letter and cursor-following animation makes this a true work of art. It’s akin to a 3D mobile hanging from your ceiling. Even better: click on the presentation to create an entirely new look.

See the Pen Creativity Now✨(click anywhere) by Anna the Scavenger

Photo Tear by Steve Gardner

Place your cursor on one of the upper corners of a photo, then click-and-drag downwards. You’ll notice the image ripping apart. By itself, that’s a pretty cool effect. But what really sells it is the shading as the perspective shifts. The entire process feels very much authentic.

See the Pen Photo Tear by Steve Gardner

Platonics by Liam Egan

This 3D animation has a stunning liquid effect. A piece of metal twists and morphs its way into various objects. Realistic reflections make it all the more compelling to watch, thanks to WebGL.

See the Pen Platonics by Liam Egan

Beat Burger by Steve Gardner

Nothing like performing a huge drum solo in the spotlight. What? You’ve never been in a famous band? Maybe the next best thing is to play this virtual drumkit, made from a hamburger. You get the sounds, the spotlight and even the shadows. Just don’t get any grease on your new clothes.

See the Pen Beat Burger by Steve Gardner

Monochromatic Yoyo – Pure CSS by Josetxu

Here we have a slinky-like array of pure CSS squares. Their chain-reaction animation is further enhanced by the use of, you guessed it, lighting and shading. Gradients add the illusion of depth, while drop shadow moves along with each layer of the animation.

See the Pen Monochromatic Yoyo – Pure CSS by Josetxu

Art Gallery by isladjan

This virtual art installation is certainly abstract. It features a colorful blob that morphs as your cursor moves across the screen. Rays of light add a touch of realism. However, click on the “Light OFF” button and the entire presentation transforms into a particle explosion.

See the Pen Art Gallery by isladjan

SVG lighting shader by Artem Lvov

With clever implementation, the flashlight effect can be simply amazing. Here it’s used to illuminate a rocky surface. Thanks to SVG, the image looks ultra-realistic. Both the light and perspective shift along with your cursor. It also has the benefit of being safer than walking around in the woods after dark.

See the Pen SVG lighting shader by Artem Lvov

Pacman Concept by Ivan Juarez N.

This PAC-MAN inspired snippet brings the beloved video game into the 3D age. Ghosts travel through an illuminated cube, with sharp rays of light bursting through the maze. Once again, the cursor plays a role, as you can change the scene’s perspective by moving around.

See the Pen Pacman Concept by Ivan Juarez N.

Finishing Touches That Stand Out

It used to be that you needed high-end software to create convincing lighting and shading effects. But, thanks to the advancements in web technologies, similar enhancements can be achieved through code.

The ability to leverage hardware acceleration also plays a key role. Without the power of the graphics processing unit (GPU), these advanced scenes couldn’t run with such fluid motion.

Put together, the results can be stunning. And the examples above might only be scratching the surface of this potential.

Want to check out even more amazing 3D scenes? Visit our CodePen collection to get your fill!

The post 8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Getting out of the Freelance Pricing Trap

Freelancing is riddled with challenges. You end up being part designer, developer, copywriter, marketer, social media guru, customer service representative, and tax expert all at the same time.

If anyone thinks that doing freelance work is easy, they need to think again!

And that’s why it’s so important to make sure you don’t stumble into the freelance pricing trap many freelancers fall into. As there are already so many things you already have to deal with, you really want to avoid this one from the beginning.

So, What’s the Freelance Pricing Trap?

The freelance pricing trap is not charging enough for the work that you do. And it happens much more often than you would think.

Many freelancers feel like they don’t have enough experience or expertise to charge a certain rate, so they simply don’t. They price below the market rate because they feel they aren’t qualified to charge for more.

Some freelancers may actually feel bad for charging more. They feel like it’s too expensive and that they can’t justify charging so much.

However, if you want to make it as a freelancer, this needs to change.

Why it Needs to Change

Not charging enough for your services is a huge issue because it sets up the wrong expectations for your clients from the outset. It makes them devalue your work and expertise. They may also presume that you’re not as talented as others in your niche because you don’t charge as much they do.

This is a real problem. I know of an online learning school that couldn’t get work in a wealthy city because they didn’t charge as much as the competition. Since they didn’t charge as much, the perception was that they weren’t as good as other similar schools. This happens to many businesses, and it happens to freelancers as well.

It also makes the work you do less rewarding. And since the work is less rewarding, you’re much more likely to get disheartened and potentially burn out. Consider this common scenario for a moment:

A client calls asking how much a particular web project would cost to design and build. You ask for the brief, take the time to work out the number of hours it would take, and then respond with an estimate. But this is where it gets interesting.

The client tells you they can’t afford that much and counters by asking if you can do it for less, much less. Not wanting to lose out on the business, you agree since you don’t feel confident enough in your ability to negotiate a higher rate.

You also really need the work and don’t want to miss out on the revenue. Or so you think…

You begin working only to realize that you’re getting paid for half of what the project’s worth. If you’re just starting out in the freelance world, that may not necessarily be a huge issue because you’re trying to build up your portfolio and get your name out there, but if you’ve been freelancing for a while, that is a huge problem.

You’ve got bills to pay and mouths to feed. You’ll end up working more hours on extra projects just to make up for the drop in pay you’ve received from this project.

You may become resentful of the client and more than likely disappointed in yourself. Instead of putting in your best work, you give less than your best effort. And why shouldn’t you? You’re getting paid less than what you’re worth.

Then it comes time to get the project approved. Surprise, surprise: the client has a list of changes they would like. But you’re already over on hours! And you’re already getting underpaid!

More resentful than ever, you dig back into the project half-heartedly. When will this project finally be finished?

Have you ever experienced a project like this? If you have, you understand the primary reasons it’s detrimental to charge less than you’re worth:

  • You won’t put your full heart and soul into the project.
  • You won’t produce your best work which ultimately is what would allow you to raise your rates in the future.
  • You won’t attract clients that value your work and understand the costs.
  • You won’t make enough money to cover your bills and will mean an increase in the number of hours you work.

What Should You do Instead?

In order to not fall into the trap of lower-paid work, here are three tips to consider:

1. Find out what the market pays for your type of service and get to that rate as quickly as possible.

Whether it’s photography, web design, or copywriting, there’s a freelance market rate that professionals realize they need to earn to make a living.

Instead of thinking you can win more work or clients by undercutting this price, do whatever it takes to get to the market price as quickly as you can.

Yes, you’ll need to spend some time building up your portfolio and personal brand, but once you have reached that point where you’re happy, stop offering discounted rates.

2. Don’t be afraid to charge what you’re worth.

Many freelancers don’t like asking for more money or even asking for the going freelance rate. They feel like they’re not qualified or experienced enough.

If that’s the case, continue building your portfolio, but if it’s not, don’t be afraid to ask what you’re worth.

3. Incrementally raise your rates.

The number one thing that shoots negotiators in the foot is being desperate to close a sale. If you’re desperate for the business, you won’t be able to negotiate as well.

This means you’ll have the most trouble at the beginning of your freelance career. But once you start picking up clients and have a decent amount of work, start raising your rates.

If you aren’t as desperate to pick up your next client, you can afford to ask for more money now. If they take it, you can drop lower-paying clients at the right time and raise your rates again with subsequent clients.

Just remember to continue raising your rates once you have a healthy amount of work. It only makes sense that you charge more as you get better at what you do.

Falling Out of the Trap

If you feel like you’ve fallen into the trap of not charging enough for what you’re worth, make the decision to start charging more today.

By incrementally increasing your rates, you can quickly get to the market rate for your type of freelance work, and if you’re really good at what you do, you can even start charging more than the market rate.

That’s the kind of “trap” you want to fall into.

The post Getting out of the Freelance Pricing Trap appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

10 Free WordPress Plugins for Extending BuddyPress and bbPress

BuddyPress is a powerful, free plugin that adds community features to your WordPress website. Install it on your site, and you’ll have access to handy features like activity streams, user profiles, notifications, groups, and private messaging. But that’s just the base layer of what BuddyPress can do.

bbPress is a forums plugin that is often used in conjunction with BuddyPress. The forums are easy on the eyes, simple to use, and fit nicely with BuddyPress groups.

Extending BuddyPress and bbPress with plugins can bring even more functionality to make your site into a real online community hub. You might be surprised at some of the cool features you can easily add-in.

Here are 10 free plugins you can use to make BuddyPress and bbPress even better:

Free BuddyPress Plugins

BP Profile Search

Not only will BP Profile Search allow users to search member profiles, but it’s also a quick way to create a member directory. When it comes to search, you can build a custom form to meet your community’s needs. Directories are also easy to customize, with the ability to apply filters and create multiple member listings.

BuddyPress Docs

Add the power of collaborative documents to your community with BuddyPress Docs. Documents can be uploaded, assigned to specific users or groups, and edited on the front end of your site. There’s also a revision history and the ability to categorize/tag uploads.

BuddyPress Docs

BP Better Messages

BuddyPress has a default messaging system. But if you want to take things up a notch, BP Better Messages offers an improved user experience. It uses AJAX to power live chat, allows for file uploads and multimedia embeds. Messages can range from a private chat between two users or site-wide notifications.

BP Better Messages

BuddyPress Group Email Subscription

BuddyPress Group Email Subscription helps keep group members informed of activity. There are five different notification levels members can choose from: No Email, Weekly Summary Email, Daily Digest Email, New Topics Email and All Email. If desired, admins can set a default notification level for users.

BuddyPress Group Email Subscription

BuddyPress Registration Options

Spam bots can hit BuddyPress just like everything else on the internet. BuddyPress Registration Options helps squash spam registrations by allowing for moderation on new user accounts. Email notifications are sent when an administrator either approves or denies a new registrant. This plugin also works with bbPress.

BuddyPress Registration Options

Free bbPress Plugins

GD bbPress Attachments

GD bbPress Attachments enables users to upload files to forum topics and replies. Administrators can control file size limits, the number of files that can be uploaded at once, and can change things up on a forum-by-forum basis.

GD bbPress Attachments

bbp Style Pack

Want to change up the look of your bbPress install? bbp Style Pack lets you change fonts, colors, and forum layouts. In addition, you can tweak emails, and add handy features such as an unread topics page. And that’s just the beginning. This plugin gives admins plenty of ways to make bbPress their own.

bbp Style Pack

bbPress Notify (No Spam)

Take control of bbPress email notifications with bbPress Notify. Easily customize messages sent to users and choose who receives them. The plugin is developer-friendly, with lots of hooks and filters at your disposal.

bbPress Notify (No Spam)

GD bbPress Tools

GD bbPress Tools offers a suite of tweaks for your WordPress forums. Visual changes include the ability to disable breadcrumbs and advanced topic filtering. There’s also a collection of 30 shortcodes that make adding custom functionality a breeze. Unlock even more features with the pro version.

GD bbPress Tools

Private Groups

If you’re looking to limit your forums to a specific group of users, give Private Groups a try. The plugin allows administrators to restrict specific forums and topics. There’s a lot of flexibility here when it comes to user permissions – perfect for bbPress installs that need both public and private access. This is a great option for membership websites.

Private Groups

Build Your Community

The combination of BuddyPress and bbPress can help you build a bustling and productive online community. And, because they both take advantage of WordPress, they’re also very easy to use and customize to fit your needs. Experiment with them and see how they can benefit your WordPress website.

The post 10 Free WordPress Plugins for Extending BuddyPress and bbPress appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Despite Its Critics, jQuery Forges Ahead

A web technology rarely maintains a continually growing user base over a long period. WordPress has done it, as has Bootstrap. But even they don’t have quite the market penetration of jQuery.

The venerable JavaScript library first debuted in 2006 and (as of this writing) is used by over three-quarters of all websites. Both its success and longevity are something to behold.

Yet, it’s also the target of a lot of online vitriol. In some circles, developers are loathed to give jQuery its due – instead focusing on the latest buzzworthy libraries.

This is understandable, as junior competitors like Vue and React have a lot of exciting features – if nowhere near the number of users. People naturally want to talk about what’s new. Established products that just keep chugging along don’t generate the same level of fanaticism.

But that doesn’t mean we should ignore jQuery altogether. It’s made a massive impact on the web and is still useful today. Join me as I take a look back at the library’s past and what the future may hold.

Bringing Cross-Browser DOM Manipulation and Effects to the Masses

Before jQuery came along, the ability to implement JavaScript with cross-browser support was difficult. In addition, the concept of using CSS for advanced effects like animation wasn’t fully realized yet. Thus, part of the library’s aim was to ensure that tasks like event handling and DOM (Document Object Model) manipulation would work on a variety of system configurations.

And you didn’t need to be a JavaScript expert to use it. Even a little bit of background knowledge would empower a developer to, say, add or remove CSS classes from an element based on user interaction. The documentation offered up many useful code examples that could be modified to fit a particular need.

It also allowed for the implementation of advanced UI elements, with the help of jQuery UI. Features such as accordions, date pickers, and tabbed interfaces were built right into the project. They could also be styled via CSS or a custom theme. And its architecture also allowed for custom plugins to be built as well.

In other words, it brought consistency to an otherwise inconsistent area of development and was fairly easy to use. This made jQuery an attractive option for developers looking to add JavaScript to their projects.

The library has been used by all manner of different products. For example, it has been bundled with WordPress for several years now. And, with WordPress powering over 40% of all websites, that has undoubtedly boosted the usage numbers for jQuery as well.

In all, the ability to work with the sheer variety of browsers and devices out there made jQuery a safe, reliable choice for developers.

The Criticisms

There’s no such thing as a perfect tool. Everything web designers use has its flaws and shortcomings. jQuery is no different.

Over the years, the library has endured a lot of criticism. And plenty of fair points have been raised. Here are a few that stand out:

jQuery Is No Longer Necessary

As we mentioned, jQuery initially provided cover to developers who wanted to bring advanced features to their projects without having to worry about compatibility. Well, there are now more options for doing so.

CSS, in particular, can replace jQuery in many instances. Elements like animation, for example, can be crafted without the need for a third-party dependency. It’s a native solution that can take advantage of hardware acceleration. The result is lightning-quick performance without the overhead.

In addition, vanilla JavaScript has also come a long way since the early days of jQuery. With wide browser support, developers can be more confident in what they build with it.

jQuery Is Inefficient/Antiquated

When a project has been around for 15+ years, there are bound to be some inefficiencies. However, it’s worth noting that the version of jQuery your project utilizes can make a significant difference.

Consider the case of WordPress. Through several versions of the content management system (CMS), jQuery 1.1.x was bundled. These legacy releases were kept in part to maintain backward compatibility with themes and plugins.

The last of these, jQuery 1.12.4, was released in 2016. Not until WordPress 5.6 (released in 2020) did the more modern jQuery 3.5.1 make its way into core.

If you’re still stuck with those older versions, performance can definitely suffer. But, in my own testing, sites running later jQuery releases seem to perform significantly better in Google PageSpeed Insights. Of course, your experience may vary.

That’s not to say jQuery is always going to be the most efficient solution. Still, progress has been made in this area.

A snail sits on pavement.

A Look at the Future

For all the criticism, it doesn’t look like jQuery is going away anytime soon. Part of that is due to the massive number of products that depend on it.

For instance, separating it from WordPress core would be a monumental task. And that’s not even counting the number of themes and plugins that also use the library. Even a highly coordinated effort to sever ties would likely take years.

The other thing to note is that jQuery is still in active development. There’s been an effort to bring it up to speed with the modern web. Recent releases have improved performance and fixed bugs.

In addition, the project has placed its focus squarely on jQuery core. Both the jQuery UI and jQuery Mobile projects are winding down, freeing up resources for the core revamp. The content delivery network (CDN) that hosts the project’s code is also being fortified.

The upshot is that jQuery is still improving and therefore continues to be an option for web designers.

A person views code on a computer screen.

Should You Still Use jQuery?

Admittedly, I’m not a hardcore JavaScript developer. I can’t tell you the best library for your project, or whether you should use a library at all. These are very much personal decisions, based on preference and need.

If you’re comfortable using jQuery, you can be confident that the library will still work and receive updates. Frankly, that should be enough of a reason to carry on using it.

As far as what other developers may think – haters are gonna hate. But don’t let that stop you from using the tools you enjoy and trust. For more than a decade, jQuery has earned it.

The post Despite Its Critics, jQuery Forges Ahead appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

Those Things You Must Do When Ending a Freelance Design Project

It sounds so simple, right? You do a good job on a design project, the client loves it and pays you on time, you both walk away feeling good about the exchange.

But if you simply disappear off your clients’ radar once the work is done, you’re missing massive opportunities for more work, as well as testimonials and referrals to help your business.

There are some important things that most designers never do when ending a freelance project, and today we’re going to go over what they are and why you should always do them, no matter what.

Wrap Up All The Loose Ends

The most important thing you should do when ending your project is to make sure that your client is 100% set to move forward without you. This means providing them with a package that includes everything they will need to manage on their own (site logins, full-resolution files, etc.)

It also means providing them with ways to solve any problems they might have without having to call you, in the form of FAQs, troubleshooting guides, or checklists.

Despite what you might think, it’s actually a waste of your time to have an old client call you for help with minor stuff that you could have easily provided for them in an email or spreadsheet. It’s unprofessional to hoard all the knowledge of how to use the goods you’ve created for your client in your head, making them come crawling back to you to obtain it.

You might not think this is what you’re doing, by neglecting to provide your client with information, but this is the way it comes across.

Keep Them Warm

People are much more likely to purchase services from people they’ve worked with before, so you already have that working in your favor. All you need to do is keep the line of communication open for when you need it again.

We’re all guilty of letting a relationship fade away, then finding ourselves wishing we hadn’t. But you can’t just pop up out of nowhere after months or years of not communicating with a client and ask for more work. The relationship needs to be kept warm in the meantime.

Luckily, it’s easier than you think to do this and make sure your clients never fail to think of you when they need high-level work done by a professional they trust.

It does you no good to drop off the face of the earth and never talk to your old clients again. You never know when a former client might be handy as a reference or provide some other career-boosting aid. You can’t just ignore someone for months and only contact them when you need something.

For clients, you definitely want to maintain a relationship with, make a minimum contact of one email per month. You can send them a brief update on what you’re up to, letting them know subtly that you’re still interested in referrals.

You might think you’re important and unforgettable, but you’re really not. You’re replaceable just like anyone else. In addition to your main client (as in, whoever signed your paycheck), send regular emails to any team members you worked with who you want to maintain a relationship with.

They’ll be more likely to let you know about any new projects or opportunities that might be of interest to you. Let them know what projects you’re currently working on (of course, never reveal any confidential or sensitive info).

hello neon text blue

Be Of Service

Always be thinking about how you can help your former clients, even though you’re no longer working for them. Send them information or introduce them to others you think might be able to help them. Just because you’re no longer getting paid by your former client, it doesn’t mean that you still shouldn’t try to help them in other ways.

Send 3-5 emails throughout the year that offer some kind of value – a link to a useful article, an offer to introduce someone who might be helpful, whatever – before you go asking for something.

A great way to instantly add value to any type of professional relationship is to become a connector. What that means is, if there’s someone you know whom you know a former client would benefit from knowing, don’t be afraid to make the connection and introduce them to one another. Your client will be grateful and you’ll be on the top of his or her mind the next time a juicy opportunity comes up.

service banner

It’s far easier to keep a current client happy than it is to gain a brand new client. You should always strive to acquire new quality clients; however, it’s possible to get trapped in a never-ending cycle of finding new clients and totally ignoring the old ones.

This is the worst thing a freelance designer can do – it means you’re spending valuable time generating new leads instead of designing, which will ensure that your portfolio work never develops or makes any interesting progress and you never get picked for the cool, high-level jobs you want.

But if you can retain most of your current clients, staying in touch with them so they never forget about you when they need more work done, you’ll have the opportunity to live life at a more leisurely pace (well…for a freelancer, that is) and spend more time designing.

Now that you have finished this project, here are five questions you should ask before starting your next.

The post Those Things You Must Do When Ending a Freelance Design Project appeared first on Speckyboy Design Magazine.

Did you miss our previous article…

10 WordPress Plugins to Supercharge Advanced Custom Fields

I have to admit – I have a bit of a dev-crush on Advanced Custom Fields (ACF). The popular WordPress plugin allows you to build some incredibly powerful and user-friendly customizations. It takes WP’s already built-in ability to use custom fields and adds an attractive GUI for ease of use. But that’s really just scratching the surface.

Using ACF, you can create a custom UI that makes adding content a breeze. This makes for better efficiency and serves as a helping hand for non-technical users.

For example, you might dedicate a section of your website to staff member profiles. You could create custom fields for each person’s name, title, email address, photo, and biography.

From there, you add the custom fields to your theme’s template or as a custom block so that they display exactly the way you want. The result is that inputting content is quite simple, and you ensure that the data displays consistently on the front end. So yeah, that’s why I love using this plugin!

Even better is that several developers have created companion plugins that add even more cool features to ACF. Let’s have a look:

Advanced Custom Fields: Extended

Advanced Custom Fields: Extended provides a suite of enhancements for ACF Pro (yes, you need the Pro version). The plugin not only includes its own custom field types but also boosts some existing ones as well. And it works seamlessly with ACF, meaning there are no extra settings panels to configure.

Among the included fields: Button, Code Editor, Columns, Google reCAPTCHA, and more. But that’s just scratching the surface of what this plugin can do. A pro version adds even more goodies.

ACF Photo Gallery Field

ACF Photo Gallery Field offers an easy way to add WordPress photo galleries to your custom field setup. From there, theme authors can leverage PHP and CSS to create a custom look and layout for galleries in their templates. Thus, it’s aimed more at the DIY crowd than those who prefer an all-in-one solution.

ACF Photo Gallery Field

ACF: Better Search

One drawback of custom fields is that their contents aren’t searchable by default. ACF: Better Search adds custom fields to the WordPress search function, ensuring users don’t miss out. An options panel allows you to choose which field types to include, along with a few other search-related tweaks.

ACF: Better Search

ACF Quick Edit Fields

ACF Quick Edit Fields lets you view and edit custom field values right from the WordPress post listing. You can also take advantage of bulk edit functionality to change the values of several posts at once. This can be a huge time saver, as there’s no need to click into each post individually.

ACF Quick Edit Fields

Advanced Custom Fields: Image Aspect Ratio Crop Field

ACF image fields are great because they allow content creators to easily swap out media files. However, ensuring that new images are sized correctly can be a challenge.

Image Aspect Ratio Crop Field provides a UI for users to crop their uploaded image to a specific size or aspect ratio. This helps to mitigate the risk of a client breaking your carefully-crafted look and layout.

Advanced Custom Fields: Image Aspect Ratio Crop Field

ACF Theme Code

ACF Theme Code solves a very common issue when adding custom fields – you need to add code to your theme in order to render that data (although Shortcodes are also available for more simple implementations). This can get rather complicated even for seasoned developers.

Using this plugin, a code snippet for each field is displayed at the bottom of an ACF page that you can copy and paste into your theme. A pro version adds more features, including compatibility with several third party add-ons (some of which are in this roundup).

ACF Theme Code

Advanced Custom Fields: Font Awesome Field

This plugin combines my passions for both ACF and Font Awesome icons. It adds a field that lets users choose an icon to go along with their content.

For example, I recently used this to add icons to text headings within a page. It makes for a nice way to separate content and provide context to visitors. Plus, people really like to pick out their own icons.

Advanced Custom Fields: Font Awesome Field

Advanced Custom Fields: Table Field

Here’s an easy way to add custom field data to HTML tables. What’s nice is that the non-technical user can enter data without having to worry about breaking anything. Simply drag rows or columns to reposition them. Tables can also have an optional header.

Advanced Custom Fields: Table Field

Advanced Custom Fields: Gravityforms Add-on

Both ACF and Gravity Forms are among the most flexible WordPress plugins. So it makes sense that there’s now a way to tie them together. This add-on creates a new “Forms” field type that will allow the user to select the form of their choice from a drop-down list.

Advanced Custom Fields: Gravityforms Add-on

Ajax Load More for Advanced Custom Fields

The Ajax Load More plugin adds infinite scrolling to various aspects of your WordPress Website. This add-on brings that same lazy loading functionality to ACF repeater, flexible content, gallery and relationship fields.

Ajax Load More for Advanced Custom Fields

Build It Your Way

If you’re serious about developing with WordPress, then custom fields are a must-have tool. With Advanced Custom Fields, you have the ability to customize just about any content scenario imaginable. It’s one of the tools that help make WordPress a truly powerful platform.

But combining ACF with the add-ons above will bring even more convenience and flexibility to the party. It will allow you to transform a standard website into something much more dynamic.

The post 10 WordPress Plugins to Supercharge Advanced Custom Fields appeared first on Speckyboy Design Magazine.

Did you miss our previous article…