Forem: Deam

Easy social media preview card generation

Deam — Tue, 22 Oct 2019 18:16:25 +0000

Instead of creating your own image for your og:image and twitter:image meta tags, you can use a free service that takes a screenshot of your website and uses that as the image. In this case we are using webshot.deam.io. More about this service here.

Example

<head>
 <title>Webshot</title>
 <meta property="og:image" content="https://webshot.deam.io/usecrypto.xyz?width=1200&height=630">
 <meta property="twitter:image" content="https://webshot.deam.io/usecrypto.xyz?width=1200&height=630">
</head>

Result

Free website screenshot service

Deam — Tue, 22 Oct 2019 15:01:28 +0000

Hi everyone! I made a free service that screenshots websites for you and it's Open Source! The images are cached for 1 minute and it's only the first load that takes some time to process. It's fast and instant after the initial load (haven't seen better alternatives out there).

Here's the link to repository: https://github.com/deamme/webshot.
Link to service: https://webshot.deam.io/.

Since it's Open Source feel free to open PR's. There are some hacktoberfest labeled issues.

Use cases

You could use this as a preview image for your website in og:image or twitter:image meta tags (tutorial here)
Grab a screenshot of a bug in production, send the link instead of an image
Always have up to date screenshots in your portfolio

Used in

https://github.com/deamme/usecrypto (https://usecrypto.xyz/)

Credits

https://github.com/styfle/screenshot-v2

Laco hooks api and code sandbox examples

Deam — Wed, 06 Feb 2019 10:07:43 +0000

Laco is a simple and powerful state management solution for React. Powered by ideas from Redux and Unstated. For a short introduction to Laco please check out my previous post.

React just released a "minor" version (v16.8.0) which includes the long awaited hooks api. I personally think that the hooks api is a lot cleaner to write and I would recommend looking into it. Here's the official changelog blogpost for a good and brief overview.

Using Laco with with a render prop approach (the old way):

import { Store } from 'laco'
import { Subscribe } from 'laco-react'

// Creating a new store with an initial state { count: 0 }
const CounterStore = new Store({ count: 0 })

// Implementing some actions to update the store
const increment = () => CounterStore.set((state) => ({ count: state.count + 1 }))
const decrement = () => CounterStore.set((state) => ({ count: state.count - 1 }))

const Counter = () => (
  <Subscribe to={[CounterStore]}>
    {(state) => (
      <div>
        <button onClick={decrement}>-</button>
        <span>{state.count}</span>
        <button onClick={increment}>+</button>
      </div>
    )}
  </Subscribe>
)

Using Laco with the new and shiny hooks api:

import { Store } from 'laco'
import { useStore } from 'laco-react'

// Creating a new store with an initial state { count: 0 }
const CounterStore = new Store({ count: 0 })

// Implementing some actions to update the store
const increment = () => CounterStore.set(state => ({ count: state.count + 1 }))
const decrement = () => CounterStore.set(state => ({ count: state.count - 1 }))

const Counter = () => {
  const state = useStore(CounterStore) // Takes a single store
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{state.count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

useStore takes a single store but you can also import useStores which takes an array of stores. An example of useStores can be seen below.

import { Store } from 'laco'
import { useStores } from 'laco-react'

const CounterStore = new Store({ count: 0 })
const AnotherStore = new Store({ test: "hello" })

const Counter = () => {
  const [counterState, anotherState] = useStores([CounterStore, AnotherStore])
  return <div>{anotherState.test + counterState.count}</div>
}

Code sandbox examples

Code sandboxes using hooks:

Code sandboxes using render props:

Conclusion

I think the new hooks api is way better compared to the render props way of doing things since in render props you need to wrap a "Subscribe" component around your children which is a bit convoluted. Hooks api in this case is easier to read.

Redux Devtools extension and Laco

Deam — Wed, 23 Jan 2019 22:03:48 +0000

For a short introduction to Laco please check out my previous post.

Getting an overview of actions, when they are fired and what happens to the global state object can really help debug a complex and big project.

Redux Devtools is an extension that provides an user interface where you can get an overview of actions. You can even skip and jump to actions which is usually called "time travelling". You can also see the global state of the whole app and look into each store. The global state even changes when you jump between actions.

Redux Devtools works out of the box with Laco in development mode. There are just some features missing that you normally would have when using Redux. Although Laco works with the most important features such as time travel and being able to look into the global state object.

Laco is similar to Redux and operates on a global state behind the scenes. Each store has been given a unique id to the global state object which you can check out in Redux Devtools. You can also get the global state by doing:

import { Store, getGlobalState } from 'laco'

const CounterStore = new Store({ count: 0 })
const ToggleStore= new Store({ toggle: false })

getGlobalState()
// Outputs an object:
// {
//   "0": { count: 0 },
//   "1": { toggle: false },
// }

To see which actions belong to what stores we need to initialize a store with a given name like so:

import { Store } from 'laco'

const CounterStore = new Store({ count: 0 }, "CounterStore")

Otherwise you would only see the action name in the Devtools but not which stores the action changed.

To actually make a given action show up in the Devtools you also need to give it a name when calling set() on a store:

import { Store } from 'laco'

const CounterStore = new Store({ count: 0 }, "CounterStore")

// Implementing some actions to update the store
const increment = () => CounterStore.set(state => ({ count: state.count + 1 }), "Increment");
const decrement = () => CounterStore.set(state => ({ count: state.count - 1 }), "Decrement");

Since it is a string passed to the second argument of the set() method you can even provide more info if needed - it doesn't have to be a "name".

That's basically it! Below is a GIF showing the powers of Redux Devtools:

Check out the code sandbox to try it yourself. :)

Simple React state management with Laco

Deam — Mon, 21 Jan 2019 19:21:36 +0000

This is cross-post from my medium article: https://medium.com/@Deam/laco-intro-5db2077ec829. Laco is a simple and powerful state management solution for React and Inferno. Powered by ideas from Redux and Unstated.

Laco consists of three simple ideas

The first idea is the notion of a store. The store handles state and you can have multiple stores. You can create a store like so:

You can get or set a new state on your store:

The second idea is the idea of actions. An action is a function that sets a new state on a store.

The third and final idea is the idea of a Subscribe component. The Subscribe component takes an array of stores as input. The component acts like connect() for those that are familiar with Redux. The difference is that connect() is a higher order component while the Subscribe component uses render props. More on render props here.

That is the general gist of Laco. I hope you find the concepts simple and straightforward.

Conclusion

Laco is very lightweight (around 2kb minified) and is meant to make state management simpler which makes starting new projects more hassle free. Check out the GitHub repository and code sandbox examples.