​​How to get required DOM node from a browser

Cool trick to easily find the node that you are looking for.

🔥 Select element in the Elements tab

🔥In console simply write $0

🔥 You can also find parent element and $_ gives you the last expression

Found a service that creates a photo from your code snippet. Thought its pretty funny 🤷‍♂

Check it - http://codephoto.ru

noshit.xyz - a list of free design resources for you next project 🔥

Shared by our subscriber @miguelms

A/B testing is no good?🤔

Interesting article on pitfalls of running A/B tests (if you have never heard of them then its just the right time).

The outcome is simple - Don't use things just for the sake of it or because everyone do that. Apply critical thinking to your specific case.

🕶️ Read time: 4 min

How to learn Vue in 2018

Just nice before the year end. Vue is one of those things that has a strong potential to position itself in the future as the leading JS framework (sorry React 🤷‍♂)

This is the recipe on what to do.

​​Why trying to have a 'perfect code' can actually be a bad thing

Read the discussion and answer here

Shared by @Dereotu

​Finally, React question for you!

(Testing a new Quiz software, it gives you the correct answer and explanation right away)

What happens when the following render() method executes?

Answers:

👌🏻 - Displays the list of languages in the array
☝🏻 - Error. Cannot use direct JavaScript code in JSX
✌🏻 - Displays nothing
🤟🏻 - Error. Should be replaced with a for..loop for correct output

How AI can improve web development in 2019

Nice article on how some of the trendy areas can make our life easier in a (very) near future.

👓 Read time: 6 min

​​By the way, adding to the previous post, I want to recommend you another good quality channel as it is likely to cover your interest.

Although AI and Deep learning usually treated as a very complex areas, I believe it can be beautiful and fascinating at the same time.

There is a small channel with triggering name @loss_function_porn that nicely proves it.

It covers latest research in AI and promotes it with a very short, eye-catching gifs. The guy does a good job and is definitely worth your attention.

Give it a shot🔥

#news

Microsoft finally updated their Office logos. Looks much better now.

👓Read: 5 min

If you are feeling old-school, you might like it 🔥

​​​​Quiz Results:

👌🏻: 115 peeps. (68.86%)
☝🏻: 16 peeps. (9.58%)
✌🏻: 15 peeps. (8.98%)
🤟🏻: 21 peeps. (12.57%)

Total: 167 peeps.

Updated 2018-11-30 02:25:06 UTC

🔥🔥🔥
8 people get extra points for noticing that the quiz had none correct answers. The current snippet will render 'it' 3 times.

To make 👌 answer correct, we need to have

{langs.map(it => <p>{it}</p>)}

Fucking const

Still thinking you must use const when it should be unchanged.

Have a read then.

Meanwhile, we finally got our community to 4K🔥

Want to say Thank You to every single one of you for keeping engaged and for all the nice words that you sent me during this 6 months. This is what truly motivates and keep this channel alive.

As a giving back, I want to understand you better and get to know what do you want to see in the channel in the future! I encourage you to vote as this will help us shape the content and make it more relevant for everyone (not just stuff that interests me personally).

🗞️ IT news
👓 Tutorials and Reading material
🔥 Nice UI and UX
🚀 Tricks and Tips
🤓 More tech stuff
💡 Keep it as it is now

If there is something else - just dm me personally @masant1

Thank you all again and have an awesome day ahead!

​​New CSS property scroll-snap allow you to easily create well-controlled scroll experience for your users. No JavaScript or plugins needed. Plain CSS!

Also works great on mobile devices.

A few examples

​​👓 Tutorials and Reading material

Why Do We Write super(props)?

I remember when I asked myself "Ah, what do I even write this:"
constructor (props) {
super(props);
}

It felt like I read somewhere "Its how you do it, its not gonna work otherwise" and then as usual you get used to do it without even realising the real need apart from "well, it probably just to use something from the parent". Thats why we use super in JS, isn't it?

Great to finally get a professional explain this. Especially good that the guy is so close to React development. Thanks, Dan Abramov.

I suggest you also have a read

On a side note, I think it will be nice to now split some of the posts in categories that you vote for in this post. Might even create stickers for that one day 😂

Great UX for a simple to - do app. Created with After Effects. Which should answer your main question 😂

And yes, collated a few stickers to categorise some of the posts in the channel, what do you think (vote at sticker)?

The plan is to split some posts so it can be easily categorised, if there are several posts under one category e.g. 👓 Tutorials and Reading material, then there will be only one sticker at the top and then articles. Might help to navigate a bit easier as I know some of you don't open telegram every single day.

Someone has very correctly pointed out a question on those UI - "thats cool, but how do you do those", which is why I think it's fair to give you a bit more practical explantation.

Most of the coolest ones I've seen was done in AE with motion graphics and other fancy words. Some a bit more complex, some can be done in like 30 min with very basic AE experience.

Sharing a video on how this stuff can be done (🎬 30 min).

Apart from being cool and causing a "Wow effect" from the client's side and "Oh fuck effect" from your developers, it can also be a nice visual for web site or during presentation.

I do think though that if you goal is to create an app/service in a limited timeframe - spending much time in AE is not reasonable enough. Maybe one-two screens, but definitely not the whole app. The prototyping tools like Sketch, Figma, Framer are much better for that.

Enjoy 🔥

Continuing on design, there has been an Adobe MAX 2018 conference recently, where they provided a sneak peek onto some cool projects within algorithmic design.

The one I particularly loved and all designers or typographists here will surely appreciate is Project Fontphoria.

It simply can take your photo with, say, graffiti and by analysing all symbols on the picture, easily create a font from it and render it in live.

True magic🔥

As developers, I am sure you have also done a bit of design and this thing truly saves a lot of time. I mean, you can technically become a designer tomorrow with that😂

One more sneak 👀 or let's switch from design to programming👨‍💻 already?

Alright, I'll throw another sneak peek for you.

Moving Stills - a one-button software that transforms your static photos into #CoolMovingLikeFacebook 3D ones.

The AI there does a good job and saves you quite some time for achieving the same effect in AE.

The one I really liked is the fact that you can import the whole album and just create a pretty cool slide show that looks more like a short video clips than simple Ken Burns effect.

Thats it for this week's design stuff, programming articles coming up tomorrow😉