This week, we take a look at the security issues in cheap video doorbells and security cameras, as well as tutorials and webinars on protecting APIs running in Kubernetes, JSON web tokens (JWT), and web and API authentication and authorization.
Oh, and we also have a link to DZone community awards where you can vote for this newsletter!
One of the few bright spots in 2020 has been the creativity companies and individuals alike have exhibited in dealing with what, at times, seemed to be overwhelming problems.
The world of web design was no different. Designers and agencies had to adapt and implement new color schemes or design new shopping experiences, which made some of the previous design trends not fit for the current design problems.
We’ll take a look at these newest design trends and the rationale behind them. As we do so, we’ll also take a look at some of BeTheme’s 600+ pre-built sites that have already put them to good use.
In years past, bolder color schemes were one of the hallmarks of web design trends. Their purpose was to quickly engage a visitor and prompt him or her to respond emotionally.
Given all the drama and turmoil we were subjected to through most of 2020, we’ve come to welcome the use of toned-down colors in marketing instead of the bolder, brasher, and more “in-your-face” color schemes.
Bellroy’s website puts toned-down colors to good use. This company’s product line of wallets, bags, and the like, are designed to keep people’s belongings organized, safe, and secure. A wild color scheme simply wouldn’t be fitting.
How, then, are brightly-colored products dealt with? Thanks to judicious uses of white space and background photos, this website still emphasizes a toned-down color palette.
The BeSpa pre-built website is another example of a color scheme that almost immediately puts the mind at ease.
Calm and soothing? Yes.
Boring? Definitely not.
Comfort and security are the emotional drivers in this example.
People confined to their homes because of Covid-based restrictions spent many more hours looking at their screens in 2020. Online programming began to take on the appearance of a reality show that blurred the boundaries between the real and the digital.
Whereas web designers tended in the past to rely on either photos or illustrations in their designs, these same designers have started to integrate these blurring effects into their designs, with results that range from amusing and quirky to highly informative.
Check out this example from fashion designer Constance Burke:
It’s not every day you see real models wearing hand-drawn fashion sketches. But it’s just one example of how the physical can be blended with the digital.
The BeSki pre-built site does the same blending of the two, but in a totally different way:
The sections’ designs switch from predominantly physical to largely digital and back again, an excellent approach that provides a maximum amount of useful information.
It’s also worth noting how snowbanks are effectively used to seamlessly transition from one section to the next.
More people spending more time at home has created a surge in online shopping. As a result, many online store owners are now feeling the effects of increased competition.
Consumers look for brands they believe they can trust. At the same time, they want their online shopping experiences to be as quick and painless as possible. They look for (and expect) quick and effective product search capabilities, helpful and effective product displays, one-page product descriptions, and the like.
Walgreen’s product page design is especially well-suited for 2021 ecommerce shoppers:
Everything shoppers usually need to know is presented above-the-fold. They can easily proceed to the next step or scroll down for reviews or additional product specifications.
BePestControl’s pre-built website uses a similar product design approach:
In this example, the main selling points are up-front and are kept short and sweet. The shopper can either hit the ‘Add to Cart’ button or look below the button for additional information.
In both examples, a visitor doesn’t have to mull over what step to take next since one of the design objectives is to make the shopping experience as easy and as satisfying as possible.
Once upon a time, video content was “the thing” to incorporate in a website. Hero background videos proved to be particularly engaging, and “how-to” videos presented much more useful information than illustrations or blocks of text could.
On the other hand, Auto-play videos, those that started on their own, all too often had a tendency to irritate rather than inform, especially when their content didn’t address a visitor’s immediate concern.
Thanks to Zoom and similar video platforms that came into widespread use in 2020 and to website designs that include video “Play” buttons, users have become much more comfortable with the medium. As an example, Shoppers have been given total control over if or when they want to view a given video.
This is the design approach Payoneer has taken:
The white “Pay” button is impossible to miss, and while it is designed to encourage a visitor to watch a testimonial, doing so is completely optional.
The BeOptics pre-built website cleverly slips in a video play option as well:
In this example, when visitors hover over the “See More” button, it lets them know that they have the option to watch the video if they want to learn more.
There are various ways in which products are organized or showcased in brick and mortar businesses to instill trust. Helpful and friendly staff also contribute to instilling trust.
Some of these trust-builders are easily incorporated into eCommerce designs. Others, though more difficult to fit in, can usually be satisfactorily addressed.
Digital trust builders can include.
Put, trust-building content will beat hard-sell techniques every time, especially if you would like your customer base to include referred and repeat customers.
Omaze, for example, gives people entries for prizes based on their donations while at the same time highlighting the good things it and its donors have brought about.
To help build trust, the site devotes space to highlighting publications that have featured Omaze and the work it has done and is doing.
Plus, it puts data visualization and non-profit testimonials into play to give visitors an added insight into what is going on behind the scenes:
As you can see, it doesn’t have to be difficult to incorporate genuine trust-building content into your website designs.
BePortfolio is a great example of how you might go about doing this for a portfolio site, whether it’s your own or a site for a client:
The home page alone has plenty of space for including trust-building content:
And it can only get better as a visitor moves through the site, but only if you’ve chosen to make that happen.
We’re not suggesting that you throw the baby out with the bathwater, but some trends will need to be discarded to enable you to adjust to a new normal. Other 2020 design trends, like minimalism and headline topography, are likely to remain popular for years to come.
New trends that incorporate calming color palettes, image blending, more efficient eCommerce UX designs, user-controlled video, and trust-building elements should give your customers the feeling of comfort and security they will be seeking in 2021.
If you want to implement some or all of these new trends in your 2021 website designs, BeTheme’s 600+ pre-built sites make doing so an easy task.
[– This is a sponsored post on behalf of BeTheme –]
The post 5 Web Design Trends and Ideas for 2021 first appeared on Webdesigner Depot.
The best way to protect your Java code from avoidable bugs is to use static code analysis tools that can help you find and fix problematic code before it reaches production. Let’s look at some popular static code analysis tools that can be used to test code from a number of different angles.
DeepSource delivers what is probably the best static code analysis you can find for Java. The DeepSource Java analyzer detects 190+ code quality issues, including performance bugs, security risks, bug risks, and anti-patterns. Currently, It supports Gradle Java projects, and in the future, DeepSource will add support for Maven and Android too. DeepSource is also working on bringing Autofix support to the Java analyzer, which will let developers fix issues without writing a single code line.
It’s hard to believe we are more than a month into 2021 already. But that means more trends to dive into this year, right?
So far, the biggest trend of 2021 in website design is an overall lack of people in imagery. It’s not that surprising with a worldwide pandemic happening, but it can mean that designers are branching out in other ways to enhance visual interest in their designs. Here’s what’s trending in design this month.
An interesting way to create visual interest can be to mix up the location, size, or placement of the main navigation menu.
While it can be hard to think about not using a top navigation element or a corner placement for a hamburger menu or icon, it is a solid option depending on the number of menu items and surrounding content.
And there are so many options when you start to think about it. Each draws the eye to different locations on the screen because it is unexpected and different.
Tilda uses a navigation menu anchored to the right side of the screen. But as you move through the almost file folder-style tabs, the flip to the right side of the screen. It has an authentic feel that’s interesting without being overwhelming to the user.
Cmentarz Łyczakowski also has a navigation element on the screen’s right side, but it is a closed, red frame with only a hamburger icon. It’s a rather unusual use of space for a navigation element, but it pulls together with the overlapping video box. Clicking the hamburger navigation pulls up a full-screen menu from the bottom (also a slightly different approach) with oversized clickable elements to move throughout the website.
Global Sense shifts the focus from top page navigation to the bottom of the home page. What makes it especially nice is that the navigation bar floats to the top and sticks on scroll. This ensures that while the homepage has a different look and feel, users don’t get lost without navigation as they move through the design.
Website designers use signature-style marks – from logos to headlines – to add a more personal touch to their website projects. And the result is a collection of stunning scripts and novelty typefaces.
So how can you replicate this trend?
You don’t have to digitize your actual signature. (That’s probably not the best idea from a security perspective.) But you can find a font that evokes the same feeling as your own handwriting or contract someone to create an experimental typeface for you.
The portfolio of “Zeus” has a beautiful handwriting style element layered over a dark geo-background. (Can you see the outline of the J and O from the signature there?) The signature-style mark works so well because everything is simple and understated, but with depth and dimension elements.
Another portfolio site, this one for Marco Rezende, uses a signature mark as the site logo. It’s an interesting divot that gives just a little more panache and flair to the overall design scheme to feel weighty and professional. Also, note that the designer used a mostly dark background with a white (light) mark. That’s also quite a common visual theme with this website design trend.
On the other end of the spectrum of this trend is Airport Restaurant. This isn’t a personal site, but the signature-style mark on the homepage gives it a more personal feel. It is almost reminiscent of signing the check after you eat. The additional use of color and size give this treatment a visual boost that helps propel the design forward.
Using different types of shapes to create a visual theme has been popular for a few years. Most everyone probably has experimented with some geometric pattern or background by now.
Shapes are taking on a more fluid feel now, and much of that is due to adding hints of animation to shapes and backgrounds to create more liquid looks or harmonic flow.
This trend can work for bigger visual elements such as image frames or the overall homepage art element or smaller patterns or layering effects. The overall goal with fluid shapes is to create something smooth and almost seamless so that users aren’t focused on it but delighted by it.
Each of the three examples below takes a different approach to this website design trend.
Eder Anaya has a rotating rectangle with a fluid animation inside. The overall shape itself is also animated and changes from a rectangle to a trapezoid-type shape to a flat plane.
Wave Lab might have one of the coolest fluid shape animations out there. With images inside the shape, plus a colored outline, plus a subtle bounce, you’d think this is too much for a single element. But it works thanks to plenty of white space and a generally minimalistic aesthetic otherwise. The cleverest part is that one of the shapes is the “W” from the brand logo.
The Bulleit Group also uses fluid shapes but sans-animation. Animated elements are surrounding the shapes but not the shapes themselves. The design’s overall simplicity is intriguing, and the shapes create interest in a place where it might have been difficult otherwise. It’s also nice that they use this shape theme throughout the design and not just on the home screen.
How are you working with fewer images of people? Or is it something you are ignoring altogether with your website projects? Make sure to share some of the ways you are designing this year with me on Twitter, @carriecousins.
And keep those trends coming! It’s so much fun to explore new design elements.
The post 3 Essential Design Trends, February 2021 first appeared on Webdesigner Depot.
Cloud computing has come a long, long way from the early days of mainframe timesharing technology and virtualization. Over the past decade alone, we’ve seen cloud computing experience tremendous growth, providing ubiquitous solutions for both consumers and enterprises. This trend is expected to continue with the rise of cloud-based services for machine learning, artificial intelligence, and edge computing.
However, the transformation to cloud computing remains a very challenging prospect for many enterprises. Enterprises need to consider factors such as cost, security, legacy and on-premise technologies, and the value of using cloud-native vs cloud-agnostic services.
Nowadays, most medical providers across the globe tend to implement cloud-based architecture for their medical services. And it’s not surprising, especially considering today’s pandemic reality; medical software is a must. However, to build a highly secure solution to deliver medical services, you must abide by the US 1996 law, namely the HIPAA Security Rule. This legislation represents a set of required and adequate protections for managing electronic confidential patient information and avoiding its disclosure without prior patient’s knowledge and even consent.
So, if you want to develop a medical solution and make your healthcare services cloud-based, you will have to apply the latest technologies for maintaining data compliance. To build cloud-based apps according to the Privacy Rule, most healthcare providers apply Amazon Web Services (AWS) due to its increased agility, security, and innovation potential.
It’s never been easier to set up an ecommerce store and start selling. There are a dizzying array of ecommerce solutions available in 2021, and most are feature-rich and competitively priced.
Ecommerce sites are notoriously difficult to migrate from platform to platform, so more often than not, you’ll be committed to your chosen solution for years. The key when choosing an ecommerce solution to maximize your return on investment, is to consider not just what your business needs today but what it will need tomorrow.
There are two basic approaches to ecommerce. The first is a dedicated platform that handles everything. The second is a plugin that adds ecommerce features to an existing CMS. Both approaches have benefits and drawbacks.
Shopify is a well-known, well-liked, and reliable dedicated ecommerce platform. As a system for getting a business off the ground and selling fast, it is peerless.
Shopify jealously guards developer access, with templates and plugins pre-vetted. Unlike some marketplaces, you can be confident that there are no hidden surprises in your shiny new store.
And because Shopify has passed the point of market saturation, it’s worthwhile for big players to provide their own plugins; credit services like Klarna and shipping companies like netParcel can be integrated with a few clicks.
The admin panel is a touch complex, as Shopify is designed to allow a single account to be linked to multiple stores. But once you’re set up and familiar with where to find everything, it’s a slick, streamlined business management system.
Whenever a client says, “we want to start selling online.” My first thought is, “Shopify.” And for 90% of clients, it’s the right choice.
And that’s where this roundup should end…except there’s still that 10% because Shopify isn’t perfect.
For a start, an all-in-one platform doesn’t suit everyone. If you already have a website you’re happy with, you’ll either need to migrate or lease a dedicated domain for your store.
Shopify’s platform is very secure, which inspires confidence in buyers, but the price of that security is a lack of flexibility in the design.
Then there’s the infamous variant limit. Shopify allows 100 variants on a product. Almost every client runs into that wall at some point. Let’s say you’re selling a T-shirt: male and female cuts are two variants; now add long or short sleeves, that’s four variants; now add seven sizes from XXS to XXL, that’s 28 variants; if you have more than three color options, you’ve passed the 100 variant limit. There are plugins that will allow you to side-step this issue, but they’re a messy hack that hampers UX for both customer and business.
Shopify should certainly be on every new store owner’s shortlist, but there are other options.
If you’re one of the millions of businesses with a pre-existing site built on WordPress, then adapting it with a plugin is the fastest way to get up and running with ecommerce.
WooCommerce is regularly recommended as “Best for WordPress Users,” which is a back-handed compliment that belies the fact that WooCommerce reportedly powers 30% of all ecommerce stores. If running with the crowd appeals to you — and if you’re using WordPress, it presumably does — then you’re in the right place.
WordPress has a gargantuan plugin range. As such, there are other plugins that will allow you to sell through a WordPress site. The principle benefit of WooCommerce is that as the largest provider, most other plugins and themes are thoroughly tested with it for compatibility issues; most professional WordPress add-ons will tell you if they’re compatible with WooCommerce. If your business is benefitting from leveraging WordPress’ unrivaled ecosystem, it can continue to do so with WooCommerce.
The downside to WooCommerce is that you’re working in the same dashboard as the CMS that runs your content. That can quickly become unmanageable.
WooCommerce also struggles as inventories grow — every product added will slow things a little — it’s ideally suited to small stores selling a few items for supplementary income.
BigCommerce is an ecommerce platform similar to Shopify, but whereas Shopify is geared towards newer stores, BigCommerce caters to established businesses with larger turnovers.
The same pros and cons of a dedicated ecommerce solution that applied to Shopify also apply to BigCommerce. One of the considerable downsides is that you have less control over your front-end code. This means that you’re swapping short-term convenience for long-term performance. Templates, themes, and plugins — regardless of the platform they’re tied to — typically take 18 months to catch up with best practices, leaving you trailing behind competitors.
BigCommerce addresses this shortcoming with something Shopify does not: a headless option. A headless ecommerce platform is effectively a dedicated API for your own store.
Enabling a headless approach means that BigCommerce can be integrated anywhere, on any technology stack you prefer. And yes, that includes WordPress. What’s more, being headless means you can easily migrate your frontend without rebuilding your backend.
BigCommerce also provides BigCommerce Essentials, which is aimed at entry-level stores. It’s a good way to get your feet wet, but it’s not BigCommerce’s real strength.
If you have the anticipated turnover to justify BigCommerce, it’s a flexible and robust choice that you won’t have to reconsider for years.
If you have a development team at your disposal and a healthy budget to throw at your new store, then Magento could be the option for you.
You can do almost anything with a Magento store; it excels at custom solutions.
Magento’s main offering is its enterprise-level solution. You’ll have to approach a sales rep for a quote — yep, if you have to ask the price, you probably can’t afford it. Magento has the track-record and the client list to appeal to boards of directors for whom a 15-strong development team is a footnote in their budget.
That’s not to say that a Magento store has to be expensive; Magento even offers a free open source option. But if you’re not heavily investing in a custom solution, you’re not leveraging the platform’s key strengths.
If you’re in the market for a custom solution, and you don’t have the budget for something like Magento, then Craft Commerce is ideally positioned.
Like WooCommerce for WordPress, Craft Commerce is a plugin for Craft CMS that transforms it into an ecommerce store.
Unlike WordPress, Craft CMS doesn’t have a theme feature. Every Craft Commerce store is custom built using a simple templating language called Twig. The main benefit of the approach is that bespoke solutions are fast and relatively cheap to produce, with none of the code bloat of platforms or WordPress.
Because your site is custom coded, you have complete control over your frontend, allowing you to iterate UX and SEO.
You will need a Craft developer to set up Craft Commerce because the learning curve is steeper than a CMS like WordPress. However, once you’re setup, Craft sites are among the simplest to own and manage.
Ecommerce solutions market themselves on different strengths, but the nature of design patterns means they almost all follow a similar customer journey: search for an item, add the item to a cart, review the cart, checkout. Like any business, they want to maximize their market share, which means delivering a solution that caters to the most common business models.
Occasionally a project happens along that doesn’t fit that business model. Perhaps you’re selling a product that’s uniquely priced for each customer. Perhaps you’re selling by auction. Perhaps you don’t want to bill the customer until a certain point in the future.
Whatever your reason, the greatest customization level — breaking out of the standard ecommerce journey — can be managed with direct integration with Stripe.
Stripe is a powerful payment processor that handles the actual financial transaction for numerous ecommerce solutions. Developers love Stripe; its API is excellent, it’s documentation is a joy, it’s a powerful system rendered usable by relentless iteration.
However, this approach is not for the faint-hearted. This is a completely custom build. Nothing is provided except for the financial transaction itself. Every aspect of your site will need to be built from scratch, which means hefty development costs before seeing any return on investment.
The best ecommerce solution is defined by three factors: the size of your store, the anticipated growth, and the degree of custom design and features you want or need.
Shopify is the choice of most successful small stores because you can be selling inside a day. For businesses with an existing presence and a smaller turnover, those on WordPress will be happy with WooCommerce. For larger stores planning long-term growth, BigCommerce’s headless option is ideal. Craft Commerce is a solid performer that marries low costs with flexibility for businesses that need a custom approach.
Featured image via Unsplash.
The post 6 Best Ecommerce Solutions for 2021 first appeared on Webdesigner Depot.
Here at ShiftLeft, we are gearing up for Shifting Left: ’21, a one-day application security conference for developers and security practitioners on Jan 28, 2021. I’ve been a huge fan of security conferences ever since I attended my first security conference, NorthSec in Montreal. This time, I am excited to be on the organizer’s side and present this conference to you.
Shifting Left: ‘21 is entirely online and free to register here. Now let’s get into it! Here are the sessions that I am most excited about and that you should attend if you like machine learning, developing secure applications, or hacking into applications.
Imagine a room with a wall of screens displaying closed-circuit video feeds from dozens of cameras, like a security office in a film. In the movies, there is often a guard responsible for keeping an eye on the screens that inevitably falls asleep, allowing something bad to happen. Although intuition and other distinctly “people skills” are useful in security, most would agree that the human attention span isn’t well-suited for always-on, 24/7 video monitoring. Of course, footage can always be reviewed after something happens, but it’s easy to see the security value of detecting something out of the ordinary as it unfolds.
Now imagine a video artificial intelligence (AI) application capable of processing thousands of camera feeds in real-time. The AI constantly compares new footage to historical footage, then classifies anomalous events by their threat level. Humans are still involved, both to manage the system as well as review and respond to potential threats, but AI takes over where we fall short. This isn’t a hypothetical situation: from smart police drones to intelligent doorbells sold by Amazon and Google, AI-powered surveillance solutions are becoming increasingly sophisticated, affordable, and ubiquitous.
When creating a website, it’s vital to remember that not only does it need to work and look great on the device you are creating it on, but on all the other devices, it might be used on too.
Mobile and tablet optimization is important not only for the user journey but from an SEO point of view too, and badly created mobile sites just don’t cut it anymore.
With more and more devices entering the market, you need to check any website you create is compatible across the board. One bad experience and users are likely to leave and not come back again, which can be catastrophic for a business, particularly if it is just starting out.
It’s vital to check how a site looks and behaves when browsed differently from how you would use it. A common mistake is to assume users only browse websites on mobile devices in portrait mode; they don’t; landscape browsing is common, especially if the user is used to watching video.
Here are some of our top tools for testing websites on devices without the need for an entire device library:
WhatIsMyScreenResolution offers a great little tool to test how your site will look on different devices easily, and it costs absolutely nothing. You put the URL and choose between desktop, mobile, tablet, and television and then the orientation. Each device can also be broken down into different sizes and resolutions (or you can enter your own), making it easier than ever to test what a site will look like on different devices.
Responsinator is another great tool to test how a site looks on other devices without dipping into your wallet. Put your URL in the top bar, and it will instantly show you what it looks like on generic devices. This is a great, easy to use tool, and you can click through any links on your site to check the usability of multiple pages. This site is free, but if you want to “create your own” template, you need to sign up.
Google Dev Tools is one of the most commonly used free tools. Add it to Chrome, and you can see how your site looks in a multitude of different screen sizes and resolutions. You can simulate touch inputs, device orientation, and geolocation to test how they work. It’s great to easily spot problems using their remote debugging tool to view, change, debug and profile a page’s code directly from your laptop or computer while viewing it on your mobile device.
Browser Stack allows you to test your site on over 2,000 real devices and browsers, enabling you to see in real-time how your site looks. It is no hassle to set up, and it can be seamlessly integrated into your setup. As it tests on real browsers on real machines, you know the results are more reliable and accurate. It also enables you to debug in real-time using their pre-installed developer tools for ease of editing. The tests are all run securely on tamper-proof physical devices and are wiped clean of all data after each session, so you don’t need to worry about security being compromised.
TestComplete Mobile allows you to create and run UI tests across real mobile devices, virtual machines, and emulators. You can test both mobile device layouts and apps with script-free record and replay actions. This can help you to edit and fix any potential issues that may arise during the tests. Due to them being conducted on real devices, you know it is less likely to have errors in the system than a simulated device. This is free for 30 days then can get pricier, so make sure you take advantage of the trial and try the service before committing to it.
Sizzy is a great tool for checking sites, and it has a host of features to assist you. You can rotate the screen between portrait and landscape, filter by OS and device type, switch themes, and take screenshots. These little things mean it’s a super easy to use and convenient tool. It claims to simulate each device’s viewport and user agent, meaning the results are the same as what you would actually see on that phone/ tablet, etc. It can’t simulate different browser rendering engines however, so there’s a chance there might be some minor differences compared to the actual thing. Sizzy offers a free trial or has different price packages starting at $5 per month.
Featured image via Unsplash
The post 6 Tools for Rapid Cross-Device Website Testing first appeared on Webdesigner Depot.
