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
Re the previous question. You are the smartest audience, can't add anything here.

The full answer and explanation:

The unary plus tries to convert an operand to a number. true is 1, and false is 0.

So, 1 and false is the correct answer

The string 'Lydia' is a truthy value. What we're actually asking, is "is this truthy value falsy?". This returns false.


If you think that was too easy, and want more, then go check the full list of questions
Make advertisers cry

If you are like me and don't support the fact that some companies track you like monsters (knowing more than your mom does), then there is a really cool thing that can make their life miserable πŸ˜€

Mozilla recently launched a service that will open 100 tabs for you, moving your advertising profile to the one you select. Currently, you can become either a rich guy, influencer or a Armageddon paranoic.

Do note that your real advertising profile will be replaced and you might be getting info on where to find the nearest shelter and how to get your food survive a few years underground.

No mobile support through (makes sense).

https://trackthis.link/

Also, if you haven't thought of this yet, let me just tell you that Firefox and Brave are equally good browsers that are not making money mainly on advertisement and collecting user's data. The last one even pays you for viewing ads.
If you want to challenge yourself and try everything negative that bad UX can bring, try this one. Only for educative purposes.

Please never ever follow anything you see there.

https://userinyerface.com

PS I finished it in 6 minutes. Was tough.
​​For those, who want to understand animation.
​​In addition to the previous one. Shared by @arlevarle.
This media is not supported in your browser
VIEW IN TELEGRAM
Telegram now supports animated stickers. If anyone creates their own and they are good, let me know - i will share them with the community.
Await for loop

One of our subscribers (@czjiyomo) wrote an interesting article on how to make loops perform asynchronously.

Worth a read

Note from me: if you didn't know, you can like (clap) for posts on medium up to 50 times, all you need is just hold the clap button.
In addition to cool animated stickers what I really like about telegram is good quality content channels.

There are literally 3 channels that I constantly read and hold unmuted (amongst around 40). One of them is @perspectiveIX - this is all I need for keeping myself up to date with all the media and tech news.

Definitely check it out if you are not yet subscribed (somehow). And have a closer look at their last post.
​​CSS Custom properties or Sass variables?

Such a common topic for debate nowadays.

Interesting arguments here
Almost a thousand people thought it's an interesting topic for a vote.

It is a very sentimental thing indeed. While dark mode is cool and trendy (even telegram ban design competitions in dark mode as they typically look better), there are quite a few people, who support light theme. Generally, the argument I hear is that it's easier and better for reading (not quite true though, it is mostly just what you used to and the type of app - think of Excel in dark modeπŸ€·β€β™‚).

Discord is a great example. They launched their messenger in a dark mode by default. Yet there were people, who were complaining and made discord support light theme.

Now nearly everyone joke around about that (even discord itself).

Here is proof with some memes on discord light theme.
All you need to know about CORS and one of the most typical errors when you work with external APIs.

The article also explains the difference between "Client" and "Browser" as well as why there are such restrictions in JS while its so much simpler in Python or Java.

Article here
​​And that's how you can show that πŸ—Ώ cultural and historical things can be trendy πŸ”₯
​​QUIZ TIME

What would the following statement return in JavaScript:

['1', '7', '11'].map(parseInt)
The answer to the previous quiz is [1, NaN, 3] and not what most thought [1, 7, 11] - although it does seems obvious for some.

Congrats to 123 people, who got it rightπŸ₯³πŸ‘.

To understand the correct answer, I invite you to read this as it explains it pretty well.

For lazy ones: just scroll to the end pf the article
CSS over JS

It's so tempting sometimes to quickly make something on the web work with JS.

I recently had to re-create dynamic navbar that has animated hamburger, underline nav items on hover (and 'unhover') and change color based on scroll.

From the above only the last part required JS to track scroll value and change class of the element. Everything else can be fully done with pure CSS (but is it actually better this way?).

I used to have a theory that if I can do something with CSS, I better do it this way (although sometimes I can make it quicker with JS ).

Turns out there are certain scenarios where CSS is better (e.g. animation) or JS (e.g. interaction). Looks like this can be quite a hot debate.

I found this short article having a reasonable explanation on the topic.
This media is not supported in your browser
VIEW IN TELEGRAM
Well, since there are 6.1k of us, I want to gather some collective intelligence.

I am trying to create a "similar to live photo" effect on a web page. In other words, I have 6+ beautiful components and want them to go live on hover.

What do you think would be the best (nicest & fastest) solution (I tried all of them, will share my insights later on).

1. Use <img> tags and gifs with CSS
2. Use <video> tags with JS
3. Use background-url property with JS
4. Use Apple's Live Photo API

For videos the files are either .mov .mp4 or .avi

Let the voting begins (below)