teleren/devto huggingface dataset:
Collapsing Margins in CSS
Tags: css, html, webdev, todayilearned
Published: 2020-02-18 14:09:25

Hey everyone! It's time for another post in my journey of re-learning web development. As I was re-learning most of it, I was seeing a lot of other developers do Todo lists in Javascript. I was beginning to learn Node.js and it occurred to me that a service I use could be replicated for practice. That service is Trello.

If you have no idea what Trello is, it is a task-tracking tool, a todo list of sorts that is simple and fast to use. The interface is especially cute and easy to learn. So, I thought, why not give it a go?

It wasn't long after I wrote my first few lines of code that I started to notice something strange. 

Let me show you my code. 

This is my html file.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qiugihiy6b4mmg4vobmo.png)

As you can see, there is a parent div called "category-panel" and there is a child div called "card-title".

Take a look at my CSS file.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cjvnes7ponwdzpa7zf75.png)

Now, look at the website that renders.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zq362b8g1g1lyt4fngzh.png)

*The parent div has a dark blue background colour while the child div has a red background colour.*

**So, what is happening here?**
By referencing the code above, we should see that the child div would have a 2% margin-top and margin-bottom. However, that's not the case here.

Collapsing margins are at play.

By definition, collapsing margins are 2 vertical margins which come into contact with each other. If there are no parent-child divs, the margin with the highest value overthrows the one with the lower value. If there is a parent-child div like the example above, the parent margin will overthrow the child margin. In the above case, the margin amounts to 0.

This does seem frustrating. However, there are a few ways we can solve this.

The idea behind all these solutions is simple. Add something solid between the 2 divs or in the case of parent-child divs, add something solid to the parent div. In this way, both margins will be respected and applied.

There are 2 solutions that I have gathered. 

1) Add a padding surrounding the parent div. Here, the div with class "category panel" being the parent div.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1098k6njh016jxhm3gwj.png)

2) Add an overflow to the parent div.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bc91bn7zkkz44xv3ebkq.png)

As you can see, all the solutions put a solid property to the parent div. This separates the 2 margins from being in contact with each other, resulting in both margins being applied respectively.


This has been a short post but hopefully, you learned something along the way!
Re-Learning Data Structures and Algorithms Series 🧑🏾‍💻
Tags: python, tutorial, techinterview, datastructuresandalgorithms
Published: 2020-02-18 13:48:21

Picture courtesy of Shahadat Rahman from Unsplash

##The Why

I remember being in my first Algorithms class for Computer Science at Elizabeth City State University (ECSU) thinking, “What have I gotten myself into?!”. The material was daunting, and (most of the time) I felt incompetent doing it. On top of these feelings, each student had to present a solution to their coding problem utilizing algorithms learned that semester. This included documenting its Big-O notation, while our teacher is grading us on the material AND the number of times we say “ummm” (thank you Professor Rook, I’ve grown into a better presenter because of your classes 😂). To say that I was under pressure, is an understatement!

So why create a series on a topic that caused so much stress?! Because I believe coming back to a once difficult topic with my current skill set/experience will yield not only understanding but improve my coding overall (also, I would say I am a more confident software engineer than junior me ha). I also think that going through this series, my own unique way of explaining topics might help someone out there on their on CS/engineer journey or on tech interviews.

During this series, I will be following the template laid out by Fahim UI Haq on [codinginterview.com](https://www.codinginterview.com/interview-roadmap), which is a great resource! They have lined up what one should be learning week by week in preparation for a technical interview. Their outline is as follows:

* Week 0- Choose What Programming Language Should You Use
* Week 1- Brush on the Basics w/ Programming Language
* Week 2/3- Data Structures and Algorithms
* Week 4/5- Practice Simple Data Structures Algorithmic Challenges
* Week 6/7/8- Practice More Complex Coding Interview Problems
* Week 9/10- System Design Interviews
* Week 11- OS and Concurrency Concepts
* Week 12- Object Oriented Interviews

##Plan of Attack (PoS)

I will cover the topics on the schedule in a detailed manner (low level — I’m seeking to breaking down more complex topics so anyone can understand) and will end the blog post off with free resources that can solidify any misunderstandings. Though I will be approaching the material in an sequential manner, some topics will take more than one blog post and will be split into parts accordingly. **The language I will be using will be Python 3. However, you should be able to apply the concepts in the language you choose to work in, if you have a good handle on the basics of said language.**

##The Hope

The hope is that this blog post series on DS and algorithms will be one of the best free resources alongside many others that have helped me during this time. Let me know your thoughts in the comments below!


If your interest was peaked and/or have been in encouraged/helped by this blog post, follow me on Twitter ([@jeff_ridgeway4](https://mobile.twitter.com/jeff_ridgeway4))!
Consumindo a Api do dev.to
Tags: javascript, axios, react
Published: 2020-02-18 13:39:00

<p>O Dev.to fornece uma API simples e fácil de consumir com operações básicas, como:</p>
<ul>
  <li>Obter informações de usuários</li>
  <li>Obter informações de artigos, como:</li>
  <ul>
    <li>Título</li>
    <li>Descrição</li>
    <li>Data de postagem</li>
    <li>Imagem principal</li>
    <li>Tags</li>
  </ul>
</ul>
<p>Isso já abre um leque de opções para o desenvolvimento. Neste exemplo, o objetivo principal é simples:</p>
<h4>Obter todos os artigos de um usuário e colocar as informações em variáveis usando Node.js ou outras ferramentas</h4>
<p>Aqui estão as etapas:</p>
<ol>
  <li>Instale o módulo axios com <code>npm install axios</code></li>
  <li>Crie um arquivo .js e importe o axios com <code>import axios from 'axios'</code></li>
  <li>Crie uma constante que será a ponte para obter informações da baseURL:</li>
</ol>

```javascript
const devTo = axios.create({baseURL:`https://dev.to/api`})
```

<ol start="4">
  <li>Crie uma função assíncrona e solicite os dados com
</li>
</ol>

 ```javascript
const dados = await devTo.get(`/articles?username=${username}`)
```

<p>Lembre-se de substituir ${username} pelo seu nome de usuário.</p>

<ol start="5">
  <li>O segundo passo fica com você. Abraços!</li>
</ol>
Switching to native app development - Week 1
Tags: career, appdev, webdev
Published: 2020-02-18 13:28:56

Last week, I started a new job working on mobile apps. Before this I’d only worked on websites so this is a substantial change for me. As you can expect, after only a week I’ve not done too much - some setup, a few bug fixes, a lot of perusing already written code.

Note: I’m creating apps using Vue.js and NativeScript. This may not apply to every development flow, but *should* apply across all NativeScript projects.

## What I've learned so far.

* App structure looks almost exactly the same as website structure. node_modules, package.json, webpack.config (and all the other .config files) still exist. App replaces src but contains components, pages, images, store, which you’d also find in a web app.
* You still have the ability to use everything you used in web development if you wanted. JavaScript frameworks and libraries, css compilers (sass, less, etc), state management tools. If you can do it on the web, you can probably do it here too.
* Emulators are fiddly to set up (but not painstakingly so) as they require changes to your system config. Guides are really helpful.
* Other than the visual rendering of the apps (which you can’t use browsers for, but will need to use emulators or connected apps on real devices), your code 
* Code is not written in HTML, despite looking similar. Instead it’s compiled down to XML which restricts what you’re able to use. `<div>`  doesn’t exist any more but the built in components work in a very similar to way to what you’re used to (GridLayout = css Grid). Here’s a code example which creates the image below (ignoring styling).

```html
<GridLayout rows=“auto, auto” columns=“*, auto” col=“1” row=“1” class=“status-wrapper”>
  <Label row=“0” col=“0” class=“title”>This is the title</Label>
  <Label row=“1” col=“0” class=“subtitle”>This is the description</Label>
  <Label row=“0” col=“1” rowSpan=“2” class=“icon”>Icon</Label>
</GridLayout>
```
![Component output by the above code](https://danspratling.com/images/nativescript-app-component-demo.png)

[NativeScript Docs](https://docs.nativescript.org/start/introduction)

____

Originally written on [https://danspratling.com](https://danspratling.com)
[Twitter](https://twitter.com/dan_spratling) | [Github](https://github.com/danspratling)
Client-Side vs. Server-Side Programming
Tags: computerscience, webdev, beginners
Published: 2020-02-18 13:09:25

Client-side code runs on a client's computer whereas server-side code runs on a web server before a webpage is sent to the client. A user first requests a webpage from a server, the server may then run some operations or processes, then afterward the webpage is sent to the user.

JavaScript is a well-known client-side scripting language, this means it runs and is executed on the client's computer. Imagine a webpage has a button and when you click it a message appears. This can be achieved using JavaScript, and it will be executed on your machine without having to send any request to the server. Using client-side code can reduce the amount of work the server has to do, freeing it up for more important tasks.

PHP is a well-known server-side programming language, which means it is executed on the server-side prior to the user receiving the webpage. Whatever code is written in PHP will not be visible to the user, on the client-side, as the code will have already been executed and removed before the webpage is sent to the user. This can allow for more private code, such as encryption algorithms, to be written in PHP and not be accessed, read, or reverse-engineered by the user.

Using a server-side programming language can also allow more complex operations involving the server. For example, using a client-side language such as JavaScript you cannot access a database directly or write/read files that live on the server. Using a server-side programming language such as PHP you can save information to a database and manipulate files on the server, such as allowing a user to upload a file to the server. Saving information on the server-side can also allow multiple users to see the same information on different computers. Imagine a high scoreboard, you would want every user to see the same high scores list and this could only be achieved by saving the information to a server.

This post was originally published on https://acroynon.com
Moving proprietary processes to Free and Open source processes
Tags: opensource, linux
Published: 2020-02-18 13:08:53

Working as a consultant mainly focused in Linux over the past couple decades, I have found there is a significant use of proprietary software in corporations.
After I left the FSF internship, I sought work where I could use Linux, preferably using only free software. 
Realizing that this was not an easy task in the early 2000s, I still made the effort.

I was hired to write Linux essentials basically because after reviewing the chapters from Cisco, yes for some reason they were having Cisco write chapters, I found so many errors and so much plagiarism, they asked me to write it. For this job I dragged in my own Debian machine. 
This was before Ubuntu. Porting software to Debian was easy but nobody really cared. Porting and cross compiling really wasn't a big issue.

However it wasn't until this past week that I realized how easy it was to convert a process, that been in place for years, with an open source process.

For the purposes of this particular process, we used a wysiwyg that was proprietary and cost a lot of money, windows, Excel for manually entering metadata, a few scripts ... Perl.

Yes I realize it's 2020! 
We also were required to install strawberry Perl.

So basically it was all unnecessary and proprietary. Licenses for the wysiwyg from Adobe were in expense. I'm pretty sure they pay for Windows too one way or another.

In the end it took less than a day to figure out how to convert this process into:

Linux
An editor of your choice
A bash script to generate the manifest XML and zip the directory

If you work in a company that uses a proprietary software or incorporates proprietary processes, think about how you can simply convert this to an open source process.

Not only will this possibly make your life less frustrating, but also can save time and money.

Maybe you will encounter some resistance in some organizations. However, there's always virtual machines!
How dependency injection improves code quality
Tags: todayilearned, codequality, programming
Published: 2020-02-18 13:00:14

*TL;DR notes from articles I read today.*

### [Benefits of dependency injection](http://bit.ly/2Hw0f1R)

- It improves code maintainability. Stand-alone classes are easier to fix than complicated and tightly coupled classes.
- It improves code quality by improving code testability. If it is easy to test code, it will get tested more often which will lead to higher quality codebase. 
- Dependency injection makes code more readable as the classes used are small, to the point, compact and more clearly defined.
- When you use dependency injection, you get loosely coupled code that is more flexible. Small classes that do one thing can more easily be reassembled and reused, which in turn saves time and money.
- It leads to a more extendable class structure.
- It facilitates team development as after defining abstractions, teams working together can write their code using the abstractions, even before implementations are written.

*[Full post here](http://bit.ly/2Hw0f1R), 4 mins read*

---

###[How to continuously profile tens of thousands of production servers](https://sforce.co/2SAdmpa)

Some lessons & solutions from the Salesforce team that can be useful for other engineers too.
- Ensure scalability: If writes or data are too voluminous for a single network or storage solution to handle, distribute the load across multiple data centers, coordinating retrieval from a centralized hub for investigating engineers, who can specify which clusters of hosts they may want data from.
- Design for fault-tolerance: In a crisis where memory and CPU are overwhelmed or network connectivity lost, profiling data can be lost too. Build resilience in your buffering and pass the data to permanent storage, while allowing data to persist in batches.
- Provide language-agnostic runtime support: If users might be working in different languages, capture and represent profiling and observability data in a way that works regardless of the underlying language. Attach the language as metadata to profiling data points so that users can query by language and ensure data structures for stack traces and metadata are generic enough to support multiple languages and environments.  
- Allow debugging engineers to access domain-specific contexts to drive their investigations to a speedier resolution. You can do a deep search of traces to match a regular expression, which is particularly useful to developers debugging the issue at hand.

*[Full post here](https://sforce.co/2SAdmpa), 9 mins read*

---

*[Get these notes directly in your inbox every weekday by signing up for my newsletter, in.snippets().](https://mailchi.mp/appsmith/insnippets?utm_source=devto&utm_medium=post08&utm_campaign=is)*
Daily Developer Jokes - Tuesday, Feb 18, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-18 13:00:07

---
title: "Daily Developer Jokes - Tuesday, Feb 18, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Feb%2018%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125947cfb29.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ An Agent died unexpectedly. How was the crime solved?

___A:___ By looking at the Stack Trace.
 -->
ODMLOC @oraclejet massive online learning 
Tags: javascript, oraclejet
Published: 2020-02-18 12:59:40

apparently MOOC means "massive open online learning" go figure !

anyhow oracle have a @oraclejet intro video if you prefer videos to reading the manual !

https://learn.oracle.com/ols/course/jet-mooc-course-overview/63147/63162

ok so its a noddy 5 minute intro TBH @oracle in fact its an embarrassment to education and training its pure marketing

but the KEY message is "JET is JAVASCRIPT for the ENTERPRISE" and that is why oracle are moving all their ENTERPRISE apps to oraclejet ! silly me i guess the M in MOOC means marketing :haha:

so the only MYSTERY about @oraclejet is why there are NO vacancies on linked in https://www.linkedin.com/jobs/search/?keywords=oraclejet ?
A question about 'Algorithm'
Tags: algorithms
Published: 2020-02-18 12:54:49

Quick question, 

i started learning coding 1 month ago(ish)

So, Is it ok if i see the Algorithm of a certain lesson and turn them to codes? or should i just have try to code without seeing the Algorithm first? 

I feel like this isn't the right way to learn. 

so I'm just wondering, and hopefully i get the answer, thanks.
ODMLON @oraclejet 
Tags: oraclejet, javascript
Published: 2020-02-18 12:53:40

this is NOT from me ! this is from @andrejusb !

*"@OracleJET cookbook is awesome and so simple to use. You can build a pretty complex app, with almost 0 knowledge - just follow cookbook. Good job by @OracleJET team."*

{% twitter 1229723703891591170%}
Estimating The Cost of A Mobile App
Tags: devops, codequality, design
Published: 2020-02-18 12:48:05

So I've been in the mobile app development industry for quite a while now. More than often, I come across ambitious people that want to get a mobile application developed for their business (or any other type of app for entertainment).

Of course I'm always happy to pick up new tasks. But there one question that (quite frankly) really gets on my nerves.
And that is: **"What's gonna be the cost of this mobile app?"** 
OR, with some added specific:  **"what's gonna be the cost of my virtual reality makeup app?"**

Like we're in the initial 3 minute of the on-boarding process and the customer really expects me to give them an estimate of the cost.   

You can't exactly predict the cost of a mobile app without the below mentioned information (If I'm forgetting something, please leave a comment. I'll make the edits).

Information Required for Estimating The App Development Cost

####The Features You’re Planning On Including
**Some examples of basic features:**
*-Are users required to manually register on you account or can they register using their social media profiles*
*-Will users have to create their personal profiles*
*-What will be your monetization strategy (in-app purchases, ads, paid app etc.)*
*-Does your app need to be connected with a website*
*-Will there be push-notifications*
*-Are you planning on making it multilingual*
*-Are you going to integrate a social sharing option?*
*-Will your app have offline capabilities*

####The development process 
both front-end and back-end development take time individually

####The complexity of your app’s functionality
Detailed functional requirements can help estimate the cost

####The complexity of your app’s features and design 
basic design, individual design, or custom design

####Prototyping and wire-framing

####The operating system you’re going to use
*-Apple iOS*
*-Android*
*-Hybrid mobile app*

####Market Research
The cost will also depend on the market research required for analyzing and creating a successful business strategy. This step helps to evaluate if there is any demand for the customer's product in the market.

####Cost of testing / quality assurance

####The number of pages in your app

####The Developer/Company
Cost also Depends on the app developer or [the company you’re going to hire](https://www.appverticals.com/) (costs vary with different companies and developers).

No matter which type of app you're developing, you need the above information to effectively estimate the cost.

So once I have acquired the above information, then I calculate the total cost.
How to enable React Native extension on Zeplin web
Tags: reactnative, zeplin, ux, ui
Published: 2020-02-18 12:08:30

Hello, I'm doing this post because I couldn't find this in the docs of Zeplin, so you avoid a headache :)

## Why should you need this?
Your UX/UI designer exported all the screens and components into [Zeplin](https://app.zeplin.io) and you are developing in RN. In the web version you get to the component code snippet part and you'll see a XML snippet and no RN version.

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

## Add [React Native extension](https://github.com/zeplin/react-native-extension) to Zeplin Web
In the right corner of the snippet you see a config icon. Click on the icon
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ogrjhsg3n51kynv5l359.png)

When you click there, and if your screen has the same height of mine, you'll have the same problem I had.

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

The header of the modal gets cropped, so you can't go to the extensions page. Just click F11 to enable Fullscreen and see the header:

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

Then click **Extensions** and enable RN:

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

Finally you'll get your RN code snippet:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5nprd8lwrfbsh7gp96jj.png)

That's all!