teleren/devto huggingface dataset:
Using Serializers With a Ruby on Rails API
Tags: beginners, serializers, ruby, rails
Published: 2020-03-24 22:36:01

Using rails as a back end API is convenient due to the ease that we can render JSON. However, our default data that rails provides is burdened with often useless information. But with the Serializer gem, we are able to format our JSON easily on the back end without needing to do any manipulation on the front end. 

<h3> Install </h3>
Once you have your rails API created you need to go to your Gemfile and add the line `gem 'active_model_serializers'`. Once your Gemfile is saved run bundle install.

<h3> Creating our serializer files </h3>
After migrating and seeding your database, it's time to generate our serializers. Run `rails g serializer <model name>` in your terminal for each of your models. Every model will require a serializer because this gem causes rails to look for your models corresponding serializer whenever  you pass an object to a `render json: ` line of code in your controllers.
 
Once your serializers are generated you will see that they are populated with a line that looks like `attributes :id`. Edit this line to include any attributes that you want displayed by when this object is rendered. For example, if a you were displaying a student you could add a some data that is associated with them such as their name, age, and gpa.

<h3> Associations </h3>
To continue with our example, lets say that our database had schools that each had many students and a student belongs to a school. When a student is called we could display information about their school by including it in the student serializer attributes. However, this would display the entire school object including all of that ugly data that we don't want. To only display certain information we will need to create a custom function.

Let's say our attributes line now looks like `attributes :id, :name, :age, :gpa, :school`. We could then specify what information we want displayed from the school by writing a method like so

    def school
        {school_id: self.object.school.id, 
         school_name: self.object.school.name}
    end

One thing that should jump out to you is the use of self.object. The self is referring to the serializer, and the object is an attribute the serializer has that references the JSON object it is currently going through. 

Hopefully with this information you can better understand serializers! Good luck!
Creating an auto-complete search bar - Part 1
Published: 2020-03-24 22:30:24

One common feature in many apps is a search bar that persists through every page of the application and features common navigational links that allow a user to readily access all areas of the app. A great feature to add to this type of search bar is an auto-complete, which will allow the user to start entering their desired search term and will create a drop down box with pre-defined search terms that could match their selection. My group for my mod 3 project discussed having exactly this type of feature in our app, so I decided to research it and found it surprisingly easy to do. 

Step 1: Create a search bar in HTML. Make sure that the autocomplete function of the search bar that you create is set to “off.”

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

Step 2: Create an array that contains all of the possible answers that you would like for your search box to autocomplete to. Store this array with your javascript or in your HTML in a script section. 

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

Step 3: In the style section of your HTML header, entire the CSS information for your search box. Make sure that the position of your search box is relative so that the drop down autocomplete box isn’t obscured by your select button! 

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

My next blog will focus on writing the javascript logic that makes this menu work.
Git as a team - a simple concept for beginners.
Tags: git, github, beginners
Published: 2020-03-24 22:26:56

As a developer, knowing how to use git is crucial. However, git for a beginner can be confusing. Here are a few simple concepts in git that a beginner can master before deeply diving in.

**Terms:**
What is a remote repository? - A repository hosting online.
What is a local repository? - A repository at your local machine.
What is a forked remote repository? - A repository you copied that is being hosted on Github.
What is the origin branch? - Your repository hosting online. The url of this repository should have your Github's username.
What is the upstream branch? - The original repository hosting online that you cloned from. The url of this repository should have the username of the repository's owner.

*This may sound very simple and basic, but without understanding these basic concepts, it is easy to get lost of where you are and what you are doing*


**Working flow:**
Working as a team, the master branch is crucial. All codes in the master branch should be working. So we would be able to keep track of which codes work or does not. Each team members should not have the ability to push their codes straight to the master branch. There needs to be at least 1 review by a lead, or another team member before the codes are merged to the master branch. Learn how to protect master branch [here](https://help.github.com/en/github/administering-a-repository/configuring-protected-branches). And here is a [guide](https://help.github.com/en/github/administering-a-repository/enabling-required-reviews-for-pull-requests) to have any team member in your team to review before merging to the master branch.

**Commands:**
1. Start working on a new feature/new change:
`git checkout -b <branch-name>` // Create a new branch and check out the new branch. Only need to do this once.
`git checkout <branch-name>` //Checkout the existing branch.
2. When making a new change. Commit your change by running the following:
`git add .` //when making a new change.
`git commit -m “<message>”` // Commit to Github.
3. Push change to git hub:
`git push`
4. And then go to Github and make a pull request waiting for approval.

This is not everything you will need, but enough to get it going :)
Day 101 : I'm Good
Tags: hiphop, code, coding, lifelongdev
Published: 2020-03-24 22:20:59

_liner notes_:
- Professional : Had a meeting with a new team member this morning. Like really early! haha He's based in South Africa. It was a good talk. Went back to bed for a couple of hours. haha Got up and started on the Glitch integration into a tutorial on the site. Got a good first try up and did a test. Worked out pretty well, but I'll probably add more things to the tutorial to make it more robust. Oh and my blog post got posted! My first one as a JavaScript Developer Advocate!! Ended the day with helping out another co-worker with a project they are working on that uses React. We were able to get it working. Pretty productive day....I'm good.

- Personal : Last night, I watched the latest "Dispatches from Elsewhere" episode. Really liking the show. Some how I missed the previous episode. Good thing I record them.

![Overhead shot of a beach with seaside cliffs in Big Sur in California](https://dev-to-uploads.s3.amazonaws.com/i/ty7ym6ddtvam40g526jl.png)

Going to take it easy. Been a long day. haha Brain is kind of fried. haha Might play some Stadia, do really light coding / research and watch TV.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube EZi5IswWsu8 %}
The Best Linter for Black in VS Code
Tags: vscode, python, black, linter
Published: 2020-03-24 22:11:56

[see original post](https://levi-sands.netlify.com/python_black_linter)

Forgive the clickbait title. You can configure any linter to work well with Black. So any linter when properly configured will be the "best" linter for Black on VS Code. But before I give you the settings for the linter I configured, a bit of background.

When I discovered automatic code formatting last year, I immediately started using it. I quickly found that [Black](https://black.readthedocs.io/en/stable/) is by far my favorite of these formatters. The options that come with Black are very limited. The developers do this on purpose, to limit the variety in the different coding styles that might exist between individuals.

Standardizing everything will be useful in a large group of programmers. I use it partly because I see many styles for formatting when looking for help on the internet. My style developed into this amalgamation of what I had seen on the internet. After adopting Black for all of my code, I would frequently run across errors with the linters (all of them) on VS Code. This was annoying and nothing more. It was however annoying enough for me to track down what I could do to solve it.

After doing some searching I found some instructions on what configurations are need for flake8 to be compatible with Black. While I type my code, I will follow the recommendations of the linter I use. However, when I format the document using Black, many little errors will come up. After tracking down the configurations need to ignore this issue, I entered them into VS Code so I don't have this issue anymore.

You can change the settings through the Settings tab if you prefer, but I will not cover those instructions here. To enter the `settings.json` file press `ctrl+,` then select the open settings (JSON) icon in the upper right hand corner. Then enter the following into the file:

```JSON
    "python.linting.enabled": true,
    "python.linting.flake8Enabled": true,
    "python.linting.flake8Args": [
        "--ignore=E203",
        "--ignore=E266",
        "--ignore=E501",
        "--ignore=W503",
        "--max-line-length=88",
        "--select = B,C,E,F,W,T4,B9",
        "--max-complexity = 18"
    ],
```

Not much too it. Enjoy!
Tutorial: How to submit a Webflow Form into the CMS with Multi-Reference fields - Part 3
Tags: nocode, showdev
Published: 2020-03-24 21:36:27

Howdy :wave:

I love being able to submit my forms back into my CMS Collections, but there is no native way to do this in Webflow. So I decided to share how I accomplish this with a few extra tools.

With [part 1](https://nocodequest.com/commenting-system-with-webflow-and-zapier/) you have a Webflow form submitting into the CMS. With [part 2](https://nocodequest.com/commenting-system-with-authentication/) we layered on memberships, only members can add comments, but anyone can read them.

With this video, [part 3](https://nocodequest.com/commenting-system-with-webflow-part-3/), we’ll link a logged in member to all of their comments via Multi-Reference fields and give them a personalized dashboard to view them all.

Along with Webflow, native forms, and the Webflow CMS to store it all, I'm taking advantage of MemberStack, Zapier, and sprinkling in a bit of Airtable:

{% youtube kiVlzF-L1kE %}

**After you’re done with the video you can get:**

1) Read access to this Webflow project.
2) All of the sharable Zapier zaps used to create this.
3) Access to the live site, click around and see how it works.
4) My cheatsheet. The step-by-step notes I created for this video walk through.

Get it here: https://nocodequest.com/commenting-system-with-webflow-part-3/
Great time for a virtual hackathon 🧑‍💻💰
Tags: hackathon, microservices, blockchain, opensource
Published: 2020-03-24 21:32:18


While many more of us are finding way more time and space on our hands with all the social distancing, and others looking for more ways to earn cash, seems the time is right for an online hackathon. 

The MESG Foundation is throwing a hackathon online at Devpost, where you can connect with like-minded devs and build killer tools, services and/or processes. 

MESG will be giving away $9,000 in prizes for the most inspiring and creative submissions. 

There's just over a month left to submit, with submissions due on April 26th. Time to hack and win some cash! 

Join us over at Devpost! → https://mesg-ecosystem.devpost.com/
Netlify CMS or Forestry.io?
Tags: discuss, javascript, webdev, cms
Published: 2020-03-24 21:27:11

---
title: Netlify CMS or Forestry.io?
published: true
description: As I'm self-documenting and making choices for my new projet's JAMStack, I struggle deciding between these two (awesome-looking) Git-based CMS tools.
tags: discuss, javascript, webdev, cms
---
Hey guys!

First post here. I'm a little bit unsure of what comes next but thought asking for advice here would do me good!

I'm doing some ground-laying research for an upcoming personal project (a portfolio + tech blog combination for personal branding and online presence). My "plan" is to create a simple design myself and generate a static website around it, and handle a small blogging environment without too much hassle.

So far I've read a lot about SSG and what revolves around it, and I'd like to go with:
- VueJS
- Gridsome as SSG tool
- Git (of course)
- Netlify for deployment, hosting and such, because it honestly looks like a game-changer from what I've read. (also: free plan, yay!)

Knowing all this, I'm trying to figure which Git-based CMS to use for the blogging part (plus portfolio sections content, for easier updates, versionning, and such).

I'm hesitating between Forestry (https://forestry.io/) and Netlify CMS (https://www.netlifycms.org/).

I've read lots of good stuff about both of them, and Netlify CMS seems loosely coupled (if coupled at all) with Netlify, so both options seem reasonable.

I would really appreciate some dev feedbacks on any of these two CMS solutions (pros, cons...) to help me choose!

Apart from that, remarks about the project stack I'm envisioning will be gladly heard, as long as they're polite and constructive!

Thanks in advance, I'm really looking forward to reading from you :)
Save cash by running business applications on a blockchain
Tags: blockchain, microservices, serverless
Published: 2020-03-24 21:16:07

Building and running business applications is expensive, time-consuming and unpredictable. 

It's critical that your business stays secure but, but that usually comes at the cost of being at the mercy of hosting or integrated solutions. 

Likely, the best solution is to use a platform for running your application's business that allows you to stay in control, and only pay for what you use and nothing more. 

[The MESG Network](https://mesg.com/get-started/?utm_source=devto) is built as an open-source platform for running application's business, secured by a blockchain of executions. 

By running your applications on a blockchain, you can pay per application execution, rather than investing in and maintaining servers. Your application can always be running and available on the network super cost effectively.

The MESG Network is open to any processes or services, using nearly any technology, making interoperability between difficult to reach technologies like blockchains or even legacy software much easier. 

It's free to build, check it out:

https://mesg.com/get-started
gifs running in your DOM
Tags: javascript, html, css
Published: 2020-03-24 21:12:15

I guess a lot of people don't expect that for moving objects you can just make it into a gif format, and add it in, but if you also want to make its background transparent in whatever game, movie, program, you'll have to find a program to change the background of each individual frame of the gif. But an easier way to do it, is just upload each frame individually customized and having it put together on the screen, you would typically be using this formula. 
<style> 
@keyframes pics 
{ 0% { content: url(img1.png); } 
25% { content: url(img2.png); } 
50% { content: url(img3.png); } 
75% { content: url(img4.png); } 
100% { content: url(img5.png); }
}
 
.bar {
	animation-name: pics;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	max-height: 100px;
	max-width: 60px;
}
</style>

//And then calling it in the html

<
img 
class="bar" />

though not all browsers support this animation creation in css,
for the most part it should do the work, otherwise you can just insert your original gif in the format of
<
img
 src=”img.gif” 
alt=”animated” />
that should do the work.
ES6 Required Parameters
Tags: beginners, javascript
Published: 2020-03-24 21:12:06

Have you ever made a function that should require parameters to be passed in? Probably. In ES6 you can use default parameters to achieve this goal. 

First you can make a function that returns an error message. This error function can be used as a default parameter in any function you make.
Now if you call the function you made without providing the necessary parameters, an error will be thrown.

Example:

function error() {
    throw new Error("Missing parameter");
}
function test(parameter = error()) {
    return parameter;
}

test() // "Missing parameter"
test("hi") // "hi"
The Importance of Personal Projects
Tags: codenewbie
Published: 2020-03-24 20:49:18

I am in week 9 of a 15 week coding course. The past two months have been a flurry of labs, assignments, and feelings. The strongest of those feelings is incompetence, or that I am unqualified to complete an assignment.

Just last night I was sitting in imposter syndrome. I had no idea how to move forward on a group project. I needed the help of my teammates. Not being able to move on alone, I felt not as capable or qualified my colleagues. Plenty of programmers face those irrational feeling. There are [lots of articles](https://dev.to/search?q=imposter%20syndrome&filters=class_name:Article) on that topic. 

One way I overcome that feeling is to reflect on what I have accomplished in my short time as a programmer. Assignments are a good measure of how much I have progressed, but personal projects provide a much more tangible feeling. They are creations of my imagination that served my needs. 

The projects I've taken on are small, and really serve no purpose for the world. But in the moment they gave me a toy to practice with, break, and ultimately gain experience that would serve me down the line. I'll give a few examples I've worked on since starting this bootcamp.

## My Personal Projects 

#### [100 Days of Code](https://github.com/javila35/100-days-of-code)
This is not a technical project, and I did not come up with the idea. It has still given me a great reference to measure my learning. **If you are new to code, or taking on a long term project I would suggest starting your own 100 day project.**


####[Ruby Inheritance](https://github.com/javila35/ruby-inheritance-practice)
This was my first personal project in school. There was a lecture in Ruby specific inheritance. Students that were further along in my program mentioned the importance of inheritance for programming. *I'm glad I left a detailed ReadMe for this. I committed this project Feb 5, and writing this a month and a half later I wouldn't remember how it works without reading through that.*


####[COVID-19 Analytics](https://github.com/javila35/COVID-19-analytics)
This is my most recent project I've undertaken. It is just a website that uses [ExpDev07 - CoronaVirusAPI](https://github.com/ExpDev07/coronavirus-tracker-api) to display information numerical data about COVID-19. With the wealth of information *(true and false)* being spread online, I wanted a place to look at just the numbers of cases. This project is currently in development. It only shows the numbers parsed from the API, but I plan to add more graphical information. 


Again, these do not serve a purpose for the general public and they really don't have much functionality. At the times I created them, they gave me a valuable tool to play around with. Now looking back, I can show myself what I used to struggle with and now comfortably use on a regular basis. Plus there's the added bonus of having a few things to put on my portfolio once I'm looking for work. *Whether these projects are portfolio worthy is a different discussion.*

Feel free to drop some of your own personal projects, or ideas in the comments.
Time Zero Values in Golang
Tags: go
Published: 2020-03-24 20:40:30

Golang has a concept of zero values and functions will sometimes return their zero value.

This reminds me of Ruby where it is common (and some might say, problematic) for methods to return `nil`.

```ruby
return nil unless something == "everything"
```

That's why you have [the safe-check operator](http://mitrev.net/ruby/2015/11/13/the-operator-in-ruby/) in Ruby. It eases the pain of checking for `nil` all over the place.

```ruby
account&.owner&.address
```

Go, of course, is typed. If a function is supposed to return a `string` then it can't just bang in a `nil` instead because there isn't a meaningful string to return.

So what do they do instead?

Well, each type has it's own "zero value". The zero value for `string` is `""`, the zero value for `int` is `0` and the zero value for `error` is actually, `nil`.

By what about time? What does it mean to have zero time? Is that the start of the big bang? 💥

If you want to return "nil Time" in Go, you should return `time.Time{}`.

Oddly, you don't seem to be able to do `myTime != time.Time{}` to check if a time is zero. Instead the thing to do seems to be `myTime.isZero()`.

Great!
How to create/register user account with Django Rest Framework API
Published: 2020-03-24 20:34:29

Recently I needed a way to let user register to my Django site via API because I was building backend for mobile app but could not find many resources dedicated to this.

So I decided to write a short how-to for other and for myself so I have reference for later 🙂

The first step is to create `UserSerializer` like so:

```python
class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('username', 'password')
        extra_kwargs = {'password': {'write_only': True}}

    def create(self, validated_data):
        password = validated_data.pop('password')
        user = User(**validated_data)
        user.set_password(password)
        user.save()
        return user
```

The `Meta` class specifies that we are interested in `username` and `password` in this case and the `password` field is marked as write only so it won’t be part of response.

Next we can move to `views.py` and create view for registration:

```python
class UserCreate(generics.CreateAPIView):
    queryset = User.objects.all()
    serializer_class = UsersSerializer
    permission_classes = (AllowAny, )
```

Just like other Django Rest Framework views se specify the `queryset`, serializer and set permissions.

The last piece of the puzzle is to configure URL path for registration:

```python
urlpatterns = [
..
    path('account/register', views.UserCreate.as_view())
..
]
```

That is basic user registration via API done. If you are building API for mobile app, I would recommend setting up Token Authentification. [This](https://simpleisbetterthancomplex.com/tutorial/2018/11/22/how-to-implement-token-authentication-using-django-rest-framework.html) is pretty nice tutorial from SimpleIsBetterThanComplex.

{% link https://dev.to/nemecek_f/django-how-to-let-user-re-order-sort-table-of-content-with-drag-and-drop-3nlp %}