teleren/devto huggingface dataset:
Vue Django Development and Continuous Integration and Continuous Deployment (CI/CD for Vue+Django)
Tags: vue, django, ci, cd
Published: 2020-03-11 21:50:16

---
title: Vue Django Development and Continuous Integration and Continuous Deployment (CI/CD for Vue+Django)
published: true
description: 
tags: Vue,Django,CI,CD
---

So I made a gitlab repo which has some basic code for a Vue frontend and a Django backend. CI/CD is the focus of this setup. If you are looking for a way to be able to develop such an app on your local machine, but still deploy it regularly with docker, isolated from your local machine, and maybe also run tests on a gitlab CI pipeline, you might be interested in my repo: https://gitlab.com/electrocnic/vue-django-ci-cd-boilerplate

It is for users who are just starting with a new project.

It has still quite some room for improvements, for example, the secrets could be passed with the new docker feature --secret.

Also, it needs the privileged mode and produces quite large docker images in quite a lot of build-time. This could be improved.

If you are fine with that though, you can fork it, experiment with it, have fun with it. However, I do not guarantee for anything, this is just a project for my personal requirements, but I thought, it could be helpful for others as well.

The app supports to deploy multiple different apps on the same server, when they are all based on this boilerplate template.

It is based on https://github.com/NdagiStanley/vue-django and makes use of some third-party repos like https://github.com/nginx-proxy/nginx-proxy and https://github.com/nginx-proxy/docker-letsencrypt-nginx-proxy-companion and https://github.com/zenhack/simp_le

The first-time setup of your own gitlab ci/cd pipeline after you forked it, will take approximately 1 hour, due to the fidely work with the variables in the gitlab settings and badge-links.

Have fun!
10 years ago, one tweet from @ConanOBrien changed my career
Tags: career, firstpost, tweet, conanobrien
Published: 2020-03-11 21:45:02

One tweet, 10 years ago today, by [@ConanOBrien](https://twitter.com/ConanOBrien/status/10326418664) changed my professional life in the most amazing and unexpected ways.

{% twitter 10326418664 %}

I remember that day vividly. Conan was going on [tour](https://en.wikipedia.org/wiki/The_Legally_Prohibited_from_Being_Funny_on_Television_Tour) and I had been asked to build a site to accompany his social media presence. The initial plan was for Conan to tweet a link to the site at 9:00 am. I spent the night before running performance tests, optimizing the server, projecting traffic based on his social following, and mentally preparing for the next morning. 

Back then it was just me in my apartment. I was the lone developer and did all the ops work myself. I wasn't overly concerned or worried about the launch. I had spent the past three years at Yahoo!, working on sites with hundreds of millions of pages views a day. I was confident I had planned accordingly.

{% twitter 10327747292 %}


It... didn't go as planned. Conan ended up tweeting at 7:21 am (not that it would have made a difference if he had tweeted at 9 am). Luckily I had woken up at 6:30 to go for a bike ride and caught the tweet before I left my apartment. 

The site had crashed almost immediately after the tweet. Turns out I had the right capacity for our projected traffic, but I was a bit off on the projected traffic. Apparently, people were more interested in what Conan was up to during his "[television hiatus](https://en.wikipedia.org/wiki/Conan_O%27Brien#Television_hiatus)" than I though.

{% twitter 10331814436 %}

I spent the next few minutes franticly spinning up more servers, getting them into rotation, and restarting servers as they failed. After about 20 minutes, things leveled off and the site was stable. I spent the rest of the morning glued to my monitor, watching the logs, tweaking Apache and making sure nothing else went down.

Later that day, I heard from Team Coco. I was terrified I had ruined the launch, torpedoed the tour and they would never want to work with me again. It was the exact opposite; the tour was close to being sold out, Conan enjoyed the "exiting rollercoaster" of his first big website launch and the team was excited to begin work on the next iteration of [teamcoco.com](https://teamcoco.com).

Over the ensuing ten years, I have had the privilege of launching several successful projects (none of which crashed on day one) for , build out a full cloud infrastructure, digitize and release [Conan's full late-night archive](https://classic.teamcoco.com/), win two Emmys, worked with some amazingly talented people and watch Team Coco grow into the powerhouse it is today.


...and it all started with a tweet!
Learn how to code by customizing ready to go apps
Tags: firstpost, learning, tutorial
Published: 2020-03-11 21:38:42

---
title: Learn how to code by customizing ready to go apps
published: true
description: A good method to learn faster any programming language or framework
tags: #firstpost #learning #tutorial
---

Many tutorials and courses teach you coding by creating an app from scratch. That is a way to learn creating your app or website...
But sometimes, it's hard to complete the tutorial, and you never reopen the tutorial again, then you forget about learning that language or framework...
I bet you have a lot of unfinished tuto-projects in your /dev/ folder, that you just left there, for a while and you think that one day you will finish'em :) You will never do it :) trust me !

## Ok, learning the basics is very important !
For example, to learn a framework like Django or Angular, you have to know the basics of Python or Javascript and by then you attack the framework tutos...

By the basics I mean the a + b and a = a++ thing, the if, then and for thing, the function and class stuff...

For my case, I prefer Python on Javascript, but to create a web app nowadays, you can find more tutos and topics about JS frameworks than Django or Ruby On Rails, but I'm not very good at Javascript.
Ok, I cant create a React app using the CLI, I can change the landing page, and put some components copied from snippets websites... but creating a whole React application ? that's impossible for me right now...
## Customizing a ready app is the key !
So I just went on Github, and looked for specific apps that use frontend and backend frameworks. (for example an app based on express.js and reactjs)

I clone the app on my "dev" directory
then I run npm install and play with it to be sure what exactly the app does and that it works perfectly...

The idea is not just to clone it, but it's to ** CUSTOMIZE IT ** !!
after cloning the app and running it without any issues, start discovering the directories and the source code of the app.

Try to locate the source code of every component you see in the browser, and try to understand the logic that makes that code showing that component. Then change the variables values of that piece of code and see how it changed on the browser...

After customizing some components, you will learn many things about that framework, and the code powering it, and you know what ? if the licence of that app is MIT, you can make all your customizations, change its name and push it in your repositories, and it's your app now !
Try to do that as much as you can, and you'll learn really faster than by reading a book or watching a video.
The Art of DRY
Tags: cleancode, productivity, devlife, agile
Published: 2020-03-11 21:36:41

This is my first article written in English, so please bear with me and provide your feedback.

When I mention "The Art of DRY," I am referring to the concept of Don't Repeat Yourself, which I first encountered in Robert C. Martin's book, Clean Code.

At first glance, this concept seems obvious and easy to implement. However, I have come to realize that it is not only challenging to achieve but also difficult to identify when duplication occurs beyond just code repetition.

Many times, you may find blocks of code repeated throughout your software. Identifying what can be made reusable and applying techniques such as object-oriented programming and design patterns can help eliminate these duplications.

Duplication doesn't only exist in explicit code but can also be found in terminal commands, deployment processes, or routine test runs.

Once you grasp that DRY encompasses more than just eliminating code duplication, you enter a different realm.

To fully benefit from the art of DRY, you need to explore other techniques and technologies that can eliminate all the redundant actions you repeatedly perform.

Here are some practices that have delivered significant automation results for me:

1. Continuous Integration (CI):
   - Whenever I commit and push my code, the CI tool (such as Azure DevOps and GitLab) automatically runs my test suite and provides feedback on whether my changes work well with the existing codebase.

2. Continuous Deployment (CD):
   - After the CI pipelines complete, we automatically deploy new artifacts to staging environments and, in some cases, even to production. This is incredibly useful as it ensures that I don't forget to update staging areas for product owners and stakeholders to validate changes or refresh production environments and create git tags.

3. Bash:
   - The power to automate tasks that you no longer wish to perform manually. This speaks for itself.

4. Docker:
   - Apart from other benefits, Docker allows me to skip the installation process from scratch. Being able to spin up my development environment with a single command or even when I boot my PC feels like a dream come true.

5. Aliases:
   - Creating aliases for frequently used git commands, test runs, or any other repetitive terminal tasks is a fantastic way to save time and boost productivity.

I hope you now understand that DRY extends beyond removing code duplication.

Eliminating everything that can be automated using appropriate tools is also a part of DRY.

Please share your comments, and thank you for reading.
Opinion: PUT should be the HTTP method for new data
Tags: api, rest, opinion
Published: 2020-03-11 21:33:59

I said what I said, and I mean every word of it.

## Rewind

For those a little confused, let's back up.

REST (REpresentation State Transfer) APIs are still very common, and honestly I don't have an issue with them for most projects. REST APIs work by using HTTP verbs to denote the purpose of a request, i.e. a `GET` request on a given endpoint (say "comments") means that the user is trying to get a list of (or perhaps a specific) comment value(s). `DELETE` along with an identifier of some type does just what you think it would: removes the resource given by the identifier. The last two main HTTP methods utilized with REST are `POST` and `PUT`, and this is where I seem to break with most API designers / REST routing libraries.

## Schism

The last two, in English, are very close to one another due to some extra uses of the word "post", as in to "post a job listing" (i.e. put up, create). For a long time many back-end languages didn't have good support for requests outside of GET or POST (for reasons I honestly don't know), so POST sort of fell as the default for anything that needed more security in sending data (i.e. not transmissible through the URL). 

With the growth of AJAX (i.e. XMLHttpRequests) REST APIs became the flavor-of-the-month and with it developers _should_ have thought about our default to using POST requests for creating data / records. Not many did, unfortunately, and many places that use REST APIs have, in my opinion, mixed up PUT and POST.

## My Argument

I read an article some years ago (if I can find it I will link it, but so far have been unsuccessful) stating that the four big verbs (`GET`,`DELETE`,`PUT`, `POST`) are really the only verbs you'd need for a large majority of use cases. In that post the author made a point: `POST` requests are (in his opinion) for resources that are being _modified_, not _created_, because they are **POST** creation. To create new values, you would **PUT** data to the server (database).

I think `PUT` has always made more sense as the verb for adding new data, but please give me any reasons you may have for thinking that `POST` is the preferred method.
Code quality and incentives
Tags: code, codequality, incentives, clean
Published: 2020-03-11 21:01:45

---
title: Code quality and incentives
published: true
description: Why are some code-bases a nightmare? Is it enough to merely lay down laws and insist that developers write clean code? Or is there a whole other dimension we need to explore – namely, incentives?
tags: code, quality, incentives, clean
---

Why are some code-bases a nightmare? Is it enough to merely lay down laws and insist that developers write clean code? Or is there a whole other dimension we need to explore – namely, incentives?
🙆Review 2: Personal Portfolio, Developer: Diego | #elefDoesCode
Tags: review, code, design, freecodecamp
Published: 2020-03-11 20:33:12

⬇️I will review your... 

🤓The process:
1. Every week I will do a live stream on my youtube channel reviewing your site
2. I will give feedback and suggestions according to your needs. 
3. If I have a way to contact you, I'll gladly do so :)
4. If you have any question don't hesitate to contact me!

Take part [here](https://forms.gle/9AxiCUQ8YudTVYzs9) (I only need a URL and your name).

It doesn't matter if you are a beginner or more advanced. 
You can submit as many sites as you want.

🙏Thank you for taking part with your website into my live streams.
It takes courage to let someone you don't know to review your work...
But remember feedback is important and all of us need it...
 
🤗The review is FREE. You don't pay for anything. I won't be paid by anyone.

----------------------------

In particular, in this video you'll find:

🤓The developer: Diego
💪The project:  https://imugnae.com

⌨Previous review [here](https://dev.to/eleftheriabatsou/review-1-tribute-page-by-freecodecamp-developer-kyle-elefdoescode-4006)

----------------------------

👋Hello, I' m Eleftheria, an app developer, master student, freelancer, public speaker, and chocolate lover.


😎Top 3 list:
- How to stay motivated | A developer's edition | @BatsouElef: https://youtu.be/qMvEtb5OxNo
- How to be a Better Problem Solver | Tips and solutions: https://youtu.be/dELt7yKIxIA
- Simple Tips to Build a Personal Brand as a Developer (+ personal examples): https://youtu.be/7s0o1gi0iP0

🥰If you liked this video please share

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
Enums lesson 19
Tags: disscusionquestion
Published: 2020-03-11 20:07:13

In this lesson we learned about enums which are sort of like a list of things, There are also cases in the enums, these can be compared to list items. Creating enums makes it better when we are coding and want to provide the user with different options but not any option. The user will only be able to chose from the options provided by the program. Using an enum is better than using a string or an int for this same reason. For example, imagine you ask a toddler what their favorite color is they might say something like apple... We know that is not an option, now with an enum we can ask them the same question but when they answer us they must answer from only colors! so they would say something like green or blue or blue-green.
Part 2: How to submit a Webflow form to the CMS with a login system
Tags: nocode, showdev
Published: 2020-03-11 19:58:48

Find part 1 here: 

https://dev.to/chrisdrit/how-to-submit-a-webflow-form-to-the-webflow-cms-6ai

Howdy :wave:

For this video, I build upon the learnings from part 1 and layer a login system on top of it.

Only logged in members can add a comment, but anyone can read them.

Here's my 9 minute screencast walking through exactly how to do this:

{% youtube JCXPLMNoSNY %}

For the full post plus downloadable guides go to my site: 

https://nocodequest.com/commenting-system-with-authentication/
What is Your Career Transition Story?(Within Software)
Tags: discuss, career, watercooler
Published: 2020-03-11 19:54:15

There are so many inspiring stories of people getting into the software industry later in life - learning to code in a self-taught way and getting a job as a programmer. 

There are also many people who've been in the software industry for a while (10+ years) who've felt stuck in their roles. And they are also transitioning and finding their path to roles that better suit their strengths, interests, and lifestyle. I am curious to hear more of those stories. Especially those where the goal is to still have a role that has something to do with code (i.e. didn't transition out of coding to managing or something).

I know devs who've transitioned from programmer at a company to
- freelance, consultancy 
- teaching (programming courses to books to bootcamp teachers)
- bootstrapping their own internet business
- developer advocate, conference speaker, author and such

Or starting a community for developers and maintaining the open source codebase behind that :)

I transitioned from being an embedded firmware engineer programming implantable medical devices to a full-stack web developer working in a health tech startup after 8 years. (very different worlds, plan to write more about this later on)   

I would love to hear your career transition story within SW. What steps did you take to navigate through the unknowns and find your way to a role that you now enjoy? How did you find the mental energy to do this? How did you learn what was even possible?

(with this thread I am hoping to illuminate paths that could perhaps inspire someone who is feeling stuck in their current role).
Lifting State With React
Tags: javascript, react, frontend
Published: 2020-03-11 19:48:53

Lifting the state allows your sibling components to share a single source of truth. In a hierarchy tree, components can only inherit data from their parent components. 

Lets walk through this test application.

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

Our hierarchy looks like this.

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

We have a parent component with two children components. Our goal is to make our `Child` component be a button that changes the color of `Child2`'s text.

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

In our `Parent` component, we initialize the state with a key of `color` and value of `'blue'`. 

Because we want to change the sate we have a function in the `Parent` component that does just that. It's a conditional that checks if the `this.state.color` is equal to `'blue'`. If that is true, we set the sate to `'red'` and if false, we set the state to back to `'blue'`

Next, we have a render function that returns both `Child` and `Child2`. `Child` inherits the reference to `this.setColor`, and `Child2` inherits `this.state.color`.

`Child` does one thing. It renders a button with an event listener. Our callback function for the click event is the function that `Child` inherited from `Parent`. We access this by using the properties given via `this.props.changeColor`.  

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

So now every time `Child`'s button is clicked, the function in the `Parent` component is invoked and changes the state.

Since we are rendering our `Child2` component in our `Parent` as well, every time we change the state, `Parent` gets re-rendered which inturn re-renders each child. 

This is where the magic happens.

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

Now let's look at `Child2`.

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

`Child2`'s only job is to render some text. We have our `p` tag with an inline style set to `Child2`'s color property. When `Parent` gets re-rendered by `setState` `Child2` get's re-rendered with the new state as its new prop!

### Recap

Every time `Child`'s button is clicked, `Child` invokes the instance method defined in the `Parent`. That instance method changes the state based on its contents and triggers a re-render. `Child2` is now re-rendered with the new state as an inherited property.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jf4zr1lhtaiing8iopzz.gif)
Tighten Up Your Bootstrap
Tags: bootstrap
Published: 2020-03-11 19:32:12

WK4: Discussion 

Please explain in your own words what's the importance of Bootstrap for you? 

Do you require to use CSS in order to use the Bootstrap styles? 

What are some of the different things you can do with Bootstrap (pg. 26-39? 

Answer: 

Bootstrap is important to web development because it is a library of previously made code that does not have to be rediscovered during development. Bootstrap brings an approach to better, faster, stronger web development. Bootstrap also creates a more mobile friendly code.  

You are not required to use CSS in order to use Bootstrap styles. They are first referenced in the heading of the HTML document. Then you can call them as if you are calling a CSS file. You must add class=”something”. 

Bootstrap sets basic global display, typography, and link styles. You can add containers, a grid system, and use pre-made media queried.