teleren/devto huggingface dataset:
Create Gatsby sites using GraphQL on Postgres
Tags: graphql, postgres, gatsby, journalism
Published: 2019-12-18 10:36:08

---
title: Create Gatsby sites using GraphQL on Postgres
published: true
date: 2018-09-27 00:00:00 UTC
tags: graphql, postgres, gatsbyjs, journalism
canonical_url: https://blog.hasura.io/create-gatsby-sites-using-graphql-on-postgres-603b5dd1e516/
---

 **TL;DR:** Source data from your existing postgres database for your gatsby site. Instant setup. Tutorial/boilerplate 👉 [gatsby-postgres-graphql](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/gatsby-postgres-graphql)

![](https://blog.hasura.io/content/images/downloaded_images/create-gatsby-sites-using-graphql-on-postgres-603b5dd1e516/1-Wvut9R2FrxSCawAb-5tPpw.png)

* * *

[Gatsby](https://www.gatsbyjs.org/) is an amazing framework to help you build statically rendered react sites. Static sites, like those built with Gatsby, are easy to deploy and scale using CDNs and provide users with an amazing experience because pages load “blazing fast”. 🤓

In some cases though, the data you need for your Gatsby site might come from a database, which it probably will in many real-world scenarios.

For example, in a recent conversation with [David Eads](https://twitter.com/eads), he told me that while Gatsby was being used effectively at [ProPublica Illinois](https://www.propublica.org/illinois), there’s been a pain-point in integrating some of large datasets (on Postgres) they work with.

But, those days are now gone 🎉 because:

1. You can use the amazing [gatsby-source-graphql](https://www.gatsbyjs.org/docs/third-party-graphql) plugin to set any GraphQL API as a gatsby data-source
2. You can use Hasura to expose an existing [Postgres database](https://hasura.io/learn/database/postgresql/introduction/) over GraphQL instantly

{% twitter 1044708144956538880 %}

[Karthik Venkateswaran](https://blog.hasura.io/@vasanthivenkateswaran/) has put together a neat little boilerplate and tutorial so that you can get started quickly!

[Check it out on github.](https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/gatsby-postgres-graphql)

Take it for a spin and let us know what you think. If you have any questions or run into any trouble, feel free to reach out to us on [twitter](https://twitter.com/hasurahq), [github](https://github.com/hasura/graphql-engine) or on our [discord server](https://discord.gg/vBPpJkS).
Portfolio Review
Tags: portfolio, help, html, css
Published: 2018-09-26 23:16:41

---
title: Portfolio Review
published: true
description: Portfolio Review
tags: portfolio, help, html, css
---

Hello. Just got done with the second version of my portfolio. I'd love some feedback on it. I think it's pretty good but I'd love to hear different opinions. Would you change anything? Thanks a bunch!

http://nicolejsaunders.com
Which Linux should I install being a React developer
Tags: linux, discuss, react
Published: 2018-09-26 21:08:37

---
title: Which Linux should I install being a React developer
published: true
description: linux distro
tags: linux, discuss, reactjs
---

I'm using Windows 10 on my HP laptop with Amd A12 processor and only 4 GB ram.

I want to know which OS you guys use for developer work and which will be the most stable for me. I've read duscussions like arch linux will have many packages that needs to be updated so I don't want that tiresome work everyday

I am wishing to start my dev work on linux because on Windows, VSCode with Chrome and discord lags a lot at times of switching between them.

So please suggest share your thoughts so that i download the OS tomorrow and make it bootable and start working as soon as possible. Thanks in advance


**EDIT**: Also just yesterday night I booted with AntergOS it didn't let me dual boot saying it needs a GPT partition. Then I tried Solus OS and it didn't even recognize itself on the disk. so then I made Fedora bootable and installed it but just after that since I had to turn on the Legacy support on, my Windows 10 disappeared from the grub or boot options. 

So then I again live boot with the pendrive to check whether my Windows drives are there on the disk or not. Then I used my Windows Recovery disk and it installed it in a span of 4 hours so now I'm typing to you this on my Microsft Edge Browser (while chrome downloads in background).

I think my dream of starting the development on Linux systems will be shattered so much. 

I read articles/blog regarding solving this online but windows needs UEFI method to boot and nothing else.
Setup Search Engines in Chrome as Shortcuts to the Web
Tags: chrome, devtips, tips
Published: 2018-09-26 20:30:50

---
title: Setup Search Engines in Chrome as Shortcuts to the Web
published: true
description: Chrome's configurable search engines can be used to create some really useful shortcuts
tags: chrome, devtips, tips
---

I am totally stealing valour from my colleague, Alex - this is a tip he showed me.

Here is a little tip that our head tester showed me that uses Chrome's autocompletion for search engines as shortcuts to URLs. The caveat is that the URL has a format where you can insert a string that you type into the URL. Basically you need a URL that can have 1 substitution done on it.

`https://your-app.com/users/<id>`
`https://github.com/repo/pulls/<user>`
`https://your-prefix-<pr_number>.herokuapp.com/`

For instance if you use Heroku's review apps with Github then you might end up with a URL such as https://your-prefix-1234.herokuapp.com/. 

As a tester he was jumping around a lot of review apps and so setup a search engine such that he could just type the Github PR number.

![Heroku Review App Shortcut](https://thepracticaldev.s3.amazonaws.com/i/68067bjzgajxyhdqqj8w.png)

What this allows you to do is just type `pr` into the address bar, then press tab, then enter your PR number and press enter. The URL is expanded as explained in the dialog.

As a developer I tend to want to visit the Heroku Dashboard for a Review App. To do this I setup another search engine: 

![Heroku Dashboard Shortcut](https://thepracticaldev.s3.amazonaws.com/i/7dl9l0hac74bn4smpxtx.png)

This lets me type `hdash`, tab, PR number, enter and I'm in the Heroku Dashboard for that Review App.

Bob's your uncle!

I realise this isn't ground breaking and I totally stole it from a colleague (that is unlikely to ever see this - but hello Alex if you do!) but it is a really handy hack.
Explain Wordpress' popularity like I'm five
Tags: explainlikeimfive, wordpress, webdev, php
Published: 2018-09-26 19:59:04

---
title: Explain Wordpress' popularity like I'm five
published: true
description: 
tags: explainlikeimfive, wordpress, webdev, php
---

I've never really understood Wordpress's popularity, can someone explain all the reasons it has such a huge userbase?
Code Folding in Android Studio
Tags: android
Published: 2018-09-26 19:57:46

---
title: Code Folding in Android Studio
published: true
description: Focus on the code that matters by leveraging code folding within Android Studio
tags: android
---
**[Check Out My YouTube Channel](https://www.youtube.com/c/NateEbel)**

> *“Focus On What Matters”*
 

When working in our IDE, at times it’s easy to become overwhelmed with all the code on the screen.  To better focus on what’s most important, it can be useful to hide non-essential blocks of code from our editor window.

The Code Folding shortcuts in Android Studio  help us do just that.

The allow us to fold Code Blocks & Region Blocks so we can have more fine grained control over what code we are looking at in any given moment.


# Shortcuts
![code folding shorcuts](https://thepracticaldev.s3.amazonaws.com/i/ysqoplbnrjeek995gdsj.png)
<figcaption>code folding shortcuts</figcaption>

The expand & collapse shortcuts allow us to quickly show or hide code blocks or code regions.

We can expand all or collapse all by adding shift to the shortcuts above.


# Code Blocks
We can take an expanded block of code like this anonymous inner class

![expanded code block](https://thepracticaldev.s3.amazonaws.com/i/f4baefgjn9jzdzkj1v5m.png)
<figcaption>expanded code block</figcaption>

and collapse it within the IDE, using the collapse shortcut, so it visually looks like this.

![collapsed code block](https://thepracticaldev.s3.amazonaws.com/i/791x3xdzdedll1s3bnel.png)
<figcaption>collapsed code block</figcaption>

We lose the immediate view of the code, but if that code is not relevant to us in this moment, then it can actually help reduce the visual noise in our IDE.

 

To collapse a specific block of code, place your cursor within the block and execute the shortcut.

If you run the shortcut multiple times, the IDE may continue to collapse blocks of code in increasing scope until everything in the current file is collapse.  The same logic applies when expanding code as well.


# Region Blocks
We can define custom region blocks using comments.  These regions can be helpful for documenting & group related sections of code; such as the implementation of an interface.

![expanded region block](https://thepracticaldev.s3.amazonaws.com/i/itxl448yw2ibecf0kqty.png)
<figcaption>expanded region block</figcaption>

Using the collapse command, we can collapse the entire region so only the region label is visible within our editor.

![collapsed region block](https://thepracticaldev.s3.amazonaws.com/i/ozz1u28xbhdqmofrgcif.png)
<figcaption>collapsed region block</figcaption>

 ***

For more on code folding, check out my video on YouTube
{% youtube oyKmEc7399Q %}


 ***

I love to talk Android, tech, or geekery, so if you have feedback or want to chat you can follow me on [Twitter](https://twitter.com/n8ebel), here on [dev.to](https://dev.to/n8ebel), or check out [my blog](www.n8ebel.com)

**[Check Out My YouTube Channel](https://www.youtube.com/c/NateEbel)**
How to find Mutual Fund House’s Website
Tags: howto, learn, amc, amfi
Published: 2018-09-26 21:11:03

---
title: How to find Mutual Fund House’s Website
published: true
tags: How To,Learn,AMC,AMFI
canonical_url: 
---

Mutual Fund investors often need to know about the details of Mutual Fund House and the people behind the AMC. Also in order to search in direct mutual funds investors tend to register directly with AMC for hassle free experience and stay protected. This article will explain how to identify Mutual Fund House's website in detail.

The post [How to find Mutual Fund House’s Website](https://mfrepublic.com/how-to-find-mutual-fund-houses-website/) appeared first on [MF Republic](https://mfrepublic.com).
Some old mIRC add-ons (1998 to 2001)
Tags: addon, irc, programming, mirc
Published: 2018-09-26 18:50:16

---
title: Some old mIRC add-ons (1998 to 2001)
published: yes
tags: add-on,IRC,programming,mIRC
canonical_url: 
---

Here there is a list of different add-ons I made for [mIRC](https://www.mirc.com/) (very old versions), the most famous IRC client. They were made from 1998 to 2001.

**mNotify** 0.96b (3rd June 2001): improves and enhances the “notify” function. Configurable.

**Nickah** 0.05 (13th January 2001): configurable nick completion.

**PolishKill** 1.00b (11th January 2001): lets you configure actions for users who uses some server-assigned names.

**FastMSG** 0.20b (9th January 2001): reproduces a sound and opens a window with a message that can be sent to you through CTCP. Configurable

**AwaYeah** 0.25b (19th May 2001): improves and enhances the “away” function with different things including sending an SMS to your phone. Includes FastMSG 0.20b. Needs SmS CoNTRoLeR (with SmS Sender 2.2 by hPm) by |-FaiR-| (not included). Configurable.

**aXpect** 0.10b (16th December 2001): improves mIRC visual aspect and also reacts to desired words by performing chosen actions. Configurable.

**FileInfo** 0.25b (29th November 2000): shows and stores information about the computer where it is executed.

**mHTML** 0.01b (10th December 2001): offline HTML browser for mIRC. Not functional.

**MasterPubli** 0.05b (24th March 2001): simple add-on to advertise anything you want.

**Enteo-Psiquers** AddOn 0.10b (17th June 2001): showed news about Enteo-Psiquers on-line shop by using sockets.

**Emu** (7th August 1998): informative and educative add-on that shows information about emulators. It also sent information about an emulation CD as well as the steps to follow to join a software development team (called Honor Software) which I tried to create.

**Distance AddOn 0.05** (8th July 2001): script to remote control someone’s computer (it could be considered a trojan if the user did not know what is the script for).

**PubliBOT** 0.01b/0.001b (21st December 2001): an advertisement bot (spambot) made for mIRC with different options.

They can be found on GitHub: [https://github.com/jalbam/mirc\_addons](https://github.com/jalbam/mirc_addons)
[astuce] Comment utiliser une base de donnée pour stocker tous vos logs personnalisés avec l'API JLog de Joomla 3
Tags: tips, joomla, logs, mysql
Published: 2019-07-28 22:15:07

---
title: [astuce] Comment utiliser une base de donnée pour stocker tous vos logs personnalisés avec l'API JLog de Joomla 3
published: true
tags: tips,joomla,logs,mysql
canonical_url: 
---

Une API intéressante  pour les développeurs qui souhaitent faire un monitoring du comportement de leur extension personnalisée pour Joomla ou tout simplement pour déboguer leur extension en analysant les logs grâce à des requêtes SQL. Dans cet article, je vous propose pas à pas la mise en oeuvre d’un logger qui stocke les données dans une base de donnée MySQL.
Make C++ Great Again (now for Web)
Tags: c, webserver, webservice, json
Published: 2018-09-26 19:20:42

---
title: Make C++ Great Again (now for Web)
published: true
description: With the advent of Modern C++, it is very easy to use the power of C++ in the form of web-services which can easily be access through javascripts and other languages by REST API calls. So, I have a plan ..
tags: C++,webserver,webservice,json
---

With the advent of Modern C++, it is very easy to use the power of C++ in the form of web-services which can easily be access through javascripts and other languages by REST API calls. Here is a plan with a real world example on how to go about it:

https://www.academia.edu/37484032/Make_C_Great_Again
Space Cleaner - node package
Tags: spacecleaner, clean, storage, savestorage
Published: 2018-09-26 18:46:14

---
title: Space Cleaner - node package
published: true
description: 
tags: space-cleaner, clean, storage, save-storage
---

A node package for storing server space.

https://github.com/Atishay96/space-cleaner
Containers Under Attack
Tags: containers, security, appsec, developers
Published: 2018-09-26 10:55:24

---
title: "Containers Under Attack"
published: true
description: ""
tags: "containers, security, app-sec, developers"
---


I am huge fan of using containers for development and production in order to keep parity across all environments where we develop and deploy our code.

Today I came across [Containers Under Attack](https://techbeacon.com/containers-under-attack-what-your-app-sec-team-needs-know) article, that talks about containers security, but I do not see mentioned their a thing that bothers me since I started using containers. 

Stop here, read the article I linked above and then continue...

So the thing that bothers me the most is that a lot of developers are careless or unaware of the best practices for containers and they just treat them as a normal server or VM, where they ship all the software they need inside 1 single container, they even include unnecessary remote access like SSH or FTP!!!

Worst than this is that I see lot of containers running all services as root... really??? Please keep any service running under a unprivileged user, unless is strictly impossible to do it.

Another think to bear in mind is that when using a new technology is vital to take the time to study what are the best practices and how it can be secured properly.

Now if you want to really excel as a developer then try to understand how your current stack works under the hood in an high level overview. Remember that he best the developers are always the ones that grasp at least 1 level below the stack they are using. 

What are your thoughts on this?
Angular vs React   
Tags: frontend, softwaredevelopment
Published: 2018-09-26 18:19:55

---
title: Angular vs React   
published: true
description: Which framework
tags: Frontend, software development
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/twxmoym6c1bt3cpzzqbs.jpg">

I've been using react and Angular for a while now. Both frameworks are robust, reliable, and super fast. Both frameworks were built by Tech giants (Facebook for react and Google for Angular). However, there is some difference when it comes to the learning process.

I've learned react in one week. Learning react doesn't need lots of efforts if you already know how to write Javascript. On the other hand, I spent 6 weeks learning Angular. You can consider Angular as a completely new programming language. I made some research on the purpose of Angular, many experts said that Angular is an alternative for a framework called Google Web Toolkit (GWT). According to many articles, Angular is easier than GWT. Furthermore, Google migrated some of its products from GWT to Angular like Google Adwards. However, some Google products are still written in GWT (like Blogger.com).

To cut it short, if you have enough time to learn new language, go for Angular. On the other side, if you don't have time and you are familiar with Javascript, go for React.
Why is HTML linting not a common practice?
Tags: discuss, html, linting, healthydebate
Published: 2018-09-26 17:55:39

---
title: Why is HTML linting not a common practice?
published: true
description: Why is linting HTML not a common practice?
tags: #discuss, #html, #linting, #healthydebate
---

We use linters such as [ESLint](https://eslint.org/) and [Stylelint](https://stylelint.io/) all the time but why is linting HTML not a common practice?

I occasionally see people use the [W3C Validator](https://validator.w3.org/) but never see specific HTML linters in a build process / pipeline.

Why is that?
What Did You Try New This Week?  
Tags: productivity, learning, discuss
Published: 2018-09-26 02:27:23

---
title: What Did You Try New This Week?  
published: true
description: Bring on your workaholic game... 
tags: productivity, learning, discuss
---

So after my work is done, and family is asleep, my inner geek'ness wakes up to try some new things which I heard about OR wanted to learn. 

For example: Few weeks ago, I was curious if I could somehow teach Google Assistant/Alexa to run some command for me. 

I went onto YT and this guy deployed full Kubernetes Cluster by just saying "Hey Google, Start Cluster" , the fact that GA asked what size cluster do you want, which zone and which environment to deploy it into.. I was super impressed. 

Now some of you might find that cheese, but whatever.. I had different things in my mind I could do with that power 😂.

*ME*:Hey Google, scale up QA to 50 nodes, QA is having a hard time
*GA*: Yes my lord, and do you want me to slack the status once I am done? 
*ME*: Yeesss please.

I searched for some code and samples and seriously there is almost nothing out there that ties Google Assistant > GKE (Google Kubernetes Engine) ... (Basically Google Cloud 😛) 

Well, I got to the point where I slapped [Dialogflow](https://dialogflow.com/) which created a [Function](https://cloud.google.com/functions/
), and that function triggeres API between Google Assistant and GKE. 
I am not ready to show off, but if anyone is interested in working offline , feel free to hit me up :) .. 


Oh and today I learned more about GitLab + GKE ( Please bare in mind that I am exclusivly working on Kubernetes in AWS and or baremetal (locally) , so connecting the GitLab and doing CI/CD with GKE was a nice learning curve.. 

Here are samples if you are into it: [GitLab](https://gitlab.com/gitlab-examples/kubernetes-example)

Your turn..
How to add colorful output to my dev.to posts?
Tags: discuss, help
Published: 2018-09-26 16:47:00

---
title: How to add colorful output to my dev.to posts?
published: true
description: 
tags: discuss, help
---


Hi! I am writing post about testing framework which emits nice colorful output, how can I colorize text through dev.to markdown?


Thank you.
I created and maintained my first open source project for Hacktoberfest. It got spooky. Ask me Anything.
Tags: ama, hacktoberfest, opensource, github
Published: 2018-09-26 16:17:06

---
title: I created and maintained my first open source project for Hacktoberfest. It got spooky. Ask me Anything.
published: true
description: 
tags: AMA, Hacktoberfest, opensource, github
---

![A skeleton, deep in thought](https://thepracticaldev.s3.amazonaws.com/i/cuaqipo2as11qq0ogkni.jpg)

With [Hacktoberfest](https://hacktoberfest.digitalocean.com/) *just* around the corner, you may be thinking, what projects can I contribute to?

Last year, I thought the same thing. I had a hard time finding projects that I could contribute to. So, I decided to create my own, a [countdown timer to Halloween](http://shannoncrabill.com/how-many-days-until-halloween/).

Ask me anything.

👻

_Photo by Mathew Schwartz on Unsplash_
Use Carthage effectively
Tags: ios, carthage
Published: 2018-09-26 15:51:12

---
title: Use Carthage effectively
published: true
description: 
tags: iOS, Carthage
---

# Carthage

Carthage is one of the most popular dependency management tool for iOS.

In my article, I introduce several convenient command to save your time.

# Command

## carthage update —platform ios

When executing carthage update, carthage create Cartfile.resolved from Cartfile you prepared. Then,
build frameworks.

In this command, you should specify platform you want to use frameworks in.

carthage update —platform ios

Carthage usually create multiple platforms frameworks(iOS, watchOS, tvOS, and macOS), but maybe not use these all.


## carthage bootstrap —platform ios —cache-builds

When executing carthage bootstrap, carthage build frameworks from Cartfile.resolved file. Not from Cartfile.

carthage bootstrap —-platform iOS —cache-builds

—cache-builds means not rebuilding frameworks if you already had built frameworks in Carthage/Checkouts/
.

Fortunely, carthage automatically check if framework is built in same Swift version. If not, rebuild it.


# Specify libraries

Cartfile is share between multi platforms. For example, iOS and watchOS.

Basically, command is here:
carthage bootstrap —platform iOS,watchOS

But it has problem. In many cases, watchOS doesn’t use all dependencies defined in Cartfile.

So, my recommend is:

carthage bootstrap —platform iOS
carthage bootstrap —platform watchos SWXMLHash

Separate command, and pass library name to build command for watchOS.


# Use latest version of OSS

To shorten build time, you can use framework binary. It’s provided by Library Author, so you can use implicitly.

To use it, your project swift version needs to be same as swift version of that binary. If you use Swift 4.2, using library of version build in Swift 4.2.

Carthage skip checkout and build steps, so it is very efficiently.


# Recap

Carthage is great tool, but build time is bottleneck. I introduce tips to resolve it.

Make hope this article helps you!

—-

*I'm studying English. If you notice English mistake, please tell me in the comments.