teleren/devto huggingface dataset:
Embrace the Base
Tags: webdev, sql, ruby
Published: 2019-06-26 02:46:48

Web and app development is, fundamentally, a process of working with three major components and two network connections.

Here's a diagram:

```
client <-internet-> server <-intranet-> store
```

The `client` is nowadays a reactive application, the `server` is often GraphQL or an old-school REST API backed by a web framework or a serverless architecture such as Lambda, and the `store` is usually some sort of database, sometimes of the NoSQL variety.

And those two network connections are killer. They're really, really, really, really slow, compared to each component doing internal work.

These days I'm experimenting with my own omakase framework that focuses on realtime data synchronisation between the `client` and `server` instead of an API, and which moves a lot of app logic from the `server` into the `store`, which, after all, is the fundamental source of truth, and is already super-optimised to play exactly that role. This vastly simplifies the `server` component, as it needs to do not much more than acting as an authentication, routing and rendering layer.

The trick to all this is to implement a unidirectional data flow within the `store` as well. All queries are read-only, and mutating data can only occur by adding changelog events, allowing data to be manipulated must as we do with `git`, and making it easy to determine the minimal changeset that a particular `client` needs to bring it up to date.

All of which is a long-winded way of saying that I think developers should focus more of their attention on the database, as there's still a lot of latent potential there that's waiting to be unlocked.
15 Minutes of work to make users happy
Tags: showdev, javascript
Published: 2019-06-26 02:37:04

---
title: 15 Minutes of work to make users happy
published: true
description: Darkmode, the easy way
tags: #showdev,#javascript
---

Thanks to the nice library darkmode.js mentioned from Fajar on [getmakerlog.com community](https://getmakerlog.com) (I really advise new makers to use this great tool and community) I could add Dark mode for [https://fullstackjob.com](https://fullstackjob.com). Activate with click on Moon Icon in Navigation.

Cheers Stefan

![](https://thepracticaldev.s3.amazonaws.com/i/oe625ah3xlh3ntbcmu33.png)
What Does Gatsby Mastery Look Like?
Tags: discuss, gatsby, react
Published: 2019-06-26 02:00:17

---
title: What Does Gatsby Mastery Look Like?
published: true
description: 
tags: discuss, gatsby, react
---

Few web dev technologies sparked joy for me like Gatsby, and I've been thinking about what real mastery in the framework looks like. The obvious things to me seem like:

+ Deep comfort with Reach Router and which of it's features can save work in certain instances.

+ Understanding what sort of query (static vs page) to use and when.

Some things I wonder about:

+ Which plugins one needs to know forwards and backwards, versus just looking up when the use case for it comes up. 

+ Are there React features we're better off not using in Gatsby?

Are you or somebody you know an expert in Gatsby? What does expertise in the framework look like to you?
Making sticky column with grid area.
Tags: css, cssgrid
Published: 2019-06-26 01:40:02

I was working on a project and I implemented the grid properties of CSS. I divided the screen into two grids; the left grid for navigation (for sections within the same page) and the right grid was for the content.

P:S: This is not a tutorial for using grid areas. Learn more about grid areas here

This was my CSS code:
```css
.main {
  display:grid;
  grid-template-areas: "nav content";
  grid-template-columns: 2fr 10fr;
  grid-gap:30px;
}
```

I wanted the web page to be such that the navigation section doesn't scroll while the contents section remains scrollable. I applied a value of fixed to the position property of the navigation portion.

```css
.nav {
  position: fixed;
}
```
As expected, my navigation section became fixed to the screen, but I discovered that the navigation section generated properties for itself. This is the feature of fixed and absolute values for the property position. Unlike the relative value which inherits some properties from the parent element, these values develop their own properties.

In order to fix this, I applied the sticky value. This value inherits properties from the parent element while still possessing its own small properties;

```css
.nav {
  grid-area: nav;
  border-right:5px solid #ddd;
  grid-template-rows: repeat(12, 1fr);
  /* Position of the navigation section */
  position:sticky;
 /* Ensuring its attached to the top of the page */
  top:0;
 /* Ensuring the height of to equal to the viewport's height */
  height:100vh;
}
```
P.S: To make the page responsive for smaller screens, further adjustments become necessary using media queries

There are many other uses of sticky value, but with this understanding, I believe you can maneuver your way when designing.

I hope this article helps someone. Feel free to share.

Thanks for reading.
#PureCSS - Responsive Reddit Logo
Tags: codepen, css, purecss
Published: 2019-06-26 01:34:27

---
title: #PureCSS - Responsive Reddit Logo
published: true
tags: codepen, css, purecss
---

<p>Responsive Reddit Logo using CSS</p>

{% codepen https://codepen.io/AsyrafHussin/pen/bKYvpd %}
Wondering what's the best AWS service for this
Tags: help, aws, docker, ask
Published: 2019-06-26 00:31:39

EDIT: With more research and the valuable input from this community I've reached a solution. I'll go with EBS and DocumentDB. Thank you all!!

Hi there!
I've been using AWS, especially EC2, Route 53... as a VPS, serving a few websites (I'm out of the year free tier) and playing with devOps to practice.

I could use help as to **what AWS service to choose**. I have a relatively simple application: it's a **NodeJS + ExpressJS + MongoDB** charity website, I estimate no more than 5k monthly visits. I'll be using a headless Node CMS for news and posts, and connect the frontend (nothing fancy, just maybe Jade/Pug) with it using ExpressJS.The site will grow a few sections and a couple of services to come (like fundraisers web support and so on), so I'm interested in a foolproof solution that I can git push after working locally and have it deploy online without hiccups.

I immediately thought on using **Docker** for a nice dev environment and no versioning/dependency issues. From AWS I'd like to have something **easy to set up** and **monitor**, **managed**, **autoscaled**, **low maintenance** and if it's **affordable** all the better! :) Microservices crossed my mind but if I can do without the added complexity, I'd prefer that: everything in the container, including MongoDB.

And here's where the doubts creep in. Most of what I've read (AWS docs, tutorials, youtube, posts...) only talk about ECS, which I think is an overkill for me. Multiple EC2 in a cluster with different availability zones using Fargate, ELB, ECR... I mean of course I don't want the site to go down but isn't there a simpler solution for a site like this?
After reading AWS' docs on Fargate, Elastic BeanStalk, ECS, etc. I'm a bit more lost than before. Using a container sounds comfortable but I'm not locked on it, if there's a better choice I'm all ears!

Can anyone help me figure this out?

Thank you!
My Top 3 Tech Podcasts
Tags: podcast, react, linux, discuss
Published: 2019-06-25 23:49:19

---
title: My Top 3 Tech Podcasts
published: true
description: 
tags: podcasts, react, linux, discuss
---

Currently, I listen to 3 technical podcasts religiously.  

React Podcast:
https://reactpodcast.com/

React Roundup:
https://devchat.tv/react-round-up/

Late Night Linux
https://latenightlinux.com/

Listening to these podcasts help me stay up-to-date on what is happening and I just really enjoy the conversations.

Do you have a favorite podcast that you listen to?
Weird things you can (but shouldn't) do with JavaScript tagged templates 
Tags: es6, javascript
Published: 2019-06-25 23:11:30

---
title: Weird things you can (but shouldn't) do with JavaScript tagged templates 
published: true
description: 
tags: es6, javascript
---

Who wants to get weird with me?

I have been playing around with ES6 Tagged Templates and creating little experiments.

Here's one of them:

{% twitter 1142217207042019330 %}

read more on: [Tagged Template Literals](https://wesbos.com/tagged-template-literals/) by wesbos.

Comment below with an emoji that best describes your feelings about this. ![explodey head](https://abs.twimg.com/emoji/v2/72x72/1f92f.png)
Your feedback on my website portfolio!
Tags: help
Published: 2019-06-25 23:10:08

---
title: Your feedback on my website portfolio!
published: true
description: 
tags: help.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6o26pey55jz36o18fy2y.jpg
---

Here is the first draft of my portfolio that i have created using CSS, HTML, and JS, i need your feedback before publishing it.

- One thing am planning to add is a logo.
- Also am not satisfied yet with the projects section design, any ideas?
- What you think about the font?
- Do i need to add more sections, like CV? 

**Projects listed are Imaginary i didn't create any of them, but will add later when i finish developing** 

Kindly find the link:
[My Portfolio](https://codepen.io/saraahmed626/full/aXEyog)
5 Quick Tips for Junior Level Interviews
Tags: interview, beginners
Published: 2019-06-25 22:57:26

---
title: 5 Quick Tips for Junior Level Interviews
published: true
description: 5 Quick Tips for Junior Level Interviews
tags: interview, beginners
canonical_url: https://flipsphere.net/2019/06/25/5-quick-tips-for-junior-level-interviews.html
---

Below are some things I look out for when interviewing junior developers. It's obviously not a comprehensive list, but hopefully gives you a little insight into what some interviewers are looking for.

For what it's worth, I'm based in the UK. 


## 1. Be honest about what you know.

Don't lie in your interview. If you don't know something, be honest. If you're confident you could learn it quickly, say so, and explain why:

> "I don't know any Javascript frameworks yet, but I have a good understanding of vanilla Javascript code so believe I could pick this up quickly".

By admitting you don't understand something, it adds credibility to everything you've said before.


## 2. Don't be afraid to show your passion.

Tell me about your side projects! If you've made a side-project you're super proud of, but are a bit wary of sharing because it's geeky, tell me anyway! It doesn't matter if I understand the reference, it shows a passion for coding.

If you're passionate I care less about what you know. I can teach you to code, but I can't teach you enthusiasm.


## 3. Ask questions.

**An interview is a 2-way street.** I'm interviewing *you* to see if you're the right candidate for the role just as much as you're interviewing *me and the company* to make sure we're a good fit for you. If you accept the role you'll be spending nearly 8 hours a day inside the company's walls - make sure you're happy with that!

Also ask about the team you'll be joining. How big is it? How supported will you be? Are there frequent social events?


## 4. Ask more questions!

Asking questions also rings true for any "take home" problem you might be given. If you don't understand the problem, ask; just don't ask how for the solution. For example, don't ask: *"How do I order an array?"*, but rather *"Would you like the array ordered by name, or total?"*).

This shows a keenness to understand the problem correctly, and also shows off a little of your knowledge because you know arrays can be ordered in different ways.


## 5. Research the company. 

This is true for any level of interview to be fair, but for God's sake do your research before you go to an interview. I won't be trying to trip you up, or grilling you on what our last product launch was, but I'll know straight away if you haven't even looked at our website.

One thing I like to do if I'm being interviewed is find one cool project the company has done recently and bring it up in my interview.
Learning NextJs - Day 7
Tags: react, nextjs, javascript
Published: 2019-06-25 22:42:52

You [already now how to link and pass data between your nextjs pages](https://dev.to/eperedo/learning-nextjs-day-6-2odm). But let's face it, querystring are not cool! So for this day I will update that part of the code to turn our boring url to a clean one.

It is a pretty easy task since the **Link** component comes with a **"as"** prop that allow you to define an alias for your url.

```jsx
import Link from 'next/link';

function Home({ user  }) {
  // Other part of code omitted for reading purposes
  return (
    <Link href={`/about?userId=${user.id}`} as={`/users/${user.id}/about`} />
  )
}

```

In the above code we are creating a Link component, its real route is **/about?userId=${user.id}**, but with the **as** prop you are telling to nextjs that you want to show that url in your address.

If you start the server and click on one of the users you will see that the new url in your browser is something like **/users/1/about" instead **/about?userId=1**

But like uncle Ben said: **A great feature carries great unintended behaviors** if you select one of the users then reload the page next will throw a 404 error page and that's correct since **/users/1/about** is just an alias, it actually does not exist on the server.

So I guess day 8 is going to be a really fun day. Stay tuned!
How to make sure your emails are not received in the Spam folder
Tags: email, spam, dns
Published: 2019-06-25 22:01:17

---
title: How to make sure your emails are not received in the Spam folder
published: true
description: How can you use third parties to send Emails for you without getting flagged as Spam
tags: email, spam, dns
canonical_url: https://toutafe.com/why-do-my-email-arrive-in-the-spam-folder/
---

To make sur your emails are received correctly when using third party software, like intercom, sendgrid or sparkpost or your CRM, don't forget to setup your DNS correctly or the chances are strong that your mails will be flagged as Spam, which is most likely not what you were looking for.

For this, you need to "allow" those 3rd party providers to use your domain.
Otherwise, Imagine any server would be allowed to send for any domain. Phishing would be next level!

The parameter in your DNS to use is called DKIM (DomainKeys Identified Mail) which will tell all major spam checker that this domain can be used from other servers/domains.

DKIM is in fact mostly a TXT or a CNAME record with specially crafted value and hostname

Hope this will help you get straight to your users Inbox !
HTML can do that?
Tags: webdev, html
Published: 2019-06-25 21:38:30

---
title: HTML can do that?
published: true
description: List of awesome things you can do with just HTML.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jnx66b92lqma40xrary8.png
tags: #webdev, #html
---

After witnessing some [awesome things CSS can do](https://dev.to/ananyaneogi/css-can-do-that-18g7), it's time for HTML to come in the same spotlight!

It's amazing that you can do so much with *just* HTML.


## 1. Dropdown with searchable text

{% codepen https://codepen.io/ananyaneogi/pen/BgZMJM default-tab=result%}

---------------


## 2. Dialog box

{% codepen https://codepen.io/ananyaneogi/pen/QXMdbb default-tab=result%}

---------------

## 3. Measuring progress
{% codepen https://codepen.io/ananyaneogi/pen/PrKbey default-tab=result%}

Styling this is not an easy task, I agree! But there's always some workaround and it's nicely explained here - [How to style progress element](https://css-tricks.com/html5-progress-element/)

----------------


## 4. Expand/collapse details

{% codepen https://codepen.io/ananyaneogi/pen/QXgXmd default-tab=result%}

--------------


## 5. Show correct mobile keypad based on input type

{% codepen https://codepen.io/ananyaneogi/pen/dBzZvq default-tab=result%}

--------------


## 6. Add a simple colour picker
{% codepen https://codepen.io/ananyaneogi/pen/ZdJvyM default-tab=result%}

------------

## 7. Highlight text

{% codepen https://codepen.io/ananyaneogi/pen/WqEzPo default-tab=result%}

------------

## 8. Create a direct phone number link
Similar to email link with `mailto` we can also create a direct phone number link.

```html
<a href="tel:+917272727272">+91-7272727272</a>
```

------------


## 9. Show deletion and insertion of text

{% codepen https://codepen.io/ananyaneogi/pen/LKjmZK default-tab=result%}

---------------------

## 10. Edit page contents

{% codepen https://codepen.io/ananyaneogi/pen/RzZQRL default-tab=result%}

Wish to make your own browser editor? You can do that too - [How to make browser editor with html.](https://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/)

------------


*Note:* Not all browsers have implemented these elements and attributes. But we can still use these today with progressive enhancements! 🙂


HTML is the foundation of any webpage, it's only wise to pay real good attention to it. Semantic markup not only helps in SEO but also helps in [accessibility](https://dev.to/ananyaneogi/accessible-and-expressive-html-semantics-43h1).

If you've come across any such cool thing HTML is capable of, please mention below 😀

--------

In other news, I made a silly project : https://hp-ipsum.netlify.com

Follow me on twitter [@_ananyaneogi](https://twitter.com/_ananyaneogi) to get more tidbits 😊
Get the best out of the Macbook Touchbar with iTerm2.
Tags: webdev, tutorial, productivity
Published: 2019-06-25 21:09:50

The Touchbar on the Macbook is great. I use it because it's give me useful shortcuts on some apps and I can configure it depending of the application.

We hope that one day we will be able to make a full custom Touchbar with our own buttons, easily. But unfortunally I don't think this feature is planned (Keep on hoping 🤞).

So for this article, let see what we can do in iTerm2 for a better experience with the Touchbar.

At first, I was just trying to make simple shortcuts buttons to launch Git or NPM commands.
So in `iTerm2` > `Preferences…` > `Keys`, there a button on the bottom right for `Add Touch Bar Item`. This will open a little popup.
![](https://thepracticaldev.s3.amazonaws.com/i/10t8a5jbamuxnrmmt6hq.png)

Enter the label you want for the button in the Touchbar, you can add an emoji with <kbd>⌘ Command</kbd> + <kbd>^ Control</kbd> + <kbd>Space</kbd>.
For the action, scroll down and select the "Send text" option.
You can now type your command, you have to add a trailing `\n` to tell iTerm to go back to a new line after sending the command, this will avoid some weird look with your theme.
For a simple `git status`, the action would be `git status\n`.

Repeat this step to create as many buttons as you want.

Now, we need to add them to the Touchbar, just go to `View` > `Customize Touch Bar` and drag and drop the buttons into the Touchbar.
You maybe need to quit and reload iTerm if you don't see them yet.


And there it is!
![The Touchbar with 3 custom buttons ready for Git status, npm install and Composer install](https://thepracticaldev.s3.amazonaws.com/i/d4hv68vytzt2zp934ce2.png)
It's cool right 😎?
Roll Your Own Color Scheme in Windows Terminal
Tags: terminal, windows, microsoft, opensource
Published: 2019-06-25 20:52:18

---
title: Roll Your Own Color Scheme in Windows Terminal
published: true
description: It's gotta be pretty.
tags: terminal, windows, microsoft, opensource
---

> 🚩 Disclaimer: I work for Microsoft. I am writing this purely as a fan of Windows Terminal.
> Also posted on my [blog](https://thomaseckert.dev/posts/roll-your-own-color-scheme-in-windows-terminal).

At Build 2019, Microsoft announced an [open source terminal for Windows](https://devblogs.microsoft.com/commandline/introducing-windows-terminal/). On 21 June 2019, it became available for [preview in the Microsoft Store](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab). I have been playing with it since and while its features are laudable, every developer knows the most important aspect of a terminal is its color scheme.

Luckily, it's easy to write your own. From the Windows Terminal, select the dropdown at the right edge of the tabs. Select `Settings`. Alternatively, the default keybinding for accessing settings is `Ctrl`+`,`.

![A Windows Terminal window showing the user accessing settings by the dropdown at the right edge of the tabs.](https://thepracticaldev.s3.amazonaws.com/i/e718c4kv327nsre6jhla.png)

This will open up a JSON file with the settings for your Terminal in the default editor. 

![The JSON file for editing Windows Terminal settings edited using Visual Studio Code.](https://thepracticaldev.s3.amazonaws.com/i/7x8d6ot6zagt18rat108.png)

Navigate to the "schemes" key. Here a list of JSON objects map standard Unix terminal colors (except for `magenta` which is called `purple`) to HEX codes. Copy an existing scheme and paste it into this list. Now, you can edit the colors as you like. I chose to implement a color scheme from [flatuicolors.com](https://flatuicolors.com/) called V1. You can find the implementation in a Gist [here](https://gist.github.com/t-eckert/9fd7c587c470e8312f07d8e65182644f). 

Give your scheme a unique "name" value and set the "profiles" to use that scheme. 

As you edit the scheme, the Terminal will update in real time. To check your scheme, I have found the following `bash` command useful: 

`for x in {0..8}; do for i in {30..37}; do for a in {40..47}; do echo -ne "\e[$x;$i;$a""m\\\e[$x;$i;$a""m\e[0;37;40m "; done; echo; done; done; echo ""`

This will display every text color on every highlight color. I used it to create this sample for the Gist:

![](https://thepracticaldev.s3.amazonaws.com/i/ebeg4asfo5lkythq8b8c.png)

Happy hacking!