teleren/devto huggingface dataset:
Week 2 Discussion HTML & CSS:
Tags: html, css
Published: 2020-02-25 16:17:27

<h1>Please explain in your own words what's the importance of responsive web design for you?</h1>

Responsive web design seems to have more benefits than drawbacks to me. If I could design a website that could make a majority of customers happy just for functionality alone, I’d rather do that than to make multiple websites, and struggle doing the code for each individual device. I think at first at least I’d focus on responsive design just to make sure my site is universal for all to see comfortably.
Fast Track to Dark Mode with Styled Components and React
Tags: react, javascript, styledcomponents, codenewbie
Published: 2020-02-25 15:57:38

This post describes a fast track to dark mode with Styled Components and a couple of other packages which is currently implemented on this [blog](https://blog.agney.dev/).

Note that we will not be discussing the implications or concept behind dark mode, there are enough articles on the web that do that already. Let's get straight to business.

We will start with [a ReactJS hook for dark mode](https://github.com/donavon/use-dark-mode). We will also add in the gatsby plugin that helps prevent flashing on load for the same hook.

```bash
npm i use-dark-mode gatsby-plugin-use-dark-mode
```

Now, we need a button to change the mode, we could add any button but let's get the pre-made beautiful SVG button:

```bash
npm i react-dark-mode-toggle
```

Let's split our theme to colors and others:

```javascript
const darkColors = {
  background: `#121212`,
  textColor: `rgba(255, 255, 255, 0.85)`,
}
const lightColors = {
  background: `#FFFFFF`,
  textColor: `rgba(0, 0, 0, 0.8)`,
}
const theme = {
  other: {},
}
export default getTheme(mode) {
  return {
    ...theme,
    colors: mode === 'light' ? lightColors : darkColors,
  }
}
```

[Guide to using `ThemeProvider` in docs](https://styled-components.com/docs/advanced#theming)

Now, let's wire the button and the hook together:

```javascript
import useDarkMode from 'use-dark-mode';
import DarkModeToggle from 'react-dark-mode-toggle';

import getTheme from './theme';

function Layout({ children }) {
  const darkMode = useDarkMode(false);
  const theme = getTheme(darkMode.value ? 'dark' : 'light');
  return (
    <>
      <header>
        <DarkModeToggle
          onChange={darkMode.toggle}
          checked={darkMode.value}
          size={50}
        />
      </header>
      {children}
    </>
  );
}

export default App;
```

and that's it! We have dark mode. You might have to adjust some other variables for hover styles and others, but this is a great start.

Bonus: Global Styles:

```javascript
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    color: ${props => props.theme.colors.textColor};
    background-color: ${props => props.theme.colors.background};
  }
  body.dark-mode {
    img:not([src*=".svg"]) {
      filter: grayscale(50%);
    }
  }
`;

export default GlobalStyles;
```

> Crossposted from [my blog](https://blog.agney.dev/fast-dark-mode/). 
> [Subscribe to my monthly _On the Web_ newsletter](https://buttondown.email/agney)
Open-sourcing Ferrum: a fearless Ruby Chrome driver
Tags: opensource, ruby, rails, ror
Published: 2020-02-25 15:52:32

If you want to run integration tests on your website, you have three options: Poltergeist, Selenium and now, a new secret weapon — Ferrum.

Poltergeist is fantastic, but unfortunately, it’s really quite outdated now.

Selenium requires installing additional software, it’s slower, and it doesn’t give you full control of the browser. It’s definitely not an option for everyone.

Ferrum is faster than Selenium, there’s no additional software to install, and with it, you have complete control of the browser.

https://evrone.com/ferrum-ruby-chrome-driver
Pretty printing objects with multiline strings in terminal with colors
Tags: node, javascript, typescript
Published: 2020-02-25 15:51:23

If you have use JavaScript for some time, you should notice that pretty printing JSON in Node.js is as simple as `JSON.stringify(obj, null, 2)`.

(Also, if you need multiline strings, there is [js-yaml](https://github.com/nodeca/js-yaml).)

- But there is never coloring

An alternative is `console.log`, which in Node.js, it is not as interactive as web browsers with Chrome DevTools, and the depth in by default limited to 2.

- How do you maximize depths?
  - Easy, use `console.dir(obj, { depth: null })` -- [console.dir](https://nodejs.org/api/console.html#console_console_dir_obj_options)

BTW, in my test project, I got this,

![inspect-basic](https://raw.githubusercontent.com/patarapolw/prettyprint/master/screenshots/inspect-basic.png)

Even with proper options (`{ depth: null, breakLength: Infinity, compact: false }`), I still get this

![inspect-custom](https://raw.githubusercontent.com/patarapolw/prettyprint/master/screenshots/inspect-custom.png)

So, what's the solution?

You can customize `inspect` by providing your own class.

```ts
import util from 'util'

class MultilineString {
  // eslint-disable-next-line no-useless-constructor
  constructor (public s: string) {}

  [util.inspect.custom] (depth: number, options: util.InspectOptionsStylized) {
    return [
      '',
      ...this.s.split('\n').map((line) => {
        return '\x1b[2m|\x1b[0m ' + options.stylize(line, 'string')
      })
    ].join('\n')
  }
}
```

(BTW, worry about `\x1b[2m`? It is [How to change node.js's console font color?](https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color))

And, replace every instance of multiline string with the class.

```ts
function cloneAndReplace (obj: any) {
  if (obj && typeof obj === 'object') {
    if (Array.isArray(obj) && obj.constructor === Array) {
      const o = [] as any[]
      obj.map((el, i) => {
        o[i] = cloneAndReplace(el)
      })
      return o
    } else if (obj.constructor === Object) {
      const o = {} as any
      Object.entries(obj).map(([k, v]) => {
        o[k] = cloneAndReplace(v)
      })
      return o
    }
  } else if (typeof obj === 'string') {
    if (obj.includes('\n')) {
      return new MultilineString(obj)
    }
  }

  return obj
}

export function pp (obj: any, options: util.InspectOptions = {}) {
  console.log(util.inspect(cloneAndReplace(obj), {
    colors: true,
    depth: null,
    ...options
  }))
}
```

Now the pretty printing function is ready to go.

![pp](https://raw.githubusercontent.com/patarapolw/prettyprint/master/screenshots/pp.png)

If you only need the pretty printing function, I have provided it here.

{% github patarapolw/prettyprint no-readme %}

I also made it accessible via CLI, and possibly other programming languages, such as Python (via JSON / safeEval, actually).
Hadelin de Ponteves is as much an entrepreneur as he is a data scientist... and other things I learned recording his DevJourney
Tags: devjourney, career, entrepreneurship, datascience
Published: 2020-02-25 15:48:17

---
title: Hadelin de Ponteves is as much an entrepreneur as he is a data scientist... and other things I learned recording his DevJourney
published: true
description: Hadelin de Ponteves is a serial learner, an entrepreneur and a data scientist. After interviewing him for the DevJourney podcast, here are the key takeways I personally took out of the discussion.
tags: DevJourney, Career, Entrepreneurship, DataScience
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sp3ifs98cw69xdcvmeu9.png
canonical_url: https://timbourguignon.fr/devjourney89
---

This week, I published Hadelin de Ponteves's #DevJourney story on my eponym Podcast: [Software developer's Journey](https://devjourney.info). Among many other things, here are my main _personal_ takeaways:

* Hadelin traces back his entrepreneurial roots back to high-school where he already preferred to choose his own learning path. Back then, he preferably learned from books he chose and bought himself, instead of the mandatory books the school provided.
* Studying in a French ivy-league engineering school didn't really prepare Hadelin for his entrepreneurship path. Instead, it gave him the technical background to be able to comprehend he problems he would work on after graduating. The entrepreneurship part was on him.
* Hadelin read a LOT of books about machine learning and AI. He realized that none of them was general and complete enough to his liking. That's why he chose to write his own book and create his own courses.
* Hadelin is a really good and efficient self-learner. When he realized this, he decided to make it his first business idea: an online education platform. But when he discovered Udemy, he decided to use that existing platform instead, pivot and focus on creating content only.
* Hadelin is really humble about his success. One of his first entrepreneurial ideas was successful. He was at the right time, and place with the right content... and executed right as well.
* As a director, Hadelin doesn't have much time for coding himself anymore. But what he diligently still regularly does is reading research papers on AI. This makes him happy and keeps one foot in the tech.
* In the wake of the Cambridge Analytica debacle and the daily screwing of our private data by tech giants, I asked Hadelin for examples of fields where Data and AI actually played a positive role. His answers were image processing in healthcare, then renewable energy and transportation with self-driving cars.
* Here's Hadelin's advice for us: trust yourself, work hard, work smart, identify your purpose.

Thanks Hadelin for sharing your story with us!

You can find the full episode and the shownotes here:
* On [devjourney.info](https://devjourney.info/Guests/89_HadelinDePonteves.html)
* Or directly [here on DEV](https://dev.to/devjourneyfm)

Did you listen to his story?

* What did you learn?
* What are your personal takeaways?
* What did you find particularly interesting?
Thefreelancechoice.com - Top resources and community support for freelance developers. Feedback welcome!
Tags: react, sideprojects, freelance
Published: 2020-02-25 15:47:36

Hey everyone, case study here! 

I built thefreelancechoice.com, a site for Freelance devs to take their careers to the next level with top resources and community support. 


The site provides :

- Interviews/articles with successful freelancers (let me know if you'd like to participate!)

- A community-curated selection of podcasts and books for freelance devs.

- A community forum for people to ask anything related to freelancing. 


The stack is: 

- Next.js, Route APIs for the Frontend/Backend. Next 9 makes developing in React so easy, bringing frontend, backend together, and providing SSR. 

- Tailwind as a CSS framework. In my opinion, Tailwind is the best thing that has happened to CSS EVER. 

- Firestore for data/accounts. Pretty slick, though I'm considering a switch to Hasura. 

- Contentful for the interviews and articles.

- Algolia for data search (cities). Easy to set up and outstanding performance.

- illlustrations.co (YO, FREE top-quality illustrations!!) 

Comments/suggestions? Let me know!
Need help with iOS accessibility focus
Tags: a11y, ios, reactnative
Published: 2020-02-25 15:42:58

I'm trying to write an application exclusively with React Native and have no native modules. For the most part, it has worked but I have hit multiple hurdles when it comes to the accessibility on the iOS side. 

I want to maintain accessibility focus on an <Text> element that is constantly changing. I do maintain the focus, but the accessibility label does not update fast enough for what I want to do. For example, let's say I have a <Text> element I change it to the letter 'a'. I want the accessibility label to say 'a' when VoiceOver is on which it does for the first letter but anything after that it does not change unless the element loses accessibility focus and I refocus it. So if I change the letter to 'b' VoiceOver still says 'a'. 

Is there any way for me to refresh the accessibility focus when I update what letter is displayed in the <Text> element?
Hot reloaded Apollo server: Dockerization
Tags: docker, graphql, node
Published: 2020-02-25 15:36:05

*Photo by Dimitry Kooijmans on Unsplash*

This is my second post and the second part of a hot reload demonstration.

# Production docker image

dockerfile
```docker
FROM node:12-alpine

WORKDIR /app

RUN npm install -g webpack webpack-cli

COPY ./package*.json ./
RUN npm install

COPY ./src ./src
COPY ./webpack.*.js ./

RUN npm run build

EXPOSE 8080

CMD [ "npm", "start" ]
```

Build image:`docker build . -t apollo-server-hot-reload-example`
and run container: `docker run -p 8080:8080 apollo-server-hot-reload-example` 

# Development webpack config

For running a server I will need a webpack plugin `start-server-webpack-plugin`. But because there is a bug in the latest version I will use version 3.0.0-rc3.

{% github https://github.com/ericclemmons/start-server-webpack-plugin/issues/30 %}


`npm i -D start-server-webpack-plugin@3.0.0-rc3`


webpack.development.js
```js
const path = require("path");

const cleanWebpackPlugin = require("clean-webpack-plugin");
const merge = require("webpack-merge");
const nodeExternals = require("webpack-node-externals");
const StartServerPlugin = require("start-server-webpack-plugin");
const webpack = require("webpack");

const common = require("./webpack.common");

module.exports = merge.smart(common, {
  devtool: "inline-source-map",
  entry: ["webpack/hot/poll?1000", path.join(__dirname, "src/index.js")],
  externals: [
    nodeExternals({
      whitelist: ["webpack/hot/poll?1000"]
    })
  ],
  mode: "development",
  plugins: [
    new StartServerPlugin({
      name: "server.js",
      nodeArgs: ["--inspect"],
      signal: true
    }),
    new cleanWebpackPlugin.CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  watch: true
});
```

Next, I will add a script to build dev version: `"build:dev": "webpack --config webpack.development.js"`

# Development docker image

The difference between production and development docker image is in command. The development image needs volume to share the source with host machine.

dev/dockerfile
```docker
FROM apollo-server-hot-reload-example

# dev volume
VOLUME /app

CMD [ "npm", "run", "build:dev" ]
```

Because there are changes that influence production image I must rebuild it again.
`docker build . -t apollo-server-hot-reload-example`
And finally, I can build development image.
`docker build dev -t apollo-server-hot-reload-example-dev`

# Run development docker container

After I run this command:

`docker run -p 8080:8080 -v *absolute_path_to_project*:/app apollo-server-hot-reload-example-dev`

where `*absolute_path_to_project*` is the absolute path to project request return same string like in production mode. After code change, webpack rebuilds code and restarts server.

{% github VojtechP/apollo-server-hot-reload-example %}
Functional Programming Interview Questions
Tags: functional, clojure, scala, haskell
Published: 2020-02-25 14:58:13

They liked your CV. You’ve got the date in your calendar. Very soon you’ll be sitting in a room about to do the interview.

Multiple things can happen. Maybe you won’t be a culture fit. Maybe you’ll hit it off straight away. The main thing is that you nail the technical part. Of course there’s an infinite amount of questions that can be asked, but after asking our network and speaking with our own team, these are some of the more common questions that you should know…. or at least be aware of.

**Scala**
* Why does Scala prefer immutability?
* Explain ‘Scala higher order’ functions?
* What is Monad in Scala?
* What is String Interpolation?
* Explain the difference between ‘concurrency’ and ‘parallelism?
* Could you comfortably explain the difference between a Monad and an applicative functor?
* Could you explain the actor model and what problem it solves?

**Haskell**
* Mention what are the benefits of Haskell expression?
* What are Monads in Haskell?
* Why is“lazy evaluation” useful in Haskell?
* Explain Haskell Compilation, Debugging, Performance Analysis?

**Erlang**
* Explain how messages are sent and received in Erlang?
* List out the pre-defined Macros in Erlang?
* Explain what is a record and how you can define records in Erlang?

**Clojure**
* Where do Clojure projects use multimethods?
* When do you use Macros in Clojure?
* How you can filter/map/reduce?
* Tell me the Pros/Cons of Immutability.
* What’s the difference and when would you use a ref/agent/atom/var?

**JVM**
* What are some different types of memory used by JVM?
* What are the different class loaders used by JVM?
* Is JVM a compiler or interpreter ?
* How does JVM perform Garbage Collection?

**General**
* When is it okay to get rid of efficiency for readability?
* Can an Impure Function be Referentially Transparent?

Now who wants to write all the answers for us?? 

You could also practice some Clojure on WorksHub Open Source Issues feature - https://www.works-hub.com/issue/f59afe47-5961-4dc1-8005-2a1a2a0df519
oneSpot - gather your accounts in one place
Tags: showdev, javascript, webdev, flutter
Published: 2020-02-25 15:33:57

---
title: oneSpot - gather your accounts in one place
published: true
description: 
tags: #showdev #javascript #webdev #flutter
---

I recently finished from one of my side projects, it took me 2 weeks to learn flutter and build a project with it. 

basically OneSpot is place where you add your social accounts into an account and when you share the link people can see the accounts you shared. It is available as web version and android app.

For this project I used Flutter for mobile application and angular for the web app, I also used Backendless, Firebase, PHP and Netlify.

I don't think that this is a successful project bu I hope more people use it soon.

please visit [onespot.site](http://onespot.site)
Is it possible that the software industry could become nearly 100% remote?
Tags: discuss, career, remotework
Published: 2020-02-25 15:19:20

Not to say that remote work is a flawless solution, but it is certainly a trend gaining in popularity.

I imagine there will always be a purpose for offices and hubs to an extent, but could we see a reality where the normal way software is built is from wherever the developer happens to be located and meeting up IRL is not an everyday norm?
Scaling videos with ffmpeg for App Previews
Tags: ios
Published: 2020-02-25 14:54:59

## The problem

When you upload video previews for your iOS app, they have to be in a specific resolution, usually matching the native resolution of the device. Check: [App Preview Resolutions](https://help.apple.com/app-store-connect/?lang=en/#/dev4e413fcb8)

However, your video editor may not support those resolutions natively. When the iPhoneX was released, iMovie didn't support it and iPhoneX captures were exported as `750x1334` videos, instead of the native `886:1920` of the capture. Supposedly, iMovie has support for App Previews, but the support for latest devices sometimes lag behind.

## Workaround with ffmpeg

You can use ffmpeg to crop and resize videos. I usually do it in 2 steps, because these command line tools can get really convoluted if you try to do it all in one go. Here's what you have to do for the iPhoneX example above:

```
ffmpeg -i iPhoneX-iMovie.mp4 -filter:v "crop=616:1334:68:0" -c:a copy cropped.mp4
ffmpeg -i cropped.mp4 -vf scale=886:1920 -c:a copy iPhoneX-final.mp4
```

Done. Now your iPhoneX video is ready for the App Store.
Tools that I've used for Web Design & Development so far
Published: 2020-02-25 14:33:14

---
title: Tools that I've used for Web Design & Development so far
published: true
description: 
tags: 
---

This is a list of my most used tool/software/websites for Web Design & Development.

## Pen & Paper

Nothing can beat a blank sheet of paper & pen, whatever it might be - design, coding, planning & everything in between.
It is exactly because the page is blank that you can fill it with anything that you want, so next time when you stress over a software/website to choose for a task(like to-do list), ask yourself if you really need it and try using a blank paper/book instead.

## Windows 10

I use Windows 10 and not Linux although I do agree that Linux feels better for most web design/development needs. I use [WSL](https://docs.microsoft.com/en-us/windows/wsl/about), which is quite slower than actually running tools on Linux but it gets the job done and also with upcoming [WSL 2](https://devblogs.microsoft.com/commandline/announcing-wsl-2/) we can expect increased performance.

### [Ubuntu WSL](https://www.microsoft.com/en-in/p/ubuntu/9nblggh4msv6?activetab=pivot:overviewtab)

There are several distros available as wsl, I use this one

### [Windows Terminal](https://www.microsoft.com/en-in/p/windows-terminal-preview/9n0dx20hk701#activetab=pivot:overviewtab)

Nothing to say, terminal for using wsl over pre-installed command prompt.

###  [VS Code](https://code.visualstudio.com/)

You probably use the same.

### Web Browsers

I use Chrome most of the time and occasionally new Edge and Firefox

### Photo editing

[GIMP](https://www.gimp.org/) and [Inkscape](https://inkscape.org/) to rarely edit photos for web.

### Taking Notes

Currently I use [Dropbox Paper](https://paper.dropbox.com/) and thinking of moving to [Onenote](https://www.onenote.com/) as note organization in it feels like a book.

### Noise cancellation

[Spotify](https://open.spotify.com/) - beware though as songs themselves might distract from the task at hand.
[My Noise](https://mynoise.net/) - Amazing website for noise cancellation.

Here's my spotify [Music](https://open.spotify.com/playlist/0xS39eBB3Im9fFFUB3QNzc?si=c9Tpt3x7SiuyBcjXCg51cw) playlist.

### Picking Color/Theme for design

[Coolors](https://coolors.co/) that I recently used while designing my first [portfolio webpage](https://darshanjayadev.netlify.com/).

[Adobe Color](https://color.adobe.com/create/color-wheel/) that I have been using for quite some time.

### Other

A lot of Google/Stack overflow/[MDN](https://developer.mozilla.org/en-US/)/Youtube searches and blog/article reading complete my toolset.
How to sort an Array based on a property of an element in Swift
Tags: swift, ios
Published: 2020-02-25 14:33:11

The easiest way to sort an Array in Swift is to use the `sort` method. This method is available for all Arrays that have `Equatable` elements and it sorts your array in place:

```swift
var words = ["hello", "world", "this", "is", "a", "list", "of", "strings"]
words.sort() // words is now ["a", "hello", "is", "list", "of", "strings", "this", "world"]
```

This modifies the input Array and sorts its elements using `String` conformance to `Equatable`.

But what if you want to sort the Array based on the length of each string? Or what if you want to sort an Array whose elements aren't `Equatable`? Or maybe you have a list of objects that have an `id` property and you want to sort by `id`, or maybe you want to sort blog posts by date?

You can achieve this using Array's `sort(by:)`:

```swift
var words = ["hello", "world", "this", "is", "a", "list", "of", "strings"]
words.sort(by: { lhs, rhs in
  return lhs.count < rhs.count
}) // words is ["a", "is", "of", "this", "list", "hello", "world", "strings"]
```

You can use any kind of comparison logic in the closure that you pass to `sort(by:)`. In this example, I used `count` which is a property of `String` to sort my Array by string length.

Note that `sort()` and `sort(by:)` both modify the source Array in-place. If you don't want to modify the source and create a new Array instead, you can use `sorted()` or `sorted(by:)`.

```swift
let words = ["hello", "world", "this", "is", "a", "list", "of", "strings"]
let sorted = words.sorted(by: { lhs, rhs in
  return lhs.count < rhs.count
}) // sorted is ["a", "is", "of", "this", "list", "hello", "world", "strings"]
```

If you have any questions about this tip, or if you have feedback for me, don't hesitate to send me a [Tweet](https://twitter.com/donnywals)!