teleren/devto huggingface dataset:
Setting Up Netlify Forms: An In-Depth Tutorial
Tags: javascript, webdev, tutorial, serverless
Published: 2020-10-29 15:17:40

---
title: Setting Up Netlify Forms: An In-Depth Tutorial
published: true
tags: javascript, webdev, tutorial, serverless
canonical_url: https://snipcart.com/blog/netlify-forms
---

![netlify-forms](https://snipcart.com/media/205513/netlify-forms.png)

I've been working in web development for a long time. 

How long? If I remember right, I set up my first web server while avoiding dinosaurs. 

While my memory is a bit hazy, I can distinctly remember that a task early in my career was building form processing CGI scripts for clients. Technology has come a long way since my humble beginnings.

Modern web technologies such as the [Jamstack](https://snipcart.com/blog/jamstack) and the rise of static websites have often raised concerns about dynamic functions. 

But I want to reassure you: integrating forms into your projects shouldn’t be a hassle.

**In this post, I want to talk about a particularly efficient tool that you should add to your dev belt: [Netlify Forms.](https://www.netlify.com/products/forms/)**

I’ll explore this feature in-depth:

1. Netlify Forms basics
2. Form customization
3. Spam protection
4. Enhanced Netlify forms submission
5. Form notifications

Let’s add some context before getting all technical.

## How I discovered Netlify Forms

In the old days, I used Perl (an incredibly flexible language) and had libraries to make form creation simpler, but it's shocking how often I had to write custom code just to take form input and send it along to someone else. Even after I eventually switched languages (ColdFusion FTW), I still spent a lot of time doing basic form processing. 

That's why when I started getting heavily into the Jamstack (a few years ago, when we simply called them static web sites), form processing was my chief concern. Luckily a number of services have cropped up to support handling form input. 

For example, my blog makes use of [Formspree](https://formspree.io/). It has a decent free tier (50 submissions per month), which works fine for my site.

However, I host on [Netlify](https://www.netlify.com/) and one of the many services they provide is baked in form processing. If you don’t know Netlify yet, you should look into it right away. This team has done tremendous work to facilitate the integration of dynamic features into modern static, frontend-centric architectures (they also coined the term “Jamstack” back in 2015.)

Read the rest of this post [here](https://snipcart.com/blog/netlify-forms)
A GraphQL & Node.js Server Built with Express in No Time
Tags: javascript, webdev, node, tutorial
Published: 2019-03-29 16:26:36

---
title: A GraphQL & Node.js Server Built with Express in No Time
published: true
tags: javascript, webdev, node, tutorial
canonical_url: https://snipcart.com/blog/graphql-nodejs-express-tutorial
---

![graphql-nodejs](https://snipcart.com/media/204250/graphql-nodejs-2.png)

We’ve already played with GraphQL [a few](https://snipcart.com/blog/headless-cms-graphql-takeshape-tutorial) [times](https://snipcart.com/blog/vuejs-graphql-airtable-example) on the blog.

Always with great results as GraphQL is pretty awesome&mdash;and more *in vogue* than ever!

But we’ve mostly stuck to the frontend side of things, using existing APIs and built-in GraphQL implementations.

Here, I’ll be trying something different. For this, I need to jump to the obscure place that is server-side development.

More precisely, I’ll go on and **craft a GraphQL server using Node.js Express.**

To do so, I’ll leverage these tools to create and expose a simple API. For this use case, I’ll also throw in PostgreSQL as a database and the Join Monster library to optimize my queries. 

The tutorial will cover:

- Creating a project for the API
- Building a GraphQL schema and resolvers
- Crafting an Express app
- Linking the GraphQL API to a PostgreSQL database

But let’s not get ahead of ourselves just yet. For now, let’s start with a few definitions.

Read the rest of this post [here](https://snipcart.com/blog/graphql-based-cms-tutorial-integration-with-graphcms-nodejs-and-apollo)
How to Use WordPress with React to Build a Modern Web App
Tags: javascript, react, webdev, showdev
Published: 2018-09-20 18:14:08

---
title: How to Use WordPress with React to Build a Modern Web App
published: true
tags: javascript, react, webdev, showdev
canonical_url: https://snipcart.com/blog/reactjs-wordpress-rest-api-example
---

![Strapping React.js on a WordPress Backend: WP REST API Example](https://snipcart.com/media/204844/wordpress-react.png)

When we first wrote about using WordPress as a headless CMS and the WP REST API back in 2017, it was a very big deal for us, JAMstack aficionados. 

I mean, a concept like “headless CMS” was only beginning to make noise, and WordPress embracing it was a huge statement.

And it paid.

The web development landscape is ever-changing and the promises of [modern frontend techs](https://snipcart.com/blog/jamstack) are materializing.

![wordpress-rest-api](https://snipcart.com/media/203587/wp-rest-api.jpg)

Every developer and their dog have something to say about WordPress, and it's not always flattering. Far from it. However, even its most avid detractors are forced to take notice of this feature, because it has already transformed the way we use the popular CMS.

WordPress REST API is a **huge** step forward for frontend developers looking to combine the power of JavaScript frameworks like React ([or Vue.js](https://snipcart.com/blog/wordpress-vue-headless)) with WordPress.

This is exactly what I want to do today with this demo of the WordPress REST API in the work. 

I'll use WordPress as a backend, and the REST API to feed data into a React app.

More precisely, you’ll learn how to:

- Access the WP REST API from your frontend
- Add a custom post type and expose it to the API
- Build a React app backed by this API
- Handle React Hooks (and create a custom one)

Before we start, let's see what is the REST API for WordPress and why you should care about it.

## What is WordPress REST API?

WordPress itself doesn't need any introduction, but let's take a closer look at the recent WP REST API.

Read the rest of this post & technical tutorial [here](https://snipcart.com/blog/reactjs-wordpress-rest-api-example)
Jekyll E-Commerce Tutorial: Add a Shopping Cart to Your Jekyll (v4.0)
Tags: javascript, webdev, beginners, tutorial
Published: 2019-08-22 18:12:37

---
title: Jekyll E-Commerce Tutorial: Add a Shopping Cart to Your Jekyll (v4.0)

published: true
tags: javascript, webdev, beginners, tutorial
canonical_url: https://snipcart.com/blog/jekyll-ecommerce-tutorial
---

![Static Site E-Commerce: Integrating Snipcart with Jekyll](https://snipcart.com/media/204664/jekyll-ecommerce.png)

Like many devs, one of our first encounters with static site generators came through the discovery of Jekyll.

It was back in 2015.

Jekyll was dominating the field at that time, and we remember loving it from the get-go.

Even though it has more competition than ever, you can still see Jekyll sitting at the top of [the list of popular SSGs](https://www.staticgen.com).

Today, **I want to explore Jekyll for one specific use case: e-commerce.**

So after going through this SSGs’ basics and why it’s a good option for e-commerce projects, I’ll show you how to build a fully functioning Jekyll shop.

Tutorial steps 🛠

- Installing Ruby & Jekyll
- Creating a collection
- Overriding Jekyll’s default theme
- Integrating a shopping cart
- Deploying a Jekyll e-commerce website

Let’s do this!


Read the rest of this post [here](https://snipcart.com/blog/jekyll-ecommerce-tutorial)
Vue.js SEO-Friendly SPAs: Tips, Tools & Prerender Example
Tags: javascript, vue, webdev, showdev
Published: 2018-08-23 18:27:02

---
title: Vue.js SEO-Friendly SPAs: Tips, Tools & Prerender Example
published: true
tags: javascript, vue, webdev, showdev
canonical_url: https://snipcart.com/blog/vue-js-seo-prerender-example
---

![Vue.js Tutorial: An Example to Build and Prerender an SEO-Friendly Site](https://snipcart.com/media/203838/vue-js-seo-prerender-demo-1.jpg)

Do you know about Hulu's JavaScript fail story?

Back in 2016, the online video streaming service experienced a [56% visibility drop due to bad JS handling](https://www.linkresearchtools.com/case-studies/hulu-javascript-fail-visibility-drop/).

A nightmare no business wants to go through.

![enter image description here](https://media.giphy.com/media/Qa5dsjQjlCqOY/giphy.gif)

To avoid such disasters, you have to know what you're doing when working with modern JavaScript frameworks.

Here at Snipcart, [we love Vue.js](https://snipcart.com/blog/progressive-migration-backbone-vuejs-refactoring), but are entirely aware of the SEO issues with a Vue.js singe-page application.

In this post, I want to show JS developers how easy it is to make Vue SEO-friendly.

I'll go through:

 - General SEO tips you should always apply.
 - Specific Vue.js SPA SEO issues.
 - Tools to fix them with server-rendering & prerendering.
 - A technical Vue.js SEO example using `prerender-spa-plugin`.

> This is a fully updated version of our Vue.js SEO resource. The original one was followed by two other pieces about JS frameworks SEO issues, [for React](https://snipcart.com/blog/react-seo-nextjs-tutorial), and [Angular](https://snipcart.com/blog/angular-seo-universal-server-side-rendering). There's also a video version of this content you can find at [the end](#demo) of this post.

Read the rest of the post and technical tutorial [here](https://snipcart.com/blog/vue-js-seo-prerender-example)
E-Commerce for React Developers [w/ Next.js Shop Tutorial]
Tags: javascript, webdev, react, showdev
Published: 2018-11-23 16:02:06

---
title: E-Commerce for React Developers [w/ Next.js Shop Tutorial]
published: true
tags: javascript, webdev, react, showdev
canonical_url: https://snipcart.com/blog/react-ecommerce-tutorial
---

![A React E-Commerce Guide (BONUS: Next.js Shop Tutorial!)](https://snipcart.com/media/205468/react-ecommerce-tutorial.png)

The events of 2020 totally fast-tracked the omnipresence of e-commerce in our lives.

It’s changing the way we purchase goods and services that we use at a pace that would have been hard to imagine not so long ago. 

From buying some swag from our favorite tech companies to fulfilling a prescription, the web needs tools to provide a dynamic experience where consumers can easily find what they’re looking for and just as easily make the purchase.

In this post, I’ll explore how one of these tools, React, can help developers create these high-quality e-commerce experiences.

I won’t simply *tell* you that React can deliver dynamic UX, I’ll also *show* you by crafting a Next.js shop in a step-by-step tutorial:

- Creating a new app with Next.js
- Adding products to the React app
- Integrating a shopping cart 
- Defining products within Snipcart
- Setting up a cart summary and cart preview

We all want to build e-commerce projects that stand out. Let’s see how React can help. 

## Building a dynamic e-commerce experience

The crux of a shopping experience is being able to provide dynamic information to your site’s customers. This includes both the product information of what you’re trying to sell as well as how that relates to the actual customer.

**The dynamic bits of products in e-commerce**

When dealing with products, specifically physical goods, you might have a limited amount of products to actually sell. This means your shopping experience needs to be able to maintain an up-to-date count of how many items are left “in stock”.
 

Read the rest of this post [here](https://snipcart.com/blog/react-ecommerce-tutorial)
What's your tech stack?
Tags: discuss, infrastructure, ourstack
Published: 2018-04-25 13:38:29

---
title: What's your tech stack?
published: true
canonical_url: https://www.iamdeveloper.com/posts/whats-your-tech-stack-1301/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xlcmo0xfz2dwksmkik27.jpg
tags: discuss, infrastructure, ourstack
---

Photo courtesy of Flickr user [kreturn](https://www.flickr.com/photos/keturn/187830710/in/photolist-hAFww-643UXH-4GNpTh-935bXD-69Ekbg-22EJ5-8nCmKg-4GJf7R-M2t9R-22EHH-4n2je8-22EJ1-4jbb6p-7H5ziX-5Yirbo-7Nhdc5-643Uwc-3Et8B-2VTaN3-FTJsTz-oPA3Lg-4tbY9e-24L4He-2P4kK-5U5kqA-6b69i2-4kLtw4-5VgTDs-5VgTtb-zYDjN-3RWPYE-85Sr6-64bxiC-4jbby4-7s4A8L-a4Si8G-9Q8YtZ-7Nc9hr-2Nztd-DNoxY-4ZANb9-96NXVh-8EJXih-572bk1-6LwVH7-8ge1Bf-8tarqR-5uXBdU-mVFFd-6eL33G)

I came across this post from @ben today while I was doing some daily reading on [dev.to](https://dev/to).

{%link https://dev.to/ben/the-devto-tech-stack %}

It got me wondering what other peoples' stacks look like. Here's pretty much what our tech stack is where I currently work. What's your tech stack look like?

Front-End:
* [TypeScript](https://www.typescriptlang.org)
* [webpack](https://webpack.js.org)
* [React](https://reactjs.org)
* [Styled Components](https://www.styled-components.com/)
* [Formik](https://github.com/jaredpalmer/formik)
* [npm scripts](https://docs.npmjs.com/misc/scripts)
* [Jest](https://facebook.github.io/jest)
* [Sentry](https://sentry.io/for/javascript)

Back-end:
* [Node](https://nodejs.org)
* [Sentry](https://sentry.io/for/javascript)
* [Scala](https://www.scala-lang.org)
* [Python](https://www.python.org)
* [Log Stash](https://www.elastic.co/products/logstash)
* [Kibana](https://www.elastic.co/products/kibana)
* [CouchDB](https://couchdb.apache.org)
* [PostgresSQL](https://www.postgresql.org)

Deployments and Infrastructure
* Deployments via [Jenkins](https://jenkins.io)
* [Docker](https://www.docker.com)
* [Infrastructure as a service](https://en.wikipedia.org/wiki/Infrastructure_as_a_service) (iaas) via [Google Cloud](https://cloud.google.com) and [Kubernetes](https://kubernetes.io).
Machine Learning career path
Tags: help, discuss, machinelearning, deeplearning
Published: 2018-04-25 13:00:18

---
title: Machine Learning career path
published: true
description: 
tags: help,discussion,machinelearning,deeplearning
---

Hello everyone!

I want to become one of the top machine learning engineers. 
I know that I have to follow a long learning path and maybe I don't even have the skills, but at least I want to try.

I found a lot of online resources, but I do not know which are the best and where to start.
So, what courses, books do you recommend?
There is any ML engineer here that was self-educated?

Thanks,
Costin Giorgian
Ensure Data Safety with Upgraded SecureBridge, a Reliable Network Security Solution
Tags: security, networks, library
Published: 2018-04-25 12:44:10

---
title: Ensure Data Safety with Upgraded SecureBridge, a Reliable Network Security Solution
published: true
description: Devart has upgraded SecureBridge with support for FTP and FTPS protocols, new capabilities and features, and much more. 
tags: security, networks, library
---

Devart, a recognized vendor of professional database tools for developers and DBAs, has released a fresh version of SecureBridge, a network security solution. Now SecureBridge supports the FTP and FTPS protocols, which allow users to exchange files in a common way and securely. 

Another feature that’s worth mentioning is a possibility to connect to a remote host through a proxy server enabling indirect network connections to various network services. In addition to the functionality described above, the release includes the following features:

The TScFTPClient component to support seamless access to remote files when using FTP protocol.
Thread-safe TScStorage to use one storage for many SSH and SSL clients from different threads.
The TScSSHConnectionInfo.LocalSockAddr property to retrieve a local IP address.
The TScSSHServerOptions.MaxConnections property to limit the number of active connections on the SSH server.
The TScSSHServer.BeforeClientConnect event to reject or accept a connection based on the client’s IP before his authentication, which greatly increase server performance.

Dive deep into other useful features of SecureBridge at https://www.devart.com/sbridge/ .

About Devart
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration and backup solutions. The company also implements Web and Mobile development projects.
Learn more about Devart at https://www.devart.com .
Convert emoji and codepoints each other in Ruby
Tags: ruby, emoji, unicode
Published: 2018-04-25 12:38:33

---
title: Convert emoji and codepoints each other in Ruby
published: true
description: How to convert emoji and codepoints each other in Ruby
tags: ruby,emoji,unicode
---

The tips below are what I've learned while implementing a gem, [github_reactions](https://github.com/ohbarye/github_reactions), to summarize reactions on GitHub issues and pull requests. 

## Get codepoints from emoji

```rb
"👍".unpack("U*")
=> [128077]

"👍".codepoints
=> [128077]

# Convert to hexadecimal
"👍".each_codepoint.map {|n| n.to_s(16) }
=> ["1f44d"]
```

## Get emoji from codepoints

```ruby
[128077].pack("U*")
=> "👍"

0x1f44d.chr('UTF-8')
=> "👍"

"\u{1f44d}"
=> "👍"
```
What are advantages of online shopping of gaming CD keys?
Tags: buydestiny2
Published: 2018-04-25 10:51:52

---
title: What are advantages of online shopping of gaming CD keys?
published: true
description: Does buying gaming CD keys online a better option to save time and money? If yes, then what are your views about Instant Gaming online store which provides gaming CD keys at [best deals](https://www.instant-gaming.com/en)?
tags: Buy Destiny 2 

---


Does buying gaming CD keys online a better option to save time and money? If yes, then what are your views about Instant Gaming online store which provides gaming CD keys at [best deals](https://www.instant-gaming.com/en/1919-buy-key-battlenet-destiny-2/)?
⌛️The missing strftime in Go
Tags: go, time, strftime
Published: 2018-04-25 10:50:45

---
title: ⌛️The missing strftime in Go
published: true
description: A story about lack of Go standard library in time/date formatting.
tags: go, time, strftime
---

Last night I was reading time package documentation but I couldn't find `strftime` implementation so I did a little bit of research and I did find out that there's no such thing as `strftime` in Go time package.

![wat](https://i.imgur.com/XHjWQoj.jpg)

Story short I couldn't find anything close to `strftime` even in third-party packages then I decided to implement it using `cgo` without magic and there's it is 🎉, it supports all the standard directives in `strftime` manual page.

https://github.com/cooldrip/cstrftime
How do web developers/freelancers build websites in time?
Tags: webdev, beginners, career, discuss
Published: 2018-04-25 10:47:16

---
title: How do web developers/freelancers build websites in time?
published: true
description: 
tags: #webdev, #beginners, #career, #discuss
---

How do web developers or freelancers build websites nowadays in time? 

* From scratch (Pure HTML,CSS, JS etc) or Website Templates or CMS or Website builders?

Please Mention the tools you use or how you build websites :)
Creatively Display Time
Tags: challenge
Published: 2018-04-25 10:15:22

---
title: Creatively Display Time
published: true
tags: challenge
cover_image: https://thepracticaldev.s3.amazonaws.com/i/aqfg3n3pmro8c7pui8pt.png
---

This is a creative coding challenge to display the time in as creative a way as you can come up with. It doesn't even have to look like a clock! You could display the time using Emoji, or build a clock in [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life), or think about what kind of clock aliens might use.

Here's my entry

{% codepen https://codepen.io/bigblind/pen/gzMMPe %}
Magento 2 Language Switcher 
Tags: magento2, languageswitcher, currencyswitcher, languageselector
Published: 2018-04-25 06:09:40

---
title: Magento 2 Language Switcher 
published: true
description: 
tags: Magento 2, language switcher, currency switcher, language selector
---
Magento 2 language switcher by FMEextensions is a high converting Magento 2 extension which automatically changes the store's language & currency based on the visitor's location. The extension first auto detects every visitor's location from their IP and then redirects them to a personalized store view. This functionality allows Magento 2 users to browse the store in their regional language and also make purchases in local currency. This ultimately improves overall customer's shopping experience. 

Apart from the basic language & currency switching functionality, this extension offers other useful features. One of them is manual switching. The extension allows customers who do not want automatic redirection to manually select the store to switch to. [Magento 2 language switcher] (https://marketplace.magento.com/fme-geoipdefaultlanguage.html) also allows IP exceptions to exempt some customers from redirection at all.

###Features - Magento 2 Currency Switcher

Some main features of this extension are listed below.

- Auto detect visitor's location
- Auto currency & language switching
- Allows auto & manual switching
- Supports IP exceptions
- Import Geo location database
- Prompt box in footer
- Create groups & assign countries
What products or technologies have impressed you?
Tags: discuss
Published: 2018-04-25 09:56:48

---
cover_image: https://media1.tenor.com/images/b2190afe666915580adb0890260362d1/tenor.gif?itemid=4895431
title: What products or technologies have impressed you?
published: true
description: What products or technologies have impressed you?
tags: discuss
---
I'm old (by today's developer standards) and have seen a lot of things come and go, pushed by the corporations, hyped by the media and worshiped by the masses :-)

Basically, I'm not easily impressed and couldn't care less for the next super-duper js library or another reinvention of the wheel. But from time to time something really breathtaking comes along. Here are three things that to this day I still consider mind-blowing.


#1996, 3dfx Voodoo Graphics
To this day I think there was no bigger single leap in consumer hardware performance than this. It felt like a personal Silicon Graphics workstation on a graphics card.

#1999, IBM Microdrive
Back in the day, this was like something straight out of the future. Tiny mechanical hard drive with spindle motor, head servo, controller, power electronics etc., all packed into Compact Flash enclosure. I think the miniaturization level is still very impressive today.

#2009, Google Wave
I feel really sorry that Wave failed so badly. None of the components were really groundbreaking or even that new, but they just fit together in a good way. It was the classic case of the whole being more than the sum of the parts.  

### Obligatory honorable mention, way before my time

#1958, LISP
Probably the most influential programming language/paradigm/philosophy ever. Need I say more.