teleren/devto huggingface dataset:
What constitutes Front-end development?
Tags: frontenddevelopment, webdev
Published: 2019-04-22 12:02:46

---
title: What constitutes Front-end development?
published: true
description: Front-end development comprises of all the features which appear on your window -clicks, structure, content, design etc. 
tags: Front-end development, web development  
---
![Front-end development](https://thepracticaldev.s3.amazonaws.com/i/9fli4hkormfbhrk9pm0b.jpg)

Front-end development constitutes a combination of client-side scripts frameworks,  and markup languages amongst other cutting-edge technologies to provide a design environment in which users can experience the aura of content, functionality and layout.
 
The genesis of the [front-end development](https://www.techavidus.com/blogs/front-end-web-development) is the excellent front-end developers who with their knowledge and skills bridge the difference between design and its implementation and provide impressive interaction and user experience. They are skilled with customizing the user experience, production and modification of responsive and SEO-oriented websites and web applications, tool creation enhancement and rigorous testing.
 
There are certain frameworks specific to the front-end languages that come with built-in libraries, shareable codes, and add-ons to pave way for rapid development like Foundation, Node.js, express.js, Bootstrap etc.
Bryan Nazor
Tags: bryannazor
Published: 2019-04-22 11:36:29

---
title: Bryan Nazor
published: true
description: About Bryan Nazor
tags: bryannazor
---

Bryan Nazor graduated from Fairleigh Dickinson University. and received a Law Degree with Distinction from New York University Law School. Mr. Bryan Nazor is a member of the New Jersey and New York Bar.
After Graduating from FDU,

Bryan Nazor went on to play professional soccer in three different countries. He started his professional career playing for Platense in Honduras. He continued to Europe to play for Hajduk Split and Solin in Croatia before going to Argentina to play for Argentina Juniors.
MERN-BoilerPlate
Tags: node, react, mongodb, redux
Published: 2019-04-22 10:47:03

---
title: MERN-BoilerPlate
published: true
description: This is boilerplate for MERN stack with integrations like Redux and SSR 
tags: nodejs, reactjs , mongodb , redux 
---
<p align="center">
  
  <img alt="efba logo" src="https://i.ibb.co/T42LYgn/MERNG-1.png" width="150px" />
</p>

<h2 align="center">MERN-BoilerPlate</h2>
<p align="center">
  This is boilerplate for MERN stack with integrations like Redux and SSR 
</p>
<br><br>



[Github-REPO](https://github.com/anikethsaha/MERN-Boilerplate)


---
## technology
- NodeJS - Server
- ExpressJS - Nodejs framework
- MongoDB - Database
- ReactJS - Frontend
- Redux - State Management
- Docker - Containerization and image 
- Eslint - Linter
- Webpack - Bundler
- Babel - Loader and Compiler/Transpiler
- Jest - Testing Framework

---
## Features
- [x] Server Side Rendering
- [x] State Management
- [x] Image for Container
- [x] Routing
- [x] Model Controller Project Structure
Lesser known tricks to level up your UI design
Tags: uxdesign, digitalproducts, uidesign, css
Published: 2019-04-22 10:01:52

---
title: Lesser known tricks to level up your UI design
published: true
description: Along the way we’ve picked up a few subtle and unexpected tricks which can really level up a product design. So we thought: why not collate these tips into a series of articles to help the other UI designers out there?
tags: ux design, digital products, ui design, css
---

Over the last three years at Crowdform we’ve designed countless [digital products](https://www.crowdform.co.uk/blog/what-is-a-digital-product). Along the way we’ve picked up a few subtle and unexpected tricks which can really level up a product design. So we thought: why not collate these tips into a series of articles to help the other UI designers out there?

1) OVERLAY SHAPES ACROSS SECTIONS TO ADD MORE DEPTH

Sometimes a straight transition from one section to another looks, well…boring.

![example of bad UX](https://www.crowdform.co.uk/wp-content/uploads/2019/04/BlogHD1a-1900x931.png)

If you have a graphic element on your page, it’s worth experimenting by overlaying it across two sections. Your design should look more fluid and less compartmentalised.

![suggested improvement of UX example](https://www.crowdform.co.uk/wp-content/uploads/2019/04/BlogHD1b-1900x931.png)

We wrote a longer article, with 6 other examples, over on our [product studio’s blog](https://www.crowdform.co.uk/blog/7-lesser-known-tricks-to-level-up-your-ui-design).
Day 005: Making a TODO list
Tags: ios, swift
Published: 2019-02-01 18:50:10

---
title: Day 005: Making a TODO list
published: true
description: toggling a check mark is hard.
tags: ios, swift
---

[GitHub Repo](https://github.com/maeganjwilson/todo_list)

## Things I want to accomplish:
* Marking completed todos with a checkmark
* Sort completed tasks to the bottom of the list

## Things I accomplished
* Marking a completed todo with a checkmark
* Sort completed tasks to the bottom of the list

## Things I learned

### If wanting to select rows make sure there is a UITableViewDelegate

Not having the `UITableViewDelegate` kept me from selecting and deselecting cells. It also took me a little bit to troubleshoot because at first glance I was doing what was necessary. After a couple of other stack overflow articles, I realized that I did not the `UITableViewDelegate` and did not assign it to self. Here is the final code necessary to make selecting work:

```swift
// UITableViewDelegate here
class ViewController: UIViewController, UITextFieldDelegate, UITableViewDelegate, UITableViewDataSource {
 
    @IBOutlet weak var todoTable: UITableView!

    var todos = TodoList()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        todoInput.delegate = self
        todoInput.returnKeyType = .done
        
        //table view setup
        todoTable.dataSource = self
        todoTable.delegate = self // <—— this line
    }
```

### How to enumerate through items in Swift

To implement my sort, I needed to be able to go through each todo in my array and check whether or not it’s complete. I chose to use `enumerated()` because it will return the index of the todo and the actual todo itself.

```swift 
for (i, todo) in todoList.enumerated(){
            if (todo.complete) {
                let element = todoList.remove(at: i)
                todoList.insert(element, at: todoList.count)
            }
        }
```
If you have any questions about what I did or how I implemented anything, let me know! If you have any suggestions or other comments, let me know as well!
How to securely build Docker images for Node.js
Tags: docker, image, container, security
Published: 2019-04-22 09:22:19

---
title: How to securely build Docker images for Node.js
published: true
description: 
tags: docker, image, container, security
canonical_url: https://www.lirantal.com/blog/2019-04-22-securely-build-docker-images
---

## Use a least privileged user

When a `Dockerfile` doesn’t specify a `USER`, it defaults to executing the container using the root user. In practice, there are very few reasons why the container should have root privileges.

Docker defaults to running containers using the root user. When that namespace is then mapped to the root user in the running container, it means that the container potentially has root access on the Docker host.

Having an application on the container run with the root user further broadens the attack surface and enables an easy path to privilege escalation if the application itself is vulnerable to exploitation.

To minimize exposure, opt-in to create a dedicated user and a dedicated group in the Docker image for the application; use the `USER` directive in the `Dockerfile` to ensure the container runs the application with the least privileged access possible.

A specific user might not exist in the image; create that user using the instructions in the `Dockerfile`.

The following demonstrates a complete example of how to do this for a generic Ubuntu image:

```
FROM ubuntu
RUN mkdir /app
RUN groupadd -r lirantal && useradd -r -s /bin/false -g lirantal lirantal
RUN chown -R lirantal:lirantal /app
WORKDIR /app
COPY . /app
USER lirantal
CMD node index.js
```

The example above:

* creates a system user (-r), with no password, no home directory set, and no shell
* adds the user we created to an existing group that we created beforehand (using groupadd)
* adds a final argument set to the user name we want to create, in association with the group we created

If you’re a fan of Node.js and alpine images, they already bundle a generic user for you called `node`. Here’s a Node.js example, making use of the generic node user:

```
FROM node:10-alpine 
RUN mkdir /app
COPY . /app
RUN chown -R node:node /app
USER node
CMD [“node”, “index.js”]
```

If you’re developing Node.js applications, you may want to consult with the official [Docker and Node.js Best Practices](https://github.com/nodejs/docker-node/blob/master/docs/BestPractices.md).

This post is part of [10 Docker image security best practices](https://snyk.io/blog/10-docker-image-security-best-practices/) you should adopt. Thanks for reading and to [Omer Levi Hevroni](https://twitter.com/omerlh) who worked with me on it.

The original blog post includes a high-resolution printable PDF like the snippet you see below. [Check it out](https://snyk.io/blog/10-docker-image-security-best-practices/)

[![Docker Images Security Best Practices](https://thepracticaldev.s3.amazonaws.com/i/1lgubzkhy0jvjahg4zfp.png)](https://snyk.io/blog/10-docker-image-security-best-practices/)
What are developers looking for? A good tech or a good manager
Tags: discuss, career, dev
Published: 2019-04-22 06:12:36

---
title: What are developers looking for? A good tech or a good manager
published: true
description: Deep dive into the thought process of what are we actually looking for? A decent tech or a good lead
tags: #discuss #career #dev
---

I always wonder if everyone is happy as a developer. I have always thought that many, either look for a good manager or a good tech or if you are lucky, you get both. In cases where even if you have a pretty old tech to work on, if you have good people's company, it works out. 

If you have a good tech or a project with an impeccable architecture, you should be happy, as you have loads to dig in to and learn. Learning is everything. A good tech guy or a dev is one who is always learning. (I am assuming that :) )

Some are really lucky to get both.

How does that work for you guys !?
What are you looking for.
Python + Appium + Robot Framework
Tags: python, appium, robotframework, mobileapptesting
Published: 2019-04-22 06:06:26

---
title: Python + Appium + Robot Framework
published: true
description: Robot Framework is a generic keyword-driven test automation framework for acceptance level testing and acceptance test-driven development (ATDD).
tags: python, appium, robot framework, mobile app testing
canonical_url: https://www.pcloudy.com/python-appium-robot-framework/
---

Robot Framework is a generic keyword-driven test automation framework for acceptance level testing and acceptance test-driven development (ATDD). It has an easy-to-use tabular syntax for creating test cases and its testing capabilities can be extended by test libraries implemented either with Python or Java. Users can also create new keywords from existing ones using the same simple syntax that is used for creating test cases.

Pre-Requisites (Ubuntu)

1. Install python (sudo apt-get install python)

2. Download and Install Py-Charms

3. Install Python pip(sudo apt-get install python-pip)

4. Install Appium-Python Client(pip install Appium-Python-Client)

5. Install robot framework

pip install robotframework
pip install robotframework-appiumlibrary

6. Download the sample project and import it in PyCharm

How to run Robot-Framework on <a href="https://www.pcloudy.com">pCloudy</a> Devices in Parallel?

1. Open Controller.py and enter your MailId and ApiKey and Run

<img src="https://cdn-images-1.medium.com/max/800/0*uDMpVB5Gs7grX6L1.jpg">

2. Choose the devices where you want to execute your script

<img src="https://cdn-images-1.medium.com/max/800/0*KZmXSwF6yW4PoPTk.jpg">

3. You will get the Robot Framework generated report and logs after execution

<img src="https://cdn-images-1.medium.com/max/800/0*jT5I0YGZHVGTBnqC.jpg">
Running the Global Azure Bootcamp Science Lab in Kubernetes
Tags: globalazure
Published: 2019-06-04 19:52:09

---
title: Running the Global Azure Bootcamp Science Lab in Kubernetes
published: true
tags: GlobalAzure
canonical_url: https://carlos.mendible.com/2019/04/22/running-the-global-azure-bootcamp-science-lab-in-kubernetes/
---

Next Saturday the [Global Azure Bootcamp](https://global.azurebootcamp.net) will be celebrated all over the world and as in previous years their will be a [Science Lab](https://global.azurebootcamp.net/global-azure-science-lab-2019/) where we’ll try to discover a planet!!!. Isn’t that cool?

Well to make this fast you can run the Science Lab using Azure Container Instances following the instructions found [here](https://github.com/intelequia/GAB2019ScienceLab) or you can use the following [gist](https://gist.github.com/cmendible/8ce226b5996c92a020fe1761ff7325aa) to run the workload in an existing kubernetes cluster:

<script src="https://gist.github.com/cmendible/8ce226b5996c92a020fe1761ff7325aa.js"></script>

Hope it helps!
Job Search - Day 3 of 42
Tags: jobsearch, jobor42, management30, voluntoldvacation
Published: 2019-04-22 04:34:38

---
title: Job Search - Day 3 of 42
published: true
description: An active recovery day, not a day to rest
tags: jobsearch, jobor42, management30, voluntoldvacation
cover_image: https://thepracticaldev.s3.amazonaws.com/i/y2or7n0go7562fzuboj0.png
---

```
Actively looking for employment is a job itself
The fastest pace is infinitely sustainable
```

# Job Search Schedule

![Job Search Schedule](https://thepracticaldev.s3.amazonaws.com/i/lrq22biqnk2c7o2rl847.jpg)

How many hours a week should an engineer work for his/her employer?
How many hours a week should an engineer work for him/herself?

Clean Coder by Robert Martin ([@unclebob](https://twitter.com/unclebobmartin)):
```
You should plan on working 60 hours a week.
The first 40 are for your employer. The remaining 20 are for you.

During this remaining 20 hours you should be:
    reading, practicing, learning, and otherwise enhancing your career.
```

This is a tall order, but how many spend even single digit hours sharpening

# Narrowing Focus

The job search part of the **voluntold vacation** is going well

I have a few projects lined up

### [Moving Motivators](https://management30.com/practice/moving-motivators/) for Teams

**Moving Motivators** is a personality test/game from Management 3.0
I read about it in [Managing For Happiness](https://management30.com/books/managing-for-happiness/) by [Jurgen Appelo](https://twitter.com/jurgenappelo)

Concept being a remote interactive way to connect a team
Team independently interactively orders cards
Upon submission, real time spider graph of team results displayed
*A unique data visualization of a culture*

![Moving Motivators](https://thepracticaldev.s3.amazonaws.com/i/hxxxbw8mlydhku9w04s2.png)

![Spider Graph](https://www.edrawsoft.com/chart/images/spider-chart-basic-example.png)
JavaScript: Por favor, adicione isso ao seu "onClick"
Tags: javascript, webdev, react, ptbr
Published: 2019-04-22 04:34:10

Ao definir manipuladores onClick em seu aplicativo de página única (Single Page Aapp), você provavelmente está usando as chamadas event.preventDefault(). Isso é bom. Você precisa disso quando o manipulador onClick é definido em um elemento âncora. Se você não impedir o evento padrão, o elemento âncora levará o usuário ao href definido e irá sobrepor a lógica do seu manipulador onClick.

Mas aqui está uma curiosidade…

Seus usuários podem querer realizar Ctrl + Clique (ou Command + Clique no Mac) em seus elementos âncora para abri-los em novas guias do navegador (ou janelas). Infelizmente, ter uma chamada incondicional ao event.preventDefault() nos seus manipuladores onClick impedirá que os usuários abram links em novas guias, e isso é irritante! Não faça isso.

Você só deve evitar o comportamento padrão em um evento onClick condicionalmente com:

```js
if (!event.ctrlKey && !event.metaKey) {
  event.preventDefault();
  // Lógica da sua SPA
}
```

Dessa forma, seus usuários podem abrir seu link em uma nova guia ou clicar nele normalmente e sua lógica para navegação de página única irá ser executada.

Isso só funcionará se:

- Seus links têm destinos href válidos (no lado do cliente, serão ignorados pela lógica da sua SPA)

- Essas rotas são válidas/existem no seu servidor, para que os links funcionem quando os usuários o acessarem diretamente

Faça o teste… navegue para um novo destino com JavaScript em seu aplicativo, se você realizar uma atualização nessa página (F5 etc) e você permanece na mesma URL obtendo o mesmo estado do aplicativo? Se sim, você pode utilizar Ctrl + Clique.

Organizei uma sessão no playground para mostrar a diferença entre links com e sem essa importante declaração `if`. Você pode conferir em https://jsdrops.com/if-event.

*Nota: Todos os manipuladores de eventos onClick na biblioteca `jsComplete` têm a instrução `if` acima. `Ctrl-Clique` em tudo!*

# Créditos ⭐️

- [Do this in your onClick handlers. Please.](https://jscomplete.com), escrito originalmente por [Samer Buna](https://mobile.twitter.com/samerbuna)
Pushing Left, Like a Boss: Part 4: Secure Coding
Tags: programming, tutorial, beginners, security
Published: 2019-04-22 04:26:26

---
title: Pushing Left, Like a Boss: Part 4: Secure Coding
published: true
description: The 4th in a series of articles explaining how to create secure software.
series: Pushing Left Like a Boss
tags: programming, tutorial, beginners, security
---
###This series, and my blog, have moved! [Check it out](https://wehackpurple.com/pushing-left-like-a-boss-part-4-secure-coding/)!


In the previous article in this series we discussed secure design concepts such as least privilege, reducing attack surface, failing safe and defense in depth (layered protection). In this article, we are going to talk about secure coding principles which could be used to help guide developers when implementing security controls within in software.

As we discussed before, a security flaw is a design problem, while a security bug is an implementation problem (a problem in the code). Whoever wrote that code had the best intentions, but may not have had enough information, enough time, or enough guidance on how to do it correctly.

![Coding Phase of the SDLC](https://thepracticaldev.s3.amazonaws.com/i/hrmtoy2v8m0mxo7mj7eq.png)

###What is “secure coding”?

Sometimes called “defensive coding”, it is the act of coding with security in mind, and guarding against accidental or intentional misuse of your application. It is to assume that your application will be used in a myriad of ways(not necessarily just the way that you intended) and to code it accordingly.


###[Read the rest on my NEW blog!](https://wehackpurple.com/pushing-left-like-a-boss-part-4-secure-coding/)
How is the 'Click here to get the latest version', made for web apps?
Tags: discuss
Published: 2019-04-22 03:41:13

---
title: How is the 'Click here to get the latest version', made for web apps?
published: true
tags: discuss
---

I've noticed this in a couple of web apps recently, how is the production app updated live without disrupting users who are currently logged in / using the app?
setTimeout vs setImmediate vs process.nextTick
Tags: eventloop, node, javascript
Published: 2019-04-22 03:57:33

---
title: setTimeout vs setImmediate vs process.nextTick
published: true
tags: event loop, Node, JavaScript
canonical_url: https://logicmason.com/2019/settimeout-vs-setimmediate-vs-process-nexttick/
---

What's the difference between `setTimeout(callback, 0)` and `process.nextTick(callback)`? How about Node's `setImmediate(callback)`?

On the surface it appears that all three functions do the same thing—they execute the callback after the current event loop, but before anything else. The natural question to ask is, why are there three different functions? Let's run an experiment:

```javascript
let racer = function() {
  setTimeout(() => console.log("timeout"), 0);
  setImmediate(() => console.log("immediate"));
  process.nextTick(() => console.log("nextTick"));
  console.log("current event loop");
}

racer()
```

We can see from the output that these callbacks aren't executed in the same order they were written in the source code.

```javascript
[Running] node "/Users/logicmason/timeouts.js"
current event loop
nextTick
timeout
immediate

[Done] exited with code=0 in 0.203 seconds
```

### Explanation

The first one executed was `process.nextTick`, which puts its callback at the front of the event queue. It will execute after the code currently being executed but before any I/O events or timers.

Next is "timeout". Since we passed `setTimeout` a timeout of 0, there's no additional enforced delay before its execution, and it is placed on into the timer queue during the next loop.

Finally, we have `setImmediate`, which is clearly not as immediate as its name suggests! Its callback is placed in the check queue of the next cycle of the event loop. Since the check queue occurs later than the timer queue, setImmediate will be slower than setTimeout 0.

All in all, the event loop looks like this:

`timers` -> `IO` -> `poll` -> `check` ->`close` -> `timers` -> ...

**Timers**: callbacks from `setInterval` or `setTimeout`
**IO callbacks**: callbacks from I/O events
**Idle**: used internally by Node between IO and Poll phases
**Poll**: retrieve new I/O events
**Check**: callbacks from `setImmediate` execute here
**Close**: handle closed connections like sockets


### Challenge time!

What do you expect the output of the following code in Node to be?

```javascript
let racer1 = function() {
  setTimeout(() => console.log("timeout"), 0);
  setImmediate(() => console.log("immediate"));
  process.nextTick(() => console.log("nextTick"));
}

let racer2 = function() {
  process.nextTick(() => console.log("nextTick"));
  setTimeout(() => console.log("timeout"), 0);
  setImmediate(() => console.log("immediate"));
}

let racer3 = function() {
  setImmediate(() => console.log("immediate"));
  process.nextTick(() => console.log("nextTick"));
  setTimeout(() => console.log("timeout"), 0);
}

racer1()
racer2()
racer3()
```

Was it what you expected?

*Subscribe to more content from [logicmason.com](http://eepurl.com/diFSaf)*
Age of programmers, have you experienced drawbacks?
Tags: discuss, career
Published: 2019-04-22 03:15:22

---
title: Age of programmers, have you experienced drawbacks?
published: true
description: Just pondering if the age is important
tags: #discuss #career
---

Recently, I've stumbled upon a company that seemed nice and with a good product.
I often bookmark those for the day I decide to really try to go back to a programming role and may decide to apply.

When I bookmark a company, I usually add notes about the position and what attracted me in the first place so I read the details.

I saw in the section "Preferred", listed with desirable skills, that the maximum age desired is 35 years-old.

I was a little shocked because I'm 37 years old and also because I thought and still think that older people can program as well as younger ones.

That was the only instance I saw but I was wondering, have you seen this kind of things in open positions at your company or other?

Do you think age is important?

I agree a younger mind could understand new things faster.
However, I think that a lot in programming comes easier with experience and if you'd need to update your knowledge, you can usually do it quick enough by drawing on what you've seen in the past.