DEV Community

Cover image for Best Resources For Web Developers ðŸ’ŧ [HTML + CSS + JavaScript]

Best Resources For Web Developers ðŸ’ŧ [HTML + CSS + JavaScript]

ishrat on November 08, 2023

Here is a list of 24 valuable resources for web developers, covering HTML, CSS, and JavaScript. Keep in mind that there may be newer res...
Collapse
 
raulferreirasilva profile image
Raul Ferreira

wow, what an explosion of relevant content, I knew some, but some were great finds, thank you very much for creating an article with links and a brief explanation, thank you very much for sharing your knowledge ðŸĶĪ.

Collapse
 
pinky057 profile image
ishrat

my pleasure :)

Collapse
 
adam profile image
Adam Marsden

I'd love to recommend my newsletter too, Unicorn Club ðŸĶ„

5-minute bite-sized weekly newsletter for design-savvy front-end devs and code-loving UX/UI designers. Filled with the best hand-picked resources. 100% free.

Subscribe for free

Collapse
 
pinky057 profile image
ishrat

I will surely check it! :)

Collapse
 
7okesh profile image
Lokesh Prajapati

Hello, I'm fresher and I had created a dynamic react app with ms sql in that I'm facing issue as after production build it's looks good but after refreshing or reloading the same page getting error as 'can't get /login' can suggest some solution Thank you!

Collapse
 
pinky057 profile image
ishrat

It seems like you're facing an issue with routing in your React app, particularly when reloading the page. The error message "can't get /login" suggests that the server is unable to find a route for the "/login" path.

Here are a few steps you can take to troubleshoot and potentially resolve the issue:

  1. Check Your Server Configuration:
    Ensure that your server (backend) is correctly configured to handle routing and is set up to serve the React app correctly. Make sure that it can handle routes like "/login" and that it's not expecting a physical file at that location.

  2. Use HashRouter instead of BrowserRouter:
    If you are using BrowserRouter from react-router-dom, try switching to HashRouter. HashRouter uses the hash portion of the URL (e.g., http://example.com/#/login) to maintain the application state. This can help with page reloads, as the part after the hash is typically handled client-side.

    import { HashRouter as Router, Route, Switch } from 'react-router-dom';
    
    // ...
    
    ReactDOM.render(
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          {/* other routes */}
        </Switch>
      </Router>,
      document.getElementById('root')
    );
    
  3. Set up Proper Routing on the Server:
    Ensure that your server is configured to serve the same index.html file for any route. This is known as a catch-all or wildcard route. In many server frameworks, you can achieve this by configuring your server to always return the index.html file for any route. This ensures that the React app takes over routing on the client-side.

  4. Check Your package.json for homepage Configuration:
    If you have set the "homepage" field in your package.json, make sure it is correctly set, especially if your app is not deployed at the root of the domain.

    {
      "homepage": "https://yourdomain.com/your-app",
      // ...
    }
    
  5. Check for Typos and Case Sensitivity:
    Ensure that the paths specified in your React Router components match the paths expected by the server, and that they are correctly spelled and cased.

After making these checks, you should be able to identify and resolve the issue. If the problem persists, you may need to provide more details about your project structure, server setup, and routing configuration for further assistance.

Collapse
 
ghadzhigeorgiev profile image
Georgi Hadzhigeorgiev

You may add cssgridgarden.com/ - the CSS Grid game counterpart of Flexbox Froggy :)

Collapse
 
pinky057 profile image
ishrat

Thanks for the info !! :)

Collapse
 
hatimbata profile image
hatim-bata

very helpful, thnx

Collapse
 
pinky057 profile image
ishrat

my pleasure! :)

Collapse
 
pxlmastrxd profile image
Pxlmastr • Edited

Great post, I have this bookmarked now in case if I need it!

Collapse
 
pinky057 profile image
ishrat

Glad to hear that!

Collapse
 
jack94507501 profile image
Jack

I love posts like this. Thanks, I'll definitely use it.

Collapse
 
pinky057 profile image
ishrat

Good to hear that !!! :)

Collapse
 
mikiciro profile image
Michele

Thanks! Very useful for a noob like me :P

Collapse
 
pinky057 profile image
ishrat

my pleasure :)

Collapse
 
mzota profile image
Emmanuel Mzota

This is helpful, thank you

Collapse
 
pinky057 profile image
ishrat

my pleasure :)

Collapse
 
sreno77 profile image
Scott Reno

Great list!

Collapse
 
pinky057 profile image
ishrat

Thanks !!

Collapse
 
codeinvasion profile image
Code Invasion

Wonderful list ðŸ”ĨðŸ”Ĩ

Collapse
 
pinky057 profile image
ishrat

Thanks !!!

Collapse
 
pinky057 profile image
ishrat

Yeah, thats true.
MDN web docs are quite handy for js! And w3schools is a good one for starting the journey.