teleren/devto huggingface dataset:
The Tech setup rachsmith.com - Ghost + Gatsby
Tags: development
Published: 2021-05-29 04:02:02

---
title: The Tech setup rachsmith.com - Ghost + Gatsby
published: true
date: 2021-02-21 10:55:39 UTC
tags: development
canonical_url: https://rachsmith.com/the-tech-setup-for-this-blog-ghost-gatsby/
---

## The Stack

The best way to procrastinate on writing for your new blog is to deliberate over choosing the tech stack for your new blog. Especially if you are a capable cross-stack Web Developer, as the options to choose from may as well be infinite.

I’ve been wanting to give the [Jamstack](https://jamstack.org/) a try for years now, so was hoping to find a Jamstack solution. The number one requirement was that it wouldn’t take long for me to get up and running. After doing some research I found [this blog post](https://emtr0.dev/how-to-set-up-free-jamstack-ghost-blog-heroku-gatsby-github-netlify/) that gave a step-by-step process of how to set up a blog using Ghost and Gatsby. Within an hour I had a blog up and running.

The setup is:

- A [Ghost](https://ghost.org/) (Node) backend running on a [Heroku](https://www.heroku.com/home) Dyno.
- A [Gatsby](https://www.gatsbyjs.com/) Front-End hosted on [Netlify](https://www.netlify.com/) that uses Ghost's GraphQL API to provide the blog data.

Once I completed the initial setup, I just needed to modify the React and CSS provided by [this starter theme](https://github.com/TryGhost/gatsby-starter-ghost) to make it my own. All the code for the front end [is in this repo](https://github.com/rachsmithcodes/rachsmith.com).

One of the pleasant things about this setup is that you can run it all for free. You need to pay if you want an always-on Dyno running Ghost, but I like that having a basic portfolio/blog is accessible to unemployed or Junior Developers who are short on cash.

## Drafting and editing

As I am pretty time poor at the moment, I tap a lot of my initial drafts out on my phone while the baby feeds in 10+ minute increments. Then when I have a bit of time to sit down on the MacBook, I edit and copy the final version over to Ghost.

My original workflow was:

- using [Ulysses](https://ulysses.app/) for writing
- editing for spelling and grammar in [Grammarly](https://app.grammarly.com/)
- converting to markdown and publishing on Ghost  
It felt clunky, as I would prefer to write in markdown from the start.

I have recently started a new workflow:

- I write in [iaWriter](https://ia.net/writer) (amazing)
- proof in [ProWritingAid](https://prowritingaid.com/Premium) (very promising, can handle markdown)
- publishing on Ghost
<!--kg-card-end: markdown-->
When you should use Decimal over float in Python
Tags: tutorial, beginners, python, codenewbie
Published: 2021-02-21 10:52:52


### How it began?

This week I was dealing with something that required me to store data in **AWS Dynamo** and I found something interesting which lead me to write this piece of article.

### Here is what happened?

I was trying to store float values to the *aws dynamo table* but it didn't well it raised a *Type Error* that 
**inexact** numeric for data I was trying to solve.

### Understood why (0.1+0.2) != 0.3

After a bit of googling, I came to realize that python does not store exact floating numbers but with tons of decimal other decimal precision(this has to do with the design of the language itself)

#### Here an example 

```python
>>> 1.1 + 1.3
2.4000000000000004
```

### what can we do now?

Python has got you covered, there is a built-in module called *decimal* which is built on top of float-point data types allowing you to have exactly decimal numbers

### Here an example 

```python
>>> from decimal import Decimal
>>> Decimal(0.1)
Decimal('0.1000000000000000055511151231257827021181583404541015625')
```
As we can see 0.1 in python is nothing but 0.1 with tons of decimals, to express 0.1 as 0.1 we have to pass it as string
to our Decimal function just as shown below;

```python
>>> from decimal import Decimal
>>> Decimal('0.1')
Decimal('0.1')
>>> Decimal('0.1') + Decimal('0.2') == Decimal('0.3')
True
```
As we can see now 0.1 is presented in exact values, and with this trick I was able to effictively store my float values in the aws lambda smoothly.

### Other areas to use Decimal instead of float ?

1. Accounting Application 

When you're dealing with accounting calculation which is probably going to involve calculation with decimal point use *Decimal* points instead of *float* values for more accurate and precision in your financial calculation 

2. Converting Decimal to Fraction 

When you're writing a program which in some ways do the conversion of decimal numbers to integer fraction, you don't wanna use float, it will screw you up;

Just to put it into action try converting a float value **0.35** to integer fraction

```python
>>> (0.35).as_integer_ratio()
(3152519739159347, 9007199254740992)
```
Using decimal instead 

```python
>>> Decimal('0.35').as_integer_ratio()
(7, 20)
```

Well that's all I have got for today, you can keep in touch with me on Twitter [kalebu](http://twitter.com/j_kalebu) for more tricks 

Gota any other places you think we should be using Decimal instead of float, Please share in the comment box below;

I also write an in-depth Python tutorial at [kalebujordan.dev](http://kalebujordan.dev/)
Callback function that use the state of useState() hook
Tags: todayilearned, react, reacthook
Published: 2021-02-21 10:41:04

# Callback function that use state
The callback funtion of `setInterval`, `setTimeout` and eventListener only get the initialized value of `useState` in React.

You can see the demo [here](https://codesandbox.io/s/react-hooks-counter-demo-forked-ylqiu?file=/src/index.js). The value is log by the callback of setInterval alway be zero.

We can use `useRef` to solve this problem. See more solution on [this](https://stackoverflow.com/questions/60540985/react-usestate-doesnt-update-in-window-events)

Interesting tutorial about React hooks: https://github.com/ohansemmanuel/react-hooks-cheatsheet
Any RSS/Atom fans still around? I've been playing with an idea...
Tags: rss, feeds, syndication, startup
Published: 2021-02-21 10:30:38

Hi folks
Even though it has suffered a serious decline, there are still a few of us who believe in the potential and benefits of a syndicated web.

I've been for a long time pondering on how to build a more open web based on RSS, and came up with an idea for a different kind of social network that is based on syndication (basically, adding social features on top of feeds).

So you can both import content to your "timeline" via feeds, and all your timelines are a feed that can be read elsewhere outside the network.

In case any RSS-adopters are around here, I'd love to get some more eyeballs, opinions and constructive feedback on it.
I have a demo up, which has been working for the past week: https://www.kalaksi.com

My major feature to implement now is to integrate it with RSS-bridge which will allow to import content from other sources that dont provide RSS (think your twitter/IG timeline, youtube channels, etc)

Thanks for reading :)
Capital Athena Sector 1 Noida Extension
Published: 2021-02-21 10:21:57

Capital Athena resides in Noida Extension-Greater Noida West among Noida giving a perfect selection for sensible investment. the situation of the project is one more advantage that makes it a perfect development project. Talking a lot of regarding the situation, nh- FNG Road may be a net network connecting faridabad Road, Noida Road, Greater Noida Road and DND Road.
 the situation is encircled with a varied major institutes like putative establishments, hospitals, restaurants, cafes, looking malls, clubs and resorts. several far-famed firms like HCL, IBM, Tesco, Accenture, Honeywell, Blue Star, Infosys, Siemens, Motorola and Satyam conjointly lies in an exceedingly shut proximity creating life easier for those who head to workplace.
https://www.capitalathena.co.in/
Red Hat or CentOS Linux
Published: 2021-02-21 09:50:49

It's equally easy to install Scrapy on Red Hat or other distributions (tested with
Ubuntu 14.04 Trusty Tahr - 64 bit) that use yum . All you need is the following
three lines:
sudo yum update
sudo yum -y install libxslt-devel pyOpenSSL python-lxml python-devel gcc
sudo easy_install scrapy
4 Microservices Caching Patterns at Wix
Tags: caching, microservices, performance, resilience
Published: 2021-02-21 09:37:21

Wix has a huge scale of traffic. more than 500 billion HTTP requests and more than 1.5 billion Kafka business events per day.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce1vsmm92tegm9yyutt6.png)

Caching the responses and events is critical for having the best performance and resilience for Wix’s 1500 microservices.

As traffic to your service grows, customers can face much longer loading and response times, and not return to your service. Network costs can increase and the unexpected load on your DBs can potentially cause them to fail. One of the ways you can mitigate these issues is to introduce a cache.

It will also improve reliability, by making sure some data can be returned even if aforementioned DB or 3rd party service are currently unavailable.

You can find the patterns [here](https://medium.com/wix-engineering/4-microservices-caching-patterns-at-wix-b4dfee1ae22f) on my blog.
Use SWR for a better data fetching
Tags: javascript, react, swr, fetch
Published: 2021-02-21 09:33:40

Hi everyone!

In this post I'm going to talk about how we can use [SWR](https://swr.vercel.app/) powered by [Vercel](https://vercel.com/) to do better and easier data fetching, as well as some of the possibilities it has.

As it says in the documentation:
> The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

Therefore with SWR the components will have a data stream that is constantly and automatically updated, and the UI will always be fast and reactive.

## How to use SWR?
First of all we must install it with:
```bash
yarn add swr
```
Or with npm:

```bash
npm install swr
```
We will be able to use it in the following way:

```js
import { useSWR } from '../hooks/useSWR'

const { data: users, error: Error } = useSWR<User[]>('users', UserService.getUsers)
```
* The `data` variable is the users fetched.
* The `error` variable tells us if there has been an error during the data fetch.
* `'users'` is a key that is passed to SWR. I will explain later what it is used for.
* `UserService.getUsers` is the fetcher.

An example of a fetcher could be:
```js
const fetcher = (...args) => fetch(...args).then(res => res.json())
```

## Auto Revalidation
The power of SWR is that the data can be auto validating in different ways.

### Revalidate on focus
When you re-focus a page or switch between tabs, SWR automatically revalidates data.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrkrs36hhysofmbottla.gif)

### Revalidate on interval
We can add a time interval to SWR so that the revalidation of data occurs every so often.
```js
import { useSWR } from '../hooks/useSWR'

const { data: users, error: Error } = useSWR<User[]>('users', UserService.getUsers, { refreshInterval: 1000 })
```

### Revalidate with key
Earlier I mentioned that we have to pass a key to SWR. 
If this key changes, the data will be automatically revalidated. 
This can be combined with the use of states to have dynamic data fetching.
```js
import { useSWR } from '../hooks/useSWR'

const [userId, setUserId] = useState(1)
const { data: user, error: Error } = useSWR<User[]>(`user-${userId}`, () => UserService.getUser(userId))
```

Finally, these are just some of the things SWR provides that can make our data fetching faster and better.

Thanks for reading me!
![Thank you](https://media.giphy.com/media/3ohs7JG6cq7EWesFcQ/giphy.gif)
geolocation
Published: 2021-02-21 09:28:19

https://www.pluralsight.com/guides/how-to-use-geolocation-call-in-reactjs

https://github.com/react-native-geolocation/react-native-geolocation

https://yarnpkg.com/package/react-geolocation#install

```
yarn add @react-native-community/geolocation
react-native link @react-native-community/geolocation
```
CSS Shapes with rounded corners
Tags: css, html, webdev, tutorial
Published: 2021-02-21 09:12:30

<sup>**Find out more CSS tricks at [css-tip.com](https://css-tip.com)**</sup>

A quick trick to create any kind of shape having rounded corners.

### 1. Build the shape

For this task, we simply use `clip-path`. You can rely on the following tool to do it: https://bennettfeely.com/clippy/. You will find a lot of predefined shapes and you can build yours using drag & drop.

![clip-path shapes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nox7uvi3odpp3gg60lw2.png)

### 2. Round the corners

For this task we apply the following SVG filter:

```html
<filter id="round">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
  <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
```
```css
filter:url(#round);
```

### That's it!

{% codepen https://codepen.io/t_afif/pen/jOMZwLa %}

We can apply any kind of background to our shape. The shape is defined using pseudo-element because we cannot directly apply the filter to an element having `clip-path`. We need to apply it to a parent container.

We can also control the radius by adjusting the `stdDeviation` of the filter.

----

This trick is not only limited to `clip-path` shapes. It can also work with 

## Multiple elements shapes:

{% jsfiddle https://jsfiddle.net/z49edvwj/1/ result,html,css %}

## Multiple background shapes:

{% jsfiddle https://jsfiddle.net/z49edvwj/4/ result,html,css %}

and so on.

Simply build your shape as you know and apply the filter to the uppermost container

<sub>The SVG filter is taking from the following article: https://css-tricks.com/gooey-effect/</sub>
Creating a tasks todo list in TiddlyWiki
Tags: tiddlywiki, wikitext, productivity, notetaking
Published: 2021-02-21 10:55:37

---
title: Creating a tasks todo list in TiddlyWiki
published: true
date: 2021-02-21 09:11:46 UTC
tags: #tiddlywiki #wikitext #productivity #notetaking
canonical_url: https://www.preciouschicken.com/blog/posts/tiddlywiki-tasks/
---

## Introduction

This is entirely based on Francis Meetze's youtube tutorial, [Tracking Tasks in TiddlyWiki](https://www.youtube.com/watch?v=mzoMhKx0j8g), which although is fantastic does not provide the actual text to copy and paste.  All credit is his, mistakes are mine.

If you haven't seen the video, [TiddlyWiki](https://tiddlywiki.com) is a note taking tool (at its simplest); and the following steps allows you to create a special type of tiddler (e.g. note) which allows you to track tasks or todos.

This was written using version 5.1.21 of TiddlyWiki.

## Create a *Todo* tiddler

Firstly create a new tiddler - call it *Todo*, or something that makes sense to you.  Add a *Tasks* tag.  This is where a list of active tasks will appear.

Edit this tiddler by inserting the following WikiText:

```wikitext
<$list filter="[!has[draft.of]tag[task]!tag[done]sort[created]]">

<$checkbox tag="done"> <$link to={{!!title}}>
<$view field="title"/>
</$link>
</$checkbox>

</$list>
```

I've edited this slightly from Meetze's example as I don't want the time/date I created the task to feature - it doesn't add value for me.


## Create a *Completed* tiddler

Now we need a tiddler to list tasks which have been marked as done.  Create a tiddler called *Completed* and add a *Tasks* tag.

Add the following WikiText:

```wikitext
<$list filter="[!has[draft.of]tag[task]tag[done]sort[created]]">

<$checkbox tag="done">~~<$link to={{!!title}}>
<$view field="created" format="date" template="DDth mmm hh:mm"/> - <$view field="title"/>
</$link>~~</$checkbox>

</$list>
```

## Test it works

Create a tiddler entitled *TakeTheBinsOut*, give it a tag of *task.*  Once saved this should be listed on the *Todo* tiddler.  Checking the tickbox next to it should automagically cause it to be removed from *Todo* and appear on *Completed*.

## Add to default tiddlers

I've set my TiddlyWiki up so that my open tasks are the first visible tiddler on opening.  To do this open the Control Panel (the icon that looks like a cog) and add *Todo* to the first position in the *Default tiddlers* option.

## What, no screenshots?

True, I do normally, but in this case you can go and look at the [video](https://www.youtube.com/watch?v=mzoMhKx0j8g).  If you have any other feedback - feel free to add in comments.
The TALL stack explained
Tags: tailwindcss, alpinejs, laravel, livewire
Published: 2021-02-21 08:56:09

The TALL stack is a set of frameworks to build interactive apps using Laravel. It stands for Tailwind CSS, Alpine.JS, Laravel, and Livewire. In this article, I'm going to explain all of them. So let's start!

## Tailwind CSS

Tailwind CSS is a utility-first CSS framework. That means that instead of writing classic CSS, you apply utility classes like pt-4, bg-red-500 and shadow-lg to your HTML.

Although your HTML might become a little mess, it is far more enjoyable to use Tailwind CSS compared to Bootstrap or any other CSS framework.

If you want to try out Tailwind CSS, you can read the installation instructions for Laravel on their website.

## Alpine.JS

Alpine.JS is a smal Javascript framework for quickly adding interactivity to your page. You can create a Alpine.JS component just by adding the x-data attribute to an element.

Alpine.JS handles click events, model binding, transitions and much more. For example, this is a dropdown component:

```
<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Dropdown Body
    </ul>
</div>
```

You can read more about Alpine.JS on their Github page.

## Laravel

You probably know Laravel. It is a PHP framework with lots of handy features, like queues, events, Eloquent and much more.

If you're new to Laravel, I recommend watching to this series at Laracasts.

## Livewire

The last piece to the TALL stack puzzle is Livewire. Livewire is a full-stack framework to create dynamic components without writing JavaScript, only PHP and blade!

Every time the user updates something, Livewire's JavaScript makes a request to the server, and then refreshes the page. The user won't notice anything so it will feel like a SPA-app.

If you want to learn more about Livewire, I've written a tutorial about starting with Lİvewire before.

## Conclusion about the TALL stack

The TALL stack enables you to write dynamic applications using the Laravel framework. Everything you'll want is included in one of the four technologies.
How to ML - Models
Tags: machinelearning, ai
Published: 2021-02-21 08:44:23



So we finally got our data and we can get to machine learning. Without the data, there is no machine learning, there is at best human learning, where somebody tries to write an algorithm by hand to do the task at hand.

This is the part that most people who want to do machine learning are excited about. I read Bishop's and Murphy's textbooks, watched Andrew Ng's online course about ML and learned about different kinds of ML algorithms and I couldn't wait to try them out and to see which one is the best for the data at hand.

You start off with a simple one, a linear or logistic regression, to get a baseline. Maybe you even play around with the hyperparameters. Then you move on to a more complicated model, such as a random forest. You spend more time fiddling with it, getting 20% better results. Then you switch to the big guns, neural networks. You start with a simple one, with just 3 layers, and progressively end up with 100 ReLU and SIREN layers, dropout, batchnorm, ADAM, convolutions, attention mechanism and finally you get to 99% accuracy.

And then you wake up from your nice dream.

In practice, playing around with ML algorithms is just 10% of the job for an ML engineer. You do try out different algorithms, but you rarely write new ones from scratch. For most production projects, if it's not in one of the sklearn, Tensorflow or Pytorch libraries, it won't fly. For proof of concept projects you might try to use the GitHub repo that accompanies a paper, but that path is full of pain, trying to find all the dependencies of undocumented code and to make it work.

For the hyperparameter tuning, there are libraries to help you with that, and anyway, the time it takes to finish the training runs is much larger than the time you spend coding it up, for any real life datasets.

And in practice, you run into many issues with the data. You'll find that some of the columns in the data have lots of missing values. Or some of the datapoints that come from different sources have different meanings for the same columns. You'll find conflicting or invalid labels. And that means going back to the data pipelines and fixing that bugs that occur there.

If you do get a model that is good enough, it's time to deploy it, which comes with it's own fun...
How to trigger a Next.js rebuild from Strapi CMS
Tags: nextjs, react, strapicms, javascript
Published: 2021-02-21 08:14:39

For a recent proof of concept, I was setting up I needed to trigger a rebuild of the [Next.js](https://nextjs.org/) website hosted on [Vercel](https://vercel.com/home) when new content was added to the CMS ([Strapi](https://strapi.io/)). That way it could the website could be completely static with all content generated at build time.

## Pre-requisites

- Node (tested with v14)
- NPM (tested with v7)
- Next.JS website hosted on Vercel
- Strapi CMS setup (my POC is hosted on [render](https://render.com/))

## Vercel

Once you have your website set on Vercel, navigate to the project overview and go to Settings > Git > Deploy Hooks:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwxmsnxbvaxfzlt3m25y.png)

Add a hook name and which git branch you want to use. For the demo, I called mine **STRAPI** and the branch is **main**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgp2lj3uc85xz01aqdrt.png)

Copy the URL of the webhook as we'll need that next.

Now would be a good time to test the webhook works. Open up a terminal and use the following command with the correct webhook URL:

```bash
curl -X POST https://api.vercel.com/v1/integrations/deploy/********
```

If successful you'll get a response similar to the following:

```json
{
  "job": {
    "id": "XxvXRPVQJyM3IkDx8Vro",
    "state": "PENDING",
    "createdAt": 1613841281923
  }
}
```

## Strapi

Now for the Strapi CMS side. Log into the Strapi Admin and navigate to Setting > Webhooks and click Add new webhook. Fill in the name, URL, and which events you'd like to trigger a re-build of the frontend website. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44mo154rqx9rmab7sojf.png)

Save the details and then test using the Trigger button at the top. I'd also test by adding or updating some content.

Next, I'll look at setting up previews as not everybody adding content to the website will want to wait for a deployment to finish to see what the new content will look like.
Want to say hello :-)
Published: 2021-02-21 08:07:46

Hey! Comes from Sweden, so English is not my mother tongue. I´m 63 years young. I work as a nurse at PICU. I am a hobby computer nerd, and a beginner at React & Redux. Currently taking the Udemy course: Modern React with Redux by Stephan Grider. Want to make a simple app with input, buttons, and a dynamic table

Regards
Peter