In web design, change is the only certainty. New tools, trends, and techniques mean that we always have to be on our toes. Indeed, it seems there’s never a dull moment.
But moving your career forward isn’t so easy. Things often get in the way of the linear ascension we hope for. Sometimes it’s the result of outdated skills. Or perhaps your business just isn’t allowing you to grow at the desired pace.
Whatever the cause, these obstacles can leave you feeling stuck in neutral. Personal and professional growth is stunted. All the while, you watch from the sidelines as others seemingly move ahead.
However, all is not lost. There is plenty you can do to jumpstart your career. It’s all about identifying the obstacles in your way and taking action.
Not sure where to start? We’re here to help! Join us as we look at common obstacles and how to get past them.
Stagnating Skills
Web design is constantly being pushed forward by new technologies. Yet it’s still rooted in some foundational methods for putting a website together.
In practice, this means that it’s still possible to design and build a website using an “outdated” workflow. That’s not to say it isn’t functional (hence the quotes around “outdated”). At the same time, it might not provide many growth opportunities.
If you find that you’re still using techniques or technologies that are in decline, that’s a sign of stagnation. For example, think about a content management system (CMS) that is no longer receiving updates. Or a CSS layout method that has long since been supplanted by something more efficient.
There are plenty of other examples. But the idea is that it’s possible to hold onto a workflow a little too long.
This provides a great opportunity to learn something new. You don’t have to jump on the bandwagon of every buzzworthy technology that comes along. Rather, look for skills that make sense for your particular niche.
Projects That Don’t Offer a Challenge
When you’re managing multiple projects, efficiency means a lot. And if your projects tend to have a certain sameness to them, it can be difficult to break out and try something new.
That leaves little room to experiment and grow. The daily grind becomes more about crossing items off of your to-do list, as opposed to breaking new ground. It’s a common trap for web designers – particularly established freelancers.
Going with what pays the bills is fine. But, how can you level up when you’re stuck in survival mode?
There are a few possible avenues to explore. The first is to look for projects outside of your comfort zone. Something that goes against the grain in terms of your typical clientele or technology.
At first, it may sound a bit scary. But there’s a certain energy that comes along with being uncomfortable. It can be a great motivator and forces you to look at a project from a different perspective. Plus, you might have the opportunity to learn something new.
If hunting for new clients isn’t a good fit, then it never hurts to try the trusty side project. The benefit here is that you get to choose what you want to do. Find something you’re passionate about and start building!
Lack of Revenue
Survival mode is more than just working on “boring” projects. It also encompasses projects that simply don’t pay enough. Try as you might, it’s hard to get your career on track when caught up in a web of cheap clients.
There’s a school of thought that says you can rake in the revenue by working on a larger volume of little projects. That may be fine if you’re willing to work seven days a week. But not so great if you’d prefer to have a life outside of your job.
Prior commitments aside, this is a situation that can be resolved. Take a look at your revenue and determine what areas are hurting your bottom line. If they can be salvaged, don’t be afraid to raise prices. Otherwise, they can be trashed.
In a broader sense, raising your prices for new projects may also be in order. This could be a turn-off for some prospective clients. However, those that see the value in your expertise won’t think twice about the cost.
Suddenly, you’ll find yourself with the ability to make more money while working on fewer projects. That’s how you get ahead.
Imposter Syndrome
Sometimes, the biggest obstacle in our way is mental. It’s easy to fall into the trap of believing you’re not good enough to find success. Impostor syndrome, as they call it, is all too real.
Being a part of a large, diverse industry that features a variety of ways to build websites leaves so much open to interpretation. That can be both a good and bad thing. If you’re not following the trends, you might wonder if you’ll be able to learn the latest technology – or if you’re doing the wrong thing altogether.
Many of us can feel overwhelmed by the sheer amount of knowledge out there. And there’s often a fear that any change we need to make must happen all at once. It’s no wonder we can feel like imposters.
Defeating imposter syndrome takes time. But it starts with a belief in yourself.
Think about everything you’ve already accomplished. The skills you have mastered and the projects completed. The happy clients and colleagues. Those are signs that you are indeed good enough to keep moving onward and upward.
Moving Past the Obstacles in Your Way
Every web designer will face peaks and valleys in their career. Whether it’s a lackluster client roster, projects that don’t challenge your limits, or self-doubt – we’ve all been there. Thankfully, you don’t have to stay in a rut.
The most effective way to get past these obstacles is to first identify them. Once you know what you’re dealing with, you can do something about it.
Even better is that, after you’ve conquered one obstacle, you’ll have the confidence to take on the next one. Over time, you may start to see them as just temporary bumps in the road. Certainly, nothing to lose sleep over.
Remember, whatever stands between you and your career goals doesn’t have to stay that way.
Introducing 5.9, Joséphine. Named in honor of acclaimed international jazz singer Joséphine Baker, this latest, most versatile WordPress release is here: download it or update it directly from your dashboard.
As a lifelong civil rights campaigner, Joséphine Baker believed that all people could live in harmony together, just as different instruments in a jazz band blend together to make a whole piece. Turn on a playlist from your favorite music service and enjoy her famous renditions of “You are the greatest love”, “Sans Amour”, and “Love is a Dreamer” as you discover all the features of this brand-new WordPress release.
Full site editing is here.
It puts you in control of your whole site, right in the WordPress Admin.
Say hello to Twenty Twenty-Two.
And say hello to the first default block theme in the history of WordPress. This is more than just a new default theme. It’s a brand-new way to work with WordPress themes.
Block themes put a wide array of visual choices directly in your hands, from color schemes and font combinations to page templates and image filters, all from the Site Editor. So in one place, you can give Twenty Twenty-Two the same look and feel as your organization’s other materials—or take your site’s look in another direction.
You already have the Twenty Twenty-Two theme—it came installed with WordPress 5.9. You will find it with your other installed themes.
Your personal paintbox awaits
Twenty Twenty-Two is not the only theme built for full site editing. More block themes are in the Themes directory, and the number will grow.
When you use any of those new themes, you no longer need the Customizer. Instead, you have all the power of the Styles interface inside the Site Editor. Just as in Twenty Twenty-Two, you build your site’s look and feel there, with the tools you need for the job in a fluid interface that practically comes alive in your hands.
The Navigation block
Blocks come to site navigation, the heart of user experience.
The new Navigation block gives you the power to choose: an always-on responsive menu or one that adapts to your user’s screen size. And your choices are remembered! In 5.9, the block saves menus as custom post types, which get saved to the database.
More improvements and updates
Do you love to blog? New tweaks to the publishing flow help you say more, faster.
Better block controls
WordPress 5.9 features new typography tools, flexible layout controls, and finer control of details like spacing, borders, and more—to help you get not just the look, but the polish that says you care about details.
The power of patterns
The WordPress Pattern Directory is the home of a wide range of block patterns built to save you time and add to your site’s functionality. And you can edit them as you see fit. Need something different in the header or footer for your theme? Swap it out with a new one in a few clicks.
With a nearly full-screen view that draws you in to see fine details, the Pattern Explorer makes it easy to compare patterns and choose the one your users need.
A revamped List View
In 5.9, the List View lets you drag and drop your content exactly where you want it. Managing complex documents is easier, too: simple controls let you expand and collapse sections as you build your site—and add HTML anchors to your blocks to help users get around the page.
A better Gallery block
Treat every image in a Gallery Block the same way you would treat it in the Image Block.
Style every image in your gallery differently, or make them all the same, except for one or two. Or change the layout with drag-and-drop.
WordPress 5.9 for developers
Theme.json for child themes
In 5.9, theme.json supports child themes. That means your users can build a child theme right in the WordPress Admin, without writing a single line of code.
Now you can register more than one stylesheet per block, which lets a given block load only the styles its markup requests, and not a whole sheet. Read the details in this dev note.
A refactored Gallery Block
The changes to the Gallery Block listed above are the result of near-complete refactor. Have you built a plugin or theme on the Gallery Block functionality? Be sure you read this dev note. It tells you what you need to do for compatibility.
Learn more about the new features in 5.9
Want to dive into 5.9 but don’t know where to start? Check out this free course about Simple Site Design from Learn WordPress. There are a variety of learning materials including short how-to video tutorials and resources on new features in WordPress 5.9, with much more planned.
Check the Field Guide for more!
Check out the latest version of the WordPress Field Guide. It has lots of useful information with links to detailed developer notes to support you building in WordPress for everyone you serve. WordPress 5.9 Field Guide.
The Squad
The WordPress 5.9 release was led by Matt Mullenweg, and supported by this highly enthusiastic release squad:
By release day, 71 locales had translated 90 percent or more of WordPress 5.9 in their language. Community translators are hard at work ensuring more translations are on their way. Thank you to everyone who helps to make WordPress available in 205 languages.
Many thanks to all of the community volunteers who contribute in the support forums. They help to answer questions from people across the world. The success of releases from the first one in 2003 owes much to the efforts of the support contributors.
If contributing to WordPress appeals to you, it’s easy to learn more and get involved. Discover the different teams that come together to Make WordPress website and find out the latest plans on the core development blog.
I was first introduced to the concept of webhooks via a 2009 blog post by John Herren, a former colleague at Zend.
At the time, they were in their infancy; today, they're ubiquituous, as they provide a mechanism for a service to notify interested parties of events.
This saves traffic; instead of consumers polling an API for event changes, the service notifies them directly.
It also means that the consumer does not need to setup things like cronjobs; they instead setup a webhook endpoint, register it with the service provider, and their application takes care of the rest.
The thing is, handling a webhook can often lead to additional processing, and you are expected to send an immediate response to the provider indicating you received the event.
How can you achieve this?
Offloading processing
It's likely no secret that I'm a fan of Mezzio and OpenSwoole1.
Running PHP in a persistent process forces me to think about state in my applications, which in turn generally forces me to be more careful and explicit in how I code things.
On top of that, I get the benefit of persistent caching, better performance, and more.
Let's say I have a GitHubWebhookEvent, for which I have associated a GitHubWebhookListener2 in my event dispatcher.
I would dispatch this event as follows:
The nice part about this is that the code dispatching the event does not need to know how the event is processed, or even when.
It just dispatches the event and moves on.
To make the listener deferable, in Mezzio applications, I can associate a special delegator factory provided by the mezzio-swoole package with the listener.
This is done with standard Mezzio dependency configuration:
This approach means that my listener can have any number of dependencies, and be wired into the container, but when I request it, I'll be returned a Mezzio\Swoole\Task\DeferredServiceListener instead.
This class will create a swoole task from the listener and event, which defers execution to the task workers, offloading it from the web workers.
Event state
Task workers receive a copy of the event, not the original instance.
Any state changes your listener makes in the event instance will not be reflected in the instance present in your web workers.
As such, you should only defer listeners that do not communicate state back to the dispatching code via the event.
Sharing an event dispatcher with the web server
mezzio-swoole defines a marker interface, Mezzio\Swoole\Event\EventDispatcherInterface.
This interface is used to define an event-dispatcher service consumed by Mezzio\Swoole\SwooleRequestHandlerRunner for the purpose of dispatching swoole HTTP server events, getting around the "one event, one handler" rule swoole follows.
However, that can mean that you end up with two different dispatchers in your application: one used by the swoole web server, and one by the application, and that means you cannot delegate tasks.
To get around this, alias the Mezzio\Swoole\Event\EventDispatcherInterface service to the Psr\EventDispatcher\EventDispatcherInterface service:
use Mezzio\Swoole\Event\EventDispatcherInterface as SwooleEventDispatcher;
use Psr\EventDispatcher\EventDispatcherInterface as PsrEventDispatcher;
return [
'dependencies' => [
'alias' => [
SwooleEventDispatcher::class => PsrEve
Truncated by Planet PHP, read more at the original (another 6872 bytes)
openswoole 4.10.0
- New feature: Co::select, the non-blocking coroutine channel selector
New feature: HTTP2 SSE server-sent events
New feature: Improved channel stats
Bug fixed: Argument data type fixed at sleep() and usleep() API by @Hailong
Bug fixed: HTTP2 and TLS bug fixes
datadog_trace 0.69.0
### Breaking changes
- Query string is now not included in `http.url` in Nette integration and in generic web frameworks tracing.
Added
Implement x-datadog-tag propagation and _dd.p.upstream_services #1405
Changed
Get rid of ini-ignoring and redundant checking of ddtrace being enabled #1448
Strip query string from http.url in generic web tracing #1454
Use internal root spans in Integrations in place of using the legacy API #1383
Hard-code version in installer, remove --url option, rename it #1463
Remove generator support on PHP 7 #1464
Fixed
Ensure a proper sampling decision is also evaluated when distributed tracing is used #1450
Fix ObjectKVStore compatibility with throwing autoloaders #1451
Properly report error for artisan command in Laravel 7+ #1456 (thank you @ls-paul-julien-vauthier)
Internal changes
Migrate ZAI tests to use ZAI SAPI harness #1457
Move ZAI SAPI to root directory #1411 #1443
ZAI methods on PHP 5: Args and retval #1401
Implement ZAI Value interface #1453
Implement ZAI SAPI test harness (catch2) #1455
Implement ZAI SAPI test fixture (catch2) #1458
Refactor ZAI SAPI into Tea SAPI, brings various improvements #1462
Implement ZAI Symbols interface #1452
Address Sanitizer check for ZAI SAPI - 1459
Fix ZaiSapi_ROOT path in Makefile #1443
teds 0.8.0
* Add `StableSortedListSet` and `StableSortedListMap` as memory-efficient alternatives to `SortedStrictSet`/`SortedStrictMap`.
* Speed up `SortedStrictSet::__unserialize` and `SortedStrictMap::__unserialize` when data is already sorted.
* Fix crash in `StrictSet` and `SortedStrictSet` during cyclic garbage collection.
teds 0.7.0
* Make `Tedsstrict_hash` ignore recursion caused by unrelated functions (e.g. var_dump calling `__debugInfo` calling `strict_hash`)
* Add `Tedsbinary_search(array $values, mixed $target, callable $comparer = null, bool $useKey=false)`
* Change parent class of `TedsStableMaxHeap` and `TedsStableMinHeap` to `SplHeap`.
* Fix deduplication when constructing `StrictSet` from `iterable`, `StrictMap` from `Traversable`.
* Add `Tedsunique_values(iterable): array` using `strict_hash` to check for duplicates.
PDO_INFORMIX 1.3.6
Including the Fix for buffer overflow issue wiht UTF-8.
PAM 2.2.4
Update TSRMLS_CACHE in RINIT_FUNCTION and MINIT_FUNCTION
teds 0.6.0
* Make `Tedsstable_compare` sort objects by class name with strcmp before sorting by spl_object_id.
* Add a hash map `StrictMap` using `Tedsstable_hash` as a hash algorithm.
Keys are returned in order of insertion.
* Add a hash set `StrictSet` using `Tedsstable_hash` as a hash algorithm.
* Add a sorted map `SortedStrictMap` using `Tedsstable_compare` as a comparison function.
Keys are returned ordered by `Tedsstable_compare` and no two keys have `stable_compare` return 0 (i.e. no two keys are equivalent).
* Add a sorted set `SortedStrictSet` using `Tedsstable_compare` as a comparison function.
* Add StableMinHeap/StableMaxHeap extending SplMinHeap/SplMaxHeap, using `Tedsstable_compare` as a comparison function.
The simple act of light reflecting off of or refracting through a surface can produce stunning visuals. We see it every day in the physical world. It might be the way the sun peeks through your office window or light hitting a mirror at just the right angle. They’re like little science experiments that take place right in front of us.
Thanks to the latest CSS and JavaScript techniques, these effects are also dazzling web users. Everything from relatively simple reflection details to light-bending refractions is popping up on our screens. Even highly-realistic behaviors are possible.
Today, we’ll introduce you to some outstanding code snippets that bring mirror, reflection, and refraction effects to life. Let’s take a look!
Bonsai animation by Kamil
This gently-animated bonsai provides a calming feel that belies the serious technology that makes it work. It utilizes SVG and the GSAP animation library to create a lovely water reflection effect.
Here’s a very unique snippet that features multiple effects. First, there’s a rotating shape that hovers in front of a mirror-like surface. Notice the shiny reflection underneath as well. The lighting and shading are gorgeous. You can also use your mouse or touch to change the perspective.
This snippet is proof that mirror effects can be applied in unconventional ways. Two brightly-colored orbs appear against a black background. Move your cursor to take control of the left (white) one, while the other mirrors your movements. Dragging these orbs all over the screen in tandem is more fun than it should be!
The color and texture of this animation are mesmerizing. Rows upon rows of spheres move toward you, while your cursor position changes the refraction index. The look ranges from glassy to old-school television static. HTML 5 canvas and JavaScript are used to create the ultra-smooth movement.
Mirrored text is surprisingly easy to implement. With just a few dozen lines of pure CSS, you can achieve an attractive effect that is sure to grab a user’s attention. The secret is in the CSS transform property, which flips the mirrored version upside down. From there, a gradient is used to create a more realistic look.
Add some custom text and this snippet will make it look as if it’s being viewed through a crystal ball. Cursor movements change both the perspective and size of the effect. When combined with the colorful background, the whole presentation has a 1960s vibe to it.
Check out this abstract take on a modern obsession – staring blankly into your phone. Click on the phone and simulated text reflects slowly up the subject’s body. It’s similar to what you might see in a darkened movie theatre.
Speaking of abstract works, this virtual game board is something to behold. Mirrored 3D balls roll around as light bounces off of them. You can also change the perspective of the scene, adding even more intrigue to the outstanding special effects. If astronauts play games in space, this might be the one.
Amazing as it may seem, developers are crafting some seriously stunning mirror, reflection, and refraction effects for the web. Not only do they look incredible, but many also make great use of physics to add a layer of realism as well.
Want to see even more top-notch snippets? Take a peek at our CodePen collection!
