Archive for month: March, 2020

Original Source: https://www.smashingmagazine.com/2020/03/web-design-trend-popular/

What Should You Do When A Web Design Trend Becomes Too Popular?

What Should You Do When A Web Design Trend Becomes Too Popular?

Suzanne Scacca

2020-03-31T11:30:00+00:00
2020-03-31T21:06:37+00:00

I read an interesting article on Forbes recently about language saturation. Here’s the problem:

Consumers don’t always understand the technicalities of what businesses do or the solutions they’ve created for them. So, copywriters use jargon that translates something like “Internet-connected devices with computing capabilities” into “smartphones”, “smart watches” and “smart speakers”.

Some of these buzzwords spread like wildfire and it soon becomes impossible to find a brand or website that doesn’t use them. When that happens, the words — and the associated product or service — become meaningless in the minds of consumers because everyone is saying the same thing.

The same thing happens when design trends become too popular. This is something Vitaly Friedman talked about last year with regards to cookie consent notices and banner blindness.

But what choice do you have? Are you supposed to hop on the design bandwagon anyway so your website doesn’t get left behind? Today, we’re going to look at what your options are.

What Should You Do with Too-Popular Design Trends?

To be clear, I’m not suggesting that you ignore any and all rising design trends.

There are certain trends that we absolutely need to adopt across the board. Like minimalism and mobile-first design. When there’s substantial, quantifiable proof that a design technique is needed, please don’t ignore it.

What I’m talking about are design trends that aren’t aimed at strengthening the web. Instead, they’re solely about driving up engagement on websites.

Brutalism. Facebook Messenger pop-ups. Home page hero sliders. The second that popular websites begin to adopt these trends and once writers and designers start including them in design trend roundups, it’s only a matter of months before consumers are inundated with them. And this is when banner blindness kicks in.

So, what are your options when you learn about a new design trend that promises big results?

Option 1: Ignore It and Stick with What Works

There are a few reasons you should consider going with this option:

You work on short-term website projects.

For those of you who build websites, hand them over to clients and then wish them luck as you move onto the next, it’s probably not a good idea to play around with fad-like design trends.

You know how quickly design trends change, so why put your client in a position where they have a website with an outdated design? One of three things is going to happen:

They’ll leave the outdated feature as is and have no idea that it’s costing them conversions.
They’ll ask you for help in removing the feature not too long after launch and won’t be happy about needing a rework so soon.
They’ll ask another designer for help because they’re upset you put them in this less than ideal position.

Unless your client has a very good reason why they need to exploit a passing design trend, try to dissuade them from it. If they understand the fleeting nature of some of these trends, as well as how banner blindness develops from oversaturation, they should be onboard with you sticking to what works.

You’re designing (or redesigning) a site for a very well-established company.

When building a website for a company that has a long-standing reputation with its audience as well as a tried-and-true formula for success, adopting a passing trend could be risky.

Take Zillow, for example.

The homepage for Zillow on mobile (Image source: Zillow) (Large preview)

This is the mobile homepage as it stands today. It’s simple, sleek and intuitive by nature.

Can you imagine what would happen if the designer decided to add a video background to the hero banner? Or to interrupt the property browsing experience with a pop-up advertising a free ebook download?

You have to really think about what disruptions to the expected design would do to the flow of things. So, when building something for a brand that’s known for its consistency and convenience, it’s best to ignore passing trends.

This doesn’t mean that a website like this shouldn’t be redesigned. Like I said before, lasting design “trends” can’t be ignored as they enable us to move websites in the right direction (like responsive design). For example, this was Zillow in 2017:

The mobile homepage for the Zillow website in 2017 (Image source: Zillow) (Large preview)

See how far we’ve come in terms of making websites mobile responsive and mobile-first in just a few years? These are the kinds of popular changes that don’t require debating.

The company’s goal is to build relationships; not to increase sales.

I realize that every website needs conversions in order to survive. However, many business models can’t sustain with just one-off sales. It costs too much money to constantly market to new customers, which is why some businesses focus on building long-term relationships with their customer base.

And that’s why you need to steer clear of conversion-boosting design trends on these kinds of websites.

Take, for instance, Gary Vaynerchuk’s website:

The mobile website for Gary Vaynerchuk is free of passing design trends and elements. (Source: Gary Vaynerchuk) (Large preview)

Remember when every website seemed to have a pop-up containing two buttons — one of which would be super-positive like “Yes, I want to change my life!” and the other which was meant to shame the visitor with something like “No, I like living in squalor.”

How do you think Vaynerchuk’s always-growing loyal following would feel if the site displayed one of those pop-ups? Not only would they be annoyed by the disruption keeping them from the content, but they’d probably be upset that he’d use such a shameless ploy to bully them into signing up.

If the brand you’re building a website for is on a similar mission — to build long-lasting and meaningful relationships — you don’t want to sully that with bad design decisions.

Option 2: Adopt the Trend But Keep an Eye on Market Saturation

Patrick Ward, the author of the Forbes article mentioned above, explained that many writers in the fintech space have had to pivot towards a simpler style of writing:

“At first, new startups used jargon and buzzwords to highlight their brand new tech and give themselves a competitive edge.”

I think this is a good lesson for designers as well. It’s not always a bad thing to hop on a design trend’s bandwagon — especially if it’s proven to work and it’s still in the very early stages of public awareness.

So, while there are clear cases where it makes sense to avoid design fads, I think there are times when it makes sense to take advantage of them. The only thing is, you can’t just implement the design and then leave it be.

For instance, this is the 15 Finches website on desktop:

A walk-through of the animation on the 15 Finches website on desktop. (Source: 15 Finches) (Large preview)

Now let’s compare this same animated experience to what users get on their mobile devices:

A walk-through of the 15 Finches website on mobile with layering errors and no animation. (Source: 15 Finches)(Large preview)

There are a number of design choices made on this mobile site that should’ve been long phased out.

The vertical typography in the background should go. It might add texture to the desktop site, but it’s just a confusing distraction on mobile.
The animation on the desktop site doesn’t translate to mobile. To present visitors with a consistent experience, the designer should commit to mobile-first design.
There are also layering errors all over the mobile site, with text often covering other bits of text as well as missing call-to-action buttons.

As I said, there are some sites where it’s okay to adopt short-term design trends. Just keep an eye on them.

For example, the Hubspot site design is always changing, but any design trends it adopts never seem to overstay their welcome. Hubspot tends to cut out just before they become too much. And that’s a key thing to remember.

Hubspot’s mobile site continues to use a chatbot widget to guide prospective customers in the right direction. (Image ource: Hubspot) (Large preview)

As you can see, the mobile site still uses a chatbot widget. For a business that sells sales and marketing software, it’s an important element to retain even if other sites have since ditched theirs.

That said, I’m positive that Hubspot keeps close tabs on its user data so it probably has confirmation that the element continues to work well. This is just one of the things you should be mindful of when monitoring a trend.

If you want to utilize popular design trends, you need to be in it for the long haul with your clients. That way, the second you start to notice:

Oversaturation in the market,
The trend has gone completely stale,
Or your users aren’t responding positively to it.

You can immediately move the website to safer ground.

Option 3: Go in a Similar But Different Direction

When a design technique or element immediately and universally becomes popular, there’s more value to it than just its ability to increase conversions or create a prettier design.

Take a look at why it’s caught on the way it has. If you understand what’s driving the popularity of the fad, you can leverage the strongest parts of it, make it your own and have something with real staying power.

Do you remember the New York Times’ Snow Fall article in 2012? This was shortly after parallax scrolling started to pick up speed in web design. And despite some websites utilizing the trend, it was the way the NYT creatively integrated it along with interactive and animated images that really blew people away — so much so that it won a number of journalism awards for it.

Notice that the NYT didn’t try to redesign its website with parallax scrolling or interactivity. It took the basic principles gaining in popularity and applied it to one groundbreaking story. By considering how the trend could be best used for maximum impact, the NYT turned a short-term fad into something that would make its story memorable.

If you understand what’s driving the popularity of the fad, you can leverage the strongest parts of it, make it your own and have something with real staying power.

“

Let’s take a look at a more recent example of a site using this approach.

You’re all familiar with the trend of split-screen design, right? It worked really well on desktop, both in its static form as well as when one half of the screen would remain put while the other moved. But on mobile? It wasn’t so great.

While we’ve seen a lot of split screen designs get phased out, EngineThemes has made the trend its own:

EngineThemes has put a playful twist on the once-trendy split screen design. (Source: EngineThemes) (Large preview)

Upon entering the site, it’s a look we’re familiar with as consumers. But it doesn’t take long to realize that this is going to be a different experience.

For starters, the bobbing bird and red double-headed arrow are something you don’t see much of, if at all, on other sites. I can’t imagine many visitors scroll past this banner without engaging with it.

Secondly, there are no words in this banner on mobile. (There are on the desktop website.)

One of the reasons why this design trend doesn’t work anymore is because it can’t be used on mobile sites — there just isn’t enough space to split the screen and fit enough words in there. Or is there?

EngineThemes has hidden a message in its animated, split screen graphic. (Image source: EngineThemes) (Large preview)

Eagle-eyed visitors will notice that there’s a message carefully hidden in the bird graphic when the arrow is moved to the right. Granted, the text should be bigger, but mobile visitors can zoom in if they’re struggling to read it.

It’s a string of code that reads:

“EngineThemes provides effective business solutions with simple and powerful WordPress app themes.”

But do you see what I mean? When a design trend suddenly becomes popular — for a short or long while, too — it doesn’t necessarily mean you need to use the same exact version of it like everyone else. This is why oversaturation quickly turns once great-looking websites stale.

By taking what’s so innovative about a design trend and making it your own, though, you can give the trend real staying power while making your site a standout in the process.

Wrapping Up

When we overdo it by leveraging the same design trends as everyone else, we put our websites at risk of becoming redundant or, worse, invisible. So, how do we establish a cutting edge if we can’t make use of design “jargon”?

The truth is, there’s no one clear-cut answer. You need to be able to read the room, so to speak, and figure out which approach is best for you. You could leave the passing trend alone, you could adopt it temporarily or you could make it your own.

Further Reading on SmashingMag:

What Does A Foldable Web Actually Mean?
Table Design Patterns On The Web
Designing The Perfect Slider
Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?

(ra, il)

Original Source: https://www.webdesignerdepot.com/2020/03/bublup-the-cloud-reimagined/

Since mankind first crawled out of its cave, looked at a block of stone, and wondered if it wouldn’t roll better if it were round, human beings have been looking at technology and trying to make it better.

Almost every tech you can think of, from digital music players, to cryptocurrency, to search engines, may well be revolutionary in their first incarnation, but only go on to change the world once they’ve been reimagined with the kinks worked out.

however you want to store your stuff online, you can do it with Bublup

Now, Bublup (pronounced Bubble-up) is reimagining the cloud, one of the mainstays of modern computing, by reinventing not just the technology that powers the cloud, but how we use it in our daily lives.

One of the biggest problems with the cloud is that no matter who supplies it, it is structured and organized in a way that suits the cloud supplier; photos go in your photos folder, notes go in your documents folder or a notebook, links go in your bookmarks folder. Bublup is different, Bublup lets you organize your content however you want to. You can even mix and match media types in the same folder. So, unlike some cloud providers you can store links with photos, notes in with videos, PDFs in with MP3s; however you want to store your stuff online, you can do it with Bublup.

It’s this flexibility that makes Bublup one of the most intuitive ways to save and share plans, memories, ideas, and projects. Imagine you’re planning a trip to your dream destination next year, instead of keeping all your research across a dozen different folders, with Bublup you can store everything in one place — your flight details, reservations, your itinerary, maps, places you want to eat, things you want to see, guidebooks – everything you’ll need for the trip of a lifetime. The same goes for work projects, sharing family photos, meal planning, and more.

You can even use Bublup for work collaboration

Bublup makes your folders private by default, so you don’t have to worry about anyone taking your files without your permission. But one of the best features of Bublup, and one we know you’re going to want to check out, is its collaboration options. You can invite anyone to join your folder, and work on it together by commenting and reacting on items or folders. It’s an awesome way to build up content from a whole group of people.

You can even use Bublup for work collaboration. Just create a folder for your project and invite your team to join you. Store emails, briefing notes, assets, contracts, everything for your current project in a single, secure location.

One of the key benefits of Bublup is that everything is organized visually, with big thumbnails and titles, so you never have to hunt around for the file you’re looking for, it’s always right in front of you and easy to find.

Perhaps our favorite Bublup feature is “rolls”. Rolls are beautifully presented stories built from the contents of your folder in just a few clicks. Upload your vacation photos and videos to Bublup, and then in seconds create a story that captures the event perfectly. Best of all, rolls can be shared with anyone – they don’t even need a Bublup account – just build your roll and share it with a single link. It’s the perfect way of sharing vacation memories, or keeping in touch with family.

Something we know everyone will love is Bublup’s suggestion engine. This awesome tool seeks out fresh content for you, helping you discover ideas you didn’t even know were out there. It’s an incredibly useful option when you’re researching. Let’s say you’re planning that dream trip, wouldn’t it be great to get the best tips on places to eat, stay, and enjoy from locals and leading sites on the web? Bublup’s suggestion engine will search them all out for you, you can choose to add them to your folder, or ignore them, it’s completely up to you!

The best thing about Bublup is that it’s easy to use. You don’t need to be an expert to get the most out of this tool. It’s so easy to use even complete novices will be up to speed in minutes, and it’s the perfect solution for everything from staying in touch with family and friends, to collaborating with colleagues on professional projects.

Incredibly, Bublup’s standard plan is free, with 3 GB of storage for files and unlimited links, and all features except the most advanced roll features. If you discover that Bublup is the right tool for you then keep using the standard plan for free, or upgrade to a paid plan from just $2.99 per month. Head over to bublup.com now to start organizing your content the way it suits you.

 

[– This is a sponsored post on behalf of Bublup –]

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original Source: https://www.smashingmagazine.com/2020/03/make-life-easier-when-using-git/

How To Make Life Easier When Using Git

How To Make Life Easier When Using Git

Shane Hudson

2020-03-27T11:30:00+00:00
2020-03-27T15:35:32+00:00

Git was released almost 15 years ago. In that time it has gone from underdog to unbeaten champion, git init is often the first command run on a new project. It is undoubtedly an important tool that many of us use on a daily basis, and yet it is often seen as magic: brilliant, but scary.

There’s been a lot written about getting started with git, understanding how git works under the hood or techniques for better branching strategies. In this article, we will specifically target the stuff that just makes your life better in a small way.

Finding Your Old Socks

The whole point of git is to be able to save your work, to switch context and do something else. It could be to backup the code for the future, or to be able to make progress on a few different features asynchronously. It would be awful to have to throw out v2 just because there was a bug in v1, it would be equally a shame to have files named like v1_final_bug_fixed which notoriously become an impossible mess.

We know life is easier, to some extent, with our updates neatly compartmentalised into git branches that can be shared with other team members. However, I’m sure you can agree, there are often times when you’ve context switched and when you go back it’s impossible to find the right branch. Was it ever committed? Maybe it was stashed? Maybe it wasn’t committed and now the work is in the wrong branch and everything is going awful and I am awful at my job! We’ve all been there.

Sort Branches By Date

My first attempt at figuring out how to find lost work, in a short blog post titled “How to find the branch you lost in git” was to sort the branches by date. This outputs every single branch you’ve got locally beginning with the one most recently committed to. It’s not fancy or surprising but it has helped me many times.

# To sort branches by commit date
git branch –sort=-committerdate

Previous Branch

What can you do if you didn’t commit, switched branch then wanted to get back to it? You could probably work out frorm the branch list anyway, if you’ve some idea of the branch name. But what if it wasn’t a branch, if it was a “detached HEAD”, a specific commit.

It turns out there is a way to do this with ease:

# Checkout previous branch
git checkout –

The – acts as a shorthand for @{-1} which is a syntax you can use for going back any given amount of checkouts. So if, for example, you had checked out branch feature/thing-a then feature/thing-b then bugfix/thing-c, you can use @{-2} to get back to feature/thing-a.

# Checkout branch N number of checkouts ago
git checkout @{-N}

Show Information About All Branches

If you are looking for a way to see what the last commit in each branch was, you can use option flags v to show a list of all branches with the last commit ID and message from each. If you do it twice (vv) then it will also show the upstream remote branch that it is linked to.

# List branches along with commit ID, commit message and remote
git branch -vv

That One File

We’ve all done it: Somehow, a single file was left in the wrong branch. Do you need to redo all of your work, or copy and paste between the two branches? Nope, thankfully there’s a way to do it.

It’s a bit odd, especially given git checkout – goes back a previous branch; if you use — after a branch name on checkout then it will let you specify the specific file you’re looking for. It’s not something you would guess, but really handy once you know it.

git checkout feature/my-other-branch — thefile.txt

Make Status Easier To Read

In a tweet, Tomasz Łakomy mentioned about reducing the output of git status using -sb flags and said, “I’ve been using git for YEARS and nobody told me about this.” This isn’t strictly about finding lost files, but there’s cases where simplifying the output could make it easier to see what’s been changed.

Most git commands have flags like this so it’s always worth looking into how you can use them to customise your workflow!

# Usually we would use git status to check what files have changed
git status

# Outputs:
On branch master
Changes not staged for commit:
(use “git add <file>…” to update what will be committed)
(use “git checkout — <file>…” to discard changes in working directory)

modified: README.md

Untracked files:
(use “git add <file>…” to include in what will be committed)

another-file
my-new-file

# Using the flags -sb we can shorten the output
git status -sb

# Outputs:
## master
M README.md
?? another-file
?? my-new-file

See Everything That Has Happened

There are times when something goes completely wrong — such as accidentally discarding staged changes before commiting them. When git log isn’t enough to get back to what you were last doing and none of the above tips are helpful, then there’s git reflog.

Everything you do in git that changes where HEAD@{} points to (such as push/pull/branch/checkout/commit) will update the reference log so it essentially acts as a history of everything you’ve done no matter which branch you’re on. This contrasts with git log which is everything that has changed over time for the particular branch.

With the commit ID, you are able to do git show to see the change and if it’s definitely the one you want you can use git checkout or even select a specific file as shown above.

# See the reference log of your activity
git reflog –all

# Look at the HEAD at given point from reflog
git show HEAD@{2}

# Checkout the HEAD, to get back to that point
git checkout HEAD@{2}

Staged Files That Were Never Commited

In the extreme case that git reflog is unable to help you get your files back (e.g. if you ran a hard reset with staged files), there’s one more trick up your sleeve. Every change is stored in .git/objects which on an active project would be full of files and impossible to decipher. There is, however, a git command called git fsck which is used to verify integrity (check for corrupt files) within a repository. We are able to use this command with the –lost-found flag to find all files that are not related to a commit; these files are called a “dangling blob”.

It will also find “dangling trees” and “dangling commits” — you can use –dangling if you want but –lost-found has the advantage that it extracts all of the appropriate files into a folder .git/lost-found. On an active project, it’s likely you will have a lot of these dangling files without even knowing about it; git has a garbage cleanup command that runs regularly to get rid of them.

So, by using –lost-found, you’re then able to list the files and see the time/date they were made which makes it a lot easier to see the files you’re looking for. Note that each individual file will still be an individual file (you cannot use checkout) and all files will have unrecognisable names (a hash) so you will need to copy the files you want.

# This will find any change that was staged but is not attached to the git tree
git fsck –lost-found

# See the dates of the files
ls -lah .git/lost-found/other/

# Copy the relevant files to where you want them, for example:
cp .git/lost-found/other/73f60804ac20d5e417783a324517eba600976d30 index.html

Git As A Team

Using Git as a single user is one thing but when you’re on a team of people — usually with a mix of backgrounds and technologies — Git can become both a blessing and a curse. It can be powerful for sharing the same codebase, getting code reviews, and seeing progress of the whole team. But at the same time, everyone needs to have a shared understanding of how the team intends to use it. Whether it is branch naming conventions, how you structure a commit message or exactly which files are committed, it’s essential to have good communication and talk about how you will all use the tool.

It’s always important to consider how easy it is to on-board a new developer, what would happen if they began committing without knowing some of the agreed principles and conventions? It wouldn’t be the end of the world, but it would likely cause some confusion and take time to get things back to the agreed approach.

This section has some tips and tricks for getting the repository itself to know the conventions, to automate and declare as much as possible. In the ideal case, any new contributor would almost straight away be working the same way as the rest of the team.

Same Line Endings

By default, Windows uses DOS line endings rn (CRLF) while Mac and Linux both use UNIX line endings n (LF) and really old versions of Mac used to use r (CR). So as a team grows, it becomes more likely that mismatched line endings will become a problem. Usually, these are an inconvenience; they (probably) won’t break your code but will make commits and pull requests show all kinds of irrelevant changes. Quite often people will just ignore them — it’s quite a hassle to go through and change.

There is a solution to this: You can get everyone on the team to set their local configs to automatic line endings.

# This will let you configure line-endings on an individual basis
git config core.eol lf
git config core.autocrlf input

Of course, that would mean making sure the new contributor does that and it’s so easy to forget to tell them. So how would we do it for the whole team? Well the way Git works is it checks for a config file in the repository at .git/config, then it checks the user’s system-wide config at ~/.git/config then checks the global config at /etc/gitconfig. These are all useful at times but it turns out that none of those can be set through the repository itself. You can add repository-specific configurations but that will not carry over to other members of the team.

There is, however, a file that does get committed to the repository. It’s called .gitattributes. You won’t have one by default, so make a new file and save it as “*.gitattributes*”. This file is used for setting attributes per file; for example, you could make git diff use exif data for image files instead of trying to diff a binary file. In this case, we can use a wildcard to make the setting work for all files, essentially acting as a team-wide config file.

# Adding this to your .gitattributes file will make it so all files
# are checked in using UNIX line endings while letting anyone on the team
# edit files using their local operating system’s default line endings.
* text=auto

Auto-Collapse

It’s a well-known solution to add package-managed files (such as node_modules/) to the .gitignore file in order to keep compiled files locally and not add them to the repository. However, sometimes there are files that you do want to check in but don’t want to see each time in the pull request.

For this situation (at least on GitHub), you can add paths annotated with linguist-generated to your .gitattributes file and check that file in at the root of the repository. This will collapse the files in the pull request, so you can still see they were changed without the full contents of the change.

Anything to reduce stress and cognitive load of code reviewing is going to help improve the quality of the code reviews and reduce the time it takes.

“

For example, if you have a Unity project, you would want to check-in your asset files but not actually care about them so you can add it to the attributes file like so:

*.asset linguist-generated

Use Git Blame More Often

This is a tip that Harry Roberts suggested in his post about Git, “Little Things I Like To Do With Git.” He says to alias git blame to git praise so it feels like a positive action. This seems like semantics — renaming something doesn’t change what it does at all. But whenever I’ve seen any team speak about using Git’s blame feature, everyone tenses up, and I certainly do, too. It’s a natural reaction to think it’s a negative thing… it really shouldn’t be!

It’s a powerful feature knowing who last touched the code you’re looking at. Not to blame them or even to praise them, but simply to ask the right person questions and to save time figuring out who to talk to.

Not only should you think of git blame as a good thing (call it ‘praise’ if you want to), but you should think of it as a communication tool that will help the entire team reduce confusion and prevent wasting time figuring out who knows about what. Some IDEs such as Visual Studio include this feature as annotations (without any negative connotation at all) of each function so you can instantly see who last modified it (and therefore who to talk to about it).

Git Blame For A Missing File

Recently, I saw a developer on the team trying to figure out who removed a file, when it was, and why it was removed. This seems like a useful time for git blame but that works based on lines in a file; it doesn’t help with stuff that isn’t there any more. There is, however, a solution. The old trusty git log. If you look at the log with no arguments, then you will see a long list of all the changes on the current branch. You can add a commit ID to see the log for that specific commit, but if you use — (which we’ve used before to target a specific file), then you can get the log for a file — even one that no longer exists.

# By using — for a specific file,
# git log can find logs for files that were deleted in past commits
git log — missing_file.txt

Commit Message Template

One thing that eventually gets mentioned within teams is that commit messages could be improved. Maybe they could reference a project management tool’s ID for the bug the commit fixes or maybe you want to encourage some text instead of an empty message.

This one needs to be run manually each time someone clones the repository (as git config files are not committed to the repository), but it is handy because you can have a shared file in the repository (named anything you want) that can act as the commit message template.

# This sets the commit template to the file given,
# this needs to be run for each contributor to the repository.
git config commit.template ./template-file

Git As Automation

Git is powerful for automation. This is not immediately obvious but if you consider that it knows all of your past activity within the repository — plus that of other contributors — it has a lot of information that can be very useful.

Git Hooks

Quite often you will find that within a team you all want to be doing repeated tasks while you work. This could be ensuring tests and code linters pass before it lets you push using the pre-push hook, or to enforce a branch naming strategy using the pre-commit hook. Here on Smashing Magazine, Konstantinos Leimonis wrote an article titled “How To Ease Your Team’s Development Workflow With Git Hooks” which is all about improving workflow using Git Hooks.

Manual Automation

One of the key automation features that Git has is git bisect. This is something that many people have heard of but probably not used. The purpose of it is to work through the git tree (the history of commits) and work out where a bug was introduced. The simplest way to do this is manually; you run git bisect start, give it the good and bad commit IDs, then git bisect goodor git bisect bad for each commit.

This is more powerful than it seems at first because it doesn’t iterate linearly through the git log, which you could do manually and it would be a repetitive process. It, instead, uses a binary search so it’s an efficient way to go through the commits with the least amount of steps.

# Begin the bisect
git bisect start

# Tell git which commit does not have the bug
git bisect good c5ba734

# Tell git which commit does have the bug
git bisect bad 6c093f4

# Here, do your test for the bug.
# This could be running a script, doing a journey on a website, unit test etc.

# If the current commit has bug:
git bisect bad

# If the current commit does not have the bug
git bisect good

# This will repeat until it finds the first commit with the bug
# To exit the bisect, either:

# Go back to original branch:
git bisect reset

# Or stick with current HEAD
git bisect reset HEAD

# Or you can exit the bisect at a specific commit
git bisect reset <commit ID>

Taking It Further: Automating The Scientific Method

In his talk “Debugging With The Scientific Method,” Stuart Halloway explained how Git’s bisect functionality could be used to automate debugging. It focuses on Clojure but you don’t need to know that language to find the talk interesting and useful.

“Git bisect is actually partial automation of the scientific method. You write a little program that will test something and git will bounce back and fourth cutting the world in half each time until it finds the boundary at which your test changes.”

— Stuart Halloway

At first, git bisect can feel interesting and quite cool but in the end not very useful. Stuart’s talk goes a long way to showing how it’s actually counterproductive to debug in the way most of us usually do. If you, instead, focus on the empirical facts whether or not a test passes, you can run it against all commits since a working version and reduce the “feeling around in the dark” kind of debugging that we are used to.

So how do we automate git bisect? We pass it a script to run for each appropriate commit. Previously, I said we can manually run a script at each step of the bisect but if we pass it a command to run then it will automatically run the script at each step. This could be a script you write specifically to debug this one particular issue, or it could be a test (unit, functional, integration, any type of test could be used). So you could write a test to ensure the regression doesn’t happen again and use that test on previous commits.

# Begin the bisect
git bisect start

# Tell git which commit does not have the bug
git bisect good c5ba734

# Tell git which commit does have the bug
git bisect bad 6c093f4

# Tell git to run a specific script on each commit
# For example you could run a specific script:
git bisect run ./test-bug

# Or use a test runner
git bisect run jest

On Every Commit In The Past

One of the strengths of git bisect is the efficient use of binary searches to iterate through history in a non-linear way. However, sometimes a linear crawl through history is exactly what you need. You could write a script that reads git log and loops through each commit executing code, but there’s a familiar command that can do this for you git rebase.

Kamran Ahmed wrote a tweet about using rebase to run a test suite on every commit to see which commit fails the test:

Find the commit that broke the tests

$ git rebase -i –exec "yarn test" d294ae9

This will run "yarn test" on all the commits between d294ae9 and HEAD and stop on the commit where the tests fail

— Kamran Ahmed (@kamranahmedse) February 2, 2020

We’ve already looked at using git bisect to do this efficiently so that’s generally more useful for this use-case, but what if we could have all of the other use-cases running a script for a given set of commits?

There’s room to be creative here. Maybe you want a way to generate a report of how your code has changed over time (or maybe show history of tests) and parsing the git log is not enough. This is perhaps the least directly useful trick in this article, but it’s interesting and raises the possibility of doing things that maybe we wouldn’t realise is possible.

# This will run for every commit between current and the given commit ID
git rebase -i –exec ./my-script

Further Reading

It’s impossible to more than scratch the surface of git in an article — it would end up being a book! In this article, I have chosen little tricks that could be new to even someone that’s been using git for years.

There’s so much more to Git from the foundations through to complex scripting, precise configurations and integrating into the terminal, so here are some resources to look at if this has piqued your interest:

Git Explorer
This interactive website makes it easy to figure out how to achieve what you are trying to do.
Dang it Git!
Everyone at some point gets lost in git and doesn’t know how to solve an issue. This gives solutions to a lot of the most common issues people have.
Pro Git
It’s a book and yet it is available online for free too, so Pro Git is an invaluable resource for understanding git.
Git Docs
It’s become a meme to tell developers to read the manual, but seriously both the git docs website and man git (for example man git-commit) go into detail about the internals of git and can be really useful.
Thoughtbot
The git category on Thoughtbot has some very useful tips for using git.
Git Hooks
The git hooks website has resources and ideas for all the available git hooks.
Demystifying Git Internals
Trees, blobs… these terms can seem a bit odd. This article explains some of the fundamentals of how Git works internally which can be useful (as shown already) to use Git to it’s full potential.
Git From Beginner To Advanced
Mike Riethmuller wrote this useful article that is ideal for beginners to Git.
Little Things I Like To Do With Git
It was this article by Harry Roberts that made me realise how much more there is to Git after you’ve learned enough to move code around.
Atlassian’s Advanced Git Tutorials
These tutorials go into detail about many of the topics mentioned in this article.
Github Git Cheatsheet
It’s always handy to have a good cheatsheet for tools like Git.
Git Shortcuts
This article goes into depth about the various flags git commands have and recommends lots of aliases to use.

(ra, il)

Original Source: https://www.webdesignerdepot.com/2020/03/15-useful-tools-and-services-for-designers-and-agencies/

When the time has come to make some changes to your website-building toolkit there’s no shortage of tools or services you could use to smooth out your workflow, save money, add to website capabilities, or put bigger smiles on your clients’ faces.

There are literally hundreds of tools and services you could choose from, if you had the time to make the necessary comparisons, and if you could be confident your choices were good ones.

Or, at our invitation you can browse our selection of top tools and services for 2020. Each of our choices is based on comprehensive reviews, comparisons, and careful analyses. Any one of these tools or services is quite capable of not only making your day but changing how you do business – and for the better.

1. UXPin

Prototyping and collaboration have time and again proven to be not only useful but powerful techniques web design teams count on to achieve successful outcomes, especially for large or very complex projects.

UXPin is a highly advanced prototyping and collaborative tool that lets you build prototypes that look and feel like the final product.

It is not difficult to use UXPin. Some might refer to it as Google Docs on steroids as far as the collaborative features are concerned. These features include:

Reusable design elements and components team members can use to quickly create prototypes;
Interactive form elements, such as check boxes, text fields, and radio buttons;
Vector drawing tools than enable team members to create prototype elements that are limited only by their imaginations;
Material Design, iOS, and Bootstrap design element libraries.

Click on the banner to find out more about this powerful tool and its many additional features.

2. BeTheme

BeTheme, with its more than 40 core features, including a huge assortment of website-building elements, is the biggest WordPress theme of them all. Be has virtually everything you would want or expect from a premium multipurpose WordPress theme, which is a very good reason for including it in this list.

This theme is fast, it’s flexible, and it’s very easy to work with. A beginner could create a traffic-generating website on the first try. Experienced web designers appreciate how easy Be makes it for them to satisfy a large and diverse clientele.

The package includes:

What has to be the highlight; Be’s selection of 500+ responsive and customizable pre-built websites. They cover 30 industry sectors, a wide range of business niches, and all the major website types.
An Admin Panel, a Shortcode Generator, and a selection of shortcodes that gives users a multiplicity of design options and eliminate the need for coding.
The powerful Muffin Builder 3 page builder, a Layout Generator, multiple grid layout options, and much, much more.

Click on the banner to find out more about this popular theme.

3. Mobirise Website Builder

Three good reasons to select a website builder are (1) if you can use it however you want, (2) if it’s affordable, or better yet, free, and (3) if you are given complete control over your design/build process.

Mobirise satisfies these criteria, and there are many other reasons for choosing it as well.

Mobirise is offline. All you have to do is download it. Then, you can use it as you please.
Mobirise is free. No strings attached, and you can use it for both personal and commercial purposes.
You’re not tied to a given platform. This, along with being offline, is why you have complete control over what you do.

In addition, Mobirise has a great selection of HTML themes, homepage templates, and over 2,500 trendy website blocks to work with, no coding is required, and your sites will be 100% responsive and exhibit crazy-fast performance.

Click on the banner to learn more.

4. LayerSlider

LayerSlider is, as many designers already know, a great tool for designing sliders, popups, and other animated website elements.

Features include:

A drag and drop visual builder and a Photoshop-like image editor;
Animated page blocks that make it possible to build a complete website;
A large selection of slider templates, including templates especially designed for beginners;
LayerSlider is SEO and mobile device friendly as it includes a variety of layout options to work with.

5. Dr. Link Check

If you have a large website featuring an abundance of links, you’ve probably come across one or more broken links from time to time. Even a single broken link should be unacceptable, and Dr. Link Check is a service that inspects code to identify broken links.

Dr. Link Check also:

Checks server response times and error codes;
Checks for proper URL formatting;
Can be scheduled to check on a daily, weekly, or monthly basis.

Click on the banner to learn more about this important service.

6. Uncode – Creative Multiuse WordPress Theme

Uncode is a creative top-seller multiuse theme for creatives who need a tool like this to best serve their needs. Uncode is ideal for building portfolio, blogging, or magazine-style sites or websites for small businesses, entrepreneurs, and startups.

Uncode’s many features include:

A powerful frontend editor, an advanced grid system, and adaptive image system;
400+ Wireframes Sections;
WooCommerce and WPML compatibility.

The showcase is definitely not to be missed. Click on the banner to see it.

7. Stockfresh

Three things to look for in a stock photo agency is a large, well-organized inventory, quality items, and reasonable prices. It’s also nice to be able to browse through the inventory before you pay a penny. That’s what Stockfresh is all about.

Stockfresh has an inventory of millions of items;
Sign up for free to see what’s available before choosing a plan;
The items are categorized (30 categories) and the prices are competitive.

Click on the banner and sign up today.

8. XStore | Multi-Purpose WooCommerce WordPress Theme

One way to get precisely the eCommerce store you want is to build it from scratch. That’s the hard way. Putting XStore to work may seem like a lazy approach, but it’s actually far better; not to mention faster.

There are several reasons for letting XStore do the heavy lifting:

90+ ready-to-go customizable stores;
XStore’s powerful product page builder;
Inspirational product demos;
$300 worth of premier plugins;
Powerful header builder.

They add up to a stress-free way to build your store.

9. Slider Revolution

7 million worldwide users have made Slider Revolution a popular tool for incorporating creative sliders and special effects into web designs. Slider Revolution 6.0 does a great deal more.

6.0 enables you to create awesome sliders, content modules, carousels, and hero headers;
A host of ready-to-go templates, addons, and 2,000 royalty-free elements give you almost unlimited design possibilities;
With 6.0, you can even build a complete website.

10. 8b Website Builder

8b is brand new. It’s super-fast. It’s a joy to work with. You can create websites from your desktop, from a mobile device, or both.

Among the reasons for incorporating such a new tool on our list of top tools are these:

8b sites get fast Google rankings;
The package features 250 cool templates;
Features include AMP, PWA, and Site Export;
8b is free to use, plus you get a free domain.

Check 8b out today!

11. WhatFontis

You’ve found the perfect font. You can’t identify it or locate its source. Sound like a bad dream? It happens to web designers all too often.

It’s time to call upon WhatFontis. Download an example of the font in question and you can expect a response in seconds:

A positive identification;
A very close match if the exact font can’t be located;
Alternatives with prices if the font is too pricey.

Seems like a very good deal. It is.

12. Goodiewebsite

Goodiewebsite is a development platform servicing a web designer in need of assistance, or a small business owner who wishes to establish an online presence.

You can expect outstanding results from goodiewebsite if you:

Need a simple WordPress website;
Intend to conduct business via a simple WooCommerce site;
Have a 1 to 10 page website in mind.

Goodiewebsite also provides responsive email templates to help its customers with their marketing.

13. Heroic KB – Knowledge Base Plugin

FAQ pages tend to give “stock” responses which often fail to completely answer a user’s question. Giving those same users fact-filled responses can do wonders for your business. With the Heroic Knowledge Base plugin you can:

Provide visitors with a wealth of useful, accurate, and up-to-date information;
Make this information available 24/7 via rapid search;
Apply Heroic KB’s actionable analytics and feedback to improve your customer service operation.

In other words, the Heroic Knowledge Base plugin is a wise investment.

14. Rank Math

Trying to optimize your site to make the search engines love your content isn’t always an easy task. A better way is to let Rank Math do your SEO heavy lifting. Rank Math offers the following:

Analyses of 40 different SEO factors to help your website attract more traffic and make it an eCommerce powerhouse;
A cool selection of Elementor, Automated Image, WooCommerce, and Local SEO tools;
404 Monitor;
Sitemap, redirection, and error checks.

15. Movedo Theme

Movedo is a theme that can make 2020 a year you’ll fondly remember. It was created by a top rated author who didn’t mind straying outside the envelope on occasion to provide users with an assemblage of nifty, extremely useful special effects, e.g., things that are either moving or simply appearing to so.

Gives you a clean, modern design to work with;
Is responsive and extremely flexible;
Offers 24/7 support.

Movedo can indeed make this a year you’ll remember. It rocks!

*****

The above selection should make it easy to find a tool or service that will save you time, minimize your business costs, and help to streamline your design workflows or business operations. You’ll also avoid having to sift through hundreds of tools and services to find something that would work best for you.

These tools and services practically guarantee to increase the amount of time you’ll have to devote to your more pressing tasks and items.

 

[– This is a sponsored post on behalf of BeTheme –]

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/4slIT4fqnX8/

Web designers are always on the lookout for new fonts to use in our designs, and there are a plethora of resources and type foundries that provide countless fonts for web use, so the task of browsing through these collections can be very time-consuming. We have a number of web font collections here on 1WD to aid in your search, but here we’ve created a new list focusing on fun and playful fonts for web design as we head into the Spring season.

Regardless of whether you are looking for seasonal fonts, or just something different from the norm, the free and premium fonts for web use listed below will surely provide you with some unique and interesting options to use in your design projects.

Note: be sure to check license information on these popular fonts. They may be free but some of them require reference or may not be used for commercial projects for free, although most of them are.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month!

DOWNLOAD NOW

 

Knewave (Free)

Miracella Script (with Envato Elements Subscription)

League Script (Free)

Fountain Type (with Envato Elements Subscription)

Pacifico (Free)

Hey Spring Brush Font (with Envato Elements Subscription)

Calafia (Pay What You Want For Personal Use)

Twenty Nine Font (with Envato Elements Subscription)

Sofia (Free)

 

Sannie Typeface (with Envato Elements Subscription)

Boomville (Pay What You Want For Personal Use)

Banshee Brush Script (with Envato Elements Subscription)

Amatic SC (Free)

Santoy (with Envato Elements Subscription)

Escafina (Pay What You Want For Personal Use)

Fairytales Script (with Envato Elements Subscription)

Waltograph (Free For Personal Use)

Hard Stones Family (with Envato Elements Subscription)

Cheri Font Family (Free For Personal Use)

Leah Gaviota (with Envato Elements Subscription)

Bender (Pay What You Want For Personal Use)

Sanös Extended Script Font (with Envato Elements Subscription)

Bigelow Rules (Free)

Cherry Cream Soda Font (Free)

Sidebook Script Font (with Envato Elements Subscription)

Chicle Font (Free)

Englebert (Free)

Fiesta Font Duo (with Envato Elements Subscription)

Henny Penny Font (Free)

Mystery Quest Font (Free)

Nalotta (with Envato Elements Subscription)

Ribeye Marrow Font (Free)

Enchanted Land (with Envato Elements Subscription)