Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/qFIiwBq7Hvw/say-cheese-photography-beginners

Say Cheese: Photography for beginners

abduzeedo06.05.20

Say Cheese is an amazing project by Arthur de Almeida, a brazilian designer based in São Paulo. It’s a long-read website that focus on teaching basic photography concepts for people who wants to start in this area. Photography has always been a passion for Arthur. It all started in his early days of learning about photography,  he recalls that the photography triad (aperture, shutter speed and ISO) was one of the few things that he could understand, but even so some important details were always confusing. “It is difficult to talk about something visual with text only” – he added.

When I thought about creating a project to teach this content to people, I had one thing in mind: this should be as simple and accessible as possible, I should avoid talking about technical words and that must start with the name itself.

Photography for beginners

“Say Cheese” seemed to him to be the most popular expression in photography. His goal was to be able to communicate what the website would talk about. Not limiting only to people in the world of photography. After creating the name, he started to write the content in a simple way, as if he was talking to a friend.

I wanted to make sure that each chapter begun in a very informal and non-technical way (like Friends names its episodes). It wouldn’t do me any good to explain something technical if people didn’t know how it could be applied on a daily basis. 

So, after creating all the content and seeing that it was already very clear, he started explore different ways to streamline the communication through visual resources but without trying to rush, especially for the readers that were just starting.

I believed that things needed to be said slowly and always with the same objective: to communicate in the simplest way possible with people, after all I am not talking to professional photographers, but with people who just want to take their first cool picture.

Original Source: http://feedproxy.google.com/~r/tympanus/~3/Bi15MBfFXYQ/

Inspirational Website of the Week: 14islands

Fall in love with this amazing website of 14islands and its fantastic organic shapes and effects. Can you discove the easter egg?

Get inspired

A user’s guide to CSS variables

Lea Verou’s guide to help us understand the differences between declarative CSS variables and variables in other programming languages, and how you can leverage their power.

Read it

Our Sponsor
Simply build visually with Divi

You’ve never built a WordPress website like this before. Divi is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.

Discover Divi

AudioMass

AudioMass is a free full-featured web-based audio and waveform editing tool. Find the GitHub repo here.

Check it out

ScrollTrigger

The new ScrollTrigger plugin by GreenSock creates amazing scroll-based animations with minimal code. You can also trigger anything scroll-related, even if it has nothing to do with animation.

Check it out

Free The Docs

Instantly convert documents within Google Docs into reStructuredText. Downloads images, converts markup, bulleted lists, tables, and more.

Check it out

Twin

With twin, you can use Tailwind classes within css-in-js libraries.

Check it out

CUBE CSS

Learn about the CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.

Read it

Consoleimg

Add images to your website’s developer console with this script.

Check it out

Global and Component Style Settings with CSS Variables

Sara Soueidan explains how she uses scoped CSS variables in her own pattern library to speed up prototyping and client work.

Read it

Colors in CSS

Ahmad Shadeed dives into CSS colors and explains many useful details.

Read it

3D First Person Art Gallery – No Javascript!

An amazing demo by Ben Evans.

Check it out

Free Font: HK Grotesk Wide

HK Grotesk Wide is a free font, great for posters, headlines or book/magazine covers.

Check it out

The menu

A step by step guide to creating a hamburger menu in SVG and CSS by Mikael Ainalem.

Read it

Overlapping Header with CSS Grid

A great CSS grid based solution to an overlapping layout.

Check it out

Colors and Fonts

Colors & Fonts is a curated library of colors and fonts for digital designers and web developers.

Check it out

ScrollTrigger Demo

Mariusz Dabrowski’s cool demo that showcases the new ScrollTrigger plugin by GreenSock.

Check it out

Object.is() vs Strict Equality Operator in JavaScript

When should you use Object.is() instead of the strict equality check in JavaScript?

Read it

Semilattice

A collection of system and interaction concepts for personal knowledge management tools that reimagines how we work with and organize information. By Aosheng Ran.

Check it out

Fun with Fonts

Two short multiple choice quizzes on Gutenberg and font identification.

Check it out

Stranger Things, JavaScript Edition

Find the explanation to some of the weirdest JavaScript moments in this article.

Read it

TitleRun

TitleRun is a game that lives in your title bar: jump over the obstacles to survive and reach the flag!

Check it out

From Our Blog
Kinetic Typography with Three.js

Discover how to use Three.js to render kinetic typography.

Check it out

From Our Blog
UI Interactions & Animations Roundup #7

Some modern UI animation shots to keep you up-to-date with the new motion trends and get you inspired.

Check it out

The post Collective #608 appeared first on Codrops.

Original Source: https://www.sitepoint.com/replace-redux-react-hooks-context-api/?utm_source=rss

The most popular way to handle shared application state in React is using a framework such as Redux. Quite recently, the React team introduced several new features which include React Hooks and the Context API. These two features effectively eliminated a lot of challenges that developers of large React projects have been facing. One of the biggest problems was ‘prop drilling’ which was common with nested components. The solution was to use a state management library like Redux. This, unfortunately, came with the expense of writing boilerplate code — but now, it’s possible to replace Redux with React Hooks and the Context API.

In this article, you are going to learn a new way of handling state in your React projects, without writing excessive code or installing a bunch of libraries — as is the case with Redux. React hooks allow you to use local state inside of function components, while the Context API allows you to share state with other components.

Prerequisites

In order to follow along with this tutorial, you will need to have a good foundation in the following topics:

Getting Started with React
Your First Week with React
React Hooks
Foundation in Redux

The technique you will learn here is based on patterns that were introduced in Redux. This means you need to have a firm understanding of reducers and actions before proceeding. I am currently using Visual Studio Code, which seems to be the most popular code editor right now (especially for JavaScript developers). If you are on Windows, I would recommend you install Git Bash. Use the Git Bash terminal to perform all commands provided in this tutorial. Cmder is also a good terminal capable of executing most Linux commands on Windows.

You can access the complete project used in this tutorial for this GitHub Repository.

About the New State Management Technique

There are two types of state that we need to deal with in React projects:

Continue reading
How to Replace Redux with React Hooks and the Context API
on SitePoint.

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

Today we are sharing five free vector tech illustrations that you can download and use in your commercial or personal projects without any limitations. Included in the download is an Adobe Illustrator file that you can use to customize colors, add your own elements, or edit in any other way you desire. High resolution exported JPG files are also included.

These vector tech illustrations were created specifically for 1stWebDesigner readers and cannot be found anywhere else, so you can use them knowing that you will be among a select number of designers who have access to them. We always enjoy giving something back to all of our loyal followers and readers, so we created these free vector tech illustrations just for you!

All The Best Procreate Brushes
Unlimited Downloads: Hundreds of Procreate Brushes For Your Designs

DOWNLOAD NOW

Smartwatch

First in our collection of free vector tech illustrations is a pair of hands using a messaging app on a smartwatch. You’ll notice the recurring theme throughout, with the background reflecting what is on the screen in the foreground.

Cell Phone

Next is a familiar scene – “liking” something on an app on a mobile phone. Has anyone ever not done this?

Tablet

Who hasn’t used a tablet to submit a thumbs up? Here’s a colorful representation of this oft-used action.

Laptop

In this illustration, the user is checking statistics of some type on a laptop. You could use this to represent almost any type of stat-checking setting.

Desktop Computer

Our fifth and final illustration depicts a pie chart being viewed on a desktop computer.

Ready To Download & Use These 5 Free Vector Tech Illustrations?

Go for it! We hope you have fun with and enjoy utilizing these illustrations in your projects. Keep following 1stWebDesigner so you don’t miss out on future freebies, along with everything else we have to offer.

Download Illustrations

Original Source: http://feedproxy.google.com/~r/tympanus/~3/2TbBWbmkE3E/

Kinetic Typography may sound complicated but it’s just the elegant way to say “moving text” and, more specifically, to combine motion with text to create animations.

Imagine text on top of a 3D object, now could you see it moving along the object’s shape? Nice! That’s exactly what we’ll do in this article ? we’ll learn how to move text on a mesh using Three.js and three-bmfont-text.

We’re going to skip a lot of basics, so to get the most from this article we recommend you have some basic knowledge about Three.js, GLSL shaders, and three-bmfont-text.

Basis

The main idea for all these demos is to have a texture with text, use it on a mesh and play with it inside shaders. The simplest way of doing it is to have an image with text and then use it as a texture. But it can be a pain to figure out the correct size to try to display crisp text on the mesh, and later to change whatever text is in the image.

To avoid all these issues, we can generate that texture using code! We create a Render Target (RT) where we can have a scene that has text rendered with three-bmfont-text, and then use it as the texture of a mesh. This way we have more freedom to move, change, or color text. We’ll be taking this route following the next steps:

Set up a RT with the textCreate a mesh and add the RT textureChange the texture inside the fragment shader

To begin, we’ll run everything after the font file and atlas are loaded and ready to be used with three-bmfont-text. We won’t be going over this since I explained it in one of my previous articles.

The structure goes like this:

init() {
// Create geometry of packed glyphs
loadFont(fontFile, (err, font) => {
this.fontGeometry = createGeometry({
font,
text: “ENDLESS”
});

// Load texture containing font glyphs
this.loader = new THREE.TextureLoader();
this.loader.load(fontAtlas, texture => {
this.fontMaterial = new THREE.RawShaderMaterial(
MSDFShader({
map: texture,
side: THREE.DoubleSide,
transparent: true,
negate: false,
color: 0xffffff
})
);

// Methods are called here
});
});
}

Now take a deep breath, grab your tea or coffee, chill, and let’s get started.

Render Target

A Render Target is a texture you can render to. Think of it as a canvas where you can draw whatever is inside and place it wherever you want. Having this flexibility makes the texture dynamic, so we can later add, change, or remove stuff in it.

Let’s set a RT along with a camera and a scene where we’ll place the text.

createRenderTarget() {
// Render Target setup
this.rt = new THREE.WebGLRenderTarget(
window.innerWidth,
window.innerHeight
);

this.rtCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
this.rtCamera.position.z = 2.5;

this.rtScene = new THREE.Scene();
this.rtScene.background = new THREE.Color(“#000000”);
}

Once we have the RT scene, let’s use the font geometry and material previously created to make the text mesh.

createRenderTarget() {
// Render Target setup
this.rt = new THREE.WebGLRenderTarget(
window.innerWidth,
window.innerHeight
);

this.rtCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
this.rtCamera.position.z = 2.5;

this.rtScene = new THREE.Scene();
this.rtScene.background = new THREE.Color(“#000000”);

// Create text with font geometry and material
this.text = new THREE.Mesh(this.fontGeometry, this.fontMaterial);

// Adjust text dimensions
this.text.position.set(-0.965, -0.275, 0);
this.text.rotation.set(Math.PI, 0, 0);
this.text.scale.set(0.008, 0.02, 1);

// Add text to RT scene
this.rtScene.add(this.text);

this.scene.add(this.text); // Add to main scene
}

Note that for now, we added the text to the main scene to render it on the screen.

Cool! Let’s make it more interesting and “paste” the scene over a shape next.

Mesh and render texture

For simplicity, we’ll first use as shape a BoxGeometry together with ShaderMaterial to pass custom shaders, time and the render texture uniforms.

createMesh() {
this.geometry = new THREE.BoxGeometry(1, 1, 1);

this.material = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
uniforms: {
uTime: { value: 0 },
uTexture: { value: this.rt.texture }
}
});

this.mesh = new THREE.Mesh(this.geometry, this.material);

this.scene.add(this.mesh);
}

The vertex shader won’t be doing anything interesting this time; we’ll skip it and focus on the fragment instead, which is showing the colors of the RT texture. It’s inverted for now (1. – texture) to stand out from the background.

varying vec2 vUv;

uniform sampler2D uTexture;

void main() {
vec3 texture = texture2D(uTexture, vUv).rgb;

gl_FragColor = vec4(1. – texture, 1.);
}

Normally, we would just render the main scene directly, but with a RT we have to first render to it before rendering to the screen.

render() {
…

// Draw Render Target
this.renderer.setRenderTarget(this.rt);
this.renderer.render(this.rtScene, this.rtCamera);
this.renderer.setRenderTarget(null);
this.renderer.render(this.scene, this.camera);
}

And now a box should appear on the screen where each face has the text on it:

Looks alright so far, but what if we could cover more text around the shape?

Repeating the texture

GLSL’s built-in function fract comes handy to make repetition. We’ll use it to repeat the texture coordinates when multiplying them by a scalar so it wraps between 0 and 1.

varying vec2 vUv;

uniform sampler2D uTexture;

void main() {
vec2 repeat = vec2(2., 6.); // 2 columns, 6 rows
vec2 uv = fract(vUv * repeat);

vec3 texture = texture2D(uTexture, uv).rgb;
texture *= vec3(uv.x, uv.y, 1.);

gl_FragColor = vec4(texture, 1.);
}

Notice that we also multiply the texture by the uv components to visualize the modified texture coordinates.

We’re getting there, right? The text should also follow the object’s shape; here’s where time comes in. We need to add it to the texture coordinates, in this case to the x component so it moves horizontally.

varying vec2 vUv;

uniform sampler2D uTexture;
uniform float uTime;

void main() {
float time = uTime * 0.75;
vec2 repeat = vec2(2., 6.);
vec2 uv = fract(vUv * repeat + vec2(-time, 0.));

vec3 texture = texture2D(uTexture, uv).rgb;

gl_FragColor = vec4(texture, 1.);
}

And for a sweet touch, let’s blend the color with the the background.

This is basically the process! RT texture, repetition, and motion. Now that we’ve looked at the mesh for so long, using a BoxGeometry gets kind of boring, doesn’t it? Let’s change it in the next final bonus chapter.

Changing the geometry

As a kid, I loved playing and twisting these tangle toys, perhaps that’s the reason why I find satisfaction with knots and twisted shapes? Let this be an excuse to work with a torus knot geometry.

For the sake of rendering smooth text we’ll exaggerate the amount of tubular segments the knot has.

createMesh() {
this.geometry = new THREE.TorusKnotGeometry(9, 3, 768, 3, 4, 3);

…
}

Inside the fragment shader, we’ll repeat any number of columns we want just to make sure to leave the same number of rows as the number of radial segments, which is 3.

varying vec2 vUv;

uniform sampler2D uTexture;
uniform float uTime;

void main() {
vec2 repeat = vec2(12., 3.); // 12 columns, 3 rows
vec2 uv = fract(vUv * repeat);

vec3 texture = texture2D(uTexture, uv).rgb;
texture *= vec3(uv.x, uv.y, 1.);

gl_FragColor = vec4(texture, 1.);
}

And here’s our tangled torus knot:

Before adding time to the texture coordinates, I think we can make a fake shadow to give a better sense of depth. For that we’ll need to pass the position coordinates from the vertex shader using a varying.

varying vec2 vUv;
varying vec3 vPos;

void main() {
vUv = uv;
vPos = position;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}

We now can use the z-coordinates and clamp them between 0 and 1, so the regions of the mesh farther the screen get darker (towards 0), and the closest lighter (towards 1).

varying vec3 vPos;

void main() {
float shadow = clamp(vPos.z / 5., 0., 1.);

gl_FragColor = vec4(vec3(shadow), 1.);
}

See? It sort of looks like white bone:

Now the final step! Multiply the shadow to blend it with the texture, and add time again.

varying vec2 vUv;
varying vec3 vPos;

uniform sampler2D uTexture;
uniform float uTime;

void main() {
float time = uTime * 0.5;
vec2 repeat = -vec2(12., 3.);
vec2 uv = fract(vUv * repeat – vec2(time, 0.));

vec3 texture = texture2D(uTexture, uv).rgb;

float shadow = clamp(vPos.z / 5., 0., 1.);

gl_FragColor = vec4(texture * shadow, 1.);
}

Fresh out of the oven! Look at this sexy torus coming out of the darkness. Internet high five!

We’ve just scratched the surface making repeated tiles of text, but there are many ways to add fun to the mixture. Could you use trigonometry or noise functions? Play with color? Text position? Or even better, do something with the vertex shader. The sky’s the limit! I encourage you to explore this and have fun with it.

Oh! And don’t forget to share it with me on Twitter. If you got any questions or suggestions, let me know.

Hope you learned something new. Till next time!

References and Credits

Three.jsThe Book of Shadersthree-bmfont-textAll Your Html S3E20

The post Kinetic Typography with Three.js appeared first on Codrops.