teleren/devto huggingface dataset:
Security in Software Development - Part 1
Tags: development, security, processes, career
Published: 2021-03-01 16:53:08

---
title: Security in Software Development - Part 1
published: true
description: Software Development Lifecycle
tags: Development,Security,Processes,Career
//cover_image: https://direct_url_to_image.jpg
---

Security should be a consideration for anyone considering developing anything from a script to a fully fledged stack. Otherwise you will leave your product open to compromise.

This can often be something as simple as establishing procedures and policies. A chef, for example, will produce dishes which are consistent by following recipes. If the dishes are consistent then the experiences of the customers will be the same. The top chefs will also have a process for dish development. Being a software engineer is not much different though it's easier to remain consistent with version control.

Any potential employee a business looks at hiring should look out for the developer who puts best practice first.
Knowing about different Software Development Lifecycle Models will enhance your maturity level when it comes to software development. Even for those breaking into programming/development - it might just give you an edge as by separating the enthusiasts from those who understands product development.

#Software Development Lifecycle (SDLC)
This was developed by the Software Engineering Institute which introduced the Capability Maturity Model which describes the processes an organisation undertakes as they develop engineering principles into software development processes. In a nutshell, having a management model in place should improve the  products however if the SDLC method is inadequate, the project could possibly fail to be fit for purpose. Fundamentally, the following models (whichever you adopt) needs to be approved by management, otherwise it'll easily fail.

## The Waterfall Model
This model is like it says. The different stages can not be completed out of order and as such a diagram of tasks will flow downwards. The model also allows for a loop scenario so you can swim in stages like a salmon back up.

![The Waterfall Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgrbylclu3hzurur4kw2.png)


This was one of the first methods to model software development whilst taking in to account the options to return to different stages.A drawback is that it allows the devs to only step back one phase in the process. It was further improved (the modified waterfall model) to add Verification (checks against the specs.) and Validation (how well it satisfies real world requirements).

In part 2 - I'll write about The Spiral Model, I'll touch on Agile and go knee deep in to the Software Capability Maturity Model.
How to Extend the LTI Consumer XBlock (edX)
Tags: edx, xblock, lti
Published: 2021-03-01 16:46:51

In this guide I will show you how to create your own XBlock based on the [xblock-lti-consumer](https://github.com/edx/xblock-lti-consumer) from edX. This can be very useful if you have a ubiquitous LTI resource that requires configuration.

Take for example a video conferencing app that is launched through LTI. If you want to add this app to your course, you would use the LTI Consumer XBlock and spend some time configuring it.

![Screen Shot 2021-02-26 at 4.38.27 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcjzoj5tn9ilrr76n128.png)
 

## Forking LTI Consumer XBlock
An easy way to streamline this is to **fork [xblock-lti-consumer](https://github.com/edx/xblock-lti-consumer)** and use some [inheritance](https://www.programiz.com/python-programming/inheritance) magic 🧙‍♂️ so that we can add an LTI resource to our course without configuration.

In our fork, we need just make a few changes!

In [lti_xblock.py](https://github.com/edx/xblock-lti-consumer/blob/d44cd795e577cfd3f5e807dd9b8250462bf0c180/lti_consumer/lti_xblock.py), create a new class which inherits `LtiConsumerXBlock`.
```python
# lti_xblock.py

...

class MyXBlock(LtiConsumerXBlock):
  display_name = String(
         display_name=_("Display Name"),
         help=_("Describe me..."),
         scope=Scope.settings,
         default=_("My Custom XBlock"),
     )
```

What we just did is create a new XBlock, `MyXBlock`. It is exactly the same as `LtiConsumerXBlock` except for the display name.

Next, open [setup.py](https://github.com/edx/xblock-lti-consumer/blob/d44cd795e577cfd3f5e807dd9b8250462bf0c180/setup.py#L63) and modify it like so
```python
# setup.py
entry_points={
    'xblock.v1': [
        'lti_consumer = lti_consumer.lti_xblock:LtiConsumerXBlock',
        'my_xblock = lti_consumer.lti_xblock: MyXBlock' # add this
    ],
    ...
},
```

Finally, in [lti-consumer/\_\_init\_\_.py](https://github.com/edx/xblock-lti-consumer/blob/d44cd795e577cfd3f5e807dd9b8250462bf0c180/lti_consumer/__init__.py), add the following line
```python
# lti_consumer/__init__.py
from .lti_xblock import MyXBlock
```

## Wrapping Up
Now that we've created the XBlock, we can add it to a course by going to "Advanced Settings" and adding `"my_xblock"` to the advanced module list.
![Screen Shot 2021-02-26 at 5.13.46 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqxxag8wqcxxg5o85m16.png)

You should now see "My Custom XBlock" in advanced components
![Screen Shot 2021-02-26 at 5.29.46 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9e43owhvdaveq07buklz.png)
Day 16
Tags: 100daysofcode
Published: 2021-03-01 16:42:00

Day 16/100 of #100DaysOfCode

Button Ripple Effect

Hours coded: 0.7
Lines of code: 90
Keystrokes: 1543

& front-end performance best practices for web applications. It's part of "The Complete Junior to Senior Web Developer Roadmap (2021)" Udemy Course. Special thanks to @AndreiNeagoie for this amazing course.
Blender for programmers part 1: introduction
Tags: startup
Published: 2021-03-01 16:39:36

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

Lately I am working with [Blender](https://www.blender.org/) to create a nice video featuring [Summon The JSON](https://summonthejson.com/) decks for programmers. I had some 3D design experience because years ago I have tried to use Blender. With no success however, because there was not, so many resources back then. It was like 15 years ago.

But also I was in my early days designing a 3D game engine with a world editor, so I have a little of understanding how it works. Also, when I was studying we were working with CAD an SolidWorks. So I didn't start from point zero.

However, I have noticed Blender became so easy to use now, that you can do almost anything with some YouTube tutorials and time.

If you like to see my creations so far, please visit Summon The JSON with the link provided above and go to JavaScript deck. The image featuring card types is generated from a 3D scene.

Here you can see how it looks like in Blender:

{% youtube zYZSNUU1ll8 %}

Another video is a composition of a photo of a table with 3D rendered deck and card to make it look realistic:

{% youtube 7qyNEAzuRnE %}

Here you can see the almost same method, but with animation added:

{% youtube 56EZF2IEpkU %}

Currently, I am working on a set of scenes. So far I have four:

{% youtube mQmVPdcpoBg %}

{% youtube VDWgCvYcdhM %}

{% youtube lf4T8y1ajxM %}

{% youtube OlV7hkJ-qig %}

They will be later combined to create a longer video showcasing Summon The JSON decks.

So as you can see you can do some pretty nice stuff with Blender. And while doing it, I came to a conclusion, it may be interesting to create a series of resources to help you, as a software developer, to use Blender.

My main idea is that if you create for example a startup, you might consider Blender as a way to showcase it and attract attention of yours to future users.

As a developer I know how hard it is to market a project without necessary graphic and design skills. You can create the best project, but if you can not "sell" it, no one will really pay attention. And with Blender creating graphics but also 3D, and 2D animation is pretty simple. So everyone can do it without big bucks.

So if you are a software developer, and you'd like to learn Blender than this series is for you. Follow me, and you will receive new episodes of the series where I will show you how to use Blender.

Since I am a software developer and Blender is for me a just a tool, I will explain it in a simple way, straight to the point. So you can understand it and generate awesome stuff without boring introductions and explanations. Also, I will share YouTube tutorials helped me to accomplish what you can see above.

See you later in the next episode of Blender for Programmers!
How to make series on DEV
Published: 2021-03-01 16:04:24

![dos equis meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ljkuhxqe08jqt12e8dw.png)

I have been trying to figure how to make a series of posts on DEV (for a few months).
 
The following post I found on the subject mentions using frontmatter, but I have not used frontmatter on DEV since 2018. I also tried and it didn't work.

{% link https://dev.to/designpuddle/devto-has-implemented-series-series-are-cool-coding-concepts-is-now-a-series-cool-5g9f %}

## The answer

1. Click edit on your post.
2. Click the hexagon with a circle.
3. Select an existing series with then dropdown or create a new series with the form. 

 ![Screen Shot 2021-03-01 at 10.13.50 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqiymu4wd9tu7m5qo05p.png)

 ![Screen Shot 2021-03-01 at 10.51.34 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yfqbh2rpoacz357373h.png)

That is it. 

If you want to see this in action, why not check out my series on GitHub Actions.

{% link https://dev.to/github/what-are-github-actions-3pml %}

Enjoy!
My Flatiron Experience
Tags: flatiron, bootcamp, experience
Published: 2021-03-01 16:03:45

I started flatiron in August 2020 as a full-time full-stack software engineer student and it has been a stressful but informative journey. Everyone is extremely helpful, it's a great way to learn code, and it's a very organized bootcamp.

The flatiron community is extremely helpful, they want you to succeed. If you are struggling, I guarantee you that another member of your cohort is struggling too. You can ask questions and you WILL get an answer. I didn't grasp JavaScript that well so I volunteered to get transferred to repeat the module and it was honestly a great thing for me to do. The lessons are very informative, your cohort leader will give you a list of lessons you should complete by the end of the week to stay on track. Every day there is an Open Office Hour where you can go into a Zoom meeting and ask any questions or if you need help debugging. The cohort also has lesson lectures over Zoom where you can listen just like you would in a classroom to help you get a better understanding. Flatiron also gives you a career coach, I am in that stage right now but I will tell you how it goes another time when I am done with that process.

Prior to going into Flatiron, all I knew was basic HTML/CSS and some JavaScript (not a lot). Now I know Command Line Interface (CLI), Ruby, Ruby on Rails, Object-Oriented JavaScript and React-Redux. It was definitely worth it to go through this program, I learned so much.

Everything you need to succeed at flatiron is all in front of you. You got your slack channels where you can ask questions and see announcements, you got your FAQ's on the website, a checklist of things you have to complete before you graduate, a career coach that helps you prepare for getting a job, everything. There are a lot of resources within Flatiron that can help. You can go back through your lessons any time you want to, if I forgot how to do something I can find that lesson that talks about that thing that I forgot how to do and easily find an answer.

Flatiron was a great decision for me, I learned a lot and everyone was extremely helpful.
No &lt;head&gt;, no &lt;body&gt;, no problem?
Tags: html, psa
Published: 2021-03-01 16:02:12

---
title: No &lt;head&gt;, no &lt;body&gt;, no problem?
published: true
description: It's perfectly valid to omit HTML document <html>, <head>, and <body> tags under certain conditions.
tags: html, psa
cover_image: https://user-images.githubusercontent.com/585182/109518413-38a60280-7a78-11eb-97b8-1b347b8ee816.png
---
I was surprised today when I discovered that the HTML response from https://twitter.com does not include a `<head>` tag (or `<body>` for that matter), though does include tags (e.g. `<meta charset>`) that are only valid as children of `<head>`.

Today I learned that this is ok.

Per the [HTML spec](https://html.spec.whatwg.org/multipage/semantics.html#the-head-element):

> A head element's start tag can be omitted if the element is empty, or if the first thing inside the head element is an element.

> A head element's end tag can be omitted if the head element is not immediately followed by ASCII whitespace or a comment.

Similar applies to `<html>` and `<body>`, see: https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission

This [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) even [recommends omitting all optional tags](https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags).

<img src="https://media.giphy.com/media/SXqw0Vpql4sHX9pCl4/giphy.gif" alt="the more you know animation" />
Does the order of routes matter? Interesting issue (and fix) with a page not found component 🔎
Tags: angular, webdev, todayilearned
Published: 2021-03-01 15:44:52

Bit of a weird one... I'm not sure if this is well-known or just me 🤣 Either way, it's a good thing to know!

## Issue
Routes suddenly stopped working. When trying the access `http://localhost:4200/teamcity/builds` I would see the page not found view instead.
```
const teamCityRoutes: Routes = [
  { path: '', component: TeamCityComponent },
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }, // ✨
  { path: 'builds', component: BuildsComponent }
];
```

## Fix
Order of the PageNotFoundComponent route. I can now the the builds view as expected.
```
const teamCityRoutes: Routes = [
  { path: '', component: TeamCityComponent },
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: 'builds', component: BuildsComponent },
  { path: '**', component: PageNotFoundComponent } // 😇
];
```
Day 63 Of 100DaysOfCode: Pandas Dispersion
Tags: womenintech, 100daysofcode, codenewbie, beginners
Published: 2021-03-01 15:26:44

This is my 63th day of #100DaysOfcode and #python learning. Like yesterday today continue to learn from [datacamp](https://campus.datacamp.com/courses/importing-and-managing-financial-data-in-python/summarizing-your-data-and-visualizing-the-result?ex=50) about pandas. Here is code for inter quantile range.

# Pandas code

```python
# Calculate mean
mean = income['Income per Capita'].mean()

# Calculate standard deviation
std = income['Income per Capita'].std()

# Calculate and print lower and upper bounds
bounds = [mean-std,mean + std]
print(bounds)

# Calculate and print first and third quartiles
quantiles = income['Income per Capita'].quantile([0.25, 0.75])
print(quantiles)

# Calculate and print IQR
iqr = quantiles[0.75] - quantiles[0.25]
print(iqr)
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 63 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/python?src=hash&amp;ref_src=twsrc%5Etfw">#python</a> <br>* Pandas (Dispersion) from [Datacamp](<a href="https://t.co/EAEFp0OZwY">https://t.co/EAEFp0OZwY</a>)<a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/EJSKaXbrgF">pic.twitter.com/EJSKaXbrgF</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1366408115273355265?ref_src=twsrc%5Etfw">March 1, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
How to Create an AR Portal Application in 15 Minutes or Less [Tutorial]
Tags: tutorial, programming, unity3d, augmentedreality
Published: 2021-03-01 15:25:55

Looking to create an AR portal to virtually visit other worlds in augmented reality (AR)? This AR portal application created with Unity, AR Foundation, and  [echoAR](https://www.echoar.xyz/) is a great place to start. The full demo can also be found on echoAR’s  [GitHub](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Portal).


![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614611989333/k1kS7i1719.png)

# Register

Don’t have an API key? Make sure to register for FREE at [echoAR](https://console.echoar.xyz/#/auth/register).


![2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1614612022297/Tk7hAs_vf.gif)

# Setup

* Clone the [Unity+ARFoundation with echoAR](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-example) example code.
* Follow the instructions on our [documentation page](https://docs.echoar.xyz/unity/adding-ar-capabilities) to [set your API key](https://docs.echoar.xyz/unity/adding-ar-capabilities#3-set-you-api-key).
* [Add the 3D assets](https://docs.echoar.xyz/quickstart/add-a-3d-model) and their medatada from the [Models](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Portal/blob/main/Models) folder to the console.
* Overwrite the existing *Assets/echoAR/CustomBehaviour.cs* script with the new [CustomBehaviour.cs](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Portal/blob/main/CustomBehaviour.cs) file.
* Copy the entire [Resources](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Portal/blob/main/Resources) folder to *Assets/echoAR/*.

# Run

* [Build and run the AR application](https://docs.echoar.xyz/unity/adding-ar-capabilities#4-build-and-run-the-ar-application).


![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614612145675/8_OtA22zD.png)

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614612149409/aIEf7b6JT.png)

# Learn more

Refer to our [documentation](https://docs.echoar.xyz/unity/) to learn more about how to use Unity, AR Foundation, and echoAR.

# Support

Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack](https://go.echoar.xyz/join).

> echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614612198553/93uswsSev.png)
Configuración de CORS en ApolloServer
Tags: graphql, node, lambda, api
Published: 2021-03-01 15:23:11

Tenía un error con CORS en mí API GraphQL que está construida con Apollo Server Lambda, cuando hacía una solicitud desde el frontend me daba el típico error en la consola, que más de uno/a debe haber visto alguna vez.
Pero yo me pregunté, en mí API, sí agregué la opción de CORS, entonces ¿Dónde está el problema?

## Sobre `ApolloServer()`

El `ApolloServer()` puede recibir muchas opciones, uno es el objeto CORS pero este no funciona o en mí caso no funcionó. 

Un ejemplo:

```js
const { ApolloServer } = require('apollo-server-lambda');
const { typeDefs, resolvers } = require('./graphql/index');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  // En teoría esto debería funcionar. 
  cors: {
    origin: '*',
    credentials: true
  }
});
```
## Solución
Después de buscar en internet encontré una solución en github. 😎

> Vuelvo a aclarar que está solución es aplicándola en **Apollo Server Lambda**, la verdad que no tengo idea si está solución funciona también en el resto de módulos de Apollo Server, creería que es lo mismo, pero la verdad que no lo sé.

La solución que encontré fue eliminar CORS de `ApolloServer()` y pasarlo al `server.createHandler()` que es lo que vamos a exportar. 

Pasamos exactamente el mismo objeto CORS.

Ejemplo:
```js
exports.handler = server.createHandler({
  cors: {
    origin: '*',
    credentials: true
  }
});
```

Y acá el código completo para que se entienda mejor:
```js
const { ApolloServer } = require('apollo-server-lambda');
const { typeDefs, resolvers } = require('./graphql/index');

const server = new ApolloServer({
  typeDefs,
  resolvers
});

exports.handler = server.createHandler({
  cors: {
    origin: '*',
    credentials: true
  }
});
```

## Conclusión
Eso fue todo lo que tuve que hacer, solamente cambiar de lugar el objeto CORS.

¡¡Saludos!! 🤙🏻
Set selections in a multiple select element with ES6
Tags: programming, javascript, html
Published: 2021-03-01 15:07:09

If you're looking on the web for a solution to programmatically set the selections of a multiple select element in JavaScript you most likely find answers using jQuery, an indexed loop and an if condition, or some other complicated stuff. Modern browsers and ES6 gives you a simple solution in (almost) a single line of code:

####HTML
```html
<select id="selectElement" size="3" multiple>
    <option value="oranges">Oranges</option>
    <option value="apples">Apples</option>
    <option value="cherries">Cherries</option>
</select>
```
#### JavaScript
```javascript
let selectElement = document.getElementById('selectElement');
let a = ['oranges', 'cherries'];
for (option of selectElement.options) option.selected = 
    a.includes(option.value);  
```
There you go!
<sub>(<span>Photo by <a href="https://unsplash.com/@amartino20?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Anthony Martino</a> on <a href="https://unsplash.com/s/photos/choice?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>)</sub>