Create Super Cool Refractive Art in Cinema4D

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/uEPCV5s0ufw/create-super-cool-refractive-art-cinema4d

Create Super Cool Refractive Art in Cinema4D
Create Super Cool Refractive Art in Cinema4D

abduzeedoApr 22, 2020

Jonathan Quintin, founder and Creative Director at StudioJQ has an incredible class on Skillshare. In his class you will learn how to use Cinema4D & Octane to create super cool abstract graphics to enable you to use for motion and video or poster art. I found out about his class after seeing a beautiful design on Dribbble. I love the internet. My weekend now is going to be filled with new things to learn.

3D & Animation Class

Here are some examples of effects you will learn on this amazing class.

For more information make sure to follow Jonathan on

Instagram
Behance
Skillshare


Who Created Cinema 4D S22 3D Splash Screens

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/ZfBCfsSp5es/who-created-cinema-4d-s22-3d-splash-screens

Who Created Cinema 4D S22 3D Splash Screens
Who Created Cinema 4D S22 Splash Screens

abduzeedoApr 23, 2020

The incredibly talented Nidia Dias was approached by Maxon to create this year’s splash screen for their S22 release. She started by creating one 3D look/style that was further explored to different variations for different versions of the software. Besides the main release, Cinema 4D’s other versions are: Lite Version, Cinebench, Teamrender Client and Teamrender Server.

The first image for some reason reminds me of a wave breaking. Not just any wave but a hollow one. It feels so natural despite the shiny look. It is a reminder that I need to learn some Cinema 4D.

3D


Unlock Your Team’s Potential With Teamstack

Original Source: https://www.webdesignerdepot.com/2020/04/unlock-your-teams-potential-with-teamstack/

Teamstack is a password manager for your whole team. Running in the cloud it allows you to manage your tools and resources, and seamlessly scale your teams’ access, from a single, easy-to-use control panel.

Teamstack is powerful, and secure with multi-factor authentication, single sign-in, SAML and form-based authentication. It works with desktop and mobile apps, and in the browser.

Teamstack means easy access for your team, zero access for everyone else.

Why Use Teamstack

All of your data is locked away behind log-ins, in licensed apps and secure databases. Those tools are business assets, and when it comes to mission-critical apps like project management tools, CRMs, or messaging channels, your livelihood depends on them staying secure.

Your data, especially your sensitive data, is the lifeblood of your team. Without the data you hold — be that a codebase, a series of strategy decisions, or even contact details for your clients — your team will struggle to function.

Teamstack not only secures your data, but makes accessing it a breeze for anyone who should have access; making team management a whole lot simpler.

Agile Teams Use Teamstack

Whether you’re onboarding new staff, or managing a stable of freelancers you’ll need a solution to the endless spreadsheets with usernames, passwords, and license keys.

Teamstack is a single-source of truth for your team’s secure log-ins. It works by channelling every log-in through its API. When a team member signs into their Teamstack dashboard they’re granted access to the apps and services that you’ve allocated; a single log-in gives them access to everything they need to do their job, improving security and efficiency.

Teamstack’s particularly useful for project managers working with freelancers

Teamstack’s Cloud Directory is perfect for busy managers; it allows you to manage your team’s access to all of your company’s authentication in a simple-to-use web interface. It’s a huge time-saver for everyone. Especially if your team is forced to work remotely for any reason. And Teamstack’s particularly useful for project managers working with freelancers. Onboarding can take hours, even a whole day, which is less than desirable if you’re working short-term with a freelancer who bills hourly. With its one-click provisioning and group permissions, you can grant access to team resources in seconds.

Just as Teamstack enables simple onboarding, it also enables simple offboarding. When a member of your team leaves, simply cancel their access and they’re locked out across the board.

You can even break your team down into different groups, meaning that full clearance can be granted to execs without exposing your sensitive data to your whole staff, and that different teams can have dedicated policies and access.

Whatever kind of team you’re managing Teamstack gives you fast control over your team’s access.

Teamstack Integrates with Hundreds of Applications

If you’re managing a design studio, tools will be an even more essential part of your process than for the average business.

Teamstack works with over 500 applications, and these are tools you’re probably already using: Adobe Creative Cloud, MailChimp, LinkedIn, Asana, G Suite, Slack, Dropbox, AWS, Github, and hundreds more are all integrated right out of the box.

Teamstack can even integrate with your own custom-built applications, giving everyone on your team access to your own software and systems, with none of the overheads involved in maintaining case-by-case security protocols.

Keeping Data Secure with Teamstack

In many territories, securing your business data — which inevitably includes customer data — is not just good practice, it’s a legal requirement with fines for data loss running into the $millions.

your applications are secure, even when your team is working remotely

Most teams can’t afford to deploy enterprise-level security, but with Teamstack you can rest assured that your applications are secure, even when your team is working remotely.

Using Teamstack’s control panel you can vary authentication requirements across your team. You can set up multi-factor authentication like WebAuthn, or Google Auth, restrict access to context-specific factors (like requiring log-ins to be from your office IP address), and setup IP blacklists to block any threats. All of this means that low-risk groups like your marketing team can log-in quickly, with high-risk groups like your accounts team having additional security in place.

Should you run into trouble, Teamstack maintains a complete audit trail so you can check every log-in attempt across all of your tools. If something looks off, block the user instantly to keep your data secure.

Try Teamstack for Free

WebdesignerDepot readers can get Teamstack’s basic plan, including all add-ons, entirely free of charge for six months. Take take advantage of this generous offer, signup using the coupon code “webdesignerdepot”.

If you find Teamstack as indispensable as we think you will, plans with generous allowances start from just $3 per user per month.

Head over to www.teamstack.com today to claim your free account.

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;}

How To Disable RSS Feeds In WordPress

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

By default, there is no option to disable RSS feeds in WordPress, because RSS feeds allow users to subscribe to your blog posts. However, there are certain situations where you may want to turn off RSS feeds. There are a few plugins that you can use to do this, but whenever possible we always try to use as few plugins as possible and use our own code.

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!

DOWNLOAD NOW

 

By placing the following code in your theme’s functions.php file (or a site-specific plugin) when someone tries to go to the RSS feed link (yoursite.com/feed/) they will receive a message that no feed is available.

function 1wd_disable_feed() {
wp_die( __(‘No feed available,please visit our <a href="’. get_bloginfo(‘url’) .’">homepage</a>!’) );
}

add_action(‘do_feed’, ‘1wd_disable_feed’, 1);
add_action(‘do_feed_rdf’, ‘1wd_disable_feed’, 1);
add_action(‘do_feed_rss’, ‘1wd_disable_feed’, 1);
add_action(‘do_feed_rss2’, ‘1wd_disable_feed’, 1);
add_action(‘do_feed_atom’, ‘1wd_disable_feed’, 1);
add_action(‘do_feed_rss2_comments’, ‘1wd_disable_feed’, 1);
add_action(‘do_feed_atom_comments’, ‘1wd_disable_feed’, 1);

Now you know how to disable RSS feeds in WordPress. Be sure to check out our other WordPress tutorials for more tips!


How To Harden WordPress For Maximum Security

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

Beyond producing regular content for your website, you also must be mindful of regular maintenance. This includes paying attention to your site’s security. And if you have a WordPress site, this means undergoing a variety of hardening tasks.

Today, we’ll be discussing how to harden WordPress for maximum security, including the steps you can take from the outset as well as what you must continue to do to ensure your site’s ongoing security.

WordPress Security

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!

DOWNLOAD NOW

Thoroughly Vet Themes and Plugins

Before you install anything onto your WordPress site, you need to do your research. This means, examining which plugins and themes you might want to use on your site and looking into them. Read reviews. Take a look at their support channels or forums. Visit the developer’s website. Google the developer to find out more about them and to see if anyone has complained.

While a star-rating can give you a good first impression of a plugin or theme, you must dig deeper than a cursory look. Installing a shoddily put together theme or plugin can result in disaster for the overall health of your website.

Minimize Number of Installed Themes and Plugins

On a similar note as the above, you also need to make sure every plugin or theme installed on your site is carrying its weight. If you decide to switch themes, don’t leave old themes installed for months and months. If you want to try out a bunch of similar plugins, don’t leave all of them installed once you’ve settled on your pick.

Extra themes and plugins provide unnecessary access points to your site. Each could be its own security risk if they’re no longer updated or stop being supported. And you’re less likely to realize when this is the case if you’re not actively using them. Not to mention, having a bunch of extra plugins and themes installed can actually slow your site down. Get rid of the bulk, immediately.

Keep Themes and Plugins Updated

Another thing you need to do is update your plugins and themes regularly. While there are arguments for and against automatic updates, one thing is for certain: updating plugins and themes soon after updates are released is imperative for maintaining your site’s security and is an essential hardening step. Outdated themes and plugins are entry points to your site for brute force attacks and malware. So, when you see a notification at the top of the WordPress dashboard (usually an orange-backed number), click it, check than the update is compatible with your WordPress version, and if it is update immediately.

Pick a High-Quality Security Plugin

While we’re talking about plugins, it’s also important to note that the security plugin you select will have a great impact on how you harden WordPress. After all, many of the top security plugins automate a lot of these efforts and encompass a wide swathe of features. You’ll only need to select one security plugin as they typically have comparable feature sets. But a few you might wish to consider include:

Wordfence
Sucuri Security
Defender
All-in-One WordPress Security and Firewall
iThemes Security
Bulletproof Security

There are more plugins than these available, but we’ve picked out a few top choices to mull over.

Take Care in Password Selection and Use 2FA

One of the most tried and true tips for improving site security is as simple as selecting a good password. While it’s tempting to pick a password that you can easily remember it’s much more important to select one that’s quite complicated. Using a password generator is your best bet here as it’ll ensure your password is unique and maximizes security.

Another thing you need to enact on your site immediately is two-factor authentication. 2FA makes logging into your site more difficult, which means it’s an extra layer of security and insurance against brute force attacks. There are several plugins that make this possible, one of the most popular being Google Authenticator.

Perform Regular Backups

Another strong line of defense in protecting your WordPress site is to perform regular backups. This ensures that if something goes wrong, you can revert back to an earlier version of your site without losing all of your content. This is your fail safe. If even after all of your WordPress hardening efforts your site is hacked, you will be able to secure the breach and revert your site back to an earlier version.

Limit Login Attempts/Prevent Brute Force Attacks

Along with creating a strong password and implementing 2FA, you also need to limit login attempts. This can greatly help reduce the instance of brute force attacks. Since hackers use automated software to repeatedly try to login to websites, you can eliminate the risk of their efforts by limiting the number of times someone can try to login. This is achievable through the use of a plugin like the aptly named Limit Login Attempts Reloaded. This takes the string out of potential brute force attacks.

Disable the File Editor

Reducing backend access to your website is another way to harden WordPress. While you can do this manually, it’s best to use a plugin to achieve this end. Some larger WordPress security plugins include the ability to just check a box and disable the file editor. This is a preferable way to deal with the issue, especially if you’ve opted for an “all-in-one” style security option.

Change Security Keys

Every time you login to your website, the credentials you used to do so are saved in an encrypted format. This format is called security keys and salts. Unfortunately, this format is sometimes hackable, and if a hacker gets a hold of it, they can unencrypt your login information. The solution? Changing your site’s security keys and salts with regularity. Again, many all-encompassing security plugins include this feature.

Hide PHP Errors

Last thing we’re going to discuss here today is how to hide PHP errors. While using built-in debugging tools within PHP is smart, displaying these errors to the broader public is not. Hackers that view PHP errors can use that information to locate weaknesses in your site to exploit. Instead, hide them. To do this, you just need to set WP-DEBUG to false within the wp-config.php file in your WordPress installation. Plugins can complete this job for you as well.

Protect Your Website and Harden WordPress Now

Hopefully you now have a better understanding of how to harden WordPress to improve site security for the haul. There’s definitely more to site security than just these elements, but the ten tasks listed here are more than enough to get you started. Best of luck!

Photo by Suzy Hazelwood from StockSnap


Implementing Skeleton Screens In React

Original Source: https://www.smashingmagazine.com/2020/04/skeleton-screens-react/

Implementing Skeleton Screens In React

Implementing Skeleton Screens In React

Blessing Krofegha

2020-04-20T10:00:00+00:00
2020-04-20T16:34:50+00:00

Spinners and loaders have traditionally been the way to tell users that content is going to take a while to load. While this approach is great, it’s quickly becoming obsolete in modern development. Skeleton screens are becoming the perfect replacement for traditional loaders because they focus on progress rather than wait times, hence reducing loading-time frustration.

In this article, we won’t be going through the basics of CSS React or JavaScript syntax, so you don’t have to be an expert in either of these languages to follow along.

The difference between a loader and a skeleton screen UIThe difference between a loader and a skeleton screen UI (Large preview)

UI and UX experts teach us that, while users wait for content to load on a page, we should keep them engaged.

The idea behind using spinners to engage users before content loads is great; however, the result can be less than ideal because most users will get bored staring at a dummy animated spinner like it’s a clock. Luke Wroblewski elaborates on this.

Skeleton screens offer a better user experience by reducing loading-time frustration. By focusing on progress instead of wait times, it create the illusion for users that information will be incrementally displayed on the screen. Bill Chung in his research confirms this.

What Is a Skeleton Screen?

A skeleton screen is a version of the UI that doesn’t contain actual content; instead, it mimics the page’s layout by showing its elements in a shape similar to the actual content as it is loading and becoming available (i.e. when network latency allows).

A skeleton screen is essentially a wireframe of the page, with placeholder boxes for text and images.

What’s Unique About a Skeleton Screen?

A skeleton UI resembles the page’s actual UI, so users will understand how quickly the web or mobile app will load even before the content has shown up. Here are a couple of reasons why you might want to consider using skeleton screens in your next project:

mimicking a page’s layout is easier with a skeleton screen,
contents loads progressively (not all at once).

Skeleton screens are also referred to as:

ghost elements,
content placeholders,
content loaders.

Blockchain.com, YouTube, Facebook, Medium, and other big tech companies display skeleton screens while their content loads to boost the UX.

Blockchain.com

Blockchain.com skeleton screen UI

Blockchain.com’s partially loaded state (notice how a skeleton is used in the graph analytics) (Large preview)

Medium

Medium skeleton screen UI

Medium’s skeleton UI (Large preview)

LinkedIn

LinkedIn skeleton screen UI

LinkedIn’s home feed loading state in 2018 (Large preview)

Types of Skeleton Screens

There are different kinds of skeleton screens. The major ones are text placeholders and image (or color) placeholders.

Most developers prefer to use text placeholders as the skeleton UI on their pages because they’re easy to build, and the developer doesn’t require any details about the substance of the actual content; instead the skeleton mimics the UI.

Color placeholders are harder to build because they require details about the content.

Some popular packages make implementing skeleton screens in web apps easier. Let’s take a closer look at both of them:

React Placeholder
React Loading Skeleton

We’ll look at the pros and cons of each package, before considering which to use for our application.

React Placeholder

Pros

Placeholder components are used to create a custom skeleton UI.
Pulse animation (i.e. motion effect on an element) is supported.
It comes with a component-based API.

Cons

Skeleton components are maintained separately, so updating styles of a component possibly requires updating the skeleton component as well.
The learning curve is not linear because there are multiple components for different needs.

The following is an example of a skeleton component using the react-placeholder package:

import { TextBlock, RectShape } from ‘react-placeholder/lib/placeholders’;
import ReactPlaceholder from ‘react-placeholder’;

const GhostPlaceholder = () => (
<div className=’my-placeholder’>
<RectShape color=’gray’ style={{width: 25, height: 70}} />
<TextBlock rows={6} color=’blue’/>
</div>
);
<ReactPlaceholder ready={ready} customPlaceholder={<GhostPlaceholder />}>
<MyComponent />
</ReactPlaceholder>

Importing TextBlock and RectShape from react-placeholder/lib/placeholder and ReactPlaceholder from react-placeholder, we’ve created a functional component named GhostPlaceholder. GhostPlaceholder has a div, and inside the div we’ve used the RectShape component, which describes the dimensions of a rectangle, passes the value of any color, and defines the rectangle’s styles.

Next, we used the TextBlock component to set the values for the rows and color. The TextBlock component defines the number of rows and color of text.

We pass MyComponent as a child of the ReactPlaceholder component, which receives ready and the GhostPlaceholder component as values for its ready and customPlaceholder props.

The MyComponent will load when the skeleton screen UI is shown.

To learn more, check the documentation.

React Loading Skeleton

Pros

It is API-based, and it has one component with props for all customization.
It can be used as a separate skeleton component and also inside any component directly, so it’s flexible.
It supports theming and Pulse animation.

Cons

It’s easy to implement for a simple skeleton UI, but complicated for more complex skeletons.
Having a separate skeleton component will make it harder to maintain when the UI and styles change.

The following is an example of React Loading Skeleton:

import Skeleton, { SkeletonTheme } from “react-loading-skeleton”;

const SkeletonComponent = () => (
<SkeletonTheme color=”#202020″ highlightColor=”#444″>
<section>
<Skeleton height={50} width={50} />
</section>
</SkeletonTheme>
);

We’ve imported Skeleton and SkeletonTheme from the react-loading-skeleton library, then created a functional component that renders the SkeletonTheme component, with color and hightlightColor as properties.

The SkeletonTheme component is used for theming (for example, adding color effects to the skeleton UI).

Finally, inside the section, we define the Skeleton component, with height and width properties and their appropriate values passed in.

Building a YouTube-Like Skeleton Screen UI

Let’s create a YouTube-like skeleton screen, using React Loading Skeleton, to show how a skeleton UI works.

Set Up React

The easiest way to set up React is to use Create React App, which is “an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.”

We’ll use it to bootstrap the application that we’ll be building. From your terminal, run the command below:

npx create-react-app skeleton-screens && cd skeleton-screens

Once the installation has completed, start the React server by running npm start:

React app - Scaffold React app

React welcome page (Large preview)

Create the YouTube UI Without a Skeleton Screen

First, let’s input YouTube dummy data. Real endpoints would normally be used instead of dummy data, but in this tutorial we will use dummy data.

Create a file in your src/ folder, and name it data.js, add the following code to it.

const dummyData= [
{
section: “Recommended”,
channel: “CNN”,
items: [
{
id: “fDObf2AeAP4”,
image: “https://img.youtube.com/vi/fDObf2AeAP4/maxresdefault.jpg”,
title: “75 million Americans ordered to stay home”,
views: “1.9M views”,
published: “3 days agos”
},
{
id: “3AzIgAa0Cm8”,
image: “https://img.youtube.com/vi/3AzIgAa0Cm8/maxresdefault.jpg”,
title: “Gupta: The truth about using chloroquine to fight coronavirus pandemic”,
views: “128K views”,
published: “4 hours ago”
},
{
id: “92B37aXykYw”,
image: “https://img.youtube.com/vi/92B37aXykYw/maxresdefault.jpg”,
title: “Willie Jones STUNS Simon Cowell In Pitch Perfect Performance of ‘Your Man’!”,
views: “2.47 million views”,
published: “1 month ago”
},
{
id: “J6rVaFzOEP8”,
image: “https://img.youtube.com/vi/J6rVaFzOEP8/maxresdefault.jpg”,
title: “Guide To Becoming A Self-Taught Software Developer”,
views: “104K views”,
published: “17 days ago”
},
{
id: “Wbk8ZrfU3EM”,
image: “https://img.youtube.com/vi/Wbk8ZrfU3EM/maxresdefault.jpg”,
title: “Tom Hanks and Rita Wilson test positive for coronavirus”,
views: “600k views”,
published: “1 week ago”
},
{
id: “ikHpFgKJax8”,
image: “https://img.youtube.com/vi/ikHpFgKJax8/maxresdefault.jpg”,
title: “Faces Of Africa- The Jerry Rawlings story”,
views: “2.3 million views”,
published: “2014”
}
]
},
{
section: “Breaking News”,
channel: “CGTN America”,
items: [
{
id: “tRLDPy1A8pI”,
image: “https://img.youtube.com/vi/tRLDPy1A8pI/maxresdefault.jpg”,
title: “Is Trump blaming China for COVID-19? You decide.”,
views: “876k views”,
published: “9 days ago”
},
{
id: “2ulH1R9hlG8”,
image: “https://img.youtube.com/vi/2ulH1R9hlG8/maxresdefault.jpg”,
title: “Journalist still goes to office during pandemic, see her daily routine”,
views: “873 views”,
published: “3 hours ago”
},
{
id: “_TkfQ9MaIgU”,
image: “https://img.youtube.com/vi/_TkfQ9MaIgU/maxresdefault.jpg”,
title: “How are small businesses going to survive the economic downturn of the COVID-19 era?”,
views: “283 views”,
published: “4 day ago”
}
]
}
];
export default dummyData;

To replicate YouTube’s format, we’ve created dummy data that has an array of objects, with properties such as ID, image, title, number of views, and publication date.

Next, let’s create our YouTube UI. We will have three components:

Card
Holds the details of the video’s thumbnail, title, number of views, publication date, and channel.

CardList
Returns all cards in a row.

App
Mounts our dummyData object, loads the skeleton UI for two seconds, and returns the CardList component.

Inside your src folder, create a folder and name it components. Inside the components folder, create a Card.js file, add the following code to it:

import React from “react”;
const Card = ({ item, channel }) => {
return (
<li className=”card”>
<a
href={`https://www.youtube.com/watch?v=${item.id}`}
target=”_blank”
rel=”noopener noreferrer”
className=”card-link”
>
<img src={item.image} alt={item.title} className=”card-image” />
<img src={item.image} alt={item.title} className=”channel-image” />
<h4 className=”card-title”>{item.title}</h4>
<p className=”card-channel”>
<i>{channel}</i>
</p>
<div className=”card-metrics”>
{item.views} • {item.published}
</div>
</a>
</li>
);
};
export default Card;

We created a Card component. Inside it, we imported React from react, and we deconstructed the item and channel props so that they can be used across the Card component. Each Card item component that displays one video will show the thumbnail, number of views, publication date, and title.

CardList Component

Inside the components folder, create a CardList.js file and add the following code to it:

import React from “react”;
import Card from “./Card”;
const CardList = ({ list }) => {
return (
<ul className=”list”>
{list.items.map((item, index) => {
return <Card key={index} item={item} channel={list.channel} />;
})}
</ul>
);
};
export default CardList;

In this component, we’ve imported the Card component that we created. The card accepts the item and channel props, which we get by mapping through the list.items. We then export this component as CardList, because we’ll be making use of it in our App component.

Note: The items array that is mapped in this component is the array of objects in our dummyData.

App Component

Inside the app.js file in the src/ directory, delete the code that is there and add the following to it.

import React, { useState, useEffect } from “react”;
import “./App.css”;
import dummyData from “./data”;
import CardList from “./components/CardList”;

const App = () => {
const [videos, setVideos] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
setLoading(true);
const timer = setTimeout(() => {
setVideos(dummyData);
setLoading(false);
}, 5000);
return () => clearTimeout(timer);
}, []);
return (
<div className=”App”>
{
videos.map((list, index) => {
return (
<section key={index}>
<h2 className=”section-title”>{list.section}</h2>
<CardList list={list} />
<hr />
</section>
);
})}
</div>
);
};
export default App;

In this component, we’ve imported the useState and useEffect hooks alongside React and the other files that we’ve created and that will be needed in the App component.

Because our data is dummy data, we need to mock it up like the API data by loading the content after a two-second timeout, using the JavaScript setTimeout method.

Next, in the App component, we create a video state, and set the state to an empty array using useState.

To load our dummy data, we’ll use the useEffect hook. In our hook, we create a variable timer that holds the setTimeout() function. Inside the function, we set our video state to our dummyData object, and we ensure that the data loads after two seconds, and, lastly, we cancel the timer while unmounting.

Finally, we map through our video state and return the section element that contains the list-section and the CardList component with its list props.

Adding CSS

Until now, we’ve used a lot of classes without actual CSS. Inside the src folder, delete everything in App.css and replace it with the following code;

.App {
max-width: 960px;
margin: 0 auto;
font-size: 16px;
}
.list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
.section-title {
margin-top: 30px;
}
.card {
width: calc(33% – 10px);
margin: 20px 0;
}
.card-link {
color: inherit;
text-decoration: none;
}
.card-image {
width: 100%;
}
.channel-image {
border-radius: 100%;
padding: 0, 10px, 0, 0;
width: 40px;
height: 40px;
}
.card-title {
margin-top: 10px;
margin-bottom: 0;
}
.card-channel {
margin-top: 5px;
margin-bottom: 5px;
font-size: 14px;
}
/* Tablets */
@media (max-width: 1000px) {
.App {
max-width: 600px;
}
.card {
width: calc(50% – 22px);
}
}
/* Mobiles */
@media (max-width: 640px) {
.App {
max-width: 100%;
padding: 0 15px;
}
.card {
width: 100%;
}
}

Let’s see what our YouTube UI looks like without the skeleton screen. You can see that when the page loads, a white screen appears for two seconds, and then the data loads promptly.

YouTube-like UI without skeleton screenYouTube-Like UI without skeleton screen (Large preview)

Using React Loading Skeleton

Unlike other libraries in which you would meticulously craft a skeleton screen to match the font sizes, line heights and margins of your content, the Skeleton component is designed to be used directly in your components, in place of the content that is loading.

Let’s go over a few reasons why we’ve chosen React Loading Skeleton over others.

Theming

React Loading Skeleton supports theming. Thus, you can easily change the colors of all skeleton components by using SkeletonTheme and pass values to the color props.

Below is an example showing how it works:

import Skeleton, { SkeletonTheme } from “react-loading-skeleton”;

<SkeletonTheme color=”grey” highlightColor=”#444″>
<p>
<Skeleton height={250} width={300} count={1} />
</p>

</SkeletonTheme>
<SkeletonTheme color=”#990″ highlightColor=”#550″>
<p>
<Skeleton height={250} width={300} count={1} />
</p>

</SkeletonTheme>

Theming effect in actionTheming effect in action (Large preview)

Duration

In addition to the height, width, and color props, we can also specify a duration prop.

<Skeleton duration={2} />

The duration defaults to 1.2. This determines how long it takes to do one cycle of the skeleton animation.

To learn more, check out the documentation.

Implementing Skeleton Screen UI

Now, we’ll install react-loading-skeleton. Run the following command in your terminal to install the package:

npm install react-loading-skeleton

Skeleton Component

Let’s create a skeleton component for our video data. Inside our components folder, create a SkeletonCard.js file, and add the following code:

import React from “react”;
import Skeleton from “react-loading-skeleton”;
const SkeletonCard = () => {
return (
<section>
<h2 className=”section-title”>
<Skeleton height={30} width={300} />
</h2>

<ul className=”list”>
{Array(9)
.fill()
.map((item, index) => (
<li className=”card” key={index}>
<Skeleton height={180} />
<h4 className=”card-title”>
<Skeleton circle={true} height={50} width={50} />  
<Skeleton height={36} width={`80%`} />
</h4>
<p className=”card-channel”>
<Skeleton width={`60%`} />
</p>
<div className=”card-metrics”>
<Skeleton width={`90%`} />
</div>
</li>
))}
</ul>
</section>
);
};
export default SkeletonCard;

We’ve created an unordered list. Inside it, we’ve used the Array.fill() method. Because we have nine items of dummy data, we’ve used the Array.fill() method to loop through the length of our items object and filled it with no index value, hence making our array empty. See the Array.fill documentation to learn how it works.

Next, we mapped through our empty array to return a list containing the skeleton properties, and we specified the value of each of the skeleton properties.

Here, height connotes the length of a skeleton rectangle, and width refers to the breadth, while circle creates the rounded part of the skeleton UI.

React Loading Skeleton comes with default Pulse animation, which makes it handy. You could create Pulse animation to suit your project, but if you ask me, I would stick with the default.

Finally, the complete source code is available.

We now have a fully functional skeleton screen UI. Our example shows the skeleton for five seconds before showing the content.

Let’s see our result thus far:

YouTube-like UI plus skeleton screen UIOur YouTube-like skeleton UI (Large preview)

Conclusion

Skeleton screens tremendously improve the user experience by avoiding the frustration of facing an entirely blank screen and giving the user an impression of what content will look like before it loads.

If you aren’t comfortable with any of the packages we’ve looked at, you can create your own skeleton UI by making rectangles and circles that mimic the page’s layout.

Please do share your feedback and experience with in the comments section below. I’d love to see what you come up with!

The supporting repo for this article is available on Github.

References

“Everything You Need to Know About Skeleton Screens”, Bill Chung, UX Collective
“Skeleton Loading Pages With React”, Anthony Panagi, Octopus Wealth
“Skeleton Screens With React And React Native”, Chris Dolphin, Alligator.io
“Implementing Skeleton Loading In React ”, Adrian Bece, DEV

Smashing Editorial
(ks, il, al)

5 Best Interactive Learning Websites for Students

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/ft6rEmfxDj8/5-best-interactive-learning-websites-for-students

Photo credit: jeshoots In the 21st century, using technology is a necessity in almost every setting. Technological devices and resources empower people to be more effective at their work and students – to be more successful in their studies. It’s important to embrace the innovation the world of technology has to offer to ensure greater […]

The post 5 Best Interactive Learning Websites for Students appeared first on designrfix.com.

40 Unusually Creative Mugs, Cups & Glasses

Original Source: https://www.hongkiat.com/blog/unusual-mugs-cups-and-glasses/

Nothing wakes me up better than a good cuppa in the morning. To some of us, cups, mugs, glasses; they are just something to hold our beverages; what matters is what we pour into them. To others, it…

Visit hongkiat.com for full content.

The Simpson’s new look is the best thing you’ll see all day

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/NTAfR9v71h4/the-simpsons-new-look

Fans of America's most dysfunctional family, The Simpsons, will be familiar with the couch gag that kicks off every episode. From alien invasions to time travel, the famous sofa has been subject to extreme transformations over the course of the animation series. But this quarantine-themed offering, which sees the family fly off on an action-packed adventure around Springfield, is one of the most topical. 

Don't worry, no lockdown rules have been flouted here, the fast-paced jaunt takes place within the futuristic world of virtual reality, and the offbeat, abstract animation style deployed totally reflects that. This is Springfield as you've never seen it before. We just hope Homer is using one of the best VR headsets for 2020.

Want to dive into The Simpsons? Try Disney Plus free for seven days.

The Simpsons: Homer

Bart’s line writing punishment doesn’t seem so bad here

The sequence (below) supercharges the usual events of the opening credits, adding an extreme sport edge to everything the family does. Think Homer skydiving, Bart snowboarding and Marge surfing. Lisa gets to dive in the deep sea, and Maggie's tricycle skills are out of this world. Everything that happens is super-familiar, but not quite as you know it. 

It's the animation style that makes the piece so invigorating. The usual warm colours and soft lines are gone, replaced by a much edgier design. The colour palette is vibrant yet limited, while the abstract lines and graphic textures rough things up and emphasise that 'extreme' edge. Plus, the quick and often glitchy transitions offer pure adrenalin surges. 

We're all way too acquainted with our sofas at the moment, which this animation reflects perfectly. With a hard-hitting soundtrack, the sequence is fast, free and dreamlike, smashing that slight feeling of claustrophobia that's settled over the world and opening up new possibilities. We've recommended spicing things up with Google's AR app, but this takes it to another level that we'd love to try out.

Read more:

11 top animation tools for digital artists24 cool CSS animation examples to recreateHow to make an animated video: Expert advice

Collective #602

Original Source: http://feedproxy.google.com/~r/tympanus/~3/2fZSg2-o7zo/

Inspirational Website of the Week: CUSP

A superb elegant look with very interesting distortion effects. Our pick this week.

Get inspired

Our Sponsor
Start your own freelance business by becoming a Divi expert

Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.

Start learning now

Building dark mode on Stack Overflow

Aaron Shekey talks about the work that went into the new dark mode option of Stack Overflow.

Read it

Kontrapunkt Type

Step inside a virtual experience of the solo exhibition ‘Kontrapunkt Type’, presented by design agency Kontrapunkt, DNP and Ginza Graphic Gallery in Tokyo.

Check it out

Watched Box

Heydon Pickering made this declarative container queries solution.

Check it out

Writing an Emulator in JavaScript (and Interfacing with Multiple UIs)

A great guide by Tania Rascia where she shares her journey of writing a Chip-8 interpreter.

Read it

Image Compare Viewer

Compare before and after images, for grading, CGI and other retouching comparisons.

Check it out

Image Techniques On The Web

Ahmad Shadeed’s guide to including images in HTML covering various techniques.

Read it

Stacks

A set of layout components for building React Native views blazingly fast.

Check it out

How && and || Operators Really Work in JavaScript

An in-depth post that explains in examples how exactly && and || operators work in JavaScript.

Read it

Practice time!

Practice your ukulele with this project by Monica Dinculescu.

Check it out

Generative Data Visualization

The third part of a series where Shirley Wu show how to create custom data visualizations using SVG, Vue, and D3.js.

Check it out

Bubble Tape Text

A super cool unrolling scroll effect by Matthew Rayfield.

Check it out

Prog Arp II

An arpeggiator instrument by Jake Albaugh.

Check it out

Creating Morphing Animations with CSS clip-path

Learn how to implement morphing, a technique for transforming one appearance into another, using CSS in this tutorial by Mikael Ainalem.

Read it

How Google Ruined the Internet

Google has become a card catalog that is constantly being reordered by
an angry, misinformed mob.

Read it

Updates to Form Controls and Focus

Microsoft Edge and Google Chrome spent the last year collaborating to retheme and improve the functionality of the built-in form controls on Chromium browsers.

Read it

Meanderer

A JavaScript micro-library for responsive CSS motion paths. Made by Jhey Tompkins.

Check it out

Bongo Cat Codes #2 – Jamming

A lovely animation by Caroline Artz.

Check it out

3D Photography using Context-aware Layered Depth Inpainting

A novel method for converting a single RGB-D input image into a 3D photo.

Check it out

Making a responsive CSS grid layout with just 3 properties

Learn how to pull off a simple responsive template based on CSS Grid.

Read it

Why you should stop using Google Analytics on your website

Here’s a look at why you should remove Google Analytics from your website and help create a more open, independent web that’s more friendly to the visitors.

Read it

From Our Blog
Interactive WebGL Hover Effects

A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.

Check it out

Collective #602 was written by Pedro Botelho and published on Codrops.