teleren/devto huggingface dataset:
Prerendering compared to SSR for SEO 
Tags: react
Published: 2020-01-14 09:31:46

Our site is rendered on the server, but then certain pages are mostly a react component. We would like to move to be towards being completely client rendered but for certain pages we are very much concerned about SEO.

We are aware of solutions such as Next (SSR+CSR), but we aren't keen towards such solutions.

We are considering CSR + dynamic rendering. This means, building pages/routes completely in React, and then serving a pre-rendered page to crawlers. So far SSR was considered the best practice for SEO. Will the same page rendered via pre-rendering be equivalent to that same page rendered via SSR in terms of SEO?

I see no reason it won't be, as the html is the same. Perhaps excluding response time, as non cached pages might take much longer to render using pre-rendering.
Jess update #1 lexing
Tags: javascript, css
Published: 2020-01-14 09:03:23

Jess is still very much under way, I have been learning a few things about parsing and rust along the way.

A crucial part of any compiler is the lexer, for those who don't know, the lexers sole responsibility is to identify individual tokens and push them into an array, this means that if a token is unknown, the lexer can throw an error. In jess's case, we don't throw an error yet, instead Jess lexer places a PANIC token in the stream so that we know that something was not understood. Jess can currently understand 5 tokens, 2 of which are the panic token and the ambiguous token, the other tokens are left curly and right and the start of an import statement.

### Ambiguous
Tokens can be split into deterministic and nondeterministic identities, a deterministic is known to the lexer such as a semicolon, nondeterministic tokens include values such as strings, numbers, (for jess) CSS values and more, but crucially unknown tokens are also nondeterministic, they are Ambiguous because they require a bit of probing. 
Ambiguous tokens get passed to an identity checker (mini parser) and various mostly regex based tests are run to further extrapolate the identity, afterwards this is returned to the token stream, if all identity checks fail as stated, the panic token is inserted. 

Jess or more specifically libjess is panicking at most of the syntax right now because I have a lot of grammer left to define and register with the lexer, eg I have to teach the lexer a language. Furthermore Jess is a combination of CSS and JavaScript in such a way that CSS values are on a par with any other primitive types, therefore I have to decide if the lexer should know about types at all or just lump them into a single VAL token to be determit by the parser, to do this the lexer would need contextual awareness when determining a type, is this a CSS * or a JS *, this is a story for another post.


### EOF
Phew we made it to the end of the file and our let while loop, amazing! Because we made it to the end and nothing caught fire 🔥 we get a special token, EOF, end of file, horay... Now what, the stream is serialised to JSON and returned back to the Typescript bindings (the front-end of libjess) as JSON, for now this is just wrote to stdout but it could also be used to potentially get cached, source mapped, used by a vscode language server, dumped for debugging and most importantly passed into the parser which will also be written in Rust.

EOP
[Video] Asynchronous tasks in Django with Django Q (Part 3)
Tags: django, python, webdev, redis
Published: 2020-01-14 08:29:14

---
title: "[Video] Asynchronous tasks in Django with Django Q (Part 3)"
published: true
description: "Learn how to use Django Q for offloading asynchronous tasks in your Django applications."
tags: django, python, webdev, redis
series: "Django Q"
canonical_url: https://youtu.be/DplCLxOEdyQ
---

**Django Q** is a scheduler and a task queue for Django. In this series you'll learn how to use Django Q in your Django applications for queuing long-running tasks.

In this episode:

- hands on Django Q
- using async_task

Enjoy!

{% youtube DplCLxOEdyQ %}
JS tip: Create debug friendly unique references using String
Tags: javascript
Published: 2020-01-14 08:20:41

Recently I've been facing a case where I needed to create some unique references.
I was creating a JS API and needed to maintain some internal state relative to elements created by the API.

In practice, I had a [`WeakMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) where I maintained a private state for each public reference returned by the API.

> #### Why a `WeakMap`?
> The keys of a `WeakMap` are weak references, which means as soon as no one else holds the reference of a key, the key and its value get removed from the map and garbage collected.

The type of the public references didn't matter to me, I just needed unique references.
But it would be better if those references were easy to debug, which meant  having at least a relevant `toString()` method.

## ⛔ Non choices ⛔

### `{}`

What's the easiest way to create a unique reference in JS? Initializing an empty object!
But that doesn't satistfy the "easy to debug" requirement:

```js
const ref = {}
console.log(`debug: ${ref}`)

// Output:
// debug: [object Object]
```

### `String`

A string is easy to debug, you just print it:

```js
let nextId = 1

const ref = `ref #${nextId++}`
console.log(`debug: ${ref}`)

// Output:
// debug: ref #1
```

But a string isn't a unique reference, anyone may obtain the same reference very easily.
And as a matter of fact, a `WeakMap` doesn't accept strings as keys, neither any other primitive type!

### `Symbol`

The purpose of [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) is to create unique references!
There I thought I had my solution...

```js
let nextId = 1

const ref = Symbol(`ref #${nextId++}`)
console.log(`debug: ${ref}`)

// Output:
// TypeError: Cannot convert a Symbol value to a string
```

Wow! Far from what I expected...
Even though `Symbol` has a `toString()` method, putting it in a string interpolation yells at me!
Furthermore symbols are primitive values, hence `WeakMap` won't accept these as keys!

## 🟢 Solutions 🟢 ##

### `class`

There I found myself forced to write my own `class`:

```js
let nextId = 1
class Ref {
  constructor() { this.id = nextId++ }
  toString() { return `ref #${this.id}` }
}

const ref = new Ref()
console.log(`debug: ${ref}`)

// Output:
// debug: ref #1
```

This is exactly what I wanted, but it feels like I'm squashing a fly with a sledgehammer...
Do I really have to create my own type?

### `new String()`

Yes it's possible to use the String constructor, and it is equivalent to using a `class`:

```js
let nextId = 1

const ref = new String(`ref #${nextId++}`)
console.log(`debug: ${ref}`)

// Output:
// debug: ref #1
```

It does create a unique reference, which isn't of a primitive type.
Hence it may be used as a key for a `WeakMap`!

## Your turn!

Do you have any other ideas? Share them with me!

Thanks for reading, give a ❤️, leave a comment 💬, and follow me to get notified of my next posts.
Why Does "~True" Result in -2 in Python?
Tags: python, bits
Published: 2020-01-14 07:55:57

If you try the following in your console:

```python
~True
```

you'll get "-2" 😳. Why?

Think about `bool`, you'll find that it is numeric in nature - It can hold two values, "True" and "False", and they are just "customized" versions of the integers 1 and 0 that only print themselves differently.

So `bool` is a [subclass of `int`](https://www.python.org/dev/peps/pep-0285/):

```sh
>>> type(True)
<class 'bool'>
>>> isinstance(True, int)
True

>>> True == 1
True
>>> True is 1  # they're still different objects
False
```

Having that said, `~True` evaluaes to:

```
~True == ~int(True) == ~1 == -2
```

`~` simply flips the bits. So:

```
1  = 00000001
~1 = 11111110
```

which is -2 in two's complement. Verifying that:

Flip all the bits, add 1 to the resulting number and interpret the result as a binary representation of the magnitude and add a negative sign (since the number begins with 1):

```
11111110 → 00000001 → 00000010 
         ↑          ↑ 
       Flip       Add 1
```

Which is 2, but the sign is negative since the MSB is 1.

I hope that was clear :)
We are HIRING 
Tags: hiring, career, productivity, ios
Published: 2020-01-14 07:43:08

We're looking for Product-minded Engineers & Designers (in Hong Kong) 

GoodNotes was created from our founder's frustration of taking readable and reusable handwritten notes on his first iPad. We have since grown to millions of happy users. We are just getting started. Join us to reimagine what productivity suite will look like with digital pen and paper.

We get love letters from our users. Check out our Instagram and Twitter for the love, and most importantly the impact you could make to them. Apple loves us, too. We have been featured in Apple's marketing materials numerous times and we are one of the top paid iPad apps worldwide.

Check out our openings here https://www.goodnotes.com/careers/
If you don't see what you like, reach out to us at careers@goodnotes.com and tell us what you would like to work on.

Current Tools/Tech include: Swift, Clojure, Kotlin, Scala, AWS,PyTorch, TensorFlow, CoreML.  We're always looking for new tools to make us better and more efficient.

Unfortunately, we are only looking for onsite engineers and designers

Check out our culture and values here:
http://medium.com/@GoodNotes/we-are-makers-at-heart-dad2694306b0
http://medium.com/@GoodNotes/how-we-work-at-goodnotes-4c66ef26285f
http://medium.com/@GoodNotes/goodnotes-workflow-3d00e9997d7d
http://keyvalues.com/goodnotes
AWS AI & Machine Learning Podcast — Episode 5
Tags: aws, machinelearning, podcast
Published: 2020-01-14 07:59:12

---
title: AWS AI & Machine Learning Podcast — Episode 5
published: true
date: 2020-01-14 07:18:36 UTC
tags: aws,machinelearning,podcast
canonical_url: https://medium.com/@julsimon/aws-ai-machine-learning-podcast-episode-5-ce635d2d8aa
---

### AWS AI & Machine Learning Podcast — Episode 5

In this episode, I talk about a couple of recent features, share some extra resources, and point you to a pretty cool computer vision demo.

> Video episodes are available on my [YouTube channel](https://www.youtube.com/juliensimonfr).

> Audio episodes are available on [Apple Podcasts](https://podcasts.apple.com/us/podcast/aws-ai-machine-learning-podcast/id1492801210), [Spotify,](https://open.spotify.com/show/1argBtYSeSksGU8dcW4TAS) [Deezer](https://www.deezer.com/show/756292), and more. Visit my [audio podcast page](https://julsimon.buzzsprout.com/) to subscribe and be notified of future episodes.

{% youtube RE3gD1ti_0s %}

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.buzzsprout.com%2F780458%2F2485253-episode-5%3Fclient_source%3Dtwitter_card%26player_type%3Dfull_screen&amp;url=https%3A%2F%2Fwww.buzzsprout.com%2F780458%2F2485253&amp;image=https%3A%2F%2Fwww.buzzsprout.com%2Frails%2Factive_storage%2Frepresentations%2FeyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOGpKZFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ%3D%3D--c836266b57e2bc68585d743589ac963f73619fc3%2FeyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9VWTI5dFltbHVaVjl2Y0hScGIyNXpld282QzNKbGMybDZaVWtpRFRJMU1IZ3lOVEJlQmpvR1JWUTZER2R5WVhacGRIbEpJZ3RqWlc1MFpYSUdPd2RVT2d0bGVIUmxiblJKSWd3eU5UQjRNalV3QmpzSFZEb01jWFZoYkdsMGVXbFZPZzlqYjJ4dmNuTndZV05sU1NJSmMxSkhRZ1k3QjFRPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--62c0dc9ae0106a9121f982eb952976ff55ebdee3%2Fbackground.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=buzzsprout" width="500" height="210" frameborder="0" scrolling="no"><a href="https://medium.com/media/62dd0e8ea8a35e7daca918dbc491c336/href">https://medium.com/media/62dd0e8ea8a35e7daca918dbc491c336/href</a></iframe>
Improving Web Portfolio
Published: 2020-01-14 07:07:56

Hello everyone,,
Hello guys, I just created this portfolio recently. The issue I am facing is that when you click the hamburger icon, a portrait overlay should appear on the left-hand side, but it is not showing.
I would like the help of my fellow DEVIAN's.
Here is the link to my Github repository.
https://reversephonelookup.onl/ https://curated.onl/nba-reddit/ https://pcbuilder.onl/pcpartpicker/

Here is the deployed version link
https://smammar.github.io/my_portfolio/
Makers Week 4: Databased on a True Story

Published: 2020-01-14 07:02:38

Hello everyone,,

We started on using databases this week. We are using a SQL database called postgres. It's all new but also it's nice to be able to store data. Although it is a lot to learn in a week hopefully I'll manage.

Day 1 https://openweb.vip/whatsapp-web/ https://19216801.onl/ https://routerlogin.uno/

We started on databases and learning how to use them. It was a slow start trying to wrap our heads around them. The challenge was to build a bookmark app that stored URLs. We had to set up the database first which wasn't hard because the documentation was clear. The main issue is how to write the tests for the database which used capybara which I'm not too confident about but we were able to get it started.

Day 2

The next day we learned how to interact with postgres within ruby which was similar to normal postgres. All you needed to do was use the exec command before using the same code you'd use in postgres. It was interesting to see the databases in use and how we could alter them to add info to the website.

Day 3

We were shown a new tool to use called TablePlus which seemed to be more of a visual interface for sql databases. It was definitely nicer to look at than the terminals psql so I could see it being useful. After seeing that wee had to set up a testing environment. We needed to set up a test database so we don't mess up the database for the active site. We also had to reset our database every time so we used TRUNCATE to clear the database.


Summary

I really enjoyed this week mainly because we got to build apps that actually run. It was quite irritating since I had to use walkthroughs a lot. even though we were told we'd probably have to use them it would’ve been nice to have been able to figure it out by myself.
Gatsby & Mailchimp integrations Easy way
Published: 2020-01-14 06:57:59

##Email signup forms with Gatsby & Mailchimp
In the article, I'll provide sample code to creating a Mailchimp signup form for Gatsby.

Demo Link: [https://gatsbymailchimp.netlify.com/](https://gatsbymailchimp.netlify.com/)

Images:
![gatsby-mailchimp](https://i.ibb.co/3zJXVcB/Screenshot-619.png)


**Install the plugin** 
Install the plugin to get it working on your machine: 

```
npm i gatsby-plugin-mailchimp
```

**Add the plugin to your Gatsby config file**
```
{
  resolve: 'gatsby-plugin-mailchimp',
  options: {
  	endpoint: 'Copy the endpoint link from Mailchimp',
  },
},
```
Images:
![gatsby-mailchimp](https://i.ibb.co/jbMXN18/Screenshot-618.png)
Copy the action link paste it to the endpoint.


**Component Code**
```
state = {
    nam1: null,
    nam2: null,
    email: null,
}
_handleChange = (e) => {
    console.log({
        [`${e.target.name}`]: e.target.value,
    });
    this.setState({
        [`${e.target.name}`]: e.target.value,
    });
}
_handleSubmit = (e) => {
    e.preventDefault();
console.log('submit', this.state);
addToMailchimp(this.state.email, {
            FIRSTNAME: this.state.nam1,
            LASTNAME: this.state.nam2
        })
        .then(({
            msg,
            result
        }) => {
            console.log('msg', `${result}: ${msg}`);
if (result !== 'success') {
                throw msg;
            }
            alert(msg);
        })
        .catch((err) => {
            console.log('err', err);
            alert(err);
        });
}
```


**Need Any Help**
Contact: contact@developerjahid.com
Make your modern website with Developer Jahid,
Website: https://developerjahid.com
Thanks.
Three lines of Typescript with jest to get typesafe mocks
Tags: typescript, testing, tutorial, javascript
Published: 2020-01-14 06:28:04

First the three important lines for anyone who needs to copypaste. I'll explain later!

```ts
jest.mock('@/components/LocationService');
const MockedLocationService = <jest.Mock<LocationService>>LocationService;
const mockedLocationService = <jest.Mocked<LocationService>> new MockedLocationService();

```

----

Now a bit of explanation. When you use jest to mock an import (which I am still not convinced is a good pattern) the mock is still typed as the original import. This means that Typescript will complain if you do something like `MockedImport.mocks`. 

Below is an example setup where this would be useful

If you need to mock implementation 

```ts
export class LocationService {
  async getCurrentLocation(): Promise<CurrentPosition> {
    // #...
  }
}
```

```ts
export class Map {
  constructor(locationService: LocationService) {
    this.locationService = locationService
  }

  setPosition(): Position {
    const position = this.locationService.getCurrentPosition
    // # ...
    // # Do something with position
  }
}
```

```ts
jest.mock('@/components/LocationService');

describe('Map.ts', () => {
  it('uses the current location to set the position', () => {
    const MockedLocationService = <jest.Mock<LocationService>>LocationService;
    const mockedLocationService = <jest.Mocked<LocationService>>new MockedLocationService();
    mockedLocationService.getCurrentLocation.mockResolvedValue({ lat: 3, long: 3 });

    const map = new Map(mockedLocationService)

    // # Do something with your mocked instance
  });
});
```
Some Ideas are Ahead of Their Time (Java) 
Tags: java, history
Published: 2020-01-14 05:52:52

This won't be the most insightful post, but I'll try. 

A while back in the early days of Java Sun Microsystems had an awkward idea of utilizing web browsers as a way to deliver software without the need to install it, applets.

Java needed to be installed on the client machine and the applet would run in the sanboxed VM. 

Today Web Assembly is working its way into browsers and allows most languages to run in the browser's VM. But how do these two approaches differ in the context of history. 

Back during Sun's attempt the following was true

* 56k modems (dialup) was still a large target audience. 
* Browser war of incompatibility 
* Microsoft was working on their own, ActiveX
* Java did not come with the browser or OS

Jar packages would be small but they were still large for the time and the entire program would need to be downloaded to begin using it. You would be able to open connections to the server to request additional resources, but you can't take advantage of that initial page request.

Applets just used the browser as a delivery system, they could not operate on the other pages content. This means as a content delivery system you couldn't take advantage of the work browsers already did. (html rendering inside html rendering anyone?) 

Microsoft was also in heavy competition to have the most browsers "exclusives" which meant you didn't have a clear winner on if Java or ActiveX would be available to users. Though Java's VM was making a pretty good market on the desktop. 

Security is an important consern, applets had to add additional security while Javascript had to expand capabilities.

Applet isn't restricted to a single language, but it did require the language compile to the JVM, which at time was only Java.

Back when I was taking programming classes and and coding in Java, it just seemed so natural to have Java installed. Now days I do c# and it just seems like such a pain to keep Java updated. Well in Windows anyway, Linux makes every language feel like home.
Pixel Repulsion 
Tags: codepen, canvas, creativecoding, creative
Published: 2020-01-14 05:44:47

---
title: Pixel Repulsion 
published: true
tags: codepen,canvas,creative coding,creative
---

<p>Image pixel manipulation and repulsion with raw HTML5 canvas made with students at Harbour.Space for module Programming Interactivity of the Interaction Design Master.</p>

{% codepen https://codepen.io/mendieta/pen/PowaQEm %}
Useful Websites For Web Developers & Designers
Tags: design, html, css, php
Published: 2020-01-14 05:29:24

**Today I’ve gathered a list of the most influential websites about web design and web development. I hope You Guys like them.**

##Can I Use

Caniuse.com provides up-to-date browser support table of front-end web technologies on desktop and mobile web browsers.

##HtmlWasher

htmlwasher.com recuses a [HTML](https://aslisach.in/tag/html/) document (or fragment) to basic HTML tags and attributes – clean HTML.

##Enjoy CSS

enjoycss.com is an advanced CSS3 generator that allows you to get rid of routine [coding](https://aslisach.in/tag/code/).

##Pexels

pexels.com provides high quality & completely free stock photos licenced under the Pexels licence.

##Markup Validator

validator.w3.org is a free service by W3C that helps check the validity of Web documents.

##Google Fonts

fonts.google.com is a library of free licenced fonts, an interactive web directory for browsing and conveniently using the fonts. [Read More..](https://aslisach.in)


Do You Know Other Useful Websites, If yes, then share them with us using the comment box below.
Are Front-End Developers Happy?
Tags: career, webdev, beginners, codenewbie
Published: 2020-01-14 04:13:58

---
tags: career, webdev, beginners, codenewbie

---

Hi, I'm Miranda. I've been a front-end web developer for several years, and if you're thinking about entering the vast career of front-end development, you might be wondering...

**Are front-end developers happy?**

Do they find fulfillment? Joy? Meaning?

Should you seek out a career in front-end development or look the other way?

And I have an answer! It depends.

It depends on your personality: the way you experience and handle challenges, and the way you conceptualize education and learning.

Read on to find out if front-end development will make you happy or make you miserable.

## Front-end web development will *not* make you happy if...

### You think front-end development is easy

You think HTML, CSS, and Javascript is baby stuff compared to complex object-oriented programming languages that run native applications. Sure --- you're super smart and *could have* been a software engineer coding complex networking components, easily! But you settled for front-end development. Trying is uncool anyway.

### You think having a computer science degree makes you 'overqualified'

You have an expensive degree you haven't quite payed off, and you learned a lot of computer theory in college. You've been introduced to data structures (like hashes and trees) as well as sorting algorithms and Big O notation --- though you don't remember it all too well. In any case, the low-level computer stuff you learned is far more complex than HTML, so that makes you overqualified for the job.

### You think designers 'being picky' is ruining your life

Designers are ruining your life. They keep telling you to adjust line-height and padding and to line things up correctly. They don't like that the layout breaks at certain browser widths. But come on! The site looks good enough. Nobody's going to see the page at that width anyway.

### You think you must get it to look the way you want in less than 15 minutes

If you don't know the answer in 15 minutes, you sit at your desk and hold your head until someone asks you if "everything is alright," which is an invitation to vent. They'll understand. The machine is wrong, after all.

### You think "it should just work"

All the time, things that you thought would work just doesn't. And *no matter what you try*, you are constantly wrangling web pages to no avail. It's so frustrating. Why would anyone choose front-end web development?

[Read More](https://booksoncode.com/articles/are-front-end-developers-happy)