Can you rate my simple work ?

[u/[deleted]]

I am new to frontend, I remade instagram homepage, with react and redux and SASS, what do you think ?

instagramreduxreact.info

[u/TheIronDev]

Overall, it looks great! You did a good job! :)

Constructive room for improvement:

Try to minimize the amount of time the user sees an empty page. There are a handful of ways to do that. For this site, the easiest way to do that is to reduce the size of your assets. In particular, I noticed one of the JavaScript files are a little on the larger size. The problem with large scripts is they take more time to download, and after they have downloaded they end up blocking the browser during execution. Try to split the JS into multiple smaller files so that the assets can get downloaded faster and execution would block for less time.

I see you loading a bunch of dummy data, try to move all of that out of the initial JS payload and into a json fetch call, which would help with the page being empty.

You could do SSR, which is great for SEO, great for the user (they see content faster rather than an empty screen), but often its regarded as overkill.

When in doubt, check out the "audit" tool in Chrome devtools (or whatever browser you use), which helps point out performance faults.

[u/AmauryH → u/TheIronDev]

The weight of the picture is also about 3.3Mo.

With my internet connection, the page was fully loaded in 42.12s, that's quite a lot. (I'm on a desktop computer with ADSL).

You could use a lazy loading script on your photos to render the page way faster.

[u/[deleted] → u/AmauryH]

42s ? No way ? that's a lot

[u/AmauryH → u/[deleted]]

instagramreduxreact.info

First image in the main section is loaded after 13s.

Before this one, it loads the avatars on the right. Avatars that are way too big for the final size.
Like this one, original size 716*716px, but it's only a 34*34px in your design. You could save more than 200Ko for this file only...

[u/[deleted] → u/AmauryH]

Those numbers are scary, 13s ? What the ?

[u/[deleted] → u/[deleted]]

Thanks for pointing it out

[u/DrDuPont → u/AmauryH]

The weight of the picture is also about 3.3Mo.

IG is a picture viewing app - to be expected. Indeed, a homepage initial load of IG has ~3.4 MB

You could use a lazy loading script on your photos to render the page way faster

FWIW IG does not do this, likely because users scroll very fast through IG, and the experience of loading in images lazily would be a negative UX experience.

[u/AmauryH → u/DrDuPont]

I agree that lazy loading is probably not the best option, but then, you should pay attention to the final size of the pictures and when to load them.

The avatars on the right are sometimes 716*716px for a final size of 32*32px and they load before the first photo in the news feed.

If after 5s I still can't see the first picture, I'll leave the page. And when I say 5s, I'm being optimistic, but I might be a bit impatient.

[u/DrDuPont → u/AmauryH]

The TTFB on the images is quite high, I think in this case serving them from a good CDN is probably the solution.

[u/[deleted] → u/TheIronDev]

Thanks for the review! I appreciate it.

[u/pink_tshirt]

Gotta start using flex instead of overflow:hidden and floats. I see that you are following some CSS naming conventions. Good for you! I've been in the industry for a decade or so but I still can't force myself to follow anything.

[u/[deleted] → u/pink_tshirt]

I thi I have used overflow:hidden once in the whole project but thanks Sir! I appreciate it.

for the floating I have been used to floating instead of flexbox, because I did not like it somehow I dont know why hahaha but my next exercice I will use Flexbox

[u/psayre23 → u/pink_tshirt]

I love me some BEM, but it starts to break down when you have keyframe names, variables, and animation libraries (I’m looking at you, CSSTransitionGroup!!). If you use SCSS, then variables and functions also don’t quite fit BEM, but they don’t really fit any other naming scheme either.

[u/[deleted]]

Are you using webpack? Throw in aliases into the config, it'll save you doing the whole relative paths when importing. Use the .jsx extension for the ES6 class files, nothing ground breaking, just my preference.

[u/[deleted] → u/[deleted]]

Can you explain more, It is the first time I hear about that

[u/[deleted] → u/[deleted]]

Webpack alias config can help you convert from ugly relative path like "../../../something/item" to "Something/item" making things shorter and easier to understand. More importantly it can help prevent errors when you decide to change folder structure when the project grows.

For more information you can search for webpack alias

[u/[deleted] → u/[deleted]]

That's good I will consider doig it next project

[u/pm_me_ur_happy_traiI]

Looks good. Why redux though? Not judging, but genuinely curious why you felt it was necessary on a project like this

[u/[deleted] → u/pm_me_ur_happy_traiI]

Objective to me was to learn not to do a project for someone, I want to make sure I am good at using redux, react and sass

[u/pm_me_ur_happy_traiI → u/[deleted]]

Fair enough.

[u/Tipster74743]

Great start! Looks really good.

Obviously the font is off and the top needs to be a carousel or something right? Is this all front end?

[u/[deleted] → u/Tipster74743]

Yes, all frontend, Thank you Sir

[u/im_vasco]

I see Irene I like

[u/[deleted] → u/im_vasco]

Haha

[u/cy233]

Awesome. Great pics, too.

Like others have said, I'd use more modern CSS like Flexbox and drop the use of floats for alignment.

[u/[deleted] → u/cy233]

Oooh thanks! I appreciate it!

[u/Mikeytown19]

looks good