Day 4 of #100daysofcode: CSS and Client vs. Server

My free time on Tuesdays is usually incredibly low, so this update (along with future Tuesday updates) will be fairly short.

Client vs. Server

To quickly preface the below, the part of the project in question simply displays a “time until”…


This content originally appeared on DEV Community and was authored by Ryan Whelchel

My free time on Tuesdays is usually incredibly low, so this update (along with future Tuesday updates) will be fairly short.

Client vs. Server

To quickly preface the below, the part of the project in question simply displays a "time until" a given date and time.

I've been thinking about where to handle some computation. I have been back and forth on whether to use client or to use server. The calculation for this project is very simple; just turning a date string into a different format before displaying it to the user. No problem to let the client deal with this, right?

My question arises though because this computation is done in two instances right now. The first is when the user loads the page, a list of these times appear, and all of them are calculated by the client. The second instance is when the user saves a new event, the client immediately turns around and calculates this time remaining and displays it to the user as well.

In both instances, the client is receiving data from the server and then modifying it before displaying it. It feels wasteful, perhaps it would be better handled by the server before the data is sent? Is that still the case when saving a new event? Because in that case, you have to send an event to the server and then receive it back from the server before displaying it. Surely then it would be better off handling it on client side instead of getting a new request.

There is a benefit to requesting from the server on save however, as we can use that to refresh the times of all the other events on screen.

Is the best answer just to preprocess data before its sent up to the client, but when saving a new event the client then handles calculating that time until?

In reality, the scope of this problem is small enough such that it probably doesn't matter, but its interesting to think about how problems like this scale.

Today

Today I practiced with CSS flex-boxes and grids. I also spent quite a bit of time checking out some other CSS resources, such as Tailwind, Material UI and Animista. I'm not sure if I plan on using any of their stuff at the time, but its cool to see what else is available.

Tomorrow

Tomorrow I will be finally getting around to polishing the layout of my project. After playing around with flex-box and grid, I'm pretty confident I will be able to get to an approximation of what I want the project's layout to look like. Now I just need to draw out what I want it to look like..

What I'm Struggling on

Today I got a look at a friends site that he created as a part of a project for a different class. As they say, comparison is the thief of joy and I have to say that I'm a little awestruck at the progress he's made. Thumbing through his site, I had trouble even seeing how some of the parts would fit together. I think that's probably where a lot of my struggle comes from. It doesn't seem intuitive how some elements fit together. CSS has a much more driving role on layout than I initially realized. CSS isn't just style, its the layout its the feel. I thought most of that would be handled in React, but it seems like more and more things I'm learning about is getting lifted out of React and back onto CSS's shoulders.

Back to the books.

Thanks for reading! As usual, if you have any suggestions, I'd love to hear them.

Resources

Tailwind
CSS Tricks - A guide to Flexbox
Frontend30 - CSS Selectors Cheatsheet


This content originally appeared on DEV Community and was authored by Ryan Whelchel


Print Share Comment Cite Upload Translate Updates
APA

Ryan Whelchel | Sciencx (2021-11-09T23:18:28+00:00) Day 4 of #100daysofcode: CSS and Client vs. Server. Retrieved from https://www.scien.cx/2021/11/09/day-4-of-100daysofcode-css-and-client-vs-server/

MLA
" » Day 4 of #100daysofcode: CSS and Client vs. Server." Ryan Whelchel | Sciencx - Tuesday November 9, 2021, https://www.scien.cx/2021/11/09/day-4-of-100daysofcode-css-and-client-vs-server/
HARVARD
Ryan Whelchel | Sciencx Tuesday November 9, 2021 » Day 4 of #100daysofcode: CSS and Client vs. Server., viewed ,<https://www.scien.cx/2021/11/09/day-4-of-100daysofcode-css-and-client-vs-server/>
VANCOUVER
Ryan Whelchel | Sciencx - » Day 4 of #100daysofcode: CSS and Client vs. Server. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/09/day-4-of-100daysofcode-css-and-client-vs-server/
CHICAGO
" » Day 4 of #100daysofcode: CSS and Client vs. Server." Ryan Whelchel | Sciencx - Accessed . https://www.scien.cx/2021/11/09/day-4-of-100daysofcode-css-and-client-vs-server/
IEEE
" » Day 4 of #100daysofcode: CSS and Client vs. Server." Ryan Whelchel | Sciencx [Online]. Available: https://www.scien.cx/2021/11/09/day-4-of-100daysofcode-css-and-client-vs-server/. [Accessed: ]
rf:citation
» Day 4 of #100daysofcode: CSS and Client vs. Server | Ryan Whelchel | Sciencx | https://www.scien.cx/2021/11/09/day-4-of-100daysofcode-css-and-client-vs-server/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.