teleren/devto huggingface dataset:
Data Visualization as a Service using Digital Ocean App Platform
Tags: node, dohackathon, saas, digitalocean
Published: 2020-12-27 20:17:12

![Vaas App](https://dev-to-uploads.s3.amazonaws.com/i/t16ikj9biba92tzrlcz9.png)
The Digital Ocean App platform provides us with an opportunity to deploy our apps without worrying about the infrastructure required to make it available to consumers. The beauty and ease of deployment via Github pushes is great and I would love to be part of the hackathon creating products using this amazing platform. 

I would be contesting under the 'Built for business' category. The project I'm working on is a data visualization as a service product. It allows developers and non-developers to upload their JSON or CSV data and retrieve back a visualization of their choice. Non-developers would have the ability to utilize a user interface to upload their files and select the fields that would make up the X and Y axes as the case may be for the different kinds of supported chart types. They would have the ability to download this charts as images and use them in their presentations or reports or in whatever form they want to utilize the chart.

However, developers would have an extra functionality of creating visualizations using an API that they can send data to with the accompanying fields they want to visualization and receive back either the visualization image or its raw data. 

Since it's a holiday season, my development pace has been quite slow but I believe that I've made good progress. You can find the repository here: (https://github.com/ChukwuEmekaAjah/vaas). I've been able to enable user registration, authentication and authorization within the app and non-developer users can now create visualizations and view their created visualizations. 

I hope to continue on this with the API component for developers and as well as subsequently add billing functionality when the product is due. 

For now, I'm working on the API component and I'm setting up my repository on Digital Ocean. Hopefully by the middle of the week, I would have these components up and running and by the end of the day, the app would have been deployed to Digital Ocean.
AWS - Transform Data Using AWS Glue and Amazon Athena
Tags: aws, database
Published: 2020-12-27 20:11:33


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

__Steps:__


👉 Check out the details [here](https://iamvigneshc.medium.com/transform-data-using-aws-glue-and-amazon-athena-1a0bd851b7fa).

* Crawl Input Sales Data on S3
* Convert Sales Data with a Glue Job
* Crawl Output Sales Data on S3
* Analyze Sales Data with Athena

<BR/>
Note: We are not covering AWS Redshift and Quicksight here.

<BR/>
<BR/>
PS: Sorry, couldn't repost here since there are some incompatible MD codes. Thank you!
Importance of refactoring your code
Tags: devops, javascript, programming, coding
Published: 2020-12-27 19:41:37

I am __Kingsley Ubah__,  a budding software developer and tech enthusiast.  Today, I am going to write about __code refactoring__ and why it is so important.

![Refactoring your code](https://dev-to-uploads.s3.amazonaws.com/i/8vh9sjj68ucrw817pco7.png)

There is a popular saying that goes: __Applications are assets but code is a liability__. That is, what you create from coding is valuable but the code used in building that product is of little to no value. This is why it’s so important that you make your code as simple, readable and flexible as possible; which brings us to the main topic of today.

In simple terms, refactoring your code entails substituting better code into your application's source code in place of the undesirable ones, while preserving the core function of the program. There are various reasons for doing that: making the code more readable, flexible, scalable and more maintainable. It is a DevOPs operation which is critical to the success of any tech product or enterprise.

To illustrate, I will use this simple JavaScript code snippet:

``` javascript

const team = [
'Larry King',
'Harrison Ford',
'David C',
'Jackson B',
'Harry M',
];
const arries = [];
for (let i = 0; i < team.length; i++) {
if (team[i].match(/arr/)) {
arries.push(team[i]);
}
}

```
Take a look at that code. You can easily make out what my intention is. I simply want to return the names that contain the regular expression. Yet, to carry out such a simply function, I wrote 4 lines of code. That just isn’t ideal, and how can we right it? By refactoring the code to just one line:

```javascript

const  arries = team.filter(member => member.match(/arr/));

```

This is just a very simple example, so you get the idea. Typically you would do this to large volumes of code. Remember that the essence for refactoring a program’s source code is to make it more readable, reusable, maintainable, and wholly efficient.
Test-driven development (TDD) with assertions can also be employed to create more efficient programs. Briefly, during test-driven development you write a test, then run it (failing), then make it work (passing),and then make it right (refactor). Also, many tools and IDEs now exists to automate some common refactorings, saving us valuable time and effort.

Follow me on twitter at Ubahthebuilder

__Later__
Change Django database backend in existing projects
Tags: django
Published: 2021-08-06 19:00:52

---
title: Change Django database backend in existing projects
published: true
date: 2020-12-26 23:38:30 UTC
tags: Django
canonical_url: https://www.rockandnull.com/django-dumpdata/
---

 ![Change Django database backend in existing projects](https://images.unsplash.com/photo-1543783796-eee2de67bf61?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDN8fG1pZ3JhdGV8ZW58MHx8fA&ixlib=rb-1.2.1&q=80&w=2000)

When reading about Django deployments we usually talk about scaling. But we mean scaling up.

What if you plan for your app to be super successful and it ends up to be .... just successful? Maybe you overestimated your database needs and after all, you need something smaller.

Django takes care of how to talk to the various database backends. So you can switch database backends with just a few line changes. But you need to migrate your data from the current database to the new database.

If you haven't touched the database directly (i.e. all the interactions with your current database were done via Django models), then migrating your database is quite easy.

## Export data

Use Django's `dumpdata` to export all your database data into a file. The [command](https://docs.djangoproject.com/en/3.1/ref/django-admin/#dumpdata) is quite customizable (e.g. you can choose serialization format), but the JSON default with a reasonable indent makes it human-readable in case you need to debug something.

Note that it can take some time to complete, depending on the amount of data store in your DB.

```
python manage.py dumpdata --natural-foreign --natural-primary --indent 2 > /path/to/datadump.json
```

In case you run into `UNIQUE constraint failed` errors, you can try excluding the `auth.Permissions` and `contenttypes` tables.

```
python manage.py dumpdata --natural-foreign --natural-primary -e contenttypes -e auth.Permission --indent 2 > /path/to/datadump.json
```

## Prepare DB

Before importing your dump, switch the [DB backend](https://docs.djangoproject.com/en/3.1/ref/databases/) in `settings.py`, and recreate all the tables.

```
python manage.py migrate --run-syncdb
```

## Import data

Finally, import all the data from the dump file.

```
 python manage.py loaddata /path/to/datadump.json
```

A common issue is for your models to have decorators (e.g. `@receiver`) that run after saving models that break when triggered from the `loaddata` command. If this is the case, disable/comment those decorators before running the command (and don't forget to enable/uncomment when done).

Hopefully, you can migrate your DB without any issues quickly and easily. Happy coding!
I am done. No more...
Tags: webdev, career, python, javascript
Published: 2020-12-27 19:15:05

I have been doing the same thing over and over since I graduated from a coding bootcamp February 2020. The shotgun approach to applying to jobs, just spray and pray.  After months and hundreds of rejections I am now officially done.  

I even made a web scrapper that would help me apply to around 50-100 jobs a day.  I have stopped spamming my resume all over town and decided to show potential employers and co-workers what an great addition to their team I am.

## What am I doing now?

I will be making content that will showcase what I am learning and currently working on, in addition to asking the community's input and advice.  I will focus on learning a deeper understanding of my main language, python. One of my main goals to contribute to and open source project.  Being able to show that I can learn the code base on a project and then add value to that project is worth more than anything I can say on my resume.

----

I am currently studying algorithms on [HackerRank](www.hackerrank.com) and for fun I find CTFs on [TryHackMe](www.tryhackme.com) Also some Cyberpunk 2077 when I need to let off some steam.


----

Albert said it well but Farcry definitely made a more lasting impression on me. 

![Alt Text](https://i.imgur.com/BcqyzEl.jpeg)
Unofficial dev.to iOS widget
Tags: showdev, javascript, ios
Published: 2020-12-27 18:49:46

---
title: Unofficial dev.to iOS widget
published: true
description: I made an unofficial dev.to iOS widget which will display a random article out of the top ten articles of the day
tags: showdev, javascript, ios
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/acn7a8kbcyvc24s5nlm1.jpeg
---

Since version 14 iOS supports different home screen widgets which can display different useful information for your installed apps. 
Wouldn't it be cool if you can create your own widgets to display some custom information? Good news, with the great [Scriptable](https://scriptable.app) iOS app you can create your own scripts and widgets for iOS using pure javascript. 

# The widget 📱
Reading some dev.to articles are an integral part of my daily routine, so I thought wouldn't it be cool if I get a random article directly on my home screen. 

So I made a little script which fetches a random article out of the top ten articles of the day on dev.to based on the tags I have subscribed to.
After that, the article details like title, author, profile image and tags are displayed in a medium-sized widget. You can see the final widget in the following image.
![unofficial dev.to widget](https://dev-to-uploads.s3.amazonaws.com/i/acn7a8kbcyvc24s5nlm1.jpeg)

# Get the widget 🚀
If you want the widget on your home screen you will need to download the [Scriptable](https://scriptable.app) iOS on your device. After that, you can create a new script inside the app and copy and paste the code from the following gist into your created script. 

To fetch the dev.to articles you need to generate an API key in your dev.to settings and paste it at the beginning of the created script.
Now you can preview the widget by starting the script inside the Scriptable app. 

Finally, you can add the widget to your home screen by adding a medium-sized Scriptable widget, after that you can configure the widget by long-pressing the empty widget and then choose the newly created script in the widget configuration.

I hope you like my widget, feel free to write to me if you encounter any issues or want to suggest some improvements.

{% gist https://gist.github.com/matthri/a8d3a94cdfac98158a7f956c2f6ed6de %}
Building a mental health crisis app, Day 2: Log-in Page
Tags: dohackathon, mentalhealth, codenewbie, digitalocean
Published: 2020-12-27 18:46:22

The app is called “Help Me” and is designed primarily as an “SOS” (distress signal) to a selected circle of trusted people when someone is going through a mental health crisis. The user can send a message with their location to one person or everyone in their community. The goal is to build a trusted community around the user with private conversations and a system to show their emotions. This will help the trusted people to be aware of the user's range of emotions.

# Day 2 of Development
#### Learning about TailwindCSS
The first learning opportunity in this experience was using TailwindCSS. TailwindCSS is a utility-first CSS framework. My project co-worker, Miguel Hernandez, set up the codebase to use TailwindCSS at the end of Day 1. When I started coding on Day 2, I discovered that TailwindCSS strips all elements of their default styling. To my surprise, my headers didn't look or act like headers. I learned you literally have to style everything from scratch using utility classes. In my mind it doubled my development time, but at the end of the day I was amazed at what I could accomplish without having to fight preset styling. 
<hr>

#### First pass of the Login screen
On Day 1, Miguel and I decided that I would build the log-in and account set-up screens while he focused on the feed screen and updating the wireframe. I am a firm believer in developing in stages. This means building out the structure (HTML) first, then styling (CSS), and then later functionality (JavaScript). This following image is my first pass at building the login screen.

![First pass at building the log-in screen](https://dev-to-uploads.s3.amazonaws.com/i/wicuc4w1sksh8lqb01q5.PNG)
<hr>

#### Second pass of the log-in screen
![Second pass of the log-in screen](https://dev-to-uploads.s3.amazonaws.com/i/w1c7pfd6uvk9cvz7pzz5.PNG)

On the first pass I focused on the basic structure of the log-in page. The second pass I fleshed out each element while learning how to style with TailwindCSS. 

The picture below is a screenshot of the wireframe I am trying to build:
![Screen shot of Wireframe](https://dev-to-uploads.s3.amazonaws.com/i/gt57kejbp2g43j4khr4d.PNG)
<hr>

# What's Next
Tomorrow I want to focus on the problems I couldn't overcome today:
* How to add and use font families that weren't available by default within Angular? 
* How to add an icon inside an input field to look like the wireframe?
* How to add and use an icon? Before this project I had experimented with Angular and failed to utilize an icon.
* During development I had multiple input fields that look the same. But React has taught me that it's better to make something into a component if it will be reused multiple times. This led to the issue of how to convert the input fields into reusable components.  
* How to add a text-shadow to the app's title, so it would match the title on the wireframe. 

###Stay on the lookout for a Day 3 breakdown blog post!!!
Typography for Developers - Codecademy PRO version
Tags: tutorial, webdev, css, beginners
Published: 2020-12-27 18:38:33

**TL;DR:** I completed a **CSS Typography** course in **Getting More Advanced with Design** module on Codecademy. This is a part of the 🔗 [**Codecademy Web Development Career Path**](https://youtube.com/playlist?list=PL7K3igiHYVk1_ulFuHesiv7BP_ALn82o8) series.



You can find the video on YouTube below ⬇️
{% youtube GriBFBCLq2Y %}

*If you like the video, don't forget to smash that like icon* 👍 *and subscribe* ❤️*. It will help a lot! Thanks!* 🙏



Chapters:
🔗 [0:00](https://www.youtube.com/watch?v=GriBFBCLq2Y) Intro
🔗 [0:32](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=32s) Typography
🔗 [2:15](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=135s) Font Family
🔗 [6:32](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=392s) Font Weight
🔗 [8:32](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=512s) Font Weight II
🔗 [10:44](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=644s) Font Style
🔗 [12:09](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=729s) Word Spacing
🔗 [14:21](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=861s) Letter Spacing
🔗 [15:55](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=955s) Text Transformation
🔗 [18:22](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=1102s) Text Alignment
🔗 [20:22](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=1222s) Line Height Anatomy
🔗 [21:26](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=1286s) Line Height
🔗 [24:00](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=1440s) Serif and Sans Serif
🔗 [25:14](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=1514s) Fallback Fonts
🔗 [29:32](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=1772s) Linking Fonts I
🔗 [33:08](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=1988s) Linking Fonts II
🔗 [36:18](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=2178s) Font-Face I
🔗 [39:07](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=2347s) Font-Face II
🔗 [41:13](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=2473s) Font-Face III
🔗 [46:55](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=2815s) Review
🔗 [48:37](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=2917s) Typography Project
🔗 [1:03:45](https://www.youtube.com/watch?v=GriBFBCLq2Y&t=3825s) Quiz



🔗 [Ems values](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Ems)
🔗 [Google Fonts](https://fonts.google.com/)
🔗 [Font Squirrel](https://www.fontsquirrel.com/)
🔗 [@font-face CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)

🔗 [Codecademy CSS Typography cheatsheet](https://www.codecademy.com/learn/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-css-typography/cheatsheet)

Thanks for reading! I hope you find it useful.

Happy Holidays! 🎄🎅✨🎁❄️
Website for Breast Cancer Awareness
Tags: health, javascript, cancer, opensource
Published: 2020-12-27 18:37:05

## What I built
Breast cancer is the 2nd most fatal cancer which needs your attention.
I have made a website for spreading awareness of breast cancer using `HTML`, `CSS`, `Bootstrap` and `Javascript`.
The site is hosted using [Netlify](https://app.netlify.com/).

### Category Submission: 
The site is presented in [Spider Event](https://spider-istebits.web.app/) where it ranked 7th overall and 2nd on content-wise.

### App Link
[Website Link](https://breastcancerawareness.netlify.app/)

### Link to Source Code
Don't forget to star the repo as it will motivate me to keep making great content.
[Github Repo](https://github.com/AshutoshDash1999/Breast-Cancer-Awareness)

### Permissive License
Anyone is free to use provided you give me proper credits.

### Additional Info
I'm looking forward to collab with creative individuals who can contribute to making the design better and improve the UX and coding stuff. Also, it will be great if you can contribute to improving the README.md file.

Feel free to connect with me over Linkedin [here](https://www.linkedin.com/in/ashutoshdash1999/).
Enable a better experience with noscript HTML element!
Tags: webdev, javascript, html, beginners
Published: 2020-12-27 18:30:54

---
title: Enable a better experience with noscript HTML element!
published: true
description: 
tags: webdev, javascript, html, beginners
series: Web Dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hmm2v93drxi37klzoxc9.png
canonical_url: https://jordanfinners.dev/blogs/enable-a-better-experience-with-noscript-html-element
---

# Contents 
1. [Intro](#intro)
2. [noscript](#noscript)
4. [Example](#example)
5. [Summary](#summary)

# Intro <a name="intro"></a>

If you run your website with Scripting turned off (JavaScript disabled for example), what do you get? I'd be really interested to see screenshots in comments.

If your site relies upon JavaScript you might not get anything. Now there is a really nice element to provide a better experience to your users if this is the case - introducing `noscript`

# noscript <a name="noscript"></a>

You can provide those users without scripting a better experience and include custom messaging for them using the `noscript` element.
This will only be displayed when a script type is unsupported on the page or scripting is turned off.

# Example <a name="example"></a>

Shut up and show me the code.
```html
<noscript>
    <p>JavaScript is required to run this page, please enable it by doing X, Y, Z.</p>
</noscript>
```

# Summary <a name="summary"></a>

In summary, you can use what browsers give you to create a better experience for those users without scripting! 
Even if it is to tell them what to do, to get the real experience.

Element reference can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript).

Happy building!

Let me know what your sites look like without scripting on!
Buttons with awesome Hover effects Using only HTML and CSS | Valorant CSS Buttons
Tags: css, tutorial, webdev, beginners
Published: 2020-12-27 18:22:36

Hey,

Valorant the new hype when it comes to competitive FPS games.

One thing I liked about the Valorant websites is the overall design.
One element that stuck out the most to me were the buttons.

Here is a video from start to finish!
{% youtube YLuEvfb_0Cg %}

And here you can see how it will look!
{% codepen https://codepen.io/lampewebdev/pen/LYpVRpy %}

If you just want to see the code it is here:
https://github.com/lampewebdev/valorant-button-css

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
Finding an organization for google summer of code
Tags: opensource, showdev, codenewbie, discuss
Published: 2020-12-27 18:17:49

## Google Summer of Code
For those who don't know about Google Summer of Code, it is one of the most popular program for college students. It is an international annual program in which Google awards stipends to students who successfully complete a free and open-source software coding project during the summer.

## The problem
It is a common practice that the students start contributing to open source organizations that have high chances of appearing in GSoC a lot before the organizations are announced. It gives you an edge over other applicants because you would be much experienced with the project's codebase, in case you've started contributing early which in turn increases your chances of your proposal getting selected.

The people who've tried to find an organization by going to official GSoC archives would know the struggle of finding the open-source project that meets your interests. This is because in the official GSoC archive you can only see the organizations that appeared in a particular year at once and they can be filtered by only one parameter i.e. Category.

## The solution
Here's a tool that could help make your work easier. It's known as <b><u>GSoC Organizations</u></b>.

This tool solves all the problems that were there in the official GSoC archive like

- See the organizations which participated in different years on the same page.
- Filtering the organizations by various factors like Years of participation, categories, technologies, and topics.
- You can view the number of completed projects in the organizations in various years in form of a graph.

Here are some screenshots. 

![GSoC Organizations Home Page](//images.ctfassets.net/7xvuet8e2li4/szIXU2XRABeaQMOlkWKs3/84535eded359a3fee4c58c0d7e4651ef/Screenshot_2020-12-27_GSoC_Organizations.png)

![GSoC Organizations Organization Page](//images.ctfassets.net/7xvuet8e2li4/Et92tvQB0fbQklUEAYfHE/aafc831d862596d3aca853496cd81338/Screenshot_2020-12-27_Oppia_Foundation_GSoC_Organizations.png)

Here is the link to this tool - [https://www.gsocorganizations.dev](https://www.gsocorganizations.dev)
At last, may the source be with you!