A bit more on the mock-ups.

Found an app that can create a 3D rendered phone mockup in literally 10 seconds (although they claim 3 sec).

Can adjust the phone color, background and apply custom animations🔥

designcamera.app

​​Tilt.js - lightweight parallax tilt effect for any card component. Looks really effective and grabs attention🔥

​​Send emails from Create-React-App

👓 Read Time: 3 min
Link

FilePond - amazing JS library with Angular, React, Vue, jQuery connectors that has stunning UI and not just allows you to upload, preview, fully control the process, but can also give cropping and editing functionalities with image optimization powered with Doka 💎

​​Parent & Children issues in React

🤔How to pass data to children in React?

Anyone who is familiar with React development even lightly would easily answer this one, telling you "Oh, well thats what props are for, so in you parent component just pass it over to a child"

...
return (
<Child importantInfo = {this.importantInfo}>
)
...


And obviously teach the child to use this data and present somewhere in your frontend.

However, thats 'easy-peasy' you will say.
I agree.

The more interesting question is how to let the child pass data to the parent. I have seen many answering this question in a form "well, you can't really, because React is doing it only one-way", this including some answers on stackoverflow. Some even say to rewrite your structure so that only your parent send stuff, not other way around.

However, the reality is that we quite often have scenarios where we need to pass data from children to parent or from child to child etc.

I kept doing it through callbacks and acessing it via children.

And finally managed to find a really well explained article on medium that deserves your claps. After a 3 min read, you will find that the unusual child-parent communication can be done in the following way:

//Parent Component
<Child callbackFromParent={this.myCallback}>

and in your child component have a function something like tellDad = () => {this.props.callbackFromParent(this.responseToDad)}

Can't be easier!

Full article - https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

P.S. You can clap up to 50 times, just hold the clap button.

By the way, if you haven't checked yet - here is the list of main changes in webpack 5

​​App magic

If you also have friends who think creating apps or learning programming is tough - share this one.

Glideapps - basically a magic compiler that creates a simple app from your Google docs. Simple, but can also let you use things like commenting.

Also 2 min of their must watch YouTube tutorial.

Turns out this gradient is called - Sublime Vivid.

Find other names and nice gradients - https://uigradients.com/#SublimeVivid

​​Another React insight from one of my favourite writers (someone give him an oscar).

Why using array.push in React states will get you in troubles one day and how to do it the right way.

I will add one tiny comment here. If you are like me and prefer to create tons of reusable components where communication between each other is vital - try not to use data that is likely to affect updating child components in global arrays, do it via states. This will help you to avoid re-rendering issues and using componentWillReceiveProps, which is actually unsafe.

Why it unsafe to use it from last year - 2 min

The Oscar article on how to manage React states with arrays - 9 min

Good morning☕

Start the day right with music for programming🔥

​​The Power Of CSS - Keith Clark experiment.

Sometimes CSS can impress you with how powerful it can be. This is an example of CSS powered 3D environment, where geometry is created with HTML elements and CSS transforms.

Textures and Lightmaps are done with layering multiple background-images and CSS blend modes for coloring.

This person also have other experiments in web (like VR).

​​Shards React

When you can’t figure out the best design and UI for a new ERP or a dashboard that you building, go with this one. Looks pretty slick and the free version covers enough to make your life a bit easier.

JS download priority in Chrome

By the way, one of our subscribers launched a pretty cool thing - https://unread.it/n/frontend

It collects all the nicest reddit stuff and that link is frontend specific

Might be of interest to some of you (especially if you liked a few previous posts)

When someone tells me gradient buttons are not cool anymore, I send them this

And then this one, specifying thats what they normally mean by "not cool"

In fact, I am in natural love with this kind of blurry glowing effect

Thank you fb for some nice advertising

For those, who keep asking me how the previous effect can be achieved with pure CSS.

Link

Meanwhile, the channel naturally got to 4.6k, welcome to all the new people👏

Websites can look like movie intro sometimes 🔥

Oh, okay 🤦‍♂️