teleren/devto huggingface dataset:
Configuring Selenium in Codeception on OSX
Tags: tdd, seleniumosx, codeception
Published: 2019-02-23 21:57:27

---
title: Configuring Selenium in Codeception on OSX
published: true
description: How to convert from the built in browser to selenium.
tags: tdd, selenium. osx, codeception
---

## Installing Selenium

This turns out to be a really simple task using brew.

        brew install selenium-server-standalone

## Installing Chromedriver

        brew tap homebrew/cask
        brew cask install chromedriver

## Configuring Codeception

Tho old acceptance.suite.yml:

        actor: AcceptanceTester
        modules:
            enabled:
                - PhpBrowser:
                url: http://devsite.local
                - \Helper\Acceptance

Updated to use selenium:

        actor: AcceptanceTester
        modules:
            enabled:
                - WebDriver:
                    url: http://devsite.local
                    browser: chrome
                - \Helper\Acceptance
## Running Tests

First, fire up selenium:

        selenium-server -port 4444

Then run your tests (assuming composer install):

        vendor/bin/codecept run

At this point you should see the browser pop up and start responding to invisible fingers.
Zines as Open Educational Resources for Code Newbies
Tags: webdev, beginners, css, codenewbie
Published: 2019-02-23 21:12:31

Creating open educational resources (OER) is a great way to test or refresh your knowledge whilst helping others to learn.

At October's [MozFest](https://mozillafestival.org/), I was fortunate enough to stop by [Éléonore] (https://twitter.com/EleonoreMayola) and [Malwine's] (https://twitter.com/malweene) zine display. I'd missed their session, but the mini magazines they had inspired demonstrated how any subject, from complicated data science to city guides, could be broken down into bitesize indie publications. All you needed was a piece of paper, pen and a topic to share.

Fast forward a few months and after a couple of test runs, creating something related to coding seemed like a neat idea. Repurposing existing resources had worked well, and designing them digitally meant they could be quickly adapted or updated whilst also sharing them online.

Staying true to the 'zine ethos' meant avoiding heavyweight DTP tools, learning curves or the need for a degree in graphic design (although you can probably create some awesome zines if you did). Google Slides, PowerPoint or any other package that allows you to combine basic shapes, text and colour is all you need.

What's more, adding an open license to your work (e.g. [Creative Commons](https://creativecommons.org/share-your-work/)) gives others the opportunity to remix or develop your idea into something they can make their own. Especially if it's published in a format that's readily editable. Everybody wins!

From speaking with more experienced developers, it's easy to forget how hard it can be to learn so many new things all at the same time. But even as a beginner, I was still able to produce an introductory guide to CSS Grid that covers some of its basic principles. And that's the beauty of zines, they are for newbies and experts alike. 

Here's the end result:

![CSS Grid Zine layout in Google Slides](https://thepracticaldev.s3.amazonaws.com/i/yylisnz1u7999z0u0esl.png)

From there, the slides could be quickly pasted into a printable template (see below) and recorded as a gif or video (although watch out for accessibility issues). 

{% twitter 1099409959270391810%}

Think you can explain a coding topic as a zine? Then give it a try! 

Here are some resources you might find helpful:

* A [Google Slides zine template](https://docs.google.com/presentation/d/1dtOTSf3le10-647Oe7JT4F81m3w0bWcODpI-j_zuK_M/edit?usp=sharing) (_File_ → _Make a copy..._) 
* Royalty free images from [Unsplash](https://unsplash.com/) (be kind and credit your sources)
* Royalty free icons from [Noun Project](https://thenounproject.com/) (ditto)
* An open license, available from [creativecommons.org](https://creativecommons.org/share-your-work/)

You'll also need: 

* A printer
* A pair of scissors

And if this zine has whet your appetite for more CSS Grid, I highly recommend you check out Wes Bos' [free course](https://cssgrid.io/), Jen Simmons' [Layout Land] (https://youtube.com/layoutland) or Rachel Andrew's [Grid by Example](https://gridbyexample.com). 💯👌
Learning about Modules
Tags: modules
Published: 2019-02-23 20:32:08

---
title: Learning about Modules
published: True
description: Learning how to use modules
tags: modules 
---


Modules are reusable pieces of code that can be exported from one program and imported for use in another.
	They’re useful because it makes it easier to fix, reuse, protect code. It also helps prevent of the global namespace
	We define a module in a file with module.exports equal to the object being imported.
-example
 
	Const self = aggregates.all();
	Module.exports = self;

Or
	Const plane = {}
	Plane.parts = 4
	 
	Module.exports = plane;

To make use of the exported module and behavior defined within it you can import the module with the require function.

-example 

	const christianity  = require(‘self’);
	
	Const airPort = require(‘plane’);


You can also wrap any collection of data and functions into a object and export that having it equal to module.exports.

-example

	Module.exports = {
	post-modernity:()
 => return skepticism,
romanticism: () => return ‘Hey Emerson,
}

You could do same with export default
GitLab Corners
Tags: gitlab, corners, github, opensource
Published: 2019-02-23 19:46:51

---
title: GitLab Corners
published: true
description: Fork me on GitLab
tags: gitlab,corners,github,opensource
---

Way back in 2015 Tim Holman made [GitHub Corners](http://tholman.com/github-corners/), which are now everywhere across the open-source community. They're an undeniable improvement over the prehistoric [ribbons](https://github.blog/2008-12-19-github-ribbons/) (from 2008!) and are a beacon for collaboration. But now I use GitLab!

So here's a "thank you" to GitLab for being great, which I'll be using from now on. If you haven't tried it out, I definitely recommend [giving it a go](https://about.gitlab.com/). And go follow <a href="https://twitter.com/twholman">@twholman</a> on twitter, he makes some great stuff.

Head over to [bryce.io/gitlab-corners](https://bryce.io/gitlab-corners/) to see what they look like on a real page, or try them out below!

{% codesandbox mj1mzlok48 %} 

Any suggestions/contributions are welcome over on [GitLab](https://gitlab.com/brycedorn/gitlab-corners)!
let’s be social!
Tags: discuss, friends, showdev
Published: 2019-02-23 16:26:55

---
title:  let’s be social!
published: true
description: what other ways do you stay social online
tags: discuss, friends, showdev
---

I’m all about building communities and friends online. I haven’t always been but this year is a big year for that. 

The funny thing about “social” platforms is not many people actually want to be social. They want people to like their stuff but they don’t actually want to build real connections and friends. Well I do! 

I’d love to see what my followers use to be social online. Post them in the comments and I’ll check them out and follow/like. Have a project you want feed back on or a website to be viewed? Post that in the comments. 

The easiest way to gain followers is the help each other out! 


Please feel free to add me as well.

Instagram: codefiend
Twitter: codefiendio
Website: gidgitz.com

Check out my stuff and add/follow or leave feed back! And don’t forget to post what you want me to checkout.
The Google "Crash Course on Machine Learning" and why YOU should do it
Tags: machinelearning, python
Published: 2019-02-23 16:02:09

---
title: The Google "Crash Course on Machine Learning" and why YOU should do it
published: true
description: The Google "Crash Course on Machine Learning" covers more than just difficult maths and stats
tags: Machine_Learning,python
--- 

["While there have been advances in artificial intelligence (AI) this year, it's poised to skyrocket in 2019.."][1] So a dozen articles a week begin.  But what does this mean to me?

I basically understand that "General AI" or computers that can comprehend a wide range of topics and interests, just like people do, is [still a long way off][2]

However, Machine Learning is here right now.  Teaching a model with real-world data and then predicting events using statistics is viable.

I don't pretend to understand the ins and outs of the complex mathematics that underpin machine learning.  However, is there something in it for an average guy with a bit of experience in managing systems and software development?

I decided to do a course to see!

The course I picked was the Google ["Crash Course in Machine Learning"][3]

I'd already tried a few things with Tensorflow and this course used Tensorflow as it's a basic framework

The course covers the high-level theories that are used to build models, gather data and refine the predictions.  There are about 20 hours of videos and practical exercises using a Jupiter-notebook alike Machine Learning playpen

To me the best realisation was in one of the later sections, summarised in this diagram

<img src=https://thepracticaldev.s3.amazonaws.com/i/lc24mxs03tc6f6xj6lkj.png />

The tiny blue section is the super clever stuff with lots of complex maths

The rest of the sections are, basically, tradition data handling practices.  If you have experience with moving data about, cleaning it and other usual validation processes then *most* of the mysterious world of Machine Learning is something you already know!

So it's well worth doing this course to see how your existing skills and experience fit in with the up and coming Machine Learning scene


[1]:https://www.inc.com/entrepreneurs-organization/4-ways-artificial-intelligence-will-impact-your-business-in-2019.html
[2]:https://hackernoon.com/frontier-ai-how-far-are-we-from-artificial-general-intelligence-really-5b13b1ebcd4e
[3]:https://developers.google.com/machine-learning/crash-course/
[4]:https://imgur.com/a/5Vf9Gkg
Regexits- Common regex at your fingertips
Tags: showdev, node, npmpackage
Published: 2019-02-23 14:23:25

---
title: Regexits- Common regex at your fingertips
published: true
description: Regexits is a lightweight npm package with zero dependencies that takes care of commonly used regex without remembering the patterns.
tags: showdev, node , npm package
---


## What is Regexits?

Regexits is a lightweight npm package that handles a collection of commonly used regex patterns. 

## Why would you need it?

I suppose the answer is, you hate googling regex when you need to verify a SSN, PhoneNumber, or even URLSlug.


## How to use it

Well the good news is, that part is simple.

    npm i regexits

Then in your code

    const regexits= require('regexits')

    regexits(string, pattern)

## What options do you currently have?

* Date With Slashes
* Time in 24hr
* ISO8601 Date and time
* HTML tag
* HEX Color
* URLSlug
* Src Img Tag
* URL
* Positive Int
* Negative Int
* Integer
* Positive Num
* Negitive Num
* Number
* Phone Number
* New Line
* CSS Comment
* USA & Canada Zip
* SSN


## A Quick example

    const regexits = require('regexits')

    let isSSN = regexits('012-34-5678', 'SSN')

    return isSSN;

    #This Returns true

So overall its a pretty flexible tool that covers a collection of Regex that is commonly used over and over again. I will continuously updating the npm package along with my other open source tools.

Want a new pattern added just go ahead and add an issue via [github](https://github.com/perkinsjr/regexits/issues) and I will add it and republish the npm package. 

Want to keep up to date with the npm package? check it out over at [npm](https://www.npmjs.com/package/regexits)
React Native Animated Inputs
Tags: reactnative, animations
Published: 2019-02-23 12:43:47

---
title: React Native Animated Inputs
published: true
description: Simple animated inputs breakdown
tags: React Native, Animations
---

This is a very straight forward exploration of how I did animated inputs in my react native form. The demo is given below:

![Demo](https://cdn-images-1.medium.com/max/800/1*H9SP1cPsRbf1V5iVEikh6w.gif)

So I have basically three text inputs which I need to animate one after another. I used react native animated modules to do this kind of animation.

In animated modules there is a method called **stagger** which helps to animate components one after another with **successive delays**. I just needed to pass my array inputs to this method to implement this animation. The whole code is given below:

{% gist https://gist.github.com/Saad-Bashar/dab2c442c6baf38c72e4d054129ac931 %}
How do you create static-sites for your dynamic JS projects?
Tags: discuss, react, javascript
Published: 2019-02-23 12:28:02

---
title: How do you create static-sites for your dynamic JS projects?
published: true
tags: discuss, react, JS
---

So I've got a preact SPA app and I want to create static-sites for some content (The content only updates a few times a year and new content is only added once a week)

Currently, I am using `prerenderer-webpack-plugin` to prerender all of the routes I require on a build and then using webhooks with Netlify to build on changes.

I'd love to know how other people are approaching this?
How to Debug Javascript Code
Published: 2019-02-23 12:10:59

---
title: How to Debug Javascript Code
published: true
description: Javascript code Debugging tips 
tags: 
---
__Javascript code Debugging tips.__ 

 

__Method 1__: Stop execution control by putting the break point

use the "debugger" statement to create breakpoint and use F12 key to open console window on chrome browser;

example 

function addIt(x,y){
    debugger;
    return x + y;
}

__Method 2__: Open console window of chrome browser (you can use shortcut key F12)

Click on source tab then Press Ctrl + P shortcut Key 
type the script file name which you want to debug.
After opening a file you can put the breakpoint, it will be there until you removed it or disable it for your next run also.  

__Method 3__: Modify the javascript code while debugging. just put breakpoint once execution control reaches on your breakpoint edit the code and press ctrl+s.
You will find that execution start again of that block once you saved it by ctrl+S.

__Method 4__: use console.log statement to check the variable value and debugging purpose. 
console.log("********var1 = ",var1,"var2",var2);

__Method 5__: use console.time() and console.timeEnd() to get the execution time of a block of script.

//Example
 function myFun(){
    console.time();
    
    //your function code here...
    //...........

    console.timeEnd();
}
you can also give a label to time function if you are using multipal console.time()


//Example
 function myFun(){
    console.time('myFunLbl1');
    
    //your function code here...
    //...........

    //after some line you use
     console.time('myFunLbl2');
    //.........
     console.time('myFunLbl2');
    //.......
    console.timeEnd('myFunLbl1');

}
👩‍💻 Offline Codepen and JSFiddle
Tags: githunt, css, javascript, productivity
Published: 2019-02-23 11:00:34

---
title: 👩‍💻 Offline Codepen and JSFiddle
published: true
description: 
tags: githunt, css, javascript, productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sca6ni045xlhcbw88npc.png
---

Check this out. Web-Maker is an offline playground for testing and seeing the output of HTML, CSS and JavaScript code snippets. This is much faster compared to Codepen because it runs completely offline on your system.

{% github https://github.com/chinchang/web-maker %}
How to distinguish admin users from normal users?
Tags: discuss
Published: 2019-02-23 10:29:43

---
title: How to distinguish admin users from normal users?
published: true
description: 
tags: discuss
---

Almost every platform that has been created they have the need of users with more than one "type".

1. One which are actual users with normal privileges. The USERS.
2. And the ones who have special privileges. The ADMINS.

Admin users have special privileges that *only* they should have and not anyone else. Otherwise, if one user can manipulate data of another without there consent then the platform is a mess.

I found it always challenging to design a single database with solves the need of both users.

* Should I have a `type` of the user stored in my database?
* Should the first user who has registered on the platform would be the "admin user"?

I want to come to a collaborative conclusion about what is a better approach and why?
A Beginner Programmer's Approach to Problem-Solving
Tags: beginners, codenewbie, learning, problemsolving
Published: 2019-02-21 19:07:20

---
title: A Beginner Programmer's Approach to Problem-Solving
published: true
description: 
tags: beginner, codenewbie, learning, problem-solving
---

I wanted to share some advice my far-more-experienced computer science friend had to offer me in regards to approaching problem-solving programmatically. Hopefully you find it just as helpful as I did!

As a beginner developer faced with introductory problems that need to be solved, you may find yourself thinking immediately how you could implement your code to come up with a solution. For example, in the preparation modules for my upcoming Bootcamp, I needed to solve the classic "fizzbuzz" problem. If you don't know about it, you can find an example of it [here](https://www.hackerrank.com/challenges/fizzbuzz/problem).

Your initial reaction might be to think about how you could implement a function that meets all of the requirements. Do I use what I've learned about loops? I know there are scenarios here...how do I implement the conditionals into my code?

While these are valid questions you may ask yourself, here is the important takeaway: **take some time to think about the problem without coding in mind**. Reflect on the broader implications of the problem instead of diving right into coding away a solution. Think of it as developing a plan before you take action. Doing so will help you establish a framework for attacking the problem. In the case of the "fizzbuzz" problem, you might think this is a little overkill (I did, anyways). But I know that my friend has employed this method in stressful algorithm interview questions to great success.

I know this may be common knowledge for many of you, but I found this advice to be very valuable as a beginner developer. Hopefully, you do too.
Your Thoughts About Types
Tags: programming, discuss, javascript, typescript
Published: 2019-02-23 09:57:51

---
title: Your Thoughts About Types
published: true
description: A series of discussions about trending JS patterns. This week's topic was Types.
tags: programming, discuss, javascript, typescript
series: What Do You Think?
---

This week 7 devs made 11 comments about types. Big thanks to all of you!

{% link https://dev.to/solkimicreb/what-do-you-think-about-types-eh7 %}

---

### My Impression

Most commenters favored statically typed languages with type inference which is not a huge surprise.

They argued that types help in auto-completion, documenting interfaces, and catching errors at compile-time. I have to agree about auto-completion but I think interfaces can be documented with decent naming too. I - and some other devs - also boasted that we never ran into type related errors in JS until someone threw in the good old "Undefined is not a function".

Most contra-side commenters mentioned the extra code as the biggest disadvantage of types. They also mentioned reduced flexibility, although I didn't really get answers for my question about cases where changing the type of something helped. I feel like most people think of the weakly typed nature of JS as a time saver, rather than a feature.

Ultimately you managed to make me curious about types. I tried to avoid them because of the extra bloat but maybe I played with the wrong code bases and became biased. I got tired of reading and writing obvious types but I am now excited to try how well a modern type system with inference can help me. A comment about [pattern matching in ReasonML](https://reasonml.github.io/docs/en/pattern-matching) piqued my interest the most. I think I will start there.

Thanks for reading!

---

Next week's topic will be the *Virtual DOM*. See you on Monday!
JavaScript Higher Order Example
Tags: javascript, higherorderfunction
Published: 2019-02-23 09:18:18

---
title: JavaScript Higher Order Example
published: true
description: Rewriting JavaScript higher-order function to learn and understand
tags: JavaScript, higher-order function
---


This is an excerpt from [Learning React](http://shop.oreilly.com/product/0636920049579.do)

```javascript

var createScream = function(logger) {
	return function(message) {
	    logger(message.toUpperCase() + "!!!")
	}
}
const scream = createScream(message => console.log(message))

scream('functions can be returned from other functions')
scream('createScream returns a function')
scream('scream invokes that returned function')

```

It is a daunting task to really understand what is happening here. One of the immediate question is, how does the string in `scream()` can be passed all the way to `logger` then `toUpperCase()` then `console.log()`?

It is much clearer to understand using ES6 fat arrows

```javascript

const createScream = (logger) => (message) => {logger(message.toUpperCase() + "!!!")}
const scream = createScream(message => console.log(message))
scream('functions can be returned from other functions')
scream('createScream returns a function')
scream('scream invokes that returned function')

```

If you don't understand it by now, don't worry. I will to break it down for you.

Here's another way of writing the code above, but skipping the higher order function, instead we hard-code the `console.log()` functionality.

```javascript

const scream2 = (message) => {console.log(message.toUpperCase() + "!!!")}

scream2('the string is passed to message')

```

The string `'the string is passed to message'` will go the `scream2()` parameter, then changed to uppercase and concatenated with exclaimation marks. This will happen first since they are in a bracket. Then the answer is `console.log()` out. 

Another way of looking at it is by separating the functions.

```javascript

function scream3(message) {
  return message.toUpperCase() + "!!!"
}

function logger(message){
	return console.log(message)
}

logger(scream3("this is another test"))

```
What would your ideal developer interview process look like?
Tags: discuss, interview
Published: 2019-02-23 07:47:06

---
title: What would your ideal developer interview process look like?
published: true
description: What would you ask? What would you test?
tags: discuss, interview
---

Some job interviews have coding tests in the interview. Some have "take home" tests. Some have several rounds of interviews. Some just have one.

If you were the one designing the developer hiring/interview process, what would it look like and why?

- Would you do multiple rounds of interviews?
- Would you have a coding test in the interview? What would that look like?
- What are some of the maybe less obvious questions you might ask?
- Would it be a short interview (< 30 minutes) or a longer and more thorough interview?
- Would you meet & greet with the team / show them around the office?

The idea with this is to take your experience as a developer and think about what you would want to know from a candidate and factoring what you did/didn't like through your own job interviews.

I've been interviewed a few times and conducted interviews a few times (I'll put my full thoughts as a comment below) and found that my own experiences changed what/how the interviews I ran went. I'm curious what other people would do it if they had the same opportunity.