teleren/devto huggingface dataset:
Building a Blog with Agility Headless CMS
Published: 2020-12-19 04:45:17

## What is a Headless CMS

A Headless CMS is a hot trend in web development. It provides a ready-to-go way to manage your data with a visual dashboard like traditional CMS (WordPress, Drupal) but allows you to pull the data via an API so you can use the frontend technologies of your choice. Headless CMS's are a powerful and popular combo with a Static Site Generator but can be used in most web applications.

To see a list of all Headless CMS solutions and Static Site Generators checkout the directories at JAMStack.org.

## Step 1 - Open Up a Agility CMS Account

Head over to agilitycms.com and open a free account!

## Step 2 - Create a Blog Model

Once on the dashboard select the model panel then:

1. Select Content Definitions

2. Click add

3. name the model blog and set the type to list

4. Add the following fields (feel free to add more)
    - a text field named title
    - a multi-line text field named body
    - a date field called date that defaults to the current date

5. Save the model

## Step 3 - Add some content

On the menu on the left select the content section and:

1. Select the plus sign for new content

2. Select a new list of item type blog

3. name the new list "myblog"

4. Add a few posts to myblog

5. When do adding post make sure to hit "publish" (select the posts before hitting publish)

## Step 4 - Retrieve the Data in your Javascript

Whether you are using backend or frontend javascript to retrieve your posts, below is the syntax for calling your blog posts with your preferred JS HTTP request method. Once you receive the data just allow your frontend to render however you like (using jQuery, React, Vue, Svelte, or Angular)

#### $.ajax

```js

const guid = //get guid in the settings section under api keys

const apikey = // get apikey in the setting section under api keys

$.ajax({
 url: `https://api.aglty.io/${guid}/fetch/en-us/list/myblog`,
 headers: {
     accept: "application/json",
     APIKey: apikey
 }   
})
.then((response) => {
    console.log(response)

    //use the data to populate your webpage from here
})

```

#### fetch
```js

const guid = //get guid in the settings section under api keys

const apikey = // get apikey in the setting section under api keys

fetch(`https://api.aglty.io/${guid}/fetch/en-us/list/myblog`,{
  headers: {
     accept: "application/json",
     APIKey: apikey
 }   
})
.then((response) => response.json())
.then((data) => {
    console.log(data)

    //use the data to populate your webpage from here
})

```

#### Axios

```js

const guid = //get guid in the settings section under api keys

const apikey = // get apikey in the setting section under api keys

axios({
  url: `https://api.aglty.io/${guid}/fetch/en-us/list/myblog`,
  headers: {
     accept: "application/json",
     APIKey: apikey
 }   
})
.then((data) => {
    console.log(data)
    console.log(data.data) // <== This is the api data

    //use the data to populate your webpage from here
})

```
Space Themed Site with Mini Game!
Tags: dohackathon, webdev, javascript
Published: 2020-12-19 04:11:11

---
title: Space Themed Site with Mini Game!
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon, webdev, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vpxyn0ofta49l7pbky2a.gif
series: rkahn.dev
---

## What I built

Hi all! For this hackathon (and for myself) I've built a space themed site for my work as an engineering mentor and trainer, with a collaborative mini-game! 🚀

### Category Submission: 

This falls under the personal site category!

### App Link

You can find the application here at [https://rkahn.dev](https://rkahn.dev)!

### Screenshots

![App Screen Capture](https://dev-to-uploads.s3.amazonaws.com/i/oimoqzbf5hebvhpqeaub.gif)

### Description
 
This site showcases some aspects and reviews of my work, as well as some personal information and thoughts. It also contains an astronaut themed mini-game. Launch an astronaut, and everyone can see it for a time!

### Link to Source Code

The static site is built from [this](https://github.com/shiftyp/rkahn.dev) repo, and the golang / docker backend from [this](https://github.com/shiftyp/add-astronaut) repo!

### Permissive License

The code is all released under an MIT license. Feel free to remix it for your own purposes. The imagery on the site is not included in the repository, and is either copyrighted by myself or under the proprietary image license included in the static repo.

## Background

I've been in need of a personal site for some time, but I haven't been inspired to come up with a design. I came across these space graphics a while back, and I've been meaning to incorporate them into a personal project. My personal site turned into a perfect opportunity!

### How I built it 

The static site and the backend are both built and deployed on Digital Ocean Apps. The images are separately hosted on a Digital Ocean Spaces CDN. The images are premium content from freepik.com and flaticon.com. I've purchased a license to them, so please don't use them without permission of their respective owners. 

I tried to keep the code approachable, so the majority of the Frontend is built using just HTML and CSS and compiled with [Parcel](https://parceljs.org/). The astronaut minigame is built using [Preact](https://preactjs.com/) with hooks!

The backend is built with [Golang](https://golang.org/), mainly because this is what the Digital Ocean Docker example started as, and it seemed like a good idea! It stores all the data in memory and doesn't utilize a database. Go ahead and take a look! (see what I did there)

I had wanted to add an analytics server that used the Apps Postgres database component...but I ran into various issues involving SSL and decided to throw my hands in the air and use Segment. 🤷‍♂️


### Additional Resources/Info 

I really enjoyed using Digital Ocean Apps, it made the simpler things (for me) straightforward. I ran into some issues as stated with using the database component, but overall I had a great experience, and look forward to keeping the site on DO Apps for the foreseeable future!
My javascript / tech / web development newsletter out later today 19-12-2020
Tags: javascript, node, programming, webdev
Published: 2020-12-19 04:27:45

---
title: My javascript / tech / web development newsletter out later today 19-12-2020
published: true
description: 
tags: javascript, nodejs, programming, webdev
---

Another edition of my weekly newsletter out later today, lots of great javascript / tech / web development links.

Sign up to have it automatically sent to your email inbox every weekend.

https://markjgsmith.substack.com

—-

Thanks for reading!

[@markjgsmith](https://twitter.com/markjgsmith)
Project 20 of 100 - My first fully-responsive React website
Tags: react, javascript, html, css
Published: 2020-12-19 04:19:16

*Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [link](100-react-projects-day-20-first-full-website.netlify.app)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-20-briandesign-react-website)

Sometimes when you're learning a framework or language it's easy to spend a lot of effort and build a lot of projects that focus on fundamentals but don't create anything you'd use in the real world. That's why I took a break from the fundamentals I've been learning to follow along with an [excellent tutorial on Youtube](https://youtu.be/I2UBjN5ER4s) and build a full site in React.

Most of the tutorial was spent on concepts I already know- in fact just about all of it. Probably the most foreign thing I did here was making separate CSS files for each component.

That said, seeing all of the things I've been learning over the last month and a half put together in an actual, good looking, responsive website was priceless. You never know how you're going to implement something until you've tried it in the wild- so this was my chance to do that.

Lots of fun and an opportunity to flex some of the strengths of the React framework, like reusability and building pages with components.

**5/5 stars - would code again.**

FYI - Thanks again to Brian Design whose excellent Youtube videos seem to be perfect for my current level- too advanced for beginner videos but too new to be advanced. Definitely check out his channel. [Link here](https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A)
Jamstack Conference 2020
Published: 2020-12-19 04:07:00

# Netlify – Jamstack Conference 2020

I had a basic knowledge about javascript through my previous classes and was learning Vanilla Javascript the foundation of Javascript.The things that I hoped to learn were Vue js, React, npm , Gridsome, Vue cli and Angular. 

# Next Js 
I learnt about Next Js which is a React framework. Cassady, the host talked about the improvement that occurred in Next Js recently were she mentions about React fast refresh, it maintains the state of the application while updating the code. According to me Next Js would be a powerful tool in the future as it is the UI framework of React and would be in application more. 
 
# Vue Js
Vue Js is a Progressive JavaScript Framework. The host talks about v-press which is a light weight alternative to viewpress built on Vue 3 and V8 there is a big discussion about the features added. It was difficult to analyse the components that the host was talking about.

# Angular
Angular was discussed they talked about creation of Roadmaps. They are working on developing scully, an open dev tool here the idea is that scully takes an angular application and offers functions like pre-rendering. I am unaware about Angular so I was unable to understand it promptly.
 

#   Reflection
Javascript is the most essential component of web development and The questions that I still have in my mind is that which of them would be a best fit and when should it be used.
Basic Network Protocols
Tags: networkprotocols
Published: 2020-12-19 03:57:07

A protocol is a standard set of rules that allow electronic devices to communicate with each other. these rules include what type of data may be transmitted, what commands are used to send and receive data, and how data transfers are confirmed. 

you can think of a protocol as a spoken language. each language has it is own rules and vocabulary. if two people share the same language, they can communicate effectively.
My Process Of Dev-DigitalOcean Hackathon
Tags: dohackathon
Published: 2020-12-19 03:49:18

## What am i making
I am creating A [Progressive Web Apps](https://web.dev/progressive-web-apps/) with React, [Dev Api](https://docs.dev.to/api/) and [DigitalOcean App Plateform](https://www.digitalocean.com/products/app-platform/)

## My Process
You can see My Process on [github](https://github.com/vimalverma558/devto/commits/master)

### 12 Dec
I See [This Post](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k) of @Devteam announcing the digitalocean app platform hackathon And I think about participate but my exam is in process so i had limited time for this hackathon till 14 Dec(Last Exam Date)

### 13 Dec
I Started Planning How Can I start and Which dev Tool i have to use, Than I decided to use React And Chart.js And i Read [Docs of Dev Api](https://docs.dev.to/api/) And Docs Of DigitalOcean Related to app Platform

### 14 Dec
I started Development, First I Initialized project using Create React App than Start playing with Dev Api, Than Chart.js And Search function added to project
And Deployed to app Platform.

### 15 Dec
Added Some Design and Shifted to Dark Mode

### 16 Dec
pagination added to Article list And Do deploy button added to Readme 

### 17 Dec
Some User Card added to Home Page and improved style

### 18 Dec
tooltip and Share button added
Pwa Added



### 19 Dec
Write this Post and Publishing this Pwa App to App Store



My lighthouse Report
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4z086t1dw7qmxlo95fhl.png)



{% github vimalverma558/devto %} 



<span>Photo by <a href="https://unsplash.com/@naffiq?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Galymzhan Abdugalimov</a> on <a href="https://unsplash.com/s/photos/project-computer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
PHP 7 performance with opcache and without
Published: 2020-12-19 02:59:31

Without Opcache: 
```
> The Test code snippet took 0.10960912704468 seconds to complete.
> The Test code snippet took 0.10978388786316 seconds to complete.
> The Test code snippet took 0.10959506034851 seconds to complete.
```

With Opcache
```
> The Test code snippet took 0.032054901123047 seconds to complete.
> The Test code snippet took 0.032049179077148 seconds to complete.
> The Test code snippet took 0.032064199447632 seconds to complete.
```

Server: AWS C5.large

Check your Magento 2 PHP configuration. Use this module ->

https://github.com/Genaker/Magento2OPcacheGUI
completion time for algorithms
Tags: programming, productivity, computerscience, webdev
Published: 2020-12-19 02:54:19

Approximate completion time for algorithms, N = 100

O(Log(N)) 10-7 seconds

O(N)  10-6 seconds

O(N*Log(N))  10-5 seconds

O(N2)  10-4 seconds

O(N6)   3 minutes

O(2N)  1014 years

O(N!)  10142 years
Advent of Code 2020: Day 15 in Python
Tags: adventofcode, python
Published: 2020-12-19 02:54:04

Another quick one today for completeness

# The Challenge Part 1
[Link to challenge on Advent of Code 2020 website](https://adventofcode.com/2020/day/15)

The challenge is sequence building, using a relatively simple algorithm: take the previous number in the sequence, and see if it has occurred before. If it has, next number is how far back the next most recent occurrence was. If not, next number is 0. Find the 2020th number.

Quite simply:
```py
data = [0, 3, 6]

for _ in range(len(data), 2020):
    *history, consider = data
    if consider in history:
        data.append(list(reversed(history)).index(consider)+1)
    else:
        data.append(0)
print("number", data[-1])
```

(replacing `data` with actual challenge input)

# The Challenge Part 2
The second part asks for the 30000000th number. It's quite possible to run the Part 1 code, it would just take an inordinate amount of time and a fair chunk of RAM. A quick optimization is to realize that we don't need to store and search through the entire history of the data if we just make a lookup table for each number and when it last appeared, updating it as we go.

```py
data = [0, 3, 6]
dictdata = {v:k for k, v in enumerate(data[:-1])}
consider = data[-1]

for idx in range(len(data), 30000000):
    if consider in dictdata:
        next_val = (idx-1) - dictdata[consider]
    else:
        next_val = 0

    dictdata[consider] = idx-1
    consider = next_val
print("number", next_val)
```

(replacing `data` with actual challenge input)

Done!

Onwards!
Improving your site performance through AMP
Tags: amp
Published: 2020-12-19 02:23:22

تُعتبر صفحات Accelerated Mobile Pages ‏(AMP) مشروعًا مفتوح المصدر يهدف إلى تحسين الويب على الأجهزة الجوالة من خلال توفير إطار عمل لإنشاء صفحات محتوى يتم تحميلها بسرعة دائمًا. ويتم تحميل صفحة AMP في المتوسط خلال أقل ثانية واحدة من "بحث Google". ولهذا السبب، لاحظ الناشرون زيادةً في عدد الزيارات والوقت الذي يقضيه المستخدمون في الصفحة.
https://amp.dev/

Improving your site performance through AMP
<iframe width="364" height="205" src="https://www.youtube.com/embed/r_ZsMGuF_Dc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

تحقيق الربح المادي من صفحات AMP
تتم كتابة صفحات AMP بلغة رمز HTML لصفحات AMP، ما يعني أن الوحدات الإعلانية على صفحات AMP تتطلّب رمز إعلان يختلف عن رمز إعلان AdSense المعتاد. تعرّف على كيفية إنشاء وحدة إعلانية صوريّة متوافقة مع AMP.
₿ Coins : Cryptocurrency Prices Extension for VS Code 🤩🚀
Tags: vscode, cryptocurrency, javascript, blockchain
Published: 2020-12-19 02:23:11

YoYo guys, 🤩🚀Check cryptocurrency prices with ease on your Visual Studio Code. The 'Coins' extension provides current market pricing, past 24-hour price change, market cap, and market volume with a simple click.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z7b0o6vvmzmzq648pfay.gif)

https://marketplace.visualstudio.com/items?itemName=iganbold.coins
Series: Building a POS. The tools
Tags: dohackathon
Published: 2020-12-19 02:18:56

---
title: Series: Building a POS. The tools
published: true
description: My submission to the DigitalOcean App Platform Hackathon! (Part 2)
tags: dohackathon
cover_image: https://www.freecodecamp.org/news/content/images/size/w2000/2020/03/PERN.png
series: Building a POS
---

### Category Submission
Built for Business

### The stack
Well it's not much to say. PERN was the chosen one.

In my current work I'm using React, Node and Sql Server for the Database management but all is legacy code. So big part of the product that I'm in, is already done. This is the first time (outside the College) that I develop an Web Application from scratch

My main reference is the tutorial provided by freeCodeCamp.org [PERN Stack Course - Postgres, Express, React, and Node] (https://www.youtube.com/watch?v=ldYcgPKEZC8)

Note: I have little knowledge in Markdown. So as I update my progress, the posts will improve. 😁
Project 1, Week 3, Day 6
Published: 2020-12-19 02:11:53

I think I'm going to change the way I've set up the `peer` and `socket`. I'm running into a lot of inconsistencies while running them on the server.

A few days ago, I found an article which talked about setting up a `piping-server`. It's using `HTTP` and much simpler, lightweight and easy to set up. Either tomorrow or next week, I'm gonna redo the existing code.
Developing Software as a Student With A.D.H.D and High functioning Autism
Published: 2020-12-19 01:32:03

Hello, My name is Nicholas Blackburn and I am currently a student software developer with ADHD and High Functioning Autism and this is my first post yay :}.

You might be asking yourself what is Autism and what it has to do with developing software. 

Well, first Autism is a spectrum disorder. This refers to a broad range of conditions characterized by challenges with social skills, repetitive behaviors, speech, and nonverbal communication.

Secondly, Autism affects the intensity of my interests like how much I love developing software (I really do love developing software and the show Steven universe!), and my ability to communicate with other human beings/humanoid robots {which is really difficult sometimes and I'm surprised that I'm writing this ;) } but besides the communication bit the software development bit is fantastic ;}. I enjoy being the creator and having the computer run and enable me to create amazing programs.


Lastly, I don't know where I was going with is but I Know everyone and anyone should not let their disabilities hold them back but they leverage their abilitys to improve their life.
How I created a public dashboard for the WIP GitHub App using Logflare
Tags: github
Published: 2020-12-19 01:04:21

The [WIP app](github.com/marketplace/wip) is one of the oldest and simplest GitHub apps. It blocks pull requests from being merged accidentally if someone is still working on them:

![demo video](https://dev-to-uploads.s3.amazonaws.com/i/vyr0trb57dus14luh5qe.gif)

It's meant as a reference implementation for others to learn from, [the source code is on GitHub](https://github.com/wip/app), and all revenue from the marketplace subscriptions are donated.

The WIP GitHub app is continuously deployed to [Vercel](https://vercel.com/). Vercel has an [Integrations Marketplace](https://vercel.com/integrations), which lets you easily integration with other services, e.g. for error tracking or logging. One such service is [Logflare](https://vercel.com/integrations/logflare). The setup couldn't be easier: 

1. Add the integration to your Vercel app
2. You will be asked to create a Logflare account
3. There is no 3rd step

Once setup, all logs are automatically "drained" to a "source" created in your Logflare account.

Pressing the "explore" tab in your logflare source will open Google's Data Studio with the Logflare source already setup as data source. See [Logflare's guide for more details](https://logflare.app/guides/data-studio-setup). 

Note: a paid plan is required to utilize this dashboard feature.

Logflare creates the schema for your logs automatically as new logs come in, and stores the data in BigQuery, which Data Studio can use directly as a data source.

I never worked with Google Studio before, but was able to create a great interactive dashboard within an hour or so. You can see it live at https://wip.vercel.app/stats.

I am not affiliated with Logflare in any way, I'm just a big fan 😊 I cannot wait to build dashboards for all my GitHub apps now. Make sure to check it out!
Is removing Duplicate code always good?
Published: 2020-12-19 01:01:06

---
title: Is removing Duplicate code always good?
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

While refactoring code, If I see duplicate code, I will do below
- Make a function with common code snippet 
- Remove all the similar duplicate code 
- Calling common method whenever required.

####My opinion on duplicate code.
- Need to update the code in all the places when some changes need in that code snippet 
- Need to test all the flow which involves this code snippet 
- There is a definite chance to miss to modify in all places (Major problem)

Removing duplicate code is good for maintainability as we will have less code(and less bugs ;-))

But Removing duplicate code is not always good. 
As per the design principle **keep it simple, stupid(KISS)**,
unnecessary complexity should be avoided. All functions kept simple rather than made complicated.

####Let's take below examples with sample code.

1. Validating date format (startdate and enddate)
2. Validating username (admin and customer)

These code samples are only for example purpose, so writing very basic validation code.

##### 1. Validating date format: 
See duplicate code in the two methods validate_start_date and validate_end_date. 
In this case you can remove duplicate code and make a common method as validate_date().
#####Reason for making a common method are.
- validation format is same (yyyy-mm-dd) for both methods

![Duplicate_code_example](https://dev-to-uploads.s3.amazonaws.com/i/gl6srwbcg9yw26sb3tgy.png)


##### 2. Validating username:
for admin and customer users, even though code is almost same in both methods, validate_admin_username() and validate_customer_username(), It's NOT advised to replace into common method validate_usernmae() like validating date for below reasons.

![user_name_validation_duplicate_code](https://dev-to-uploads.s3.amazonaws.com/i/4oi5qmh15v0piyzjvpoz.png)

- Simplicity is the higher priority than maintainability
- Remove dependency between admin and customer - As per KISS design principle , not making complicated 
- Different Feature enhancement may come in future for admin and customers

If we keep separate methods for admin and customer, later it will be very easy and simple for adding features separately for admin and customer.

In conclusion, It is **absolutely fine** to have duplicate code  until it matches KISS principle.

Happy Learning!!!