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
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.
Hologram - wrote a while ago on VR in web. Found this desktop app to practice creating webVR in a pretty fun way (no coding experience required)
​​Time for some 10/10 goodness.

Have recently been developing a web app that required to follow the styling from another corporate tool, which I didn't have access to.

Found an amazing tool - https://getcssscan.com/ that allow you to hover on any element on the page and copy all their styles with just one click. That did save me a good amount of time, so might help you in your developing aspirations.

Check the video to see what I am talking about.

PS the guy did a good job in developing something so trivial, but very useful. Also, entrepreneurial lesson on setting up a price - you can pay as much as you want with a bottom line of 4.5$, the author claimed that many paid him 10$ and 20$ when realised the benefit of a service. So if you are developing something and not too sure how much to charge, let the audience decide, this is a pretty common strategy in some of the new startups. If your service turns out to be useful, many will pay you more than you expect👍 .
I normally don't post on Sundays, so you can have some time off with your friends and family, but today is an important exception.

A very close person has a birthday today and as a coincidence she also has a small telegram channel (which is one of 4 channels I read on daily basis). Its about traveling and is really good for those, who want to travel or thought of bringing freelancing away from home.

My 🇷🇺russian-speaking audience, please have a look - @tralover and those who don't speak Russian, just visit the channel and throw a ♥️ to the last post there, you have a chance to make someone happy with just 1 click😉

PS there is something cool coming up, by the way, so stay tuned.

t.me/tralover
​​Guten Morgen all !

Quick quizz again to start off.

Java this time:

public class Testing {
public static void main(String[] args){

 // \u000d System.out.println("I love coffee");

     }
}


Have a great day☀️, correct answer tomorrow morning.
​​Answer

The correct one is - 'I love coffee', surprisingly.

The reason is pretty interesting, the Java compiler parses the unicode character \u000d as a new line and the code gets transformed into:

\\ \u000d
System.out.println("I love coffee")

Have an awesome day
​​You could do it with CSS

Fancy tool to create cool border-radius effect - link

👓Read about it: 5 min
​​Sharing with you translated template for calculating mobile app cost. Feel free to copy it, change your hourly rate at the bottom and add/remove rows depending on what you are developing.

It is important to be able to justify the "typically high" costs for your development and provide client with approximate timeframe.

Google Docs
​​Why you probably shouldn't use infinite scrolling?

Good article on why sometimes infinite scroll can be a bad UX decision.

👓Read Time: 7 min
Ever wondered why beautiful people, things, interfaces make you like it?

Really, sometimes well designed UX seems to be good enough. Yet nice visuals can actually trigger all sort of things in your brains and make you happy.

Evening short video on why and how

be happy
​​What comes first 🥚or 🐔?
The debate is over.

If you still not sure - read about sort
JAVA vs PHP in startups.

Pretty decent article, although I believe Python or JS with any modern framework coupled with something like nodeJS can be a much better choice for a startup.
​​Remember the post on creating instagram clone?

If not - search for instagram in the channel:)

There is a cool thing I found within this area.

Pixels.js - an image filtering library that you can easily add to your project to let your users apply filters without the need to develop those from scratch.

PS regarding the previous post, I found that a lot of you are very strong in protecting 'your favourite language'. The reality however is that it mostly depends on the architecture and design. You can create very good, fast, stable apps with php, java, js, python, ruby, C. It all depends on the preference and confidence of the developers.

So the takeaway is that if you are really good with PROGRAMMING_LANGUAGE_NAME - then use it and try to find constructive arguments for your clients why you should use it.
​​Random character transition - cool text effect for your next project🔥.
Good way to find CSS tricks by spending an incredibly low amount of time each day.

Shared by @IMbooz
​​Typewriter.js - native typewriter effect library that can add a bit of interaction to your app.

The usage can be as simple as:

const writer = new Typewriter(target, {
loop: true,
typeColor: 'blue'
})

writer
.type('A simple syntax makes it easy.')
.rest(500)
.start()
​​Have you seen that 3D photo Facebook effect?

If you ever wondered how it was implemented from engineering perspective have a 👓 4 min read

Pretty cool, despite the fact that you could always do that in AE with something like this, which looks way better or even download Fyuse app that can do the same effect from your phone.

Still cudos to FB, better late than never🤷‍♂️

Oh yes, throwing an instant view below as well
​​It's Friday! And it means time for some good quality stuff.

You all probably have heard of such UX technique as skeleton screens (some people refer to it as a splash screen, but its actually different).

Yep, you are right, that what Google, Linkedin, YouTube and a ton of other services is using.

There is an amazing article (which looks like a dissertation research to me).

Everything you need to know about Skeleton screens.

🕶️ Read time: 14 min (at least)

Main points I want to highlight:

☝️ 60% of users think that animated skeletons are faster

☝️65% treat waving animation faster than pulsing one

☝️ Majority think that left to right, slow animation results in a faster load

☝️gradual content loading is the best and something that distinguish skeleton screens from splash screen

☝️ If you are loading photos - good strategy is to use dominant color from the photo, rather than typical light grey design

Fo React devs - there is a decent tool that can help you save time designing it from scratch.

Have a great Friday 🔥
This media is not supported in your browser
VIEW IN TELEGRAM
And if you are here just for nice design insipration - here is a cool effect for utilising notch in iPhone X in 'pull to refresh'. Probably looks even better on Pixel 3 XL considering the size🤷‍♂️