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

If you recently browsed Awwwards or FWA you might have stumbled upon Ultranoir’s website. An all-round beautifully crafted website, with some amazing WebGL effects. One of which is a sticky effect for images in their project showcase. This tutorial is going to show how to recreate this special effect.

The same kind of effect can be seen on the amazing website of MakeReign.

Understanding the effect

When playing with the effect a couple of times we can make a very simple observation about the “stick”.

In either direction of the effect, the center always reaches its destination first, and the corners last. They go at the same speed, but start at different times.

With this simple observation we can extrapolate some of the things we need to do:

Differentiate between the unsticky part of the image which is going to move normally and the sticky part of the image which is going to start with an offset. In this case, the corners are sticky and the center is unsticky.
Sync the movements

Move the unsticky part to the destination while not moving the sticky part.
When the unsticky part reaches its destination, start moving the sticky part

Getting started

For this recreation we’ll be using three.js, and Popmotion’s Springs. But you can implement the same concepts using other libraries.

We’ll define a plane geometry with its height as the view height, and its width as 1.5 of the view width.

const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 10000);
const fovInRadians = (camera.fov * Math.PI) / 180;
// Camera aspect ratio is 1. The view width and height are equal.
const viewSize = Math.abs(camera.position.z * Math.tan(fovInRadians / 2) * 2);
const geometry = new THREE.PlaneBufferGeometry(viewSize *1.5,viewSize,60,60)

Then we’ll define a shader material with a few uniforms we are going to use later on:

u_progress Elapsed progress of the complete effect.
u_direction Direction to which u_progress is moving.
u_offset Largest z displacement

const material = new THREE.ShaderMaterial({
uniforms: {
// Progress of the effect
u_progress: { type: “f”, value: 0 },
// In which direction is the effect going
u_direction: { type: “f”, value: 1 },
u_waveIntensity: { type: “f”, value: 0 }
},
vertexShader: vertex,
fragmentShader: fragment,
side: THREE.DoubleSide
});

We are going to focus on the vertex shader since the effect mostly happens in there. If you have an interest in learning about the things that happen in the fragment shader, check out the GitHub repo.

Into the stick

To find which parts are going to be sticky we are going to use a normalized distance from the center. Lower values mean less stickiness, and higher values mean more sticky. Since the corners are the farthest away from the center, they end up being most sticky.

Since our effect is happening in both directions, we are going to have it stick both ways. We have two separate variables:

One that will stick to the front. Used when the effect is moving away from the screen.
And a second one that will stick to the back. Used when the effect is moving towards the viewer.

uniform float u_progress;
uniform float u_direction;
uniform float u_offset;
uniform float u_time;
void main(){
vec3 pos = position.xyz;
float distance = length(uv.xy – 0.5 );
float maxDistance = length(vec2(0.5,0.5));
float normalizedDistance = distance/sizeDist;
// Stick to the front
float stickOutEffect = normalizedDistance ;
// Stick to the back
float stickInEffect = -normalizedDistance ;
float stickEffect = mix(stickOutEffect,stickInEffect, u_direction);
pos.z += stickEffect * u_offset;
gl_Position =
projectionMatrix *
modelViewMatrix *
vec4(pos, 1.0);
}

Depending on the direction, we are going to determine which parts are not going to move as much. Until we want them to stop being sticky and move normally.

The Animation

For the animation we have a few options to choose from:

Tween and timelines: Definitely the easiest option. But we would have to reverse the animation if it ever gets interrupted which would look awkward.
Springs and vertex-magic: A little bit more convoluted. But springs are made so they feel more fluid when interrupted or have their direction changed.

In our demo we are going to use Popmotion’s Springs. But tweens are also a valid option and ultranoir’s website actually uses them.

Note: When the progress is either 0 or 1, the direction will be instant since it doesn’t need to transform.

function onMouseDown(){
…
const directionSpring = spring({
from: this.progress === 0 ? 0 : this.direction,
to: 0,
mass: 1,
stiffness: 800,
damping: 2000
});
const progressSpring = spring({
from: this.progress,
to: 1,
mass: 5,
stiffness: 350,
damping: 500
});
parallel(directionSpring, progressSpring).start((values)=>{
// update uniforms
})
…
}

function onMouseUp(){
…
const directionSpring = spring({
from: this.progress === 1 ? 1 : this.direction,
to: 1,
mass: 1,
stiffness: 800,
damping: 2000
});
const progressSpring = spring({
from: this.progress,
to: 0,
mass: 4,
stiffness: 400,
damping: 70,
restDelta: 0.0001
});
parallel(directionSpring, progressSpring).start((values)=>{
// update uniforms
})
…
}

And we are going to sequence the movements by moving through a wave using u_progress.

This wave is going to start at 0, reach 1 in the middle, and come back down to 0 in the end. Making it so the stick grows in the beginning and decreases in the end.

void main(){
…
float waveIn = u_progress*(1. / stick);
float waveOut = -( u_progress – 1.) * (1./(1.-stick) );
float stickProgress = min(waveIn, waveOut);
pos.z += stickEffect * u_offset * stickProgress;
gl_Position =
projectionMatrix *
modelViewMatrix *
vec4(pos, 1.0);
}

Now, the last step is to move the plane back or forward as the stick is growing.

Since the stick grow starts in different values depending on the direction, we’ll also move and start the plane offset depending on the direction.

void main(){
…
float offsetIn = clamp(waveIn,0.,1.);
// Invert waveOut to get the slope moving upwards to the right and move 1 the left
float offsetOut = clamp(1.-waveOut,0.,1.);
float offsetProgress = mix(offsetIn,offsetOut,u_direction);
pos.z += stickEffect * u_offset * stickProgress – u_offset * offsetProgress;
gl_Position =
projectionMatrix *
modelViewMatrix *
vec4(pos, 1.0);
}

And here is the final result:

Conclusion

Simple effects like this one can make our experience look and feel great. But they only become amazing when complemented with other amazing details and effects. In this tutorial we’ve covered the core of the effect seen on ultranoir’s website, and we hope that it gave you some insight on the workings of such an animation. If you’d like to dive deeper into the complete demo, please feel free to explore the code.

We hope you enjoyed this tutorial, feel free to share your thoughts and questions in the comments!

How to Create a Sticky Image Effect with Three.js was written by Daniel Velasquez and published on Codrops.

Original Source: https://www.smashingmagazine.com/2019/04/understanding-subresource-integrity/

Understanding Subresource Integrity

Understanding Subresource Integrity

Drew McLellan

2019-04-09T12:30:59+02:00
2019-04-09T15:15:05+00:00

If you’ve ever used a CDN-hosted version of a JavaScript library, you may have noticed a strange looking integrity attribute on the script tag. This attribute contains seemingly endless alphanumeric junk that you may be tempted to strip out in the quest for cleaner code.

All that junk is actually a really useful security feature called Subresource Integrity (SRI) that can help to defend your site against certain types of hacks and compromises. In this article, we’ll take a look at what SRI is, how it can help protect you, and how you can start using it in your own projects, not just for files hosted on CDNs.

A Bit Of History

Way back in the days when JavaScript was very much the poorer cousin to HTML and CSS, we didn’t need to think too much about how our scripts could be used as an attack vector for our websites. Most sites were all hosted on a single physical server somewhere on our own hosting infrastructure, and it was the server we thought about defending when it came to security best practices.

As browsers became more capable and net connections got fatter, we started to use more and more JavaScript, and eventually, reusable JavaScript libraries began to spring up. In those early days, libraries like script.aculo.us, Prototype and eventually jQuery began to gain adoption amongst developers looking to add more interactivity into their pages.

With these added libraries and subsequent plugins came added page weight, and before long we were starting to think seriously about front-end performance. Resources like Content Delivery Networks (CDNs) that had previously been the reserve of giant corporations were becoming commonplace for everyday folk building snappy websites.

Along the way, some bright spark noticed that sites were all requesting their own copies of common libraries — things like the latest jQuery — and if there was a common CDN version of those libraries that could be used by every site, then the user wouldn’t need to keep downloading the same file. They’d take the hit for the first site to use the file, but then it would sit in their local browser cache and downloads could be skipped for each subsequent site. Genius!

This is why you’ll see CDN links for your favorite libraries using URLs like jsdelivr.com — they’re making use of a common CDN to host the files so that their users see the performance benefits.

What Could Go Wrong?

This remains a good, practical way to work, but it does introduce a potential vector for attack. Let’s imagine that it’s 2012 and everyone is using the brand new jQuery 1.8. Back with the traditional way of doing things, everyone would have their own jQuery 1.8 file hosted as part of their own website on their own server.

If you were some kind of evil actor — like some sort of jQuery-based Hamburglar — and had figured out a sneaky way to hack the library for your own evil gains, you’d have to target every website individually and compromise their servers to have any impact. That’s a lot of effort.

But that’s not how things are now, as everyone is using jQuery loaded from a common CDN. And when I say everyone, I don’t mean hundreds of web pages. I mean millions of web pages. Suddenly that one file has become a very attractive target for our shady hacker. If they can compromise that one file, they can very quickly have code running in millions of web pages across the globe.

It doesn’t matter what that code is. It could be a prank to deface pages, it could be code to steal your passwords, it could be code to mine cryptocurrency, or it could be sneaky trackers to follow you around the web and make a marketing profile. The important thing is that the innocent file that the developer added to a page has been changed and you now have some evil JavaScript running as part of your site. That’s a big problem.

Enter Subresource Integrity

Rather than rolling back the clocks and abandoning a useful way to use code, SRI is a solution that adds a simple level of security on top. What SRI and the integrity attribute does is make sure that the file you linked into a page never changes. And if it does change, then the browser will reject it.

Checking that code hasn’t changed is a very old problem in computer science and thankfully it has some very well established solutions. SRI does a good job of adopting the simplest — file hashing.

File hashing is the process of taking a file and running it through an algorithm that reduces it to a short string representation, known as a hash or checksum. Without getting into the weeds, the process is either repeatable or reversible, so much that if you were to give someone else a file along with the hash they’d be able to run the same algorithm to check that the two match. If the file changes or the hash changes, then there’s no longer a match and you know something is wrong and should distrust the file.

When using SRI, your webpage holds the hash and the server (CDN or anywhere) holds the file. The browser downloads the file, then quickly computes to make sure that it is a match with the hash in the integrity attribute. If it matches the file is used, and if not it is blocked.

Trying It Out

If I go to getbootstrap.com today to get a CDN link to a version of Bootstrap, I’m given a tag that looks like this:

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>

You can see that the src attribute is as we’re used to, and the integrity attribute holds what we now know to be a hash.

The hash is actually in two parts. The first is a prefix to declare which hashing algorithm to use. In this case, it’s sha384. This is followed by a dash and then the hash itself, encoded with base64.

You may be familiar with base64 as a way of encoding inline files like images into pages. It’s not a cryptographic process — it’s just a fast and convenient way to encode potentially messy data in a way that translates neatly to ASCII. This is why it’s used a lot on the web.

On seeing this, the browser will download bootstrap.min.js. Before executing it, it will base64 decode the hash and then use the sha384 hashing algorithm to confirm that the hash matches the file it’s just downloaded. If it matches, the file is executed.

I can test this out by putting that tag in a page, and then flipping to the Network tab in my browser tools to see that the file has been loaded.

(Large preview)

I can see that bootstrap.min.js (and also the jQuery file it needs) have loaded successfully.

Let’s see what would happen if I update the hash to be something I know to be incorrect.

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-SmashingMagazineIsCoolForCats” crossorigin=”anonymous”></script>

(Large preview)

As you can see, the hash that’s specified in my page no longer matches the file, so the file gets blocked.

Using SRI In Your Own Projects

Having this capability for libraries on a CDN is great, and if you see the option to use an embedded file with an integrity attribute then you should definitely favor that option. But it’s not limited to big projects on CDNs, you can use this yourself for your own sites.

It’s not at all far fetched to imagine a scenario where a hacker manages to get access to just a few files on your site. I think most of us have see a client, colleague or friend who has at some point had a WordPress site compromised with a load of nasty junk that they didn’t even realise was there.

SRI can protect you from this too. If you generate integrity hashes for your own files, then you can have your site reject any changes just as it would for a remotely hosted file.

Generating Hashes

You can, as you’d expect, run some commands at your computer’s terminal to generate a hash for a file. This example of how to do so comes from the MDN Subresource Integrity page:

cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

That’s getting the content of FILENAME.js and passing it as input to openssl to create a digest using sha384, which is then passed as input into another openssl command to base64 encode the result. Not only is that complicated and obscure, but it’s also not the sort of thing you want to be doing by hand every time your JavaScript file changes.

More usefully, you’ll want to integrate this somehow into your site’s build process, and as you’d imagine, there are plenty of ready-made options there. The exact implementation is going to vary wildly based on your project, but here are some building blocks.

If you use Gulp to build your sites, there’s gulp-sri which will output a JSON file with a list of your files and their hashes. You can then make use of this in your site. For example, for a dynamically rendered site, you might create a template plugin to read that file and add the hashes to your templates where needed.

If you’re still with Gulp but have a static site (or a statically generated site) you might use gulp-sri-hash which will actually run through your HTML pages and modify the pages to add hashes where needed, which is very handy.

If you’re using Webpack, there’s webpage-subresource-integrity which in true Webpack style is more complex than any human might expect it to be, but does appear to work.

For those using the Handlebars templating engine, there appear to be options available to you, and if your build process is just basic JavaScript, there are simple solutions there too.

If you’re using a CMS like WordPress, I found a plugin that appears to make it easy, although I’ve not tried it myself. Googling for your own platform of choice with SRI or Sub Resource Integrity will likely point you in the right direction.

You essentially want to hook your hashing in after your JavaScript files have been minified and then make that hash available in some way to whatever part of your system outputs the <script> tags. One of the wonders of the web platform is that it’s so technically diverse, but that sadly leaves me unable to give you good implementation instructions!

Other Things To Note

In this article, I’ve talked a lot about JavaScript files because that’s really where it makes the most sense to defend against hacking attacks. SRI also works with CSS, and so you can use it in exactly the same way there. The risk for malicious CSS is much lower, but the potential to deface a site still exists and who knows what browser bugs could also lead to CSS inadvertently exposing your site to a hacker. So it’s work using SRI there too.

Another interesting thing you can do is use a Content Security Policy to specify that any script (or styles) on your page must use SRI, and of course that SRI must validate.

Content-Security-Policy: require-sri-for script;

This is a way to ensure that SRI is always used, which could be useful on sites worked on by multiple team members who may or may not be fully up to speed with how to do things. Again, a good place to read more about this is the always-great MDN docs for Subresource Integrity.

The last thing that’s worth talking about is browser support for SRI. Support in modern browsers is broad, with the main exception being Internet Explorer. Due to the backwards-compatible way the specification has been implemented, however, it’s safe to use immediately. Browsers that understand the integrity attribute will use the hash and check integrity, and older browsers will just carry on as they always have and keep working. Of course, you’ll not get the added protection in those older browsers, but you will in the browsers that do offer support.

Conclusion

We’ve seen not only what those weird hashes in the integrity attributes do, but how we can use them to defend against certain types of attacks on our website. Of course, there’s no one silver bullet that will defend our sites against every type of exploit, but Subresource Integrity is a really useful tool in the chain.

Exploiting a security flaw is often about getting multiple small pieces to line up. If A is in place, and you can make B happen, then a bug in C makes D possible. Browser features like SRI give us a good way to tie things down just a little bit more and potentially break that chain and prevent a hacker from getting what they want. What’s more, if you can integrate it into your build process or CMS, it’s something you should be able to set up once and then forget about and it won’t cause you day to day inconvenience.

As such, I’d really recommend taking a serious look at Subresource Integrity and implementing it on your sites if you can.

(yk, il)

Original Source: https://www.sitepoint.com/sitepoint-premium-new-releases-node-android-react-native-more/

We’re working hard to keep you on the cutting edge of your field with SitePoint Premium. We’ve got plenty of new books and mini-books to check out in the library — let us introduce you to them.

Mastering the Faster Web with PHP, MySQL, JavaScript

Make data-driven web apps run faster with advanced PHP, SQL and JS techniques. Ensure seamless implementation of a JS-, HTML 5- and CSS-based front end and PHP-based back end. Learn about problem identification, best strategies, and UI design patterns as well to build a clean, fast web app.

Read Mastering The Faster Web with PHP, MySQL, JavaScript.

Learning Java by Building Android Games Second Edition

Develop engaging games for the Android platform with Java. Learn Java, Android, and object-oriented programming from scratch. Build games including Sub Hunter, Retro Pong, and Bullet Hell. Create and design your own games, such as an open-world platform game.

Read Learning Java by Building Android Games Second Edition.

Internet of Things Programming Projects

This book is a practical, project-based guide to help you build and control your IoT projects. Leverage the full potential of IoT with the combination of Raspberry Pi 3 and Python. Build complex, Python-based apps with IoT. Work on various IoT projects and understand the basics of electronics.

Read Internet of Things Programming Projects.

Real-Time 3D Graphics with WebGL 2 – Second Edition

Create interactive, visually stunning, high-performance 3D applications for the web with JavaScript and WebGL 2. This complete course on 3D computer graphics covers rendering, 3D math, lighting, cameras, and more, unlocking a variety of new and advanced WebGL 2 features.

Read Real-Time 3D Graphics with WebGL 2 – Second Edition.

Android Programming for Beginners – Second Edition

Through this first-principles introduction to Java, via Android, you’ll learn all the Java and Android skills you need to start making powerful mobile apps with practical and actionable steps, and how to publish apps to the Google Play marketplace.

Read Android Programming for Beginners Second Edition.

Mastering React Native

Get up to speed with all the React Native building blocks necessary for creating expert, cutting-edge apps. Learn how to apply Flexbox, build rich animations, integrate third-party libraries, develop customized components, combine React Native with Redux, Redux middleware, a remote API, and more.

Read Mastering React Native.

Vue.js: Tools & Skills

In this book, we’ll examine some of the most popular Vue,js tools, and look at some related skills that will help you on your journey to becoming an expert Vue developer.

Read Vue.js: Tools & Skills.

CSS Animation 101

We’re going to learn about CSS transitions and animations. By the end of the book, you’ll have a good understanding of CSS animations as well as the tools to create and experiment with our own.

Read CSS Animation 101.

How to Build a Game with Vue.js

In this tutorial, we’ll explore one of the less obvious uses for Vue: game development,. We’ll build an electronic variant of the popular Match Pairs game.

Read How to Build a Game with Vue.js.

Node.js Web Development Fourth Edition

Create real-time apps with Node.js, Docker, MySQL, MongoDB, and Socket.IO. Learn about live deployment, including HTTPS and hardened security, the latest JS features and ES modules, and walk through different stages of developing robust apps using Node.js 10.

Read Node.js Web Development Fourth Edition.

And More to Come…

We’re releasing new content on SitePoint Premium almost every day, so we’ll be back next week with the latest updates. And don’t forget: if you haven’t checked out our offering yet, take our 7 day free trial for a spin.

The post SitePoint Premium New Releases: Node, Android, React Native & More appeared first on SitePoint.

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

Inspirational Website of the Week: Dogstudio

A perfect symphony of exciting WebGL, modern typography and great layout. Our pick this week.

Get inspired

This content is sponsored via Syndicate Ads
Northwestern’s Online MS in Information Design and Strategy

Build the in-demand skills, such as UX, UI, and HCI, needed to drive user interactions. Choose a specialization in content strategy, analytics, or learning design.

Apply now

Yet Another JavaScript Framework

A wonderful article by Jason Hoffman on the history of JavaScript frameworks and the legacy they left behind.

Read it

CSSBattle

Use your CSS skills to replicate targets with smallest possible code.

Play it

Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective

Facundo Corradini shares his experience with temporary vertigo and how it changed his mindset on accessibility for good.

Read it

Managing Z-Index In A Component-Based Web Application

Pavel Pomerantsev describes an approach for successfully managing stacking in a web app.

Read it

Some dogstudio.co insights

Kevin Chapelier provides some valuable insight into the initial implementation of the WebGL/three.js dog scene on dogstudio.co.

Check it out

A progressive disclosure component

Andy Bell discusses some key elements of a progressive and accessible disclosure component.

Read it

Editor.js

The next generation block styled editor got a major update.

Check it out

Grass

A stunning grass shader with three.js by Al Ro.

Check it out

You probably don’t need that hip web framework

Owen Williams explains why obsession with finding better frameworks is killing ideas before they reach the world.

Read it

Upcoming WebHID API – access Bluetooth/USB HID devices in web applications

Robat Williams takes a look at the exciting, yet to be released WebHID API and shows what you might be able to do with it.

Read it

How I failed the <a>

Remy Sharp shares how and why you should be extra careful when adding onClick to a component.

Read it

Gimli

A promising looking Visual Studio Code extension enabling smart visual tools for front-end developers. You can back it on Kickstarter.

Check it out

combine-pagination

A JavaScript library for paginating across multiple data sources at once, whilst retaining the sort order.

Check it out

Dan Abramov teaches me React Hooks

Watch Mattias Petter Johansson get a React Hooks master class by Dan Abramov in this Fun Fun Function live stream recording.

Watch it

x-ray

In case you didn’t know it: A simple HTML debugger, executable by bookmark, that let’s you visualize the HTML structure of a website.

Check it out

Remix Icon

A great set of open source neutral style system symbols.

Get it

Free Font: Explorer

A playful uppercase typeface by Kristaps Zelmenis.

Get it

Color theory for designers – a crash course

An infographic that will teach you some important aspects of color theory applied to web design. By Micah Bowers.

Check it out

shoperr

With shoperr you can create your own custom shop in minutes, and stock up on referral links to your favorite products.

Check it out

From Our Blog
Crossroads Slideshow

An experimental slideshow with an inclined look, three slide previews and a content view on click.

Check it out

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