TheFrontEndπŸ”₯
10.6K subscribers
275 photos
56 videos
8 files
532 links
πŸ“ Articles
πŸ—ž News
πŸ‘“ Tutorials
πŸ€” UI/UX thoughts

on front endπŸ’‘ mobileπŸ“± and web dev πŸ–₯

Admin: @masant1
Download Telegram
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πŸ”₯
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 πŸ˜‚
This media is not supported in your browser
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
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πŸ˜‰
This media is not supported in your browser
VIEW IN TELEGRAM
​​As a developer, you always have to deal with conflicting information. JS is better than PHP, Vue is cooler than React, GraphQL over REST etc.

But its crucial to be able to critically review this kind of information and strategically apply it to your specific case.

Which is why I want to give you a nice challenge today. I'll share 2 good reading materials and let you make a decision, which one is better for most of your work.

☝️The first one called "Progressive Web Apps - the future of mobile web". Its actually a free book with support from Google , Microsoft and Awwwards. Check it out

✌️ The second reading material has a name "You need neither PWA nor AMP to make your website load fast" and discusses a topic from a slightly different perspective - link

Feel free to throw this post into Saved Messages and read those when you are in the bus or a train, at least thats what I normally do.

As a side note, I am openning comments below for you to write what kind of reading material are you most interested in. Tutorials on specific languages or frameworks, nice explanations on programming concepts, what to read when you just starting to learn coding etc, sky is not even a limit in this case. Share your thoughts.
​​Weekends are over, time to get back to reading/learning. Today we go through CSS for hackers or A timing attack with CSS selectors and JS

πŸ’‘Quote of the day:

Breaking stuff is bad, but understanding how it can be broken can prevent it in the future.

-Just made it up, free to use, no copyrightπŸ˜‚
JSX is a syntactic sugar, which is a good thing.

A good article explains behind the scenes for JSX, how it works, what gets translated to virtual & real DOM.

Still think mixing HTML and JS is ugly? Fine, the article is for you.
​​What do you think happens when you call setState in a component?

β˜•οΈ Read time: 8 min
This media is not supported in your browser
VIEW IN TELEGRAM
If you ever thought that it would be good to properly learn JS, the time has come.

http://jstherightway.org - it covers it all from where JS is coming from all the way to linting, game engines, design patterns, libraries etc. Its like REALLY elaborated (and freeπŸ€·β€β™‚).
Modern backend developer

Or how to become one.

πŸ‘“Read time: 8 min