Articles

With the widespread acceptance of web standards, and the resulting deprecation of browser prefixes, there has been a noticeable change in the browser market. Where once browser manufacturers would try to lure users in with promises of feature support, now the focus is on privacy, speed, and developer tools.

When it comes to web development, you should really be testing on every browser and device you can lay your hands on; you’re probably already doing so using an app like LambdaTest, or BrowserStack.

When quality assurance testing, you probably work by market share: starting with Safari on mobile, Chrome on desktop, and working your way down to Opera and (if you’re a glutton for punishment) Yandax; naturally, when testing, it’s the largest number of users that concerns us the most.

But before you reach the QA stage, there are a number of browsers designed to assist development. Browsers that offer tools, especially for front-end developers, that assist with code and speed up development. Here are the best browsers for web development in 2021:

1. LT Browser

LT Browser is an app for web developers from LambdaTest. Like many of the apps in this class, it offers side-by-side comparisons of a site in different viewports. Additionally, LT Browser has a number of features that make it stand out.

As well as previewing web pages, LT Browser offers developer tools to rival Chrome, which is handy if you want to see how changes across different devices affect your Lighthouse scores. LT Browser also supports hot-reloading, which means when you make a change to your code, you don’t have to hit ‘refresh,’ the viewports simply reload — it’s surprising how much of a time-saver that simple addition is.

LT Browser requires a LambdaTest account, there is a free plan, and paid plans start at $15/month.

2. Firefox Developer

The best conventional browser for web development in 2021 is the developer edition of Mozilla’s Firefox.

The standard edition of Firefox is an excellent browser, packed with features, and privacy-focused. The developer edition adds to this with a suite of tools aimed at developers. The CSS and JavaScript debugging tools are superb, and the Grid tools are unparalleled for coding layouts with CSS Grid.

Firefox Developer is free to download.

3. Polypane

Polypane is one of the new generation of web browsers that are firmly intended as development aids rather than browsers. Polypane allows you to compare different viewports and platforms by placing them side by side. Interactions like scrolling are synced.

Polypane takes a step further than many browser apps in this class by showing social media previews. It even has a suite of accessibility tools, including some handy color blindness simulators.

Polypane has a 14-day free trial, and plans start at $8/month.

4. Blisk

Blisk is another browser for developers that allows you to line up a collection of viewports in a single app. URL and scrolling are synced, making testing interactions and animations effortless.

Blisk is awesome fun to play with and delivers a great preview of a responsive design. But be warned, synced viewports can be addictive, and it’s easy to line up browsers and become hypnotized by the synchronized movement; you’ll need a very large screen to get the most out of Blisk.

Blisk plans start at $9.99/month.

5. Sizzy

Sizzy is another app that allows you to view multiple viewports at once. It also has synchronized interactions, and like many competing apps, Sizzy allows you to screenshot different views.

Sizzy also includes a very clever synchronized inspect tool, so you can focus on individual elements across different viewports. It’s an excellent option for debugging, particularly if you’re digging into someone else’s code.

Sizzy has a 14-day free trial, and paid plans start at $7.15/month.

6. Brave

Brave is a privacy-focused browser that runs up to three times faster than Chrome. If you’re someone who balks at rendering speeds on most sites, Brave could be for you.

Brave’s main benefit for developers is that it supports Chrome extensions while maintaining privacy — it can even access the Web using Tor if simple privacy mode isn’t enough for you. There are hundreds of useful Chrome extensions, and if you avoid Chrome due to privacy concerns, then Brave solves your problem.

Brave is also pioneering a new system for monetizing site revenue, allowing viewers to tip sites, and soon, to control how advertising revenue is distributed.

Brave is free to download.

7. Chrome

Boring it may be, but Chrome is still the world’s most popular browser from the US to mainland China. Where once sites were “best viewed in IE,” Chrome is now the Web’s default.

No matter the site you’re designing, it has to work well in Chrome, and no simulator is as good as the real thing.

In addition to being the benchmark for page rendering, Chrome developer tools are the simplest way to access your Lighthouse scores, which helps you track down issues that may be holding you back in Google’s search results.

Chrome is free to download.

Source

The post 7 Best Browsers for Developers in 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

It’s fair to say that AMP (Accelerated Mobile Pages) is a controversial topic among web developers.

AMP is a Google-guided technology that strips down web pages to a limited sub-set of tags to serve pages faster. It was developed as a web-based rival to native news apps from vendors like Apple.

The controversy first arose when it was clear how much influence Google had over the conventions, essentially creating a tiered Web overseen by a single entity. The clamor didn’t calm when it became clear that Google prioritized AMP pages for mobile search results. Developers were left in a difficult position: stand by best practices supporting a platform-agnostic Web, or do what’s right for their clients by building the most competitive mobile site possible.

But that was 2015, six years is a lifetime for a web technology, and things are about to change.

Hidden among the announcements about the much-delayed Core Web Vitals update — it’s finally rolling out, a year after originally planned, but don’t expect to see much impact until the end of August — is the news that Google mobile search will no longer prioritize AMP pages.

Beginning immediately (from the 17th June onwards) and completing sometime before the end of August, AMP will cease to be a factor in mobile site ranking. The AMP badge on mobile search results will disappear, and AMP is not required to have your site included on Google’s news app.

This significant move is due to the fact that the Core Web Vitals update from Google will expect the same speed and usability as AMP from non-AMP pages. Google still expects the same optimized user experience; it simply isn’t offering a cheat sheet on how to achieve it.

You can continue to use AMP, but there’s no automatic benefit to doing so, and the housekeeping involved in maintaining multiple front-ends means it’s far simpler to optimize your base site. Without a solid purpose, AMP ceases to fill a need. And just like that, one of the most controversial technologies of recent years slips away.

Featured image via Unsplash.

Source

The post Poll: Is AMP Dead, and Do We Care? first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Does it ever cross your mind that praise can be negative? I guess not. After all, it looks harmless and seems to be quite effective. Conventional wisdom says that if you praise people, they are motivated to do better.
People who have been praised throughout their life by their well-meaning parents, friends, and teachers for their talent and smartness or those who have experienced extreme focus on talent and smartness throughout their childhood learn to value only intelligence. No wonder when these people enter the workforce, they continue to seek approval and demand praise every step of the way.
Every opportunity is a measure of their intelligence — do I look smart, how will I be judged, what if others find my ideas dumb. With a single-minded focus on validating themselves, all their actions are rooted in establishing their worth. Every mistake hurts their reputation and every failure is a reflection of their competence. They care less about learning and more about proving themselves. Their sense of morality sometimes takes a hit as they resort to brutal behaviors — demeaning others by yelling, insulting, controlling, or taking undue credit — all in an attempt to boost their self-esteem.
Carol Dweck, professor of Psychology at Stanford University summarised this unfortunate reality from Morgan McCall’s book High Flyers:

People often like the things that work against their growth. . . . People like to use their strengths . . . to achieve quick, dramatic results, even if . . . they aren’t developing the new skills they will need later on. People like to believe they are as good as everyone says . . . and not take their weaknesses as seriously as they might. People don’t like to hear bad news or get criticism. . . . There is tremendous risk . . . in leaving what one does well to attempt to master something new.

What Do Organizations Do with Such People?

They feed and promote this mindset. They praise people for their brilliant ideas conveying the message “we value talent and smartness.” They shower people with rewards and bonuses for their achievements communicating to everyone else around “all we care about is success.”
What happens when these people take on a leadership role? Their mindset of valuing brilliance above everything else amplifies leading to disastrous results. History is full of leadership fiascos with great promises that turned out to be the biggest disasters. This article from Malcolm Gladwell in The New Yorker is as valid now as it was 18 years ago. Describing the talent mindset at Enron and the consultants at McKinsey who wandered the hallways at the company’s headquarters, he points out “They were there looking for people who had the talent to think outside the box. It never occurred to them that, if everyone had to think outside the box, maybe it was the box that needed fixing.”
He also talks about the impact of an environment that values innate talent and what happens when times get tough and that self-image is threatened “They have difficulty with the consequences. They will not take the remedial course. They will not stand up to investors and the public and admit that they were wrong. They’d sooner lie.”
Really, is praising people for their intelligence and achievements the only way to develop people who will be the leaders of tomorrow? Is there a better way out?
What if we praised people for their hard work, for their ability to persist despite failures and setbacks, for taking initiatives to build new skills, for standing up to their mistakes, for believing in their growth, and implementing the right strategies to overcome their shortcomings. What does this kind of praise tell them?
It tells them the value of effort in building abilities. It teaches them the importance of implementing the right strategies to solve problems. It encourages them to seek help to make progress on their task. It creates a passion for learning that’s not driven by the need to look smart, but with a desire to cultivate skills, to stretch themselves to grow.
When these people take on leadership positions, this mindset guides them to put the well-being of the company and its people before their own needs, to place value on teamwork over individual accomplishment, and to foster growth and development of their people.

As growth-minded leaders, they start with a belief in human potential and development — both their own and other people’s. Instead of using the company as a vehicle for their greatness, they use it as an engine of growth — for themselves, the employees, and the company as a whole.
– Carol Dweck

Unlike leaders who pull their companies down with their focus on brilliance, these leaders lead their companies into greatness and gratitude filled in their own hearts and those of the people around them.
Choose your praise carefully as you will see the tremendous benefits in praising for growth over brilliance.

When Leaders Focus on Brilliance

They live in a world of personal greatness and entitlement, vie for labels, and will do anything to boost their image. Instead of building a long-lasting company, they spend time and money on enhancing their image.
With the constant need for validation, they use people in the company to feed their egos and showcase their superiority. Everything is about pleasing the boss. They surround themselves with people who boost their self-esteem. Agreement earns them admiration and disagreement is an attack on their intelligence. Instead of hearing people out, they punish dissent and shut people down.
They pounce at the less talented for their lack of intelligence and find those who are more talented than they are as threatening. They mistreat employees, yell, insult, control and abuse them into their way of doing things. They feel better about themselves by making other people feel worse. Employees worry about being judged all the time. When people are ridiculed for mistakes, they soon learn to keep their heads down, stop putting their critical thinking skills to use, and give in to groupthink.
Their belief in their superiority blinds them to see reality. They turn a blind eye to complaints, ignore warning signs, and fire people who tell them what they don’t want to hear. Their decision-making criteria are based on what would make them look good as opposed to what’s good for the company long term.

What happens when a leader refuses to confront the brutal facts? “The minute a leader allows himself to become the primary reality people worry about, rather than reality being the primary reality, you have a recipe for mediocrity, or worse. This is one of the key reasons why less charismatic leaders often produce better long-term results than their more charismatic counterparts.
– Jim Collins

Since success and failure are a part of their identity — success means they are smart and failure means they are not — they find excuses and blame others for failures instead of taking personal responsibility. Instead of investing in the future growth of their company, they play safe with fear of failure, become less responsive to challenges from competition, go with what’s tried and tested, and refuse to take risks. Why take up the challenge that can hurt their reputation? On the other extreme, they may not shy away from crossing ethical boundaries to beat the competition at all costs. Success is what they are after and it doesn’t matter how they get it.
With more focus on talent and less on potential, they do not invest in mentoring and coaching employees. Instead of putting practices in place to develop employees and help them collaborate together, they make them compete against each other.
Carol Dweck sums up their brilliant mindset “My genius not only defines and validates me. It defines and validates the company. It is what creates value. My genius is profit. Wow!”

When Leaders Focus on Growth

They operate with a learning mode. They don’t claim to be genius but promise to invest in development, their own development, and the development of their people. The drive and enthusiasm to grow their companies make them adopt long-term strategies over short-term tactics. They aren’t in the game to boost their ego or establish their self-esteem. It’s the pure joy of shaping the future of their company that excites and motivates them. More than prestige, they are in it for the challenge.
They understand that the path to success goes through failure. Why lose the opportunity that can drive their future growth? So instead of hiding behind their failures, they face them head-on. Failures don’t define their competence, they are glaring moments of self-reflection. They are opportunities to build skills, explore possibilities, experiment, and invest in the promise of a better future.
They lead with vulnerability. They accept mistakes to shift the focus in the organization from hiding mistakes to finding solutions. When they don’t know something, instead of pretending to hide their ignorance, they say “I don’t know”. These three powerful words show humility and self-confidence. To make decisions, they invite others to share their opinion which promotes the culture of constructive criticism. Since they do not connect their identity to their opinion, more value is placed on seeking the right answers which require open disagreements and championing flexibility of opinion over their sense of righteousness.
Difficult situations make them uncomfortable, no doubt. Instead of letting their discomfort get in the way of meaningful conversations, they embrace it. They choose to look past their discomfort in the value that these discussions provide — saving a lot of time that can be wasted due to stress and anxiety that comes from misalignment of expectations and lack of clarity of purpose.
They are tough but compassionate. They do not shy away from giving critical feedback while also challenging the people in their organization to step outside their comfort zone. They empower people to make decisions with the right channels of feedback to assist in better decision-making in the organization.
Leaders with the growth mindset operate with what Lou Gerstner, who turned IBM’s fortunes around by saving it from near bankruptcy said “Hierarchy means very little to me. Let’s put together in meetings the people who can help solve a problem, regardless of position.” Not blinded by reality, they focus on finding solutions that will push their company forward. This requires keeping an open eye to change in market trends, identifying and investing in future growth areas, and taking calculated risks.
With a focus on potential and growth, they invest in identifying and building future skills of the organization — skills that will be useful during difficult circumstances giving them an advantage over the competition. They foster productivity through coaching and mentoring, place value on teamwork by encouraging collaboration and defining shared measures of success.
Warren Bennis, a scholar, author, and widely regarded as a pioneer of the contemporary field of Leadership studies, writes in Organizing Genius:

Leaders are people who believe so passionately that they can seduce other people into sharing their dream.

His most admirable view on leadership says:

Good leaders make people feel that they’re at the very heart of things, not at the periphery. Everyone feels that he or she makes a difference to the success of the organisation. When that happens people feel centred and that gives their work meaning.

What kind of leaders think like this — those focused on brilliance or the ones driven by growth?
Previously published here.

Source de l’article sur DZONE

HTML is one of the foundational building blocks of the Web. But just as web design best practices and techniques change over time, so does the code we use. As HTML evolves, some of its older markup has been deprecated while other parts have been repurposed.

Does that create more problems for us, though? Would we be better off starting over so we can make sure we’re all working from the same language rather than trying to edit out the bits we don’t want or need?

Problems With Holding Onto Legacy HTML

Let’s take a look at what happens when we amend the rules of HTML over time and how it impacts the Web:

1. It’s Risky to Leave Deprecated HTML Behind

Whether certain features have become outdated and need to go, or browsers have stopped supporting certain tags altogether, deprecated code eventually becomes a problem.

You’ll find a long list of deprecated HTML on the HTML.com website:

For many of these, HTML tags and attributes have been replaced by more efficient CSS styling. There are also examples of HTML deprecation because the features have become outdated (like frames).

Yet, there are still websites out there that contain deprecated HTML.

In some cases, the HTML sits silently on the other side of the website. If there’s enough of this errant code hanging around, though, those extra characters and directives could slow down your server’s processing time and render pages more slowly than usual.

In other cases, the HTML breaks features on the front-end of a website. Take, for instance, this warning from Mozilla regarding the <nobr> tag:

Using deprecated code can create inconsistent and poor experiences on the front-end. And when all browsers finally get on board and decide not to support an HTML tag anymore, all visitors will be left with a broken UI.

So, while it’s great that HTML5 has deprecated legacy HTML that’s no longer useful or necessary, that’s not to stop everyone from using it or leaving it behind on older websites. 

2. Legacy Code Focuses on Style; Not Semantics

As I mentioned, a lot of deprecated HTML has been phased out and replaced by CSS styling. And that’s a good thing.

Let me give you a simple example of this…

My favorite book is <i>The Stand</i> by Stephen King. The first time I read it, I didn’t sleep for <i>three days</i>. Thankfully, when I revisit it every year, I have fewer nightmares and can more greatly appreciate the storytelling aspect of it.

In the above paragraph, I’ve used the <i> tag to italicize several words.

In the early days of HTML,<i> stood for “italics” (the way<b> stood for “bold”). With HTML5, however,<i> will still render as italics, but its semantic meaning isn’t as broad. It’s been repurposed to indicate a stylistic change, which is important for things like book and film names, foreign words, and so on. To express emphasis, we use the <em> tag instead. 

Keeping the legacy <i> and <b> tags can lead to issues, though. 

In the statement above, I’ve italicized the name of the book (The Stand) as well as the number of sleepless nights I had (three days) with<i>. Whether the designer decides today, tomorrow or ten months down the road that they want to change the way literary or cinematic references are styled, my choice of HTML will stand in their way.

Because all of my italic text is indicated by <i>, styles can’t universally be applied to specific content (like book references). Instead, the designer would have to go through and clean up my code so that it looks like this:

My favorite book is <i>The Stand</i> by Stephen King. The first time I read it, I didn’t sleep for <em>three days</em>. Thankfully, when I inevitably revisit it every year, I have fewer nightmares and can more greatly appreciate the storytelling aspect of it.

This would then allow the semantically italicized content to remain intact while the designer or developer adjusts the styles of the book title here and across the site. (Though, really, the first italicized phrase should be surrounded by <cite> as it would be more semantically accurate.)

While it’s great that we’ve created guidelines for using legacy HTML today, keeping old code around can confuse writers, designers, and others who are familiar with the previous way of formatting content. By resetting HTML, throwing out old styles, and creating one language we use consistently across the web, we won’t create more work for ourselves later on.

3. Deprecated Code Hinders Accessibility

Another big reason why repurposed and deprecated HTML is a problem is because of accessibility.

For starters, when you leave deprecated and unsupported code behind, it’s likely to cause issues for screen readers, search engines, and browsers that use HTML for clues about the content.

Header tags (e.g.<h1><h2><h3>), for instance, aren’t just used to visibly break up large chunks of text. Header tags and, more specifically their hierarchy, present important information about the relationship between subjects on a page — and this is the kind of thing that screen readers and search engines pick up on.

That’s why we need to be very careful about the code we leave behind the scenes, even if readers on the front end can’t visibly see it. Let’s look at an example of how this can affect accessibility:

Is there an <i>à la carte</i> menu or is it just <i>prix fixe</i> tonight?

If a screen reader were to read over this sentence, the French phrases would be said with the same emphasis as any other italicized words on the page.

This is why HTML5 encourages semantic coding instead of purely stylistic.

The proper way to write HTML in the line above would be:

Is there an <i lang="fr">à la carte</i> menu or is it just <i lang="fr">prix fixe</i> tonight?

There are two reasons to do this:

  1. To indicate to screen readers that there’s a language change.
  2. To make it easier for designers or developers to create a custom style for foreign phrases.

Semantic coding is essential for designers that work on multilingual websites.

As the World Wide Web Consortium explains, languages like Japanese don’t use italicization or bolding for emphasis — at least not the way English speakers do.

So, to properly translate a page from English, a Japanese designer would need to remove the italics or bolding and add surrounding brackets to the words. However, if everything is coded with <i> and <b>, or there’s a mix of <i> and <em> and<b> and <strong>, it’s going to be really difficult to Find-and-Replace the correct HTML with ease.

So, if accessibility or internationalization are concerns for you at all, getting clear on the HTML you write with is going to be really important.

Wrap-Up

The fact of the matter is, it requires a lot of work to have the rules of HTML rewritten. So while it would be great to reset HTML, I don’t know that it’s all that practical.

All we can really do is stay abreast of what’s happening with the language, edit out legacy code from our websites the second it becomes deprecated, and always use tags and attributes that are supported. By playing around with deprecated or repurposed code, we only put the website visitors’ experience in jeopardy, so it’s best to take the time to clear out the old any chance we get.

If we can all get on the same page about this, problematic legacy HTML will eventually disappear from our websites and memories.

 

Featured image via Unsplash.

Source

The post Is It Time to Reset HTML? first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Asset management and website performance optimization are two of those unavoidable headaches faced by every website owner.

A digital asset management (DAM) platform can provide centralized asset repositories with intuitive dashboards to help you manage assets. On the other hand, an image CDN can help you get rid of that messy responsive syntax and provide dynamic asset optimization with huge performance boosts.

The problem is that website performance has become such a competitive factor that DAMs with other priorities tend to fall short. On the other hand, specialized image CDNs don’t solve the problems associated with image management, particularly within organizations.

With that in mind, I propose solving these problems for good by putting together image management and optimization stack using ImageEngine and Cloudinary. Instead of being a comparison between these two tools, this article describes the benefits of using them to complement each other.

Features and Asset Management Capabilities

As a DAM, Cloudinary provides you with a visual interface to store, manage, and edit your image and video assets. In that way, it’s not much different from any other professional image managing software such as Adobe Bridge, except that it’s an online, browser-based service.

Using the Media Library, you can upload, delete, and organize images in folders, for example. The visual image editor allows you to make advanced transformations and image touch-ups and see the results instantaneously using tools like sliders, dropdowns, etc. You can even chain transformations together for multi-layered effects.

Cloudinary also allows you to manipulate images and videos this way using their URL-based API.

Cloudinary has additional auxiliary features that make asset management easier (especially in organizations), such as backups, role-based multi-user admin, and feature extensions via third-party integrations and add-ons.

This is something most image CDNs don’t provide. Instead, they allow you to access and transform images using URL manipulation. Transformations are usually made using string-based parameters or directives. A serverless, headless DAM, if you will.

However, the advantage of using a dedicated image CDN like ImageEngine, is that it can usually provide enhanced asset optimization. ImageEngine, for example, is an intelligent image CDN that uses WURFL device detection to finely read the context an image is accessed from (device model, PPI, OS, browser, resolution, etc.) and then chooses the optimal image for that configuration.

This frees up website owners from having to do any additional optimization. This business logic is also built-in to all of their global PoP servers, and ImageEngine specifically delivers cache-hit ratios close to 100%. The following performance section will illustrate the difference this can make in practice.

Check out the key differences between ImageEngine and Cloudinary. And, for a deeper insight, see the comparison with other similar CDNs, like imgix and Cloudflare

Performance

Just to cover our bases and prove that this is an effective asset management and optimization stack, I’m also going to affirm it using a Lighthouse performance audit. Here is a quick summary of the results:

For this test, I built a web page with a tonne of images with overly large file sizes. In this first Lighthouse audit, I didn’t apply any optimization to the images. Here’s the result:

As you can see, we had some major problems when it came to the loading time of our assets. Overall, the page took more than 10 seconds to load. One of Google’s crucial user-centric performance metrics, LCP, scored a miserable 7.5s. Lighthouse suggested that some of the main problems encountered were the asset file size, inefficient cache policies, using non-optimal image formats, and improperly sized images.

Both Cloudinary and ImageEngine are supposed to address all of these factors with their auto image optimization. In the next audit, I used the same page and content but served my images via Cloudinary:

As you can see, there is improvement in most factors. FCP is now in the green, and both the Speed index and LCP times have almost halved. Even TTI and CLS improved slightly. That being said, it’s still nowhere near optimal, and we’re still falling short of the all-important 3-second loading time ceiling.

So, finally, let’s do another Lighthouse audit – this time using ImageEngine on top of Cloudinary. Here are the results:

With ImageEngine, I finally scored in the green with 95. All the metrics that have to do with the sheer speed at which image content loads improved. The Speed Index and LCP, which is the most important, improved dramatically. CLS scored worse, but this typically varies from test to test.

You can find another and more extensive breakdown of the performance and pricing comparison here.

Transformations, Bandwidth Utilization, and Cost

Cloudinary’s pricing plans work on a credit-based system. Starting with the free account, you get 25 credits/month. Each credit can be used for 1,000 transformations, 1 GB of storage, or 1 GB of net viewing bandwidth. The other two packages cost $99 for 225 credits and $249 for 600 credits, respectively.

You should plan to generate a minimum of 5 transformations per image. In effect, that limits you to around 200 images with the free plan, excluding whatever manual transformations you make.

ImageEngine’s Basic plan costs $49 and provides you with 100 GB of Smart Bytes. Smart Bytes are based on optimized image content and translate to roughly 400-500 GB of raw images.

So, with Cloudinary, you have to compromise between bandwidth and storage usage as well as the number of transformations you can make. Transformations for Cloudinary are counted as they are dynamically generated on-demand.

However, if you use ImageEngine for optimization, you can switch off Cloudinary’s auto-optimization. When a new image variant is needed, it will be generated and delivered via ImageEngine. Considering variant count isn’t limited by ImageEngine, this will drastically cut down on the number of credits you’ll need to spend on transformations.

Effectively, that means you could use the bulk of your Cloudinary credits purely for storage and specific transformations. For example, advanced cropping, applying effects, or color adjustments. These are, after all, the main functions of a DAM.

With this setup, ImageEngine’s Basic plan and Cloudinary’s free plan should be adequate for most websites, saving around $50 a month.

How to Implement Cloudinary with ImageEngine

Signing up for Both Services

As it will house all of your image assets, the logical place to start would be to sign up with Cloudinary.

Create a (free) account, and make sure to take note of your “cloud name” during the setup wizard. This will be the name of your designated storage location on the Cloudinary platform and is usually a garbled string like di2zgnxh0 by default. However, you can change this to something more meaningful.

Once you’ve signed up, you can start uploading your image assets and creating different versions/transformations of them. Setting up Cloudinary integration on a CMS, like WordPress, is usually straightforward. Just indicate the CMS you’ll be using, copy the API key, install the plugin, and activate it.

Next, sign up for a free trial with ImageEngine. There will also be a short setup wizard during which you will:

  1. Provide ImageEngine with the website where your images will be delivered.
  2. Supply your image origin (in this case, your Cloudinary web folder). For now, you can only add the Cloudinary, e.g., res.cloudinary.com.
  3. Get your ImageEngine image-serving domain, e.g., {randomstring}.cdn.imgeng.in

When in your ImageEngine dashboard, you’ll see this domain listed under “Engines” as well as an entry for Cloudinary under “Origins.” Edit the latter and under “Advanced,” add your Cloudinary folder to the “PATH” field.

That’s it, you should now be able to store and manage images via Cloudinary and serve them via the ImageEngine CDN.

Dynamically Loading Specific Image Variants

Let’s take a look at a use case for loading different transformations of individual images on your site. This example will showcase how you can use Cloudinary’s advanced image editing tools to transform images while still reaping the optimization rewards of using ImageEngine as your image CDN.

A popular practice today is to use rounded images for team, client, or profile portraits. Using Cloudinary, you can load this transformation using the following URL:

https://res.cloudinary.com/myimages/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/profile.jpg

This will resize the image to 400 by 400px, focus on the face, and apply the maximum amount of radial cropping around it – to a width of 200px.

The same image can then be accessed via your ImageEngine delivery engine simply by swapping out the domain:

https://images.myimageengine.com.imgeng.in/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/profile.jpg

NOTE: I added my Cloudinary folder designation (“myimages”) as the path to my image origin. With that config, I don’t need to include it every time I use the image URL.

For example, you can set up the origin like this:

And, then under advanced:

If I specifically wanted to load the profile picture in WebP format (for transparency support, for example), I could add the ImageEngine directive f_webp:

https://images.myimageengine.com.imgeng.in/image/upload/w_400,h_400,c_crop,g_face,r_max/w_200/?imgeng=/f_webp/profile.jpg

ImageEngine and Cloudinary – The Wrap Up

Both ImageEngine and Cloudinary are superb platforms that can make managing image and video assets easier and improve your website maintenance. However, both services have their specialty in which they outperform each other.

For ImageEngine, it’s delivering blisteringly fast image loading times in next-gen formats and with a minimal loss of visual quality.

For Cloudinary, it’s providing a visual interface to organize, store, and edit your image and video assets.

As a further incentive, letting each of these services handle what they’re best at can lead to lowering your long-term operating costs.

 

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

Source

The post Start Using a Smart DAM and Image Optimization Stack first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

From dev tools to productivity to a little bit of fun with sudoku, this month’s collection of new tools is packed with something for everyone.

Here’s what new for designers this month.

May’s Top Picks

Am I FLoCed?

Am I FLoCed? Is a tool to see if you are part of a Google Chrome origin trial. It tests a new tracking feature called Federated Learning of Cohorts (FLoC). According to Google, the trial currently affects 0.5% of users in selected regions, including Australia, Brazil, Canada, India, Indonesia, Japan, Mexico, New Zealand, the Philippines, and the United States. The page will try to detect whether you’ve been made a guinea pig in Google’s ad-tech experiment.

According to the designers of Am I FloCed: “FLoC runs in your browser. It uses your browsing history from the past week to assign you to a group with other ‘similar’ people around the world. Each group receives a label, called a FLoC ID, which is supposed to capture meaningful information about your habits and interests. FLoC then displays this label to everyone you interact with on the web. This makes it easier to identify you with browser fingerprinting, and it gives trackers a head start on profiling you.”

Uncut

Uncut is a Libre typeface catalog that just got started in April. It features contemporary typefaces and styles and is set to be updated regularly. Sort by sans serif, serif, monospace, or display typefaces. Plus, you can submit a typeface for inclusion.

Dashblock

Dashblock allows you to build automations without coding. Use it to create visual automations, or turn blocks into use-cases. (It is a premium tool, but comes with a 14-day free trial to test it out.)

Instant

Instant is a fast and secure one-click checkout tool that works with WooCommerce. Users fill out a short form the first time they shop and then join the network to enable instant, frictionless, 1-click checkouts without passwords. It makes shopping easier and cuts abandoned carts.

5 Image Tools

Triangula

Triangula uses a modified genetic algorithm to triangulate images. It works best with images smaller than 3000px and with fewer than 3000 points, typically producing an optimal result within a couple of minutes. The result is a nifty-looking image.

Content-Aware Image Resizing in Javascript

Content-Aware Image Resizing in Javascript solves that problem with images where you have a photo but it just doesn’t quite fit. A crop doesn’t work because you lose important information. The carver slices and cuts photos to give you the image elements you want in the size you want them. It’s probably a good idea to read through the tutorial before jumping into the open-source code on GitHub.

Globs Design

Globs Design uses toggles and drag and drop to help you create funky shapes and fills that you can save in SVG format for projects.

Root Illustrations

Root Illustrations is a stylish set of people-based illustrations that you can customize to create scenes for your projects. Construct a scene and then snag your set of vector graphics that also work with Sketch and Figma. The set includes 24 characters, more than 100 details, and the ability to change colors and styles.

Make Your Photo 16×9

Make Your Photo 16×9 is as simple as it sounds. It is a cropping tool that allows you to upload any shape of photo – even vertical – and pick options to fill the space to make it fit the standard 16×9 aspect ratio.

6 Dev Tools

Devbook

Devbook is a search engine for developers that helps them to find the resources they need and answer their questions faster. Fast, accessible right from a code editor, and fully controllable with just a keyboard.

Madosel

Madosel is a fast, advanced responsive HTML front-end framework that’s in an alpha version. The open-source tool is made to create websites and apps that look great on any device. Plus, it is semantic, readable, flexible, and customizable.

Say Hello to CSS Container Queries

Say Hello to CSS Container Queries helps solve a problem with media queries and smart stacking of elements. CSS Container Queries allow you to make a fluid component that adjusts based on the parent element and everything is independent of viewport width. This post takes you through everything you need to do to implement this yourself.

Frontend Toolkit

Frontend Toolkit is a customizable dashboard that you can use to keep up with recurring tasks. It’s one of those little tools that can speed up workflows.

Flatfile

Flatfile is a production-ready importer for SaaS applications. It allows you to auto-format customer spreadsheets without manual cleaning of data and you can do it all without a CSV parser. The tool also includes an elegant UI component to guide users through the process.

Plasmic

Plasmic is a visual website builder that works with your codebase. It’s designed to speed up development with developers focusing on code (not pixel pushing) and allows non-developers to publish pages and content. The premium tool works with any hosting, CMS, or framework and you can adapt it by the component, section, or page.

2 Productivity Tools

Calendso

Calendso is an open-source calendar scheduling tool. It’s flexible with the ability to host it yourself or with the makers of the calendar. It is API-driven and allows you to control events and information. The interface is simple and sleek and can integrate into your website.

Slidev

Slidev is a set of presentation slides for developers. What’s different about this presentation deck is that you can write slides in a single markdown file with themes, code blocks, and interactive components.

4 Icons and UI Kits

Iconic

Iconic is a set of pixel-perfect icons that gets updated each week. The collection of 24×24 px elements in SVG format contains 160 icons and counting. The simple style is easy to implement and you can search for just what you need by category.

5 Dashboard Templates for Figma

5 Dashboard Templates for Figma is a set of free ready-made screens with light and dark modes for each that you can use with components such as calendars, charts, tables, and more. The free elements are a preview of a larger premium Figma set if you like how they look and work.

Free Mobile Chat UI Kit

Free Mobile Chat UI Kit is a tool of components for Sketch, Figma, and Adobe XD that includes more than 50 messaging screens with light and dark modes.

Stratum UI Design Kit

Stratum UI Design Kit is a collection of more than 9,000 consistent elements for Figma. It’s packed with elements and tools that make this premium UI kit a tool that gets projects moving quickly.

4 Type Tools and Fresh Fonts

Fluid Typography

Fluid Typography is a nifty tool that allows you to test headings in any size at different viewports to ensure it looks great everywhere. Then you can copy the CSS and use it in your projects.

Eighty-Eight

Eighty-Eight is a funky block-style typeface for display use.

Harmonique

Harmonique is a robust typeface family with lovely serifs and alternates. It’s a type family of two styles that work in harmony together to add distinction and personality to your own typographic compositions. Harmonique’s low contrast forms have the appeal of a humanist sans serif typeface.

Sketchup

Sketchup is a charming display typeface that has a nice pen style. The free version has a limited character set.

Just for Fun

Generating and Solving Sudokus in CSS

Generating and Solving Sudokus in CSS by Lee Meyer for CSS-Tricks is a fun deep dive into using CSS for something you might not expect. It’s a complicated – but fun – look at some of the things CSS can do with plenty of code snippets. The final result is a solvable puzzle with 16 squares.

Source

The post 26 Exciting New Tools For Designers, May 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

WordPress powers nearly 40% of all websites, thanks to its commitment to making publication possible for everyone, for free. Combined with premium plugins and themes, it’s possibly the ultimate tool for building attractive, unique, and feature-rich websites without any coding or design experience.

However, you do pay the price for this experience, with WordPress and its third-party products not always being built for performance – whether it’s page loading times or SEO.

Image optimization is a particularly big concern. Images are one, if not the largest, contributors to page weight, and it’s growing significantly by the year. So, while images are crucial for beautifying your website pages, they are also one of the biggest factors slowing it down.

In terms of image optimization, WordPress+Elementor brings very little to the table. WordPress core now comes with both responsive syntax and lazy-loading. Elementor itself also only comes with responsive syntax out-of-the-box. However, these are baseline techniques for image optimization that will deliver the bare minimum of improvements.

This means that, while Elementor makes it easy to design sweet-looking WordPress pages (with tonnes of creatively utilized images), you will probably pay the price when it comes to performance. But don’t worry. We will show you how to dramatically improve web performance by over 30 points on scoring tools like Google’s PageSpeed Insight

Why Optimize Your Elementor Images with ImageEngine?

In general, image CDNs use various techniques to get image payloads as small as possible and deliver image content faster, all while minimizing the visual impact. ImageEngine is no different in that regard.

Firstly, ImageEngine, when used in auto mode, will apply all of the following optimizations that web performance tools like Google’s PageSpeed Insight recommend. For example:

  • Properly size images – ImageEngine automatically resizes images for optimal size-to-quality ratios depending on the screen size of the user device. ImageEngine supports Retina devices.
  • Efficiently encode images – Applies different rates of compression depending on the PPI of the user devices. For example, ImageEngine adapts and more aggressively compresses on higher PPI devices without losing visual quality.
  • Next-gen format conversion – Automatically converts images to the optimal next-gen format according to the browser, device, or OS. ImageEngine can convert images to WebP or JPEG-2000 as well as GIFs to MP4 or WebP.  AVIF is also available in a manual directive mode.
  • Strip unnecessary metadata

While these features are standard for most image CDNs, ImageEngine is unique for its use of WURFL device detection. This gives ImageEngine much deeper insight into the user device accessing a website page and, by extension, its images. Using the screen size, resolution, PPI, etc., ImageEngine can make more intelligent decisions regarding how to reduce image payloads while maintaining visual quality.

This is why ImageEngine brands itself as an “intelligent, device-aware” image CDN and why it can reduce image payloads by as much as 80% (if not more).

ImageEngine also provides a proprietary CDN service to accelerate image delivery. The CDN consists of 20 globally positioned PoPs with the device-aware logic built-in. This allows you to deliver image content faster in different regions while also serving images straight from the cache with a ~98% hit ratio.

ImageEngine also supports Chrome’s save data setting. If someone has a slow connection or has activated this setting, ImageEngine will automatically compress image payloads even more, to provide a better user experience on slower connections.

How to Use ImageEngine with WordPress and Elementor

If you’re using WordPress and Elementor, then chances are you want to spend as little time on development and other technicalities as possible. Luckily, ImageEngine is a highly streamlined tool that requires little to no effort to integrate or maintain with a WordPress site.

Assuming you already have a WordPress website with Elementor, here are the step-by-step instructions to use ImageEngine:

  1. Go to ImageEngine.io and sign up for a 30-day free trial.
  2. Provide ImageEngine with the URL of the website you want to optimize.
  3. Create an account (or sign up with your existing Google, GitHub, or ScientiaMobile account).
  4. Provide ImageEngine with the current origin where your images are served from. If you upload images to your WordPress website as usual, then that means providing your WordPress website address again.
  5. Finally, ImageEngine will generate an ImageEngine delivery address for you from where your optimized images will be served. This typically takes the form of: {randomstring}.cdn.imgeng.in. You can change the delivery address to something more meaningful from the dashboard, such as myimages.cdn.imgeng.in.

Now, to set up ImageEngine on your WordPress website:

  1. Go to the WordPress dashboard and head to Plugins -> Add New.
  2. Search for the “Image CDN” plugin by ImageEngine. When you find it, install and activate the plugin.

  1. Go to Settings -> Image CDN. OK, so this is the ImageEngine plugin dashboard. To configure it, all you need to do is:

a. Copy the delivery address you got from ImageEngine above and paste it in the “Delivery Address” field.

b. Tick the “Enable ImageEngine” box.

That’s literally it. All images that you use on your WordPress/Elementor pages should now be served via the ImageEngine CDN already optimized. 

ImageEngine is largely a “set-it-and-forget-it” tool. It will provide the best results in auto mode with no user input. However, you can override some of ImageEngine’s settings from the dashboard or by using URL directives to manipulate images.

For example, you can resize an image to 300 px width and convert it to WebP by changing the src attribute like this:

<img src="https://myimages.cdn.imgeng.in/wp-content/uploads/2021/03/banner-logo.png?imgeng=/w_300/f_webp">

However, use this only when necessary, as doing so will limit ImageEngine’s adaptability under different conditions.

What Improvement Can You Expect?

Let’s see what results you can expect from using an image CDN to improve your page loading times.

For this, I created two identical WordPress pages using the Elementor theme. The one page purely relied on WordPress and Elementor, while I installed and set up ImageEngine for the other. The page had some galleries as well as full-size images:

The pages used many high-quality images, as you might expect to find on a professional photography gallery, photography blog, stock photo website, large e-commerce site, etc. I then ran page performance tests using Chrome’s built-in Lighthouse audit tool, choosing scores representing the average results I got for each page.

For thoroughness, I tested both the mobile and desktop performance. However, I focused on the mobile results as these showcase more of the image CDN’s responsive capabilities. Mobile traffic also accounts for the majority share of internet traffic and seems to be the focus for search engines going forward.

So, first of all, let’s see the mobile score for the page without ImageEngine:

As you can see, there was definitely a struggle to deliver the huge amount of image content. Google has shown that 53% of mobile users abandon a page that takes more than 3s to load. So, clearly, this page has major concerns when it comes to user experience and retaining traffic.

The desktop version fared much better, although it still left much to be desired:

When digging into the reasons behind the slowdown, we can identify the following problems:

Most of the issues related somehow to the size and weight of the images. As you can see, Lighthouse identified a 3.8 MB payload while the total image payload of the entire page was close to 40 MB.

Now, let’s see what kind of improvement ImageEngine can make to these issues by looking at the mobile score first:

So, as you can see, a major improvement of 30 points over the standard WordPress/Elementor page. The time to load images was cut down by roughly 80% across the key core web vital metrics, such as FCP, LCP, and the overall Speed Index.

In fact, we just reached that critical 3s milestone for the FCP (the largest element on the visible area of the page when it initially loads), which creates the impression that the page has finished loading and will help you retain a lot of mobile traffic.

The desktop score was also much higher, and there was further improvement across the key performance metrics.

If we look at the performance problems still present, we see that images are almost completely removed as a concern. We also managed to bring down the initial 3.8 MB payload to around 1.46 MB, which is a ~62% reduction:

An unfortunate side effect of using WordPress and WordPress plugins is that you will almost inevitably face a performance hit due to all the additional JavaScript and CSS. This is part of the reason why we didn’t see even larger improvements. That’s the price you pay for the convenience of using these tools.

That being said, the more images you have on your pages, and the larger their sizes, the more significant the improvement will be.

It’s also worth noting that lazy-loaded images were loaded markedly faster with ImageEngine if you quickly scroll down the page, again making for an improved user experience.

Thanks to its intelligent image compression, there was also no visible loss in image quality, as you can see from this comparison:

Conclusion

So, as you can see, we can achieve significant performance improvements on image-heavy websites by using the ImageEngine image CDN, despite inherent performance issues using a CMS. This will translate to happier users, better search engine rankings, and an overall more successful website.

The best part is that ImageEngine stays true to the key principles of WordPress. You don’t have to worry about any of the nuts and bolts on the inside. And, ImageEngine will automatically adjust automation strategies as needed, future-proofing you against having to occasionally rework images for optimization.

Source

The post Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

This week, in a move like something from a particularly eventful episode of The Office, popular project management app company Basecamp banned political and societal discussion in the company’s internal communications.

In a post that has been revised for “clarification,” the company’s co-founder Jason Fried listed six rules for employees: No societal or political discussions at work; No more ‘paternalistic’ benefits; No more committees; No more lingering on past decisions; No more 360 reviews; No forgetting what we do here.

A follow-up post from Heinemeier Hansson notes that Basecamp will still permit discussion of issues deemed central to its business like anti-trust and privacy; certain civil liberties are to be championed, while others, like racism and climate change, are not.

On the surface, it seems reasonable, Fried and co-founder David Heinemeier Hansson would like you to believe that it is. After all, people are paid to work, not soapbox, right?

So why, if they’re the ones being protected, are Basecamp’s employees angry about the move?

It turns out, multiple sources from inside Basecamp are reporting that the ‘political’ and ‘societal’ issues referred to in Fried’s public memo were, in fact, frank and open conversations about Basecamp itself.

As reported by The Verge, way back in 2009, a list of ‘funny’ customer names began circulating at the company — hardly respectful, potentially racist, and certainly inappropriate. The misalignment between co-founders and staff occurred when staff members attempted to hold discrete conversations about this and numerous other diversity and inclusivity failings at the company. Fried’s move appears to be a direct attempt to halt criticism of the status quo at Basecamp.

Basecamp itself is a highly political organization: The co-founders have written several books advocating certain societal change; they even provided a campaign headquarters and substantial donation for a candidate for Chicago mayor. Both co-founders are highly active on social media, using their business positions to elevate their personal views.

The truth is that the solo entrepreneur is an almost mythical beast. Successful startups require contributions from a range of skills and experience beyond any one individual. Jason Fried may be the frontman, strutting up and down the stage in spandex pants, with David Heinemeier Hansson playing lead guitar with his teeth, but behind them, there’s a drummer keeping time, and behind them all, there’s a crew of roadies without whom none of the equipment will arrive, let alone sound good.

Basecamp’s founders argue that the company has a mission, and that mission is to create apps that streamline the workplace. But how can you develop a product that is inclusive if staff cannot discuss what inclusive means? The answer is, you can’t.

Discussing racial bias in advertising or the impact of company wastage, climate change, or gender pay gaps in HR meetings are all political and societal and lead to a healthier, more united company.

As designers, we often say that you cannot not communicate; every decision is a design decision; there is no such thing as “adesign.” Likewise, choosing to be apolitical is itself a political choice. The only way it is feasible to run a company like this is to treat employees like robots (in the word’s original sense).

If employees feel the need to discuss exclusionary policies in the workplace, do the company founders, who benefit from those policies (or they would not be in place), have a moral or legal right to restrict those discussions?

Although it is the first point in Fried’s list that has drawn most ire, it is the fourth item on the list that is most telling: “No more lingering or dwelling on past decisions.” Like a parent answering, “Because I said so,” Fried’s attitude to his staff is laid bare in one statement.

It turns out two wealthy white men would rather their employees not try to change the world or even their workplace.

When Coinbase announced a similar move last year, it lost 5% of its staff. If Basecamp suffered the same loss, it would amount to three people. Hardly a disaster. The question for the founders — who, judging by the number of follow-ups and clarifications they’ve published, are aware the ice they’re on is perilously thin — is whether this kind of controversy creates irreparable reputational damage.

 

Featured image via Pexels.

Source

The post Poll: Is Basecamp Right To Shutdown Politics At Work? first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot