teleren/devto huggingface dataset:
Fixed pixel gutters on a percentage grid
Tags: css, webdev
Published: 2017-09-18 10:08:57

---
title: Fixed pixel gutters on a percentage grid
published: true
description: Using pixel gutters on a percentage grid
tags: css,webdev
---

Although not the most riveting of subjects, grids are a fundamental building block for websites. This fixed-gutter snippet gets used on every project I build, so I thought it might be handy to share as my first Dev.to post.

In the past, I've tended to gravitate towards using percentage margins on percentage-width grids. It certainly makes the calculations easier. A two-column (50/50) grid turns into a `0/48%/4%/48%/0` grid. This system works really nicely in isolation but I've found problem starts when it slots into a design running consistent gutters. 

Consider a design using `40px` of vertical space between each section. If you use percentages for your horizontal margins, that neat and consistent `40px` gap will shrink as the viewport closes in. Fortunately, there is a better way...

## Enter the consistent margin

Sadly it's not possible to write a two-column (float-based) grid as `0/48%/40px/48%/0`, mixing percentages and pixels like this will only work on some viewports. We need to use `calc` to bring the `%` and `px` together.

The concept is to set a pixel-based `margin-left` on each element (excluding the first in each row), then use `calc` on the element widths to account for the pixel gutter.

The width calculation is as follows:

```
Element width in percentage - (No of gutters * gutter width / number of elements)px
```

To use a real world example, for a two-column grid with a 30px gutter:

```css
/* 50% - (1 * 30 / 2)px = 15px */
width: calc(50% - 15px);
```

Or a three-column grid with a 30px gutter:

```css
/* 33.333% - (2 * 30 / 3)px = 20px */
width: calc(33.333% - 20px);
```

Now when a designer presents you with a five-column grid with a 35px gutter, you don't need to measure each element and translate them into percentages, just pass the values into the calculation:

```css
/* 20% - (4 * 35 / 5)px = 28px */
width: calc(20% - 28px);
```

## Wrapping it all up

When combined with a little `nth-child` goodness, you have a pretty nice bespoke grid-system:

```css
.grid > * {
	margin-bottom: 30px;
}

@media screen and (min-width: 30em) {
	.grid > * {
		margin-left: 30px;
		float: left;
	}
}

@media screen and (min-width: 30em) and (max-width: 45em) {
	.grid > * {
		width: calc(50% - 15px);
	}

	.grid > :nth-child(2n+1) {
		margin-left: 0;
		clear: left;
	}
}
```

##### Hey! It's 2017, we have Grid layout now, who uses `float` anymore?

A valid point. I still like to provide a reasonable fallback for the elderly browsers still being used in production.
ES6, the arrow function
Tags: discuss, javascript
Published: 2017-09-18 08:48:42

---
title: ES6, the arrow function
published: true
tags: discuss, javascript
---

I would love to know what other developers think about the arrow function in javascript. When I first learned ES6, I used it everywhere and every single time. Less verbose? Yes sir!

Then, I learned what the arrow function did under the covers and saw what my code looked like in retrospect.

Well, I find myself using it a lot less than before. I think it does hurt readability in many cases. It's less verbose, but I'm not really comfortable trading readability for fewer characters. I still use arrow functions, but now I'm always asking myself: would the function keyword be better here?

What do you think?

How do you use arrow functions?
Azure Friday
Tags: softwaredevelopment, applicationinsights, azure, development
Published: 2020-02-02 06:32:41

---
title: Azure Friday
published: true
date: 2017-09-18 07:00:56 UTC
tags: Software Development,application insights,Azure,development
canonical_url: https://www.funkysi1701.com/2017/09/18/azure-friday/
---

I think Azure is great, but there is loads to it so I can never know about all of its features. There is a video series hosted by Scott Hanselman called [Azure Fridays](https://channel9.msdn.com/Shows/Azure-Friday) which I have started to watch in an effort to keep more up to date about some of its cool features.

<iframe src="https://channel9.msdn.com/Shows/Azure-Friday/Debug-NET-Apps-in-Production-with-the-Snapshot-Debugger-in-Application-Insights/player" width="960" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

I watched this video recently and it is all about application insights and new ways you can debug your web applications by creating snapshots. I am a big fan of application insights so adding extra ways to debug my apps is a big win for me. Once I get this feature working in my code I will no doubt blog about it.

The post [Azure Friday](https://www.funkysi1701.com/2017/09/18/azure-friday/) appeared first on [Funky Si's Tech Talk](https://www.funkysi1701.com).
What does agile development have in common with amateur theater?
Tags: agileteamsculture
Published: 2017-09-18 00:52:37

---
title: What does agile development have in common with amateur theater?
published: true
description: 
tags: agile teams culture 
---

*This article originally appeared [on my blog](http://wrschneider.github.io/2017/09/16/musical-theater-and-agile-development.html)*

Working in an agile development environment, I noticed some parallels to my experiences with student theater several decades ago.

In both cases, *you never have enough time to get your production / release perfect*.  In theater, your dates are fixed in advance, and you work within that constraint.  Your production has to be "releaseable" in the sense that you are expected to perform a whole show start-to-finish, and you have to accept some fine-tuning just won't get done.  You have some flexibility on how elaborate you make your staging, scenery, costumes, etc., and you do the best you can with the resources and the time you have.  In software, you commit to a release schedule, and you scope your releases to what you can get done within that schedule.  It's better to drop features than to delay the release.

Another common concept is *progressive refinement*.  The idea is to build the big picture in broad strokes first, then come back to fill in details. (Think about how JPEGs look while downloading.)  The first thing you when you start rehearsals is read through the whole script, start-to-finish.  No matter what, everyone has to know their lines and music.  Then you start adding staging, bits at a time.  Early into the rehearsal period you would be able to do a minimalist performance--you wouldn't have full staging or sets, but it would be *something*.  In software, this would be like defining the full product vision, then building out enough critical features to release an early MVP.  

On the people side, theater productions tend to have distinct roles.  Producers are responsible for publicity and ticket sales, directors and music directors are responsible for making sure performers know where to stand and how to sound, etc.  These roughly correspond to software team roles like product manager, development manager, and technical lead -- there is a separation of responsibility between commercial success (producer/product manager) and the day-to-day management of rehearsals/development (directors/managers).  In an amateur/student group people usually wear multiple hats, similar to an agile or startup environment--everyone is a stakeholder in overall success and pitches in where needed--but there are clear affinities.    

Finally, on people management: it is important to have the right people on the team.  In both cases, teams that are excited to work together will feed off each other and can outperform the sum of their parts.  On the flip side, someone who looks great on paper might not be a good fit for your organization, and will often dissapoint.  In both cases, I learned this the hard way.
On recruiting contractors and developers
Tags: recruiting, contracting, it
Published: 2017-09-17 22:19:21

---
title: On recruiting contractors and developers
published: true
description: Some thoughts on why current IT recruiting practices can be harmful and how we can improve
tags: #recruiting #contracting #it
---

I wanted to share some thoughts on having been a contractor for the last few years and how what I've seen ties into how we as an industry recruit developers and how we can do better.

I started my career as a contractor and was basically treated like a meat grinder. Not a lot of training and not a lot of cushion if you screw up. very little mentorship. No job security whatsoever, so if they don't like you or whatever, you can be out on your ass with no recourse. I wish I hadn't started out that way because of how difficult it was to learn good habits later.

It definitely exacerbated my latent PTSD from adolescence.

Had to take prevacid every day to deal with anxiety induced heartburn.

Companies should be clearer about recruiting candidates.

Companies should be willing to train people. 
It isn't hard.

We're smart people.
We just need a positive environment to grow in,
like plants.

I hope this is useful to someone.
Because the way we recruit people right now doesn't work for companies or devs.

I've been left to flounder and it's the worst feeling as a professional.
No one should be made to feel that way by their bosses.

We all have a responsibility to do better as an industry.
Sync and async code in Swift
Tags: swift, sync, async, queue
Published: 2017-09-17 19:15:04

---
title: Sync and async code in Swift
published: true
description: 
tags: swift, sync, async, queue
---

Original post https://github.com/onmyway133/blog/issues/75

We should use `DispatchQueue` to build thread safe code. The idea is to prevent two `read and write` from happening at the same time from 2 different threads, which cause data corruption and unexpected behaviors. Note that you should try to avoid deadlock https://stackoverflow.com/questions/15381209/how-do-i-create-a-deadlock-in-grand-central-dispatch

## All sync

Use `try catch`, together with `serial queue`. Use `sync` function to block current queue.

```swift
func getUser(id: String) throws -> User {
  var user: User!
  try serialQueue.sync {
    user = try storage.getUser(id)
  }

  return user
}

func setUser(_ user: User) throws {
  try serialQueue.sync {
    try storage.setUser(user)
  }
}
```

## All async

Use `Result`, toget with `serial queue`. Use `async` function to return to current queue.

```swift
enum Result<T> {
  case value(T)
  case error(Error)
}

func getUser(id: String, completion: (Result<User>) - Void) {
  try serialQueue.async {
    do {
      user = try storage.getUser(id)
      completion(.value(user))
    } catch {
      completion(.error(error))
    }
  }

  return user
}

func setUser(_ user: User, completion: (Result<()>) -> Void) {
  try serialQueue.async {
    do {
      try storage.setUser(user)
      completion(.value(())
    } catch {
      completion(.error(error))
    }
  }
}
```

## Sync read, async write

Use `try catch` for read, `Result` for write, together with `concurrent queue`. Use `sync` function for read to block current thread, while using `async` function with `barrier` flag for write to return to current queue. This is good for when multiple reads is preferred when there is no write. When write with `barrier` comes into the queue, other operations must wait.

```swift
func getUser(id: String) throws -> User {
  var user: User!
  try concurrentQueue.sync {
    user = try storage.getUser(id)
  }

  return user
}

func setUser(_ user: User, completion: (Result<()>) -> Void) {
  try concurrentQueue.async(flags: .barrier) {
    do {
      try storage.setUser(user)
      completion(.value(())
    } catch {
      completion(.error(error))
    }
  }
}
```

## Testing for asynchrony

Before we could use [dispatch_apply](https://developer.apple.com/documentation/dispatch/1453050-dispatch_apply) to submits a block to a dispatch queue for multiple invocations. Starting with Swift, the equivalence is [concurrentPerform](https://developer.apple.com/documentation/dispatch/dispatchqueue/2016088-concurrentperform)

```swift
DispatchQueue.concurrentPerform(iterations: 1000) { index in
    let last = array.last ?? 0
    array.append(last + 1)
}
```

## Reference

- http://basememara.com/creating-thread-safe-arrays-in-swift/
- https://oleb.net/blog/2013/07/parallelize-for-loops-gcd-dispatch_apply/
Changing year in Date in Swift
Tags: swift, year, date
Published: 2017-09-17 18:50:20

---
title: Changing year in Date in Swift
published: true
description: 
tags: swift, year, date
---

Original post https://github.com/onmyway133/blog/issues/54


Today I'm trying to change the year of a `Date` object to 2000 in Swift.

```swift
let date = Date()
```

Firstly, I tried with `date(bySetting:)` but it does not work with past year. It simply returns nil

```swift
Calendar.current.date(bySetting: .year, value: 2000, of: date)
```

Secondly, I tried with `dateComponents`. The `component.year` has changed, but it `calendar` still returns the original date, very strange !!. No matter what timezone and calendar I use, it still has this problem

```swift
var component = calendar.dateComponents(in: TimeZone.current, from: base)
component.year = year
Calendar.current.date(from: component)
```

Finally, I tried to be more explicit, and it works ðŸŽ‰ 

```swift
var component = calendar.dateComponents([.year, .month, .day, .hour, .minute, .second], from: base)
component.year = year
Calendar.current.date(from: component)
```
The MainController
Tags: swift, controller
Published: 2017-09-17 18:38:15

---
title: The MainController
published: true
description: 
tags: swift, controller
---

Original post https://github.com/onmyway133/blog/issues/36


Usually in an app, we have these flows: onboarding, login, main. And we usually set `OnboardingController`, `LoginController` and `MainController` as the root view controller respectively depending on the state.

I find it useful to have the `MainController` as the container for main flow. It can be a tab controller, swipe menu controller or contains just 1 child view controller. The screens are provided by child view controllers, but the `MainController` does the following jobs

- Status bar style

We usually need to call `preferredStatusBarStyle` on the parent controller. See https://stackoverflow.com/questions/19022210/preferredstatusbarstyle-isnt-called

- App did become active

Usually when app is brought to foreground, we need to fetch logged in user profile to see if there's changes. We do this by listening to `app did become active` in `MainController`. 

- Mock to open

This can be anti pattern. But in UI Tests, for laziness, we can just use some [launch arguments](http://nshipster.com/launch-arguments-and-environment-variables/) and check to present some specific screens to test, because `MainController` is the root for main flow.

- Logout

Because things originate from `MainController`, things can terminate in `MainController`. We can handle `logout`, clear states, and tell `MainController` to tell `AppDelegate` to switch to another root controller
My first Experience with the Rucksack problem
Tags: nphard, np, problems, functions
Published: 2017-09-17 16:17:15

---
title: My first Experience with the Rucksack problem
published: true
description: the rucksack problem in my first attempt and some reflexions of NP-hard
tags: NP-hard, NP, problems, functions
---


The relation among all the problems in the NP is a very important factor to find the way to solve the ancient problem "is P = NP?" In the nexts posts I'm going to analyze all the factors of the problems that I have studied to try to solve them. This post is only a small introduction to my first experience.

It is common that the NP-hard problems could be expressed with natural numbers, we do not need the real ones to abstract them. For example: It is well known that SAT problem works with boolean expressions (discret variables). We use 1 or 0 and the operations between this two numbers. The rucksack problem could be expressed only with the natural numbers.


The rucksack problem. I tried to solve this problem, but I realized that the fact of his combinationality made it difficult to solve with a good time with a polynomical cost. In some opportunities I have made algorithms for class or contests. I remember when I was in the Google's Hashcode and they gave us the pizza's issue. I thought that it was the same kind of problem, they put an NP-hard problem to see the algorithms, and the way we think.

The rucksack problem has a very simple way to solve it. The recursive algorithm which tests the combinations and if it fails it goes back and check other solution, at the end it gives you the best solution. the cost ... exponential, it has all the combinations.

I thought that I could develop a function to solve the problem. In the function the input is only the weight and the price of the book. In my first attempt I thoght that with one ponderation will work fine ... I was mistaken

I put an example: the max weight is 30kgm and the books are: [(30,45), (15,35), (15,35)] -> there are 3 books the x are the wight and the and are the price

The function divides the price out of the weight. Whit this operation I get a value to order the books. The most expensive ones usually go first than the others but not allways, the weight is important too.

The book (45/30) got more score than (25/30), but the book (1/1) got more score than 50/100. It is simple.

Then my algorithm is going to do this: "OK, let me see, I have this (45/30, 23/15, 24/15) ... The solution is: the last two books." I got the max score ... good, then I have to try with this same rucksack's weight and with other books: (45/30, 30/16, 35/16), and my algorithm said: "OK Carlos, I have your solution: the last book ... ". That was horrible, it was a bad solution, and I thought: "Okay I have to use the max weight too in the function" and I made other that worked for the second example but not for the first one.

And that was the beggining, the algorithm each day is bigger and better, the methods involved in it are more complex and have diffrent cases, but I need a function to solve the problem, and it probably does not exist.
Map: Another Higher Order Function
Tags: javascript, functional, webdev
Published: 2017-09-17 04:45:29

---
title: "Map: Another Higher Order Function"
published: true
cover_image: https://cdn.tiffanywhite.tech/wp-content/uploads/2017/09/09235328/opt_john-matychuk-284377.jpg
description: I discussed filter in my last post. Now, we discuss map.
tags: javascript, functional, webdev
---

This was originally published on [my blog](https://tiffanywhite.tech/map/#ðŸ‘©ðŸ½”ðŸ’»).

Map is another higher order function that goes through an array and doesn’t discard it but instead transforms/mutates it.

Here, I’d like to get an array of all the names of the animals.

```javascript
const animals = [
  { name: â€˜Catticus Finch’,  species: â€˜cat’ },
  { name: â€˜Peaches’,         species: â€˜fish’ },
  { name: â€˜Bobby’,           species: â€˜dog’ },
  { name: â€˜Lucifer’,         species: â€˜cat’ },
  { name: â€˜Beatrix’,         species: â€˜rabbit’ },
  { name: â€˜Cerulean’,        species: â€˜fish’ }
];
```

Here’s how we would accomplish this with a for loop:
```javascript
var names = [];

for (var i = 0; i < animals.length i++) {
  names.push(animals[i].name); 
}
```
...where we're iterating through the array and pushing the value of the `name` property into the empty `animals` array.

The function `.filter` expects a boolean, but `.map` expects a callback function to return a transformed object it will push into a new array.

To return the names of each of the animals in code:

In ES5: 
```javascript
var names = animals.map(function() {
  return animal.name;
});
```

In ES6:
```javascript
const names = animals.map((animal) => animal.name );
```
![names_map_gif](https://cdn.tiffanywhite.tech/wp-content/uploads/2017/09/17000752/names_map1.gif)

You can use `.map` to return a subset of an array. Since it expects a callback to return an object, we can make new objects.

In ES5
```javascript
var names = animals.map(function(animal) {
  return animal.name + â€˜ is a â€˜ + animal.species;
});
```

In ES6

```javascript
const names = animals.map((animal) => animal.name + â€˜ is a â€˜ + animal.species );
```

![names_species_gif](https://cdn.tiffanywhite.tech/wp-content/uploads/2017/09/17000807/names_species.gif)

## Easier Array Manipulation with Higher Order Functions

`.map()` and `.filter()` are just a couple of higher order functions you can use to manipulate and iterate over arrays.

You can check out [this link](http://eloquentjavascript.net/05_higher_order.html) for further reading.
The virtuous thank-you cycle
Tags: 7fights, freelancing, launchdarkly, speaking
Published: 2017-09-21 20:23:24

---
title: "The virtuous thank-you cycle"
published: true
tags: 7fights,Freelancing,LaunchDarkly,Speaking
canonical_url: http://www.heidiwaterhouse.com/2017/09/16/the-virtuous-thank-you-cycle/
---

We talk a lot about vicious cycles, and how it’s easy to end up in bad places because the incentives are all bad, but let me tell you a story.

It’s a pleasant Saturday, my family is watching Star Trek: TNG together, and I’m in my home office, working on a side project and slightly resenting it. It’s the collateral for a workshop Carol Smith and I are giving at LISA about the non-technical part of interviewing, and we think it’s really an important part of helping people get jobs. So the workshop will be great and important, but I’m currently wishing I was doing something else. And then this comes across my twitter:

{% tweet 909159623935934464 %}

Marie says she uses the principles I espoused in that talk even when she starts side projects, like [Call My Congress](https://www.callmycongress.com/). Because she set it up to be easily localized, anyone could come through and easily add instructions in Spanish or Somali, without having to fight the project to do it.

I gave that talk 17 times. I took it to a different continent. I got&nbsp;_most_ of my expenses paid, and I got an honorarium exactly once. I figure I spent 60 hours researching and writing it, and and 3-5 hours in prep and rewriting each time I gave it. I was working for myself, so no one paid me for that time.

A thank you note like this makes that all worthwhile. I give technical talks for the same reasons that novelists say they have to write – because it’s something burning in me, and I need and want to share everything I have learned the hard way so that other people don’t have to. In my grandiose moments, I think of it as reducing the entropy of the technical world, giving people a boost up the ladder. Most of the time I think it’s funny that all of my teacher-mother’s children have found our own ways to teach, far from school classrooms.

Now I have a job that pays me for development time for talks, and means that travel and conferences are not lost productivity for me, and that means the world to me, but most of the technical speakers you see at conferences are like I was — working evenings and weekends and taking vacation time to battle entropy with education.

I’m going to try to remember to do better about saying thank you, and thus spread the cycle of appreciation further and wider. A virtuous cycle perpetuates because the rewards are so good. Thank your mentors, and the friends who want you to expand your horizons, and the organizers who make safer spaces to speak in, and the bosses who don’t make you take vacation days. Thank them publicly and specifically.



_This post was originally published on [heidiwaterhouse.com](http://www.heidiwaterhouse.com/2017/09/16/the-virtuous-thank-you-cycle/)_