teleren/devto huggingface dataset:
I Created a Film/Beer Blog 
Tags: showdev, gatsby, javascript, netlify
Published: 2021-02-20 01:57:29

# What
Film & Froth is a Film blog that focuses on the reaction towards a movie but also expanding on the beverage of choice during the viewing (a beer). Resulting in a fun pairing of Film, and you guessed it, Froth!

# Why
A couple friends reached out to me for some help implementing an idea they had. Blogging about films but also the beer(s) they had while watching them, and then talking about their feelings towards the movie and the drink. Needless to say I was excited to try and put something together for them! Especially as this was my first real side-project.

# How
Scrolling through the Dev.to like any other day I came across [5 full stack projects to add to your portfolio](https://dev.to/dailydevtips1/5-full-stack-projects-to-add-to-your-portfolio-before-2020-ends-42h3) and saw something about a blog with GatsbyJS. I had never heard of that framework before so I was instantly drawn to it. Everything they say about GatsbyJS is true, its incredibly easy to start, use, and update! Not to mention it is incredibly fast. So I was able to put together a GatsbyJS project and populate it with whatever posts the writers send my way and deploy to Netlify (also incredibly easy). 

# Learnings
I've learned plenty about GatsbyJS and GraphQL queries, image optimization and most importantly the almighty SEO. I've never been a very good UI/UX designer so the tinkering of design will probably persist forever but I've had my fair share of learning moments with HTML and CSS, centering things is quite possibly the worst!

Throughout it all I am incredibly proud of the current status of the site and the results of the Lighthouse Audit is almost all green!!![Lighthouse Audit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rgg2zlhoy0c570pz34v.png)
 
# What's Next?
I want to continue to learn more about design and having the site be more responsive, its mobile view is still pretty rough. Also not to be a perfectionist or anything but getting that Performance score higher would also be nice, especially given a Google ranking bump/punishment for performance.
Email subscription is another big function to add, using Google Analytics to check the traffic to the site I think having emails is a perfect way to bring back users in a convenient way.

Would love any feedback, questions, concerns, or anything in between!

Film & Froth: https://www.filmfroth.com
Added RSS forwarding here
Tags: indieweb, posse, syndication
Published: 2021-02-20 01:37:22

This account will start seeing some activity now as I mess with the RSS forwarding features — syndicate everything from [my blog](https://randomgeekery.org) to here.

Well, almost everything. My blog's only mostly technical. Sketches, knitting, and late night stream of consciousness also show up. I'll probably stick to syndicating the more tech-specific stuff, though for now I'm including bookmarks, posts, and notes within that range.

I figure this is a form of [IndieWeb](https://indieweb.org)'s [POSSE](https://indieweb.org/POSSE) — Publish on your Own Site, Syndicate Elsewhere.

## Update

Okay, so this "AsciiDoctor -> HTML -> RSS XML -> Dev.to Markdown" flow takes a lot of handholding and manual adjustment. Until I figure it out well enough to automate the process, better restrict the feed to full posts and not *ALL THE THINGS*. No fun writing every note twice.
Python Books
Tags: python, devjournal, programming, beginners
Published: 2021-02-20 01:33:58

I was working on an article this morning for a client off of fiverr and I happened across this awesome resource, so thought I should share it here! As a budding developer in Python, finding resources and learning all that I can is super beneficial. I hope you find this book just as helpful!
(https://introcs.cs.princeton.edu/python/home/)
Full Tutorial #8: Creating a Field Resolver for a GraphQL Type | Microservices Chat App Using React, TypeScript and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-02-20 01:22:53

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Part 8 of the Microservices Chat App is here! In this episode, I set up the `user` field within the `UserSession` GraphQL type in order to fetch the user associated with the selected session:

{% youtube sTRJYPg8p-I %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
What's the difference between a coupled, decoupled and headless CMS?
Tags: beginners, webdev, wordpress, javascript
Published: 2021-02-20 00:47:49

![Alt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkz22jhk3iphga3f0r3e.jpg)

I was listening to a conference talk recently that started using the term 'decoupled' CMS. I'd only ever heard of traditional and headless, so I did some curiosity research.

As usual, this article will serve future me if I forget what the difference is but hopefully it will also help anyone with the same question.

## What is a traditional CMS?

A traditional CMS is one where the front-end (presentation) and back-end (database) are stored in the same place and are heavily dependant on each other. An example would be a traditional WordPress site.

## What is a decoupled CMS?

It turns out what I thought was a headless CMS is actually a decoupled CMS. A decoupled CMS is when, for example, you have a site where the front-end and back-end are housed separately. The front end uses API calls to get the database information from the back-end and then displays it. 

## What is a headless CMS?

A headless CMS is a type of decoupled CMS. The main difference is that a decoupled CMS typically has a front-end and a back-end, where a headless CMS is a content-only database with an API that can be called. It should be designed in a way that the content from the database can be ingested and displayed by a variety of methods/technologies (to a website, to an app, etc.) through API calls. 

## Which one to choose for a project?

For basic sites and blogs, there is nothing wrong with a traditional CMS system. The major downside is that your project is tied to a specific technology and isn't as future-proof as a decoupled CMS could be. Out of the box, a traditional CMS is less work if you know what you're doing, but more work if you have to make major front-end changes in the future. 

For more complicated sites that need longevity, a decoupled CMS is a good way to go. While it may be more work at the beginning, it's more flexible and easier to adapt in the long-term. This is also a better option if you or your team like to experiment with different technologies.

For projects that require information to be ingested by multiple presentation methods, a headless CMS is probably the best route to take. If a website is part of the project, then that can be built and pulled via the API but so can all the other delivery methods your project may require.

Photo credit: <span>Photo by <a href="https://unsplash.com/@devano23?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Devon Janse van Rensburg</a> on <a href="https://unsplash.com/s/photos/devices?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
How to get all the external CSS stylesheets links from a webpage using JavaScript?
Tags: javascript
Published: 2021-02-20 00:00:00

---
  title: How to get all the external CSS stylesheets links from a webpage using JavaScript?
  published: true
  tags: JavaScript
  date: Sat Feb 20 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-all-external-css-stylesheets-links-webpage-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-6d234315e4fb1d2a3ca30c5d60438e93.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-all-external-css-stylesheets-links-webpage-javascript)
  
To get all the external CSS stylesheets links of a webpage using JavaScript, you can use the `href` property of each item in the `document.styleSheets` array-like list.

For example, if you want to get all links of the external CSS stylesheets of the `google.com` homepage.

You can do it like this,

### TL;DR

```js
// array to hold all css href's
const allCssStylesheetsLinks = [];

// get refernce to all stylesheets
const stylesheets = document.styleSheets;

// looping through each stylesheet
// and checksing if there is href property in each item
for (let i = 0; i < stylesheets.length; i++) {
  if (stylesheets[i].href) {
    allCssStylesheetsLinks.push(stylesheets[i].href);
  }
}

// logging the array of stylesheets links
console.log(allCssStylesheetsLinks);
```

### Explanation

- First, we can define an array to hold all the external CSS stylesheets links

```js
// array to hold all css href's
const allCssStylesheetsLinks = [];
```

- After that let's get a reference to the stylesheets

```js
// array to hold all css href's
const allCssStylesheetsLinks = [];

// get reference to all stylesheets
const stylesheets = document.styleSheets;
```

Next, we can loop through each stylesheet and check if the `href` property is present in each of the `styleSheets` list items. If the `href` has a truthy value we push the `href` property value to the `allCssStylesheetsLinks` array.

It can be done like this,

```js
// array to hold all CSS href's
const allCssStylesheetsLinks = [];

// get refernce to all stylesheets
const stylesheets = document.styleSheets;

// looping through each stylesheet
// and checking if there is href property in each item
for (let i = 0; i < stylesheets.length; i++) {
  if (stylesheets[i].href) {
    allCssStylesheetsLinks.push(stylesheets[i].href);
  }
}
```

Now all the `href` are available in the `allCssStylesheetsLinks` array.

```js
// array to hold all css href's
const allCssStylesheetsLinks = [];

// get refernce to all stylesheets
const stylesheets = document.styleSheets;

// looping through each stylesheet
// and checksing if there is href property in each item
for (let i = 0; i < stylesheets.length; i++) {
  if (stylesheets[i].href) {
    allCssStylesheetsLinks.push(stylesheets[i].href);
  }
}

// logging the array of stylesheets links
console.log(allCssStylesheetsLinks);
```

That's it! 😃.

See the above code live in [JSBin](https://jsbin.com/payumuxuzu/2/edit?js,console)

### Feel free to share if you found this useful 😃.

---
How to Install ESP32 Board in Arduino IDE
Tags: arduino, esp32, howto, iot
Published: 2022-11-24 21:22:12

---
title: How to Install ESP32 Board in Arduino IDE
published: true
date: 2021-02-20 00:00:00 UTC
tags: Arduino,ESP32,HowTo,IoT
canonical_url: https://ahonerd.com/how-to-install-esp32-board-in-arduino-ide
---


Pada tutorial ini akan dibahas bagaimana cara untuk instalasi ESP32 board pada Arduino IDE.

## Install Arduino IDE

Bagi yang sudah memiliki instalasi Arduino IDE, boleh skip step yang satu ini. Arduino IDE bisa didapat dari [Arduino Website](https://www.arduino.cc/en/software/).

Pada saat tutorial ini dibuat (di-update), Arduino IDE versi terupdate adalah versi 1.8.13. Silahkan download dan install sesuai dengan Operating System yang digunakan.

> Untuk dapat menambahkan Board Manager pihak ketiga, diperlukan instalasi Arduino IDE versi `1.6.4` ke atas. Apabila Arduino IDE yang saat ini terinstall adalah versi dibawah `1.6.4`, pada beberapa kasus mengharuskan Arduino IDE untuk di-uninstall terlebih dahulu, sebelum install versi terbaru.

## Install ESP32 Add-on

Untuk install ESP32 board pada Arduino IDE, ikuti langkah berikut:

1. Jalankan Arduino IDE lalu buka `File` › `Preferences` atau dengan shorcut `Ctrl + Comma`
   ![Arduino IDE file menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hazva3teoku8mt0xkcqo.png)
2. Kemudian pada field `Additional Boards Manager URLs`, masukkan:
   ![Preferences](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgf979cwi1ohsbbt9pub.png)
    ```
    https://dl.espressif.com/dl/package_esp32_index.json
    ```
4. Kemudian klik menu `Tools` › `Board` › `Boards Manager`
   ![Arduino IDE tools menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mc4fdnxrbjerjbi4tp2.png)
4. Ketik `ESP32` pilih `ESP32 by Espressif Systems` › pilih versi yang dikehendaki › klik `Install`
   ![Arduino IDE Boards Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaqf1v5eeuwwimtwmd4k.png)
5. Setelah selesai proses instalasi, jangan lupa pilih board yang akan digunakan di `Tools` › `Board`

## Testing

Untuk memastikan instalasi add-on berjalan dengan baik, kita bisa melakukannya dengan mecoba sample program bawaan board ini yang bisa diakses di menu `File` › `Examples` › `ESP32`. Atau untuk lebih jelasnya bisa lihat referensinya [ESP32 Blink](https://ahonerd.com/esp32-blink-with-arduino-ide).

## Reference

[github.com/espressif/arduino-esp32](https://github.com/espressif/arduino-esp32) <br> [arduino.cc](https://www.arduino.cc/en/guide/cores)
Tip of the day: Semantic Line Breaks
Tags: productivity
Published: 2021-02-20 15:33:13

---
title: Tip of the day: Semantic Line Breaks
published: true
date: 2021-02-20 00:00:00 UTC
tags: productivity
canonical_url: https://jhall.io/archive/2021/02/20/tip-of-the-day-semantic-line-breaks/
---

I recently stumbled upon a usability tip for editing certain rich text formats, such as Markdown. Have you ever been bothered by documentation diffs that look something like this?

 ![An ugly text diff](https://jhall.io/archive/images/text-diff1.png)

Enter [SemBr](https://sembr.org/), the Semantic Line Breaks Specification, which provides a formal spec.

But the TL;DR; version is: When using rich text formats that allow it, press enter after every significant punctuation mark. The end result:

 ![An pretty text diff](https://jhall.io/archive/images/text-diff2.png)
How Do People Not Realize Devs are Creative?! Allow Me to Demonstrate. 
Tags: webdev, discuss, javascript, webassembly
Published: 2021-02-19 23:43:24

True or False. **Developers are highly creative and intuitive.**

I feel like most of the world (outside of IT or software people) would answer false.
Not me, no way. I answer truthfully. Let me know your thoughts.
 
Web developers are very **creative** but in different ways. They use their minds logically, formulating code, and have to utilize their creative minds because development and programming are not a straight path from A to Z. Workarounds have to be used, more often than not, or sometimes code has to be implemented by writing new code. I think writing code that *creatively* implements functionality rather than logical mathematic code or performs a simple function.

*Front-end developers* use their **left-side creative brain** to implement design into functional website pages or front-end applications. They use inventive thinking to create things that look good and also adhere to a path that visually designs this feature function in a specific way.  Think of this as code manipulation that includes and the visual elements, a stream-lined and user-friendly fashion that doesn't rely on an editor or a designer.  

*Time Management*, we know we have a forever growing list, and our projects are always a P1, but web devs use their creativity with their time. Time management requires the skill to code effectively creatively; think of it creatively and manage to code. We have to think way outside of the box and get creative because time waits for no dev. 
Code inspiration and project research are a foundation for a web developer, are linked closely, and reflect the designer responsibilities how are always looked at as the *creative on the team*. 

*UX and design* is a big portion of the job that overlaps designer and dev responsibilities. One of the biggest key takeaways is understanding the UX and design, which we can all agree are both considered highly creative minds. 

*Back-end devs* use their *creative mind* to figure out how a system is used, how it can grow, and plan for future code development. 
**Creativity** is a **key factor** for devs coding or program choices. Most of us are proficient in multiple program languages (my goal, truly). But with knowing different languages, we have to think they what language or program would work best for this task. **We need to balance judgment and creativity**—no small feat. 
Devs troubleshoot, problem-solve by nature, and yes, you guessed it, it is naturally creative. 

*Great devs* practice sometimes hourly problem solving that demands a creative mind and approach to developing solutions for a problem or task.
  
Wouldn’t you agree that most devs are creative? Too often, developers are stereotyped as focus, serious, head-down, hoodie up just let me code persona, when in fact we are multi-faceted in our talents.   
**Code On!**
100 Bytes Of Wisdom: Day 6
Tags: career, journey, advice
Published: 2021-02-19 23:35:37

---
title: 100 Bytes Of Wisdom: Day 6
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0gnswi1fkhhcu2upgi4.png
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0gnswi1fkhhcu2upgi4.png)

It's easy to forget after hour three of starting at code why you're actually doing what you're doing. Take a walk outside and look around. Those could well be your users. Your software is making their life better, safer or just that little bit easier. They're better and happier because of you. Good job. Keep it up.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
returning to blogging
Tags: watercooler
Published: 2021-02-19 23:30:58

Where have I been?

Well to put 2020 squarely in the garbage collection, I have been busy making some huge changes.

My family have just purchased our first home and boy let me tell you it's a lot of house, 130 year old house in the country, before that we where locked down in a flat (apartment) that was much to small for us all.

Just because I don't like easy things, I also started a new job just days after moving in - I can tell you for a minute there I thought the WiFi wouldn't be ready and I would be using a tin can and some string to make calls!

You might remember I told you that I have been learning sign language to teach my 3 year old who isn't speaking, that is leaning ever closer to autism as we start out appointments and discover what we already know, challenging as he is, having a non verbal child is actually quite an experience because we never miss any of his needs and I'm still learning what he likes and doesn't every day.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eeivwlx5rnp1wmbl39z5.jpg)
> Not sure what happened here?!

So lots of things have happened, oh back to the job for a moment, I'm not an engineer anymore for the first time in a very long time, I do less programming and spend a lot more time learning about OAuth 2.0 and identity federation.. I am still grappling with my feelings about that, I have started programming in the evening again (this is actually not very healthy but how can I stay current without a project 🤷‍♂️

Anyway, I'm back 👋
Hackertab -  One extension to stay updated as a developer (new technology, tools, and trends)
Tags: showdev
Published: 2021-02-19 23:13:15

Usually, I start my day by browsing Devto, Hackernews, Producthunt, Indiehackers... to refresh my ideas and follow the advancement of the Tech world.

I believe that Tech World is so dynamic and fast-moving 🚀, new tools are constantly appearing, and staying updated is not anymore a choice If you'd like to improve your productivity and remain on the top in a competitive market.

That's from where I got the idea 🧠 of making a one-centric tool to help myself & developers to stay updated easily without jumping between different sites.

👉 [Hackertab.dev](https://hackertab.dev/)

Source code is also provided!
Your feedback is more than welcome
tailwind css tutorials i find useful
Tags: tailwindcss
Published: 2021-02-19 23:04:30

---
title: tailwind css tutorials i find useful
published: true
description: 
tags: tailwindcss
//cover_image: https://direct_url_to_image.jpg
---

This gives a succinct look at how tailwind is being used
and some links to useful videos
https://dev.to/developeraspire/getting-started-with-tailwindcss-an-overview-and-walkthrough-tutorial-4jig

[tailwindlabs tutorial vid]
(https://dev.to/developeraspire/getting-started-with-tailwindcss-an-overview-and-walkthrough-tutorial-4jig)
[netninja](https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw&ab_channel=TheNetNinja)
[TraversyMedia](https://www.youtube.com/watch?v=UBOj6rqRUME&ab_channel=TraversyMedia)
Introducing DD-Devices
Tags: ddx, oip, javascript, blockchain
Published: 2021-02-19 22:54:07

As part of the DDX project, we are building several gateways as an easier way to visualize the records posted on the FLO blockchain and OIP. Each gateway visualizes a specific type of data.

We are here introducing the **DD-Devices**. A gateway to visualize, and add oip records in the FLO blockchain that uses the `device` record schema.

This gateway is particularly useful to keep track of any type of public inventory.

The DDX version of the DD-Devices gateway is kindly hosted by Netlify and the code is on gitlab.

> For the OIP ☀️ nerds: The `device` record schema (`oip://tmpl_4FEB49C9`) that extends `basic` (`oip://tmpl_20AD45E7`).

## What is new?

Under the hood, the code is much simpler to adapt to new gateways but for the user here are some new features:

### Ownership

When loading the mnemonics of the FLO wallet in the `/keys` page it will take a little longer. DDX will search for the first 60 addresses.

DDX will compare the signatures of the records it displays and mark with a little green key if they match any of the 60 addresses it discovered from the wallet.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ajw4ug5q7rm3qjod9z9.png)
_The green key means shows that the loaded mnemonics owns that record_

It also shows in the record individual page.

The record page brings two other new features: **Printing** and **Generate QR-code**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vchcujsoiphb9r9gxzn.png)

Now we can easily print the record and its QR code. In terms of inventory, we can print the QR-code and attach it to the physical device. A simple scan will bring up the `OipRef` that can be used to resolve the record information.

The gateway is online at:
[device.ddx.rocks](device.ddx.rocks)
Angular: Determine previous page URL
Tags: angular
Published: 2021-02-19 22:32:58

The `getCurrentNavigation` method of the angular router returns a property `previousNavigation` that has details on the previous navigation.

This can be used to determine the previous page url, or even if there was no previous navigation (initial load of a particular route).

It's worth noting that this method only works when used in the `constructor` of a components class.

```typescript
export class SomeComponent  {

  constructor(
    private router: Router,
  ) {
  const previousNavigation = this.router.getCurrentNavigation().previousNavigation;

  const previousUrl = previousNavigation.finalUrl;
  }
}
```

More on the [Router.getCurrentNavigation() method](https://angular.io/api/router/Navigation)