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
​​There is a trend in web design πŸ–₯️ that started last year and has been reinforced since then. Its the usage of geometric shapes to create an interactive three-dimensional effect.

Apparently, they call it Low Poly and it transferred from computer graphics and 3D modeling. And I see it now in 80% blockchain related projects πŸ˜‚

☝️It does look cool though for an average user, but I suggest you also think about the slow machines that will have to load and process your animations.

β˜• Good morning people and enjoy your day. Its not too long till another Friday, keep up ✊

PS I have just realised that integrated media into long text can also be animated, so many cool gifs that you've missed because of thisπŸ˜’
​​Boys and girls, I am sure we have a very smart, engaged audience here.

What do you think of setting up a small, cosy group to share project ideas and vote for the ones that deserves attention via the bot?

This can help us to expand the horizons, communicate a bit and who knows maybe even take on developing something together πŸ’‘

By sharing problems that we face in our daily lives and want to solve we can bring a bit more attention to it.

If that's something you think would be cool - vote for πŸ”₯

If that's something shitty and noone would need it vote for πŸ’©

Gathering interest is the main one at this stage.
There is a cool thing called Electron that allow you to build cross platform desktop apps with just HTML, CSS and JS

Still think web dev has no potential? You can actually build everything with it now, and with the immersion of cloud powering it is yet to grow further.

Anyways, not so long time ago guys introduces Electron fiddle (like CodePen, JSFiddle but for Electron). You can check it out, play with it, have a look at the snippets from other developers - can really help you if you were planning to created desktop software. Enjoy!

Read time: awkwardly little
​​Wow, just saw a cool service shipstreams.com with a list of makers that stream how they do their work. It is best to learn from the best and you can easily see how others develop or design stuff. There is also a link to their Twitch profiles.

On a side note, I found a cool tutorial to create glitch effect in AE (although on youtube). Recorded and pushed to gif of that tutorial and what kind of effects you can create.

Isn't it the best way to spend your Friday evening after a few pints of Peroni πŸ˜ƒ ?
​​JS Destructuring

Take as an example this code:

render() {
return(
<div className={this.props.className}>
{
this.props.isLoading
? 'Loading...'
: this.props.children
}
</div>
);
}


There are several working operations this.props, which actually slow down your program (a little, but still). And also it creates visual mess (also e.g. in React nearly everyone write it this way).

One way to improve it could be:

render() {
const { className, isLoading, children } = this.props;
return(
<div className={className}>
{isLoading ? 'Loading...' : children}
</div>
);
}


Just one line can make your code easier to read. Consider if you have 10 props.

Benefits:
πŸ‘ Faster
πŸ‘ Cleaner, more understandable code
πŸ‘ Lower probability for errors (especially typos)

If you like this quick posts, give me some love ❀
If not, then monkey πŸ™ˆ
​​Good morning β˜•

Found this new startup, which seems pretty interesting at first for those who are studying and want to enhance their remembering.

It's called Sans Forgetica and what they do is tweak the font to a less obvious one, so that your brain should remember it better.

Done by designers and behavioral scientists from RMIT uni and used principles of cognitive psychology.

While I can't claim how long the effect will last, but you are free to give it a shot. Let me know if that helps you in memorising complex CS concepts.

And this also brings a thought - if they claim it makes your brain memorise the content, how soon will someone use it for their Logo?πŸ˜‚ Tricky Marketing lesson

Check their video, there is a website in description.
Screw it, let's experiment here a bit. See if you still remember this quote from Steve at the end of the hectic Monday.

Please do vote at the end of the day only.
​​UX And HTML5: Let’s Help Users Fill In Your Mobile Form (2 parts)

Well written and nicely visualised articles on how to properly design and develop user forms. This applies to anything from login/registration to entering bank details.

☝🏻part 1
✌🏻part 2
​​Right, so I have recently worked on ubuntu machine and was surprised there was no proper GitHub clientπŸ€·β€β™‚οΈ. Did a bit of research and ended up with GitKrakenπŸ”₯ - which turned out to be even better than the default official versions I used on Windows and Mac.

Today, I received an email, suggesting that they giving out free stuff (20 Nintendo Switch, backpacks, t-shirts etc).

Anyone who uses this link to get it also jump into the draw and we can both win something.

Since it's free and I actually use it myself, I thought - why not share with the community. It is available for all OS and who knows maybe you win something.

Go get it - here and if you win please do message me, will be nice that one of us turned out to be quite lucky!
​​Some of you have asked me whether I took this photo or got it somewhere. Unfortunately I didn't study in Maastricht and found that photo + some of the other programming memes that you saw here in @thingsprogrammersdo
(they should get credited for this, shouldn't they? πŸ˜‚).

They also translate some of the stuff to Russian, so will nicely satisfy those for whom getting English jokes is a challengeπŸ€·β€β™‚οΈ)
Building websites with modern tools, but without Frameworks

This one is for those, who hate using things like React, Vue and Angular or simply can't be bothered to spend time learning it.
Good newsπŸ”₯! One guy who has pretty impressive russian IT channel, finally moved into English speaking area, bringing us good quality stuff on frontend & backend.

I promised you to share channels that I read and follow myself, so here is another one to jump at - @web_stack. The articles that he shares are all in English, however the titles are in Russian (good way to make both audiences happyπŸ˜‰).
Meanwhile, Google threw in a new Pixel πŸ”₯. Right from the start, we should avoid the "biggest notch" discussion, as there is literally no point: you leave it, if you like it - and you can hide it, if you don't.

Instead, there are 2 amazing features that I'm really glad they focused on.

☝️ Google Lens is now better integrated and can work like Shazam for photos. You see a new Venom banner in the street - it will show up the closest cinema times to book one right away; your friend is bragging about his top React skills and how he bought this new posh sunglasses? "Google Lens" it and see the prices for those glasses onlineπŸ˜‰. Really good one, in my opinion. Proper image recognition system is what can boost up evolution pretty significantly along with neural networks, AI, AR etc.

✌️ Google Top Shot - a cool feature that will take several photos all the time (although you click once) and allow you to choose the best photos from AI recommended onces. If implemented correctly, it can do two important things: decrease the quantity of fucked up photos and also save you time deleting 99 photos that were not as good as the one you used for instagram.

One thing I really love is that Google let those people, who actually worked on a product to present (not just managers). Yep, their presentation skills could be better, but at least you can actually see the excitement and passion in their eyes, since they are presenting something they built. Plus, they can answer any type of questions (both tech and non-tech).

PS and no, unfortunately Google doesn't pay me πŸ˜”
😑MEAN or πŸ’‘LAMP stacks?

Which one is better for a startup?

Especially useful for those who wanted to know more on those (a few of you asked me to post a bit on those)

⚑ Instant view as usual.

πŸ‘“ Read time: 4 min

Vote for which one you prefer.
​​Draft.js - great framework that can help you transform your boring looking <textarea> into rich, interactive component and allow your users to create more native texts without worrying about Markdown tags.
But if you are lazy to jump into nuances of Draft.js and read their documentation. There is a cool article by Siobhan Mahoney that did all the hard job for you!

πŸ•ΆRead time: 6 min
​​Graph.js - widgets library to make any web site social.

Probably the easiest way to add in social authentication, messages and comments to your project.
animation.gif
11.4 MB
YassπŸ”₯

Can all online shops implement it please?

Github link
How the guy with a famous name - Elliot Alderson (Mr Robot fans - yay) cracked new Donald's dating app. It was done with React Native and Firebase (which is OK), but they have hardcoded the API keys and idsπŸ˜‚ Don't do this.

And have a πŸ‘“4 min read on what you should try to avoid or at least hire competent devs if you working on such a big scale.