DEV Community: sasasasasmmm

How we achieved 1000 User in one Month

sasasasasmmm — Tue, 23 Jun 2020 18:33:19 +0000

snipbits was started at the end of Mai (last Month), Here are the most useful things I learned:
1- SEO is superpower few devs have
2- post's title is as important as the content
3- Building a blog is like building a product. You can't just say, "I'm my own user" and expect what's interesting to you will be interesting to them. A combination of SEO + reader psychology is the key to writing what people want to read and share.
4- people do use social sharing buttons (thanks for sharing our Blog Posts with your friends )
5- Updating old posts is more efficient than writing new ones
6- the number of posts is still important (most of the traffic is generated by only 2 posts)

Finally thanks for visiting https://www.snipbits.dev/ and sharing our articles with your friends

Build a toggle Component with reactjs and hooks

sasasasasmmm — Sat, 30 May 2020 11:13:24 +0000

https://www.snipbits.dev/react-toggle-component

Async await Functions in Javascript

sasasasasmmm — Thu, 28 May 2020 14:32:40 +0000

https://www.snipbits.dev/js-async-await

using the cache api of the browser

sasasasasmmm — Wed, 27 May 2020 16:17:57 +0000

https://www.snipbits.dev/cache-api-javascript

How to detect the Browser window Size with Hooks

sasasasasmmm — Tue, 26 May 2020 19:21:25 +0000

https://www.snipbits.dev/windowsize-reactjs

Methods to Clone an Array in JS

sasasasasmmm — Sat, 16 May 2020 12:48:23 +0000

https://www.snipbits.dev/js-clone-array

monitoring State with Usehover

sasasasasmmm — Tue, 12 May 2020 13:36:58 +0000

monitor the hover state of any element that we attach a ref to !

https://codesandbox.io/s/adoring-currying-gc023

Fetch in Reactjs

sasasasasmmm — Sun, 10 May 2020 12:00:57 +0000

A hook that implements fetch in a declarative manner.

Create a custom hook that takes a url and options.
Use the React.useState() hook to initialize the response and error state variables.
Use the React.useEffect() hook to anychronously call fetch() and update the state variables accordingly.
Return an object containting the response and error state variables.

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);

  return { response, error };
};

//Example
const ImageFetch = (props) => {
  const res = useFetch("https://dog.ceo/api/breeds/image/random", {});
  if (!res.response) {
    return <div>Loading...</div>;
  }
  const imageUrl = res.response.message;
  return (
    <div>
      <img src={imageUrl} alt="avatar" width={400} height="auto" />
    </div>
  );
};

ReactDOM.render(<ImageFetch />, document.getElementById("root"));

Live Demo

https://codesandbox.io/s/xenodochial-wind-z2djq?file=/src/index.js

More Code Snippets

https://www.snipbits.dev/