teleren/devto huggingface dataset:
Playing with tabular data
Tags: css, tables, vue
Published: 2020-09-20 16:07:30

---
title: Playing with tabular data
published: true
date: 2020-08-27 10:29:51 UTC
tags: CSS,Tables,Vuejs
canonical_url: https://blog.jws.app/2020/playing-with-tabular-data/
---

So, you need to show tabular data on a webpage and make it as digestible as possible?  For demo purposes, we are going to look at the top 10 most populous municipalities in Wisconsin.

{% codepen https://codepen.io/steinbring/pen/KKzPRgP %}

In the above example, we just have a simple [HTML](https://en.wikipedia.org/wiki/HTML) [table](https://www.w3schools.com/html/html_tables.asp) using **tr:[nth-child](https://www.w3schools.com/cssref/sel_nth-child.asp)(even) {background-color: #AAC4FF;}** to zebra stripe the rows.  It is readable but what if you want to add more municipalities or you want to update the numbers for the 2020 census?  We could put the data into a [JavaScript](https://blog.jws.app/tag/javascript/) [array](https://www.w3schools.com/js/js_arrays.asp) and use [Vue](https://blog.jws.app/tag/vue-js/) to display it.

{% codepen https://codepen.io/steinbring/pen/gOrYzoZ %}

You will notice that in addition to using [Vue.js](https://vuejs.org/) to display the data, I also changed the zebra striping to **tbody tr:nth-child(odd) { background-color: #AAC4FF; }**, so that odd columns are highlighted instead of even columns.  I added **tbody** before the CSS rule so that the header isn’t included, too.  So, let’s add sorting now that the data is in an array of structs.

{% codepen https://codepen.io/steinbring/pen/rNeBKBG %}

In the second demo, we bound the rows directly to the array.  In this new demo, we are binding to a computed value.  When you click on a column heading, it changes the value of the **order** and **orderBy** variables.  The **sortedArray** computed value then uses the array and order variables to figure out how to display the values to the page.  The next logical step is to add a search box for filtering the data.

{% codepen https://codepen.io/steinbring/pen/xxVKzRa %}

For the above demo, we are adding **query** and **queryBy** variables in addition to a **queriedResults** computed value.

Now, let’s look at a quick, less that useful option for zebra striping the data.

{% codepen https://codepen.io/steinbring/pen/ExKxjOd %}

**_Let me be clear that I do not recommend doing this_**.  The earlier examples are much better but this is something that can be done.  Since the data is available in JavaScript and we are using Vue.js for the app, we can use [v-bind:class](https://vuejs.org/v2/guide/class-and-style.html) to zebra stripe the table.  All you need to do is modify the loop to expose the index of the array and do a [modulo operation](https://en.wikipedia.org/wiki/Modulo_operation) on the index value.  It is more complicated and a bit unnecessary but kind of neat.

The post [Playing with tabular data](https://blog.jws.app/2020/playing-with-tabular-data/) first appeared on [Blog.jws](https://blog.jws.app/).
Gridsome Tutorial: Go Live with E-Commerce Fast
Tags: webdev, javascript, tutorial, vue
Published: 2020-09-11 18:26:16

---
title: Gridsome Tutorial: Go Live with E-Commerce Fast
published: true
date: 2020-08-27 10:24:28 UTC
tags: webdev, javascript, tutorial, vue
canonical_url: https://snipcart.com/blog/gridsome-ecommerce-tutorial
---

![Using Gridsome for E-Commerce [Tutorial & Live Demo]](https://snipcart.com/media/204974/gridsome-ecommerce-tutorial.png)

As the latest dev hire for Snipcart, I was put to the test quickly.

My mission? Craft an e-commerce side-project using our shopping cart with an imposed technology, in a limited amount of time.

The technology in question? Gridsome, the [Jamstack](https://snipcart.com/blog/jamstack) framework for Vue.js.

So, I rolled up my sleeves and got to work. 

My efforts resulted in a Gridsome e-commerce demo. I documented my process in a step-by-step tutorial ready for you to follow along.

This tutorial explores how to:

- Create a Gridsome project
- Enable e-commerce functionalities with Snipcart
- Craft product listings & pages
- Configure the template routing
- Leverage GraphQL with Gridsome

I *think* I did a decent job. Let’s see, shall we?

## What’s up with Gridsome?

![gridsome-tutorial](https://snipcart.com/media/204973/gridsome-tutorial.png)

In case you don’t know about it, **[Gridsome](https://gridsome.org/) is a modern website generator for Vue.js**.

What does “modern” mean here? As a tool, it falls under the trending Jamstack umbrella and can be used to generate static websites, progressive web apps (PWA), or single-page apps (SPA). Whatever the type of frontend platform you want to create, Gridsome makes it easy to connect to any CMS or data source using [GraphQL](https://graphql.org/).

> [This first post](https://snipcart.com/blog/vuejs-graphql-airtable-example) we wrote about Gridsome explained how to use the GraphQL API to fetch data from an Airtable database.

Familiar with the React-powered Gatsby? Well, Gridsome can be considered the equivalent for Vue.


→ Read the full tutorial [here](https://snipcart.com/blog/gridsome-ecommerce-tutorial)
The new rules of solo startups
Tags: startup
Published: 2020-08-27 10:18:33

What I’ve learned in the last 3 years of trying to start/survive new businesses, as a solo founder:

**Old rules**: Make, then sell, then grow.

**New rules**: Grow, then sell, then make.

## GROW your audience/following

By creating useful content, building something publicly, or just being helpful to your community.

Use newsletters, social media, video channels, podcasts, live channels.

Talk to them regularly. Give. Then ask.

## SELL an idea to your audience

Based on a recurring, painful, problem. Or just something that your audience would really enjoy having access to.

Use landing pages, mockups, prototypes.

Take money up front to validate the need and “market” size.

## MAKE a Minimum Viable Product

Make it in the open: this gets early feedback, & continues to build audience.

Use NoCode tools if you can’t code. Use off-the-shelf components for real-world products.

Use what you know. Avoid learning completely new skills just to create it.

## PLAYERS

People who play in the new rules are good at all 3. And they usually run solo.

Follow these people on Twitter:

https://twitter.com/unicodeveloper
https://twitter.com/levelsio
https://twitter.com/dannypostmaa
https://twitter.com/dr
https://twitter.com/jspector
https://twitter.com/MKBHD
https://twitter.com/DruRly
https://twitter.com/thisiskp_
https://twitter.com/arvidkahl
https://twitter.com/jasonfried
https://twitter.com/JohnONolan
https://twitter.com/austin_rief
https://twitter.com/whizzzoe
https://twitter.com/ramit
https://twitter.com/tferriss
https://twitter.com/lennysan
https://twitter.com/alexhillman
https://twitter.com/jackbutcher

I'm always looking to learn and share on development and solo startups. [Connect with me on Twitter: @farez](https://twitter.com/farez).
Data science for students
Tags: datascience, python, machinelearning
Published: 2020-08-27 10:12:10

What is the scope of Data Scientists in India?
Data Science is quoted as the Sexiest Job of the 21st Century – Harvard Business Review

In this Data eruptive field, businesses need a head who owns a brain that is good at maths, finesse, the eyes of an artist, and more.<a rel="ugc" href="https://www.innomatics.in/advanced-data-science-training-in-hyderabad/">Data Science Course in Hyderabad</a>

There is a severe shortage of Data Scientists with excellent analytical skills and deep quantitative abilities who can analyze big data across all industries. The method of realizing questions, data, product use cases are done by applying their curiosity, quantitative skills, and intellect toward understanding big data is now called data scientists. This most in-demand position, therefore, businesses are in dire need of the people who can solve complex challenges and foster growth.
What are you struggling with? (frontend)
Tags: vue, javascript, css, html
Published: 2020-08-27 09:37:18

Hi,

I enjoy spending my time helping people with programming stuff, so I will do my best to help you with any frontend related question or problem.

The kind of questions I will be able to best help with:
 - How to implement a certain feature
 - Code structure / design
 - JavaScript / Vue / CSS / HTML / WebGL related questions

What I will do my best with but can't make any promises on are questions related to configuration (webpack, modules, etc.) or problems with libraries I'm not familiar with.

A PM is also ok if you don't want to post a comment 👍.
When That Inevitable Refactor Calls Your Name
Tags: devjournal, javascript, womenintech
Published: 2020-08-27 09:23:45

_This post was originally published on August 27, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Hey all. It's me, Alex. Here on a sunny late-August Thursday morning.

I've been putting something off for a while now, and it's finally catching up to me. Although, I feel like it never really *left* my mind, you know that feeling? When something's just kind of always there in the background?

It's the Podcast page of my [Ladies Code Collective website] (https://www.ladiescodecollective.com/), and it's officially reaching that moment in the growing-up stages of a sprouting website where it just doesn't make sense anymore to continue hard-coding items to a list that only continues to grow.

Currently with each podcast episode, I'm adding a new episode section to the HTML, and while it's not out-of-hand yet, it's definitely at a point where I can imagine the sheer unruliness of it in the future.

I'm going to draft out a plan for moving it all to be rendered dynamically in my JS file. Also going to explore developer options in my podcast host website, which may be better than simply moving the hard-coding from HTML over to an ever-growing array of podcast elements in JS.

Here's the hard-coded code now - you'll see each episode's being added individually:

![Hard-coded code](https://dev-to-uploads.s3.amazonaws.com/i/axig4qfzbh870blio1cy.png)

And here's how that looks on the UI:

![Ladies Code Collective UI](https://dev-to-uploads.s3.amazonaws.com/i/vg7a1uwlzuzhzmu9tuo1.png)

Nothing's going to change on the UI, but today I'm going to explore and draft out how I'm going to make the migration to fewer lines of HTML and more dynamic code over in JS.

Eventually, I'm going to add pagination as well to only display 10 episodes at a time, but eyes on the prize for now!

EDIT AFTER PUBLISH: I JUST FOUND AN API WITH MY PODCAST HOSTING SERVICE. GAME-CHANGER!!! 

Will report back tomorrow.

----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
Where to host your images forever and ever?
Tags: discuss, writing
Published: 2020-08-27 09:01:53

Hey folks,

Hosting images is something you don't think about when you start your first or second content project, but with time it can get interesting especially if you want to decouple yourself from third-party platforms as much as possible.

[In my post](https://fullstack.coach/post/how-to-write-and-cross-post-your-markdown-content) about how to write your content in markdown and open-source your blog I propose as one possibility to host your images on GitHub as part of your Integrated Writer Environment (IWE).

Just push your images to GitHub and get the permalink of this file's particular commit state. As I understand, the only ways your image URLs will be lost are:

- You remove the according repository or branch
- You remove the repository
- GitHub dies

At the same time, cloudinary seems a great place to have your stuff on too, given their API and general capabilities.

1. What do you think of the GitHub hosting approach?
2. Where do you host your images forever and ever?
Why You Should Write Automated Tests
Tags: testing
Published: 2020-08-27 09:13:58

[This blog post](https://www.innoq.com/en/blog/why-you-should-write-automated-tests/) gives an overview of the most common benefits gained by writing automated tests. It starts in a place where most of the projects we’ve seen so far are: tests are written as a last step of the development process. Then it shows additional benefits that could be gained if we all gave the tests a bit more focus and care.
[Rant] Github needs to fix their connections to Japan
Published: 2020-08-27 09:11:35

---
title: [Rant] Github needs to fix their connections to Japan
published: true
description: Github is slow in Tokyo
tags: 
cover_image: https://i.stack.imgur.com/SZmy5.png
---

In particular downloading release files.

Trying to install Electron it can often take > 10 minutes

[![electron download progress][2]][2]

That picture is after it said > 600 seconds and I thought to take a screenshot.

It's not just at my home. I've seen this issue all over Japan on different machines over the last several years. I have even seen it using the free wifi at the Tokyo Amazon co-working space in the Amazon Tokyo headquarters (github release files are served from AWS!)

When I bring it up with github they brush me off as "not our problem" but clearly it is their problem. 

I have a fast connection. I'm using NTT (the AT&T of Japan) with a 1gig fiber optic connection and So-Net (Sony's internet service). I can download games from Steam for example in quick. For example I just picked to install GTA5 in steam. 

[![steam info][1]][1]

You can see above it's going at 37.1 MB/s. Electron is only 72meg. If things were working correctly it should only take a few seconds, not > 10 minutes to download

It's not just Steam. Most services are fast. [Fast.com](https://fast.com)(netflix) reported 300Mbps last night. Right now it's at 160Mbps.

[![netflix fast.com][4]][4]

[Google's speedtest](https://projectstream.google.com/speedtest) reports 198.27Mbps

Google's Fiber test shows 30Mbps down, 199Mbps up from Tokyo to Los Angeles

[![google fiber speed][3]][3]

I'm bringing this here because it's a github related issue and github is a cornerstone of software development. The nice people staffed at github seem to be customer service reps reading from a customer service database instead of considering their impact on the devs around the world. It would be great if someone with the power to make stuff happen at github (or Microsoft) would give this issue more consideration.

Ideally if they are going to be a backbone of development they need to mirror the files across the world instead of only serving from Seattle AWS (which is apparently what they are doing)

[Github claims](https://github.blog/2014-01-07-faster-more-awesome-github-pages/) github pages are served by a "global content delivery network". Can that same network be used to speed up release files? Here's crossing my fingers. 🤞


  [1]: https://i.stack.imgur.com/SZmy5.png
  [2]: https://i.stack.imgur.com/NPC4v.png
  [3]: https://i.imgur.com/VScGQL1.png
  [4]: https://i.imgur.com/eUcqlQO.png
Whiskey Wednesday - Episode #5 - Down the CSS rabbit hole
Tags: podcast
Published: 2020-08-27 08:56:08

---
title: Whiskey Wednesday - Episode #5 - Down the CSS rabbit hole
published: true
description: 
tags: podcast
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/298wnozwth32rhhrfxh1.jpg
---

## Whiskey Wednesday - 2020 July 29th

#### Episode #5 - Down the CSS rabbit hole

In this episode, we will discuss CSS. There are entirely different worlds of CSS out there. One is positioning elements and making a pretty button. But there is this other world. The one where complete art pieces are done with just a single div element (or less). We talk about all of it.

📺 [Watch it on Youtube](https://www.youtube.com/watch?v=1_q6ESYR3R8)

{% spotify spotify:episode:0jOVCvKNJUx158U587pPUt %}
How to launch on StartupLister
Tags: indiehacker, sideprojects, startup
Published: 2020-08-27 08:49:22

---
title: How to launch on StartupLister
published: true
description: Step by Step instructions to launch on StartupLister
tags:
  - IndieHacker
  - SideProject
  - Startup
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cng41qc731kirtuyomkj.png
canonical_url: https://wheretopost.email/kb/submit/submitting-on-startuplister.com.html
---

It's time for another newsletter on how to submit your project! This time we are looking at [startuplister.com](https://startuplister.com/) - a site for discovering new startups and side-projects. As you will see, getting listed is very simple and painless. Let's get your project listed on Startuplister:


## Registration

As on many sites, you will need to register first. Click the register link in the top right corner:

![StartupLister Step 1](https://wheretopost.email/images/StartupLister.com/step-1.png)

This is done with basic information only: an email address and a password are enough. It's all done in just one form. Quick and easy:

![StartupLister Step 2](https://wheretopost.email/images/StartupLister.com/step-2.png)


## Submitting your Startup

Putting your startup in the race is almost as easy as registering. One form with some basic information is enough:

![StartupLister Step 3](https://wheretopost.email/images/StartupLister.com/step-3.png)


As you see, you'll need only:

 - the startup/project name

 - the URL to your startup/project

 - a tag-line (maximum 50 characters)

 - and an icon (300x300 pixel or larger)

The Twitter handle is optional.

Please note: You should check your submission before clicking on the 'List it' button. There seems to be no option to edit an entry!


## Once again: Done!

Your listing should be on the homepage now:

![StartupLister Listing](https://wheretopost.email/images/StartupLister.com/listing.png)

Don't forget to upvote a few interesting projects once you are there! Indie hackers are always happy to receive support! Talking about support, if you are keen you can [support me with a cookie](https://www.buymeacoffee.com/spekulatius) 🍪️

If Google directed you here you should also have a look at the main sites to launch: [ProductHunt](https://wheretopost.email/submit/launching-on-producthunt.html) and [Reddit](https://wheretopost.email/submit/marketing-on-reddit.html). Both can send a significant amount of traffic your way.
Login Management for SPA and Everyone Else
Tags: serverless, spa, oauth2, login
Published: 2020-08-27 08:42:59

## Login Vs. Profile
Adding social login to your existing login module has multiple benefits. ( [Click here if you want to read why you should add social login to your login module.](https://pathfix.com/blog/what-is-single-sign-on-sso-how-can-you-add-it-to-your-existing-login/) )

There are 2 elements to social login management – **Login and Profile.** 

## Login
AKA Identity, gives us identifiable information about the logged in user. Login also manages session state for us. i.e. If logged in with Github then every time the user comes to your app and he has authenticated using GitHub they will show as logged in.

This is a two-step process:
1. Check if the current user has previously authenticated with GitHub (usually done by storing a cookie)
2. If he has, then combine cookie information with stored token information (in server) and get user identity. Pretty straightforward. 

### Profile
Each provider will return some information about the user. This is more than just the login and could include things like name, a profile picture and some form of ID. Let's assume that we use the user's email as the identifier. We then store information against this identifier to Profile the user.

When I say profile the user, I mean store more information about the user than is provided by the Identity Provider. i.e. Company Name, Designation, App Personalization Information etc.

With this you have **Login and Profile** both. 

The code flow to get, say GitHub Identity, would be something like this:



![Codeflow for OAuth Login (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1598517250167/pO7XlOWUg.png)


In the above flow, **N5** gives me the JSON object which is the identity that I am looking for. From here on I take the user identifier (i.e. email) and extend the profile of the user in my db.

*Security note:* No login provider, including GitHub, will give you a user ID and password for a user. This ensures security since there are no passwords to maintain, there is reduced chances of being hacked or stolen passwords.

In the next post, I will share a few code samples behind the code flow.

Want to add login to your platform? Get your code at  [Pathfix](https://pathfix.com) .
Submitting your Project to Publicly
Tags: indiehacker, sideprojects
Published: 2020-08-27 08:36:06

---
title: Submitting your Project to Publicly
published: true
tags:
  - IndieHacker
  - SideProject
canonical_url: https://spekulatius.hashnode.dev/submitting-your-project-publiclyio
cover_image: https://api.imageee.com/bold?text=Launching%20on%20Publicly&bg_image=http://wheretopost.email/images/Publicly.io/homepage.png
---

[Publicly.io](https://www.publicly.io/) is a project by the well-known makers [Mubashar Iqbal](https://twitter.com/mubashariqbal) and [Daniel Kempe](https://twitter.com/danielkempe). It was built as part of a hackathon in 2017. While the site isn't overly active, it provides you an easy way to submit your project. Let's get your project submitted:

![Homepage of Publicly](https://wheretopost.email/images/Publicly.io/homepage.png)

After signing up using your Twitter login you come to your new timeline. This looks rather empty by default as you don't follow any projects. You can discover projects under "Projects".

Submitting to Publicly
----------------------

You can get started submitting your project using the button on the dashboard:

![After Signup](https://wheretopost.email/images/Publicly.io/after-signup.png)

This leads you to a form with two sections for basic project information and social media handles:

![Submit Form #1](https://wheretopost.email/images/Publicly.io/form1.png)

![Submit Form #2](https://wheretopost.email/images/Publicly.io/form2.png)

Directly after submitting the form you will have received a new backlink for your project! All in a few minutes only. If you are on the hunt for more backlinking opportunities check out [Owwly](https://wheretopost.email/submit/launching-on-owwly.html), [SideProjects.net](https://wheretopost.email/submit/launching-on-sideprojects.net.html), [SideProjectors.com](https://wheretopost.email/submit/launching-on-sideprojectors.com.html) and [YourStack](https://wheretopost.email/submit/launching-on-yourstack.html) for quick wins.
What's the best way to do encapsulation?
Tags: discuss, computerscience
Published: 2020-08-27 08:20:02

- true private field (e.g. Java)
- naming convention only (e.g. Python)
- both naming convention that always means private, i.e. both true privacy and naming (e.g. Dart?, Go?)
- You don't like the idea of encapsulation?

Also, I am not sure if module level, rather than object / class level is also encapsulation?

Not sure if encapsulation encourages black box testing, and is against test coverage?

As I am using mostly TypeScript, which does have class with private field, but private is lost when transpiled to JavaScript -- so I am not sure whether to prefix with underscore? (I also had to use `@internal` sometimes, which TypeScript itself doesn't support...)

I know there is another way, though -- local scope of variables and functions...
Convert RGB to HEX
Tags: hex, color, rgb, design
Published: 2020-08-27 08:18:28

---
title: Convert RGB to HEX
published: true
description: Convert RGB to HEX in couple clicks
tags: hex, color, rgb, design
---
1. Visit page [Convert RGB to HEX color](https://colorswall.com/colors/tools) page.
2. Adjust Red, Green, Blue slider or input values.
![Convert RGB to HEX color adjust](https://colorswall.com/images/help/hex-to-rgb/hex2rgb-adjust.png)

3. Copy Hex color value from Result section
![Convert RGB to HEX color result](https://colorswall.com/images/help/hex-to-rgb/hex2rgb-result.png)

Video version
{% youtube BsgWPel9jfI %}