teleren/devto huggingface dataset:
How to set up debugging with PhpStorm and Homestead
Tags: homestead, phpstorm, tutorial
Published: 2019-06-24 07:45:24

---
title: How to set up debugging with PhpStorm and Homestead
published: true
tags: Homestead,PHPStorm,Tutorial
canonical_url: https://42coders.com/how-to-set-up-debugging-with-phpstorm-and-homestead/
---

Many php developers rely on var\_dump (or it’s reincarnations in frameworks: debug(), dump(), dd(), etc) when debugging their code, and in most cases this is just fine, but not always good enough. When trying to solve complex problems or fix a stubborn bug, the great debugging capability of PhpStorm comes handy. It is quicker and more efficient to debug the code than to put dumps here and there.

Let’s take a look what is necessary to set up the debugging:

- PhpStorm
- Homestead (or any other Vagrant VM)
- Xdebug extension

In the code examples please change paths according to your php version, I am using php 7.2.

## Set up Xdebug

If you don’t have xdebug installed please find installation instructions here: [https://xdebug.org/docs/install](https://xdebug.org/docs/install)  
Open the Xdebug configuration with your favorite editor, in the example I’ll use nano:

```
sudo nano /etc/php/7.2/fpm/conf.d/20-xdebug.ini
```

Add/change the following settings in the xdebug configuration

```
zend_extension=xdebug.so
xdebug.remote_enable = 1
xdebug.remote_connect_back = 1
xdebug.remote_port = 9000
xdebug.max_nesting_level = 512
```

Save the file, and restart php fpm:

```
sudo service php7.2-fpm restart
```

If everything has been set up correctly, you should see the Xdebug extension installed and enabled in the output of the phpinfo():

![](https://42coders.com/wp-content/uploads/2019/05/pasted-image-0-1024x448.png)

## Set up PhpStorm

In the menu choose Run/Edit Configurations, and add new PHP Web Page configuration:

![](https://42coders.com/wp-content/uploads/2019/05/unnamed-5-1024x647.png)

Add a name to the configuration, and fill in the Start url and choose the browser and server from the dropdown options:

![](https://42coders.com/wp-content/uploads/2019/05/unnamed-4-1024x649.png)

If the server dropdown is empty you’d need to add a new server. The if you are using the default Vagrant configuration the ip address of the server is: 192.168.10.10. Check the Use path mapping checkbox, and set up the Absolute path of the project in the Homestead, the default location in homestead is /home/vagrant/code/project (I am using www instead of code)

![](https://42coders.com/wp-content/uploads/2019/05/unnamed-2.png)

That’s it! Clicking on the debug icon on the top right corner, the browser will open the project’s url and the debug session will start. You can put breakpoints by clicking on the left hand side of the code beside the line numbers:

![](https://42coders.com/wp-content/uploads/2019/05/unnamed-3-1024x168.png)

Happy debugging!

The post [How to set up debugging with PhpStorm and Homestead](https://42coders.com/how-to-set-up-debugging-with-phpstorm-and-homestead/) appeared first on [42 Coders](https://42coders.com).
Dev Theme Update
Tags: theme, ui, design
Published: 2019-05-24 21:33:06

---
title: Dev Theme Update
published: true
description: An interesting addition to the Dev.to theme options.
tags: #theme, #ui, #design
---

I audibly said "if there isn't comic sans..." and sure enough:

![](https://thepracticaldev.s3.amazonaws.com/i/h2ds039d719nh32xy9vh.PNG)
Brilliant.
An Alternative Ternary
Tags: javascript, syntax, patterns
Published: 2019-05-24 21:10:20

---
title: An Alternative Ternary
published: true
description: 
tags: javascript, syntax, patterns
---

Like many languages, JavaScript has the conditional (ternary) operator. What's wonderful about this operator is that it can be nested in expressions and it returns a value. This is a good thing for functional programming and composability. 

However, sometimes you don't need the second "falsey" part of the condition, so you end up with a placeholder for the false condition. This is reflected in React/JSX quite often:

```jsx
return (<div>
  {confirm ? (
    <p>Your action has been done</p>
  ) : (
    ''
  )}
</div>)
```

It's like forcing the programmer to use `else` for every time he or she uses `if`.

# The Alternative

The alternative to the ternary operation is to use the `&&` (AND) operation.

```jsx
return (<div>
  {confirm && (
    <p>Your action has been done</p>
  )}
</div>)
```

Because the AND operator will short-circuit if the left-operand is falsey, it acts identically to the first part of the ternary operator.

What's even more interesting is that we can combine the AND operator with `||` (OR) to get the same effect as the ternary operator:

```jsx
return (<div>
  {confirm && (
    <p>Your action has been done</p>
  ) || (
    ''
  )}
</div>)
```

This means that we can easily extend a statement with one conditional concern to two concerns.

We don't stop there. We can embed these AND/OR statements just like we could with ternary.

```jsx
return (<div>
  {isHappy && (
    <p>I'm feeling good</p>
  ) || (
    isHungry && (
      <p>I'm feeling hangry</p>
    ) || (
      <p>I'm feeling sad</p>
    )
  )}
</div>)
```

As you can see, `&&` and `||` map to `if` and `else` pretty respectively. Wonderful!

# Gotchas

A couple of things to note if you decide to use this pattern.

1. Parentheses are important. The rule is to always wrap your outcome expression: `condition && (outcome) || (outcome)`. Doing so will allow you to nest more conditional expression within the outcome expressions clearly. Note, it is not necessary if you do not intend to nest more conditional expressions.
2. What the expression evaluates to may not be expected. For example: `var selectedItem = selectedItemId && items[selectedItemId]` In this case you might be tempted to think that `selectedItem === undefined` in the case that `selectedItemId` is falsey. Incorrect. Rather, `selectedItem === selectedItemId`. This is because an `&&` operation evaluates to the either the last truthy value or the first falsey value (such is the case in the example). Such incorrect expectations should be accompanied with a explicit outcome for a falsey value: `var selectedItem = selectedItemId && items[selectedItemId] || undefined`

# Naming the Pattern

This pattern needs a good name to go by so teams can decide whether to adopt this pattern. Let's go with:

>Short-Circuit Conditionals (SCC)
What’s your Computer Environment?
Tags: discuss, question, career, computerscience
Published: 2019-05-24 20:21:48

I have worked on both OSX and Windows, and enjoy both environments. I currently use OSX on a 2018 MacBook Pro as my daily computer, but have a custom built Windows 10 desktop as well. I have also duel booted my MacBook Pro with windows 10. 
I spend most of my time in OSX though as I like the unix-like environment more then windows. But both have there uses.
Please share you basic computer environments below, others will certainly be interested in your experiences.
CascadiaJS 2019 CFP is Open!
Tags: cascadiajs, javascript, node, conference
Published: 2019-05-24 20:17:41

---
title: CascadiaJS 2019 CFP is Open!
published: true
description: We've shipped the CFP to our website, check it out!
tags: cascadiajs, javascript, nodejs, conference
cover_image: https://pbs.twimg.com/media/CpdnX_lUEAAAQJ3.jpg:large
---

[CascadiaJS](https://2019.cascadiajs.com) is a single track conference featuring 24 amazing speakers discussing the cutting-edge of JavaScript, web development and engineering culture over the course of 2 days. We work hard to provide a safe and inclusive environment for everyone and require all organizers, sponsors, speakers, volunteers, and attendees of all levels to adhere to our Code of Conduct.

I'm excited to announce that we've shipped our Call for Presenters! Highlights include:

👩‍💻 Open to everyone (new & experienced speakers)
⏳ 25 minute talks
🛩 We cover all travel expenses
📆 CFP closes on 6/30/2019

Please check out the link below for more information and please help us spread the word! 

[2019.cascadiajs.com/cfp](https://2019.cascadiajs.com/cfp)
Material Kit React - From Zero to Full-Stack
Tags: react, materialkit, appseed
Published: 2019-05-24 19:47:07

---
title: Material Kit React - From Zero to Full-Stack
published: true
description: Build a Full-Stack application, coded in React and Express on top of an amazing design
tags: react, material-kit, appseed
---

Hello Coders, 

This [article](https://blog.appseed.us/material-kit-react-from-zero-to-full-stack/) explains, step by step, how to build a Full-Stack application, coded in React and Express on top of an amazing design. Check out [here](https://react-express-material-kit.appseed.us/) the live demo.

![Material Kit React - Full-Stack App, Main Screen.](https://static.appseed.us/apps/material-kit-react/material-kit-design-thumbnail.jpg)



Thank you!
Slack is Killing Remote Screen Control
Tags: news, slack
Published: 2019-05-24 19:38:01

After acquiring ScreenHero, Slack is officially abandoning the idea of sharing screen control between users. A lot of devs rely on this kind of functionality for remote pairing.

👉 [Official Announcement](https://get.slack.help/hc/en-us/articles/360022908874)

This kind of sucks because ScreenHero died in order to join Slack in the first place, so now we're left without anything.

To their credit, Slack suggested alternatives in their post.

Another alternative is [Tuple](https://tuple.app/), which is currently invite-only but is built by people a good rep in the software ecosystem. It's worth checking out if you were relying on Slack.

## For discussion:

What are your thoughts on the whole situation?

Any other good alternatives you know of?
What means the unicorn response?
Tags: devto
Published: 2019-05-24 19:12:58

---
title: What means the unicorn response?
published: true
description: Question about article responses
tags: dev.to
---
Hi developers,
just now i have a little question. After we written an article, readers can response in three ways:

* heart
* unicorn
* reading list

The first and the last i can imagine, what it means. But what says the unicorn?
Meeting-o-meter
Tags: c, meetingcosts
Published: 2019-05-24 18:34:45

---
title: Meeting-o-meter
published: true
description: A simple standalone tool to measure the costs of a meeting.
tags: C#, meeting costs
cover_image: https://github.com/erikvullings/meeting-o-meter/blob/master/img/meeting-o-meter-1280x640.png?raw=true
---

Did you ever attend a meeting that went on and on. And everybody had to say something to make it last even longer. Well, if this a recurring event in your life, maybe the [meeting-o-meter](https://github.com/erikvullings/meeting-o-meter) offers a solution for you. By specifying the number of people, and their hourly rate, you can measure the cost of each second that is (potentially) wasted. At the least, it gives everyone an insight in the costs of attending such a meeting. Its open source, so please, give it a spin and fork it to improve it.

## How to use it

- Switch to the settings (top right menu) to change the hourly rates.
- Add the bottom of the screen, specify the number of people
- Press start to start measuring the costs

## Building

Originally developed in Visual Studio 2012, it still works in VS2015. But as it was originally developed in 2013, I have included the libraries that I've used too, as you may not able to find them again.

## About

This is an old project that I developed in 2013, and it recently came up in a conversation. So I looked up the code and am sharing it here. If you want to continue my work, please fork the project, as I am currently using TypeScript for most of my projects, so I can share them on the web. For example, you could:

- Port it to a web environment (I recommend using the [mithril](http://mithril.js.org) framework).
- Add a page to show an agenda
- Add a page to enter the results (so you can do a cost/benefit analysis
- Send/save the results
Learn Gitlab's CI/CD Service - Course for Developers
Tags: showdev, beginners, devops
Published: 2019-05-24 18:19:45

---
title: Learn Gitlab's CI/CD Service - Course for Developers
published: true
description: In this 5 part video course, Owen Conti will walk you through Gitlab's CI/CD (Continuous Integration and Delivery/Deployment) service.
tags: showdev,beginners,devops
---


Not many people know how feature packed Gitlab is. Which is why I'm launching a new course this summer on Gitlab's CI/CD service!

This course will help you get started with Continuous Integration, Delivery, and Deployment all on Gitlab's **free** plan.

**Topics I'll be covering:**

* Overview of Gitlab CI/CD
* Understanding Stages during a build
* Creating your first CI/CD script
* Publishing and downloading Artifacts
* Deploying your application with Gitlab
* **BONUS:** Hosting your own Docker image on Gitlab's Registry service

Sign up for the email list: [https://gitlab.courses.owenconti.com](https://gitlab.courses.owenconti.com).

I'll also be previewing various lessons of the course on my YouTube channel: [https://youtube.com/owenconti](https://youtube.com/owenconti).

If you have ideas on anything else you'd like to see me cover, please let a comment down below!
The Serverlist-- A Serverless Newsletter
Tags: serverless
Published: 2019-05-24 18:18:27

# The Serverlist

This newsletter has been around for a few months already, and covers news from all over the Serverless Ecosystem. The June issue just came out; it includes info on WebAssembly, an Azure functions tutorial, and info about upcoming Serverless events. 

Read more and subscribe here: https://blog.cloudflare.com/the-serverlist-newsletter-5/
PHP for Beginners         (An Introduction)
Tags: phpbackend
Published: 2019-05-24 17:59:07

##Overview
PHP (acronym for Hypertext preprocessor) is probably the most popular scripting language of the web. It is used to enhance web pages.
##Web Architecture

![](https://thepracticaldev.s3.amazonaws.com/i/4mhnsg0dpid57yka1tnn.jpg)
1. The user access the website through the browser.
2. The page is requested by the browser from the web server.
3. Web server will collect the requested page( html,images and all etc.) from its document root.
4. If it is a static element e.g html, css or JavaScript the response is returned directly to the browser and the browser renders it to User screen.
5. Else if it is a PHP file the web server sends it content to the PHP interpreter which interpret and executes the code in the file. It also performs Database operation if required.
6. PHP interpreter then generates output( if required) and sends it to the web server.
7. Web server then sends the same to the browser which renders it to the User screen.

##Origin of PHP
It was created in 1944 by Rasmus Lerdorf for the purpose of tracking visits to his online resume, the collection of which he named Personal Home Page Tools.Its first incarnation was written in C programming language
Over time more functionality was required which brought us to this present stage.

## Why Use PHP
Open Source
Free Download and Usage
Wider Community of users
Efficient running on the server
##PHP Strengths
Compared to Its contemporaries, PHP is easier to learn, more popular and has a wider audience than others.

##PHP Contemporaries
PHP is not the only scripting language that accesses database or the web server others include Perl, Java Server Page and Microsoft Asp.net to mention a few each of which has its own strength and weaknesses.
##Availability
PHP is available on multiple platforms e.g Windows, Linux, Unix, Mac OS etc.
It is also compatible with almost all web server in use today e.g Apache and IIS.
##Installing PHP as a module for Apache
There are quite a few of softwares that come with PHP packages e.g Xampp Server and Wamp . It is advisable to check them all out to see what each has to offer before making your choice.
GitKraken, what is it? and common actions?
Tags: git, gui, versioncontrol, gitkraken
Published: 2019-05-24 17:41:29

---
title: GitKraken, what is it? and common actions?
published: true
description: 
tags: Git, GUI, Version Control, GitKraken
---

# GIT
Git is a free and open source distributed version control system for software development and several other version control tasks. It enables everything from small to very large projects with speed, efficiency data integrity.

You can primarily use/manage Git on the command line,  however, there are several graphical user interfaces (GUI) Git clients, which one of them is GitKraken. 

***

![](https://thepracticaldev.s3.amazonaws.com/i/aauubty62hae5xsa9and.png)

What is it?

it is a GUI Git client that facilitates efficient and reliable usage of Git on a desktop and offer most of the command line operations.



Visit Homepage: https://www.gitkraken.com/

Gitkraken helps a Git client's efficiency through these features:

* Built-in merge tool
* Integrates with a user’s GitHub or Bitbucket account, GitLab
* Supports single-click undo and redo functions
* Easily adapts to a user’s workspace and also supports submodules and Gitflow
* Keyboard shortcuts
* Git Hooks Support
* Interactive Rebase
* Gitflow Support
* Commit signing, etc

common actions?

* Undo
* Redo
* Pull
* Push
* Branch
* Stash
* Pop Stash, etc

NB: These are on the toolbars and just single click.

Are you still thinking on the best GUI Git Client that will help you from cloning your repository to successfully executing Git actions? 
 I'd recommend *GitKraken* 100%.
Best DEV.to Posts for Beginners: Week of May 19, 2019
Tags: codenewbie, beginners, tutorial, bestofdev
Published: 2019-05-24 17:01:42

---
title: Best DEV.to Posts for Beginners: Week of May 19, 2019
published: true
description: These are some of the best beginner posts of the week!
tags: #codenewbie, #beginner, #tutorial, #bestofdev
series: Best DEV.to Posts for Beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/x9acs27zebb19v5rf8ml.png
---

One of the reasons I've been so drawn to DEV.to over other platforms is the super encouraging and helpful community that gathers here. Initially I felt like it was going to be more a place where I sat back and watched, rather than write and contribute, but I've been so pleased to find not only helpful articles and tutorials that I understand, but also that input from new coders and devs is well-received.

I thought it would be nice to compile some of the best posts every week for those of us who still identify as #codenewbies!

{% link https://dev.to/mercier_remi/what-is-an-api-4ao9 %}

The first time I googled "what is an API?" all I got was the definition. If you're similarly struggling to understand what they are and how they work, check this out!

{% link https://dev.to/denmch/build-your-own-taco-25i6 %}

As I start to transition more into a UX and design path, I'm reading a lot about information architecture. This post helps easily illuminate the fundamentals of it, and is easy to read and understand. 

{% link https://dev.to/mattsparks/tips-for-landing-your-first-web-development-job-416o %}

One of the best parts of DEV.to is the depth of advice out there for landing your first development job. This post from Matt is another great one full of helpful tips.

{% link https://dev.to/levivm/coding-best-practices-chapter-one-functions-4n15 %}

With so many ways of learning how to code, it can sometimes be overwhelming to think about what the "right" way is. Learning best practices for code structure is important, and this series looks like it will be an awesome resource!

{% link https://dev.to/lkopacz/7-ways-to-make-your-tweets-more-accessible-4c67 %}

Lindsey is one of my favorite Twitter (and dev.to!) follows, and her posts about accessibility are super helpful. This includes seven super easy ways to ensure that your tweets are accessible for everyone, just like your products should be!

{% link https://dev.to/lberlin/a-github-guide-for-people-who-don-t-understand-github-n50 %}

Despite four years of using Github at work, I didn't really understand how it worked - and I learned pretty quickly in a "trial by fire" when @jess tweeted a few months ago that there were some typos on the community page. Always chasing another badge, I figured out how to edit the file and create a pull request - a simple guide like this would have helped a lot a few years ago!

##What posts stuck out for you this week?
Different use for CSS gradients
Tags: css, discuss, productivity
Published: 2019-05-24 16:59:43

Recently i was working on a small project of making a digital clock chrome extension. I wanted to keep the design as minimal as possible and also reduce the size of the extension. So instead of regular BORING backgrounds, i tried to use CSS gradients to see if i could come up with something.

Tried every possible way and the gradients were bad. So as a last resort i googled to see if i could have a multi-colored CSS gradient without actually having a transition from color to color. Then i stumbled upon this post:
https://blog.prototypr.io/css-only-multi-color-backgrounds-4d96a5569a20

The simple logic here is that we stop the first color at x% and start the second color at x% or <x%. This removes the gradient from the linear-gradient and defines a clear edge between both colors giving the background a multi-colored-material effect. You can check out more in the post.


You can check out the extension here: https://chrome.google.com/webstore/detail/simple-clock/fngkigemfllijjloedplghepagidclef

![](https://thepracticaldev.s3.amazonaws.com/i/9u5iqhia8r9l4by6nxfx.png) 

GitHub link to the project: https://github.com/Raja-Krishna/Simple-Clock
Building a Blazing Fast JAMstack App
Tags: webdev, javascript, frontenddev, softwaredevelopment
Published: 2019-07-29 20:39:41

---
title: Building a Blazing Fast JAMstack App
published: true
tags: web-development,javascript,front-end-developmen,software-development
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*8XmZG7BvPBLbfrSBBDvHDQ.jpeg)

I recently attended a meetup in Memphis hosted by Bryan Robinson. He is an accomplished web developer with a focus on [creating static sites](https://bryanlrobinson.com/blog/2019/04/26/client-work-and-the-jamstack/).

This got me excited to finally build my own static site using JAMstack architecture! So, I built this [blog template (live)](https://zealous-thompson-59a9ca.netlify.com/) using GatsbyJS and Netlify. Here is the [Github Repo](https://github.com/edezekiel/gatsby-netlify-blog).

### Lighthouse Audit

I am very pleased with how the site turned out. I used the Lighthouse tool to audit the gatsby site and my blog. Lighthouse is built into the chrome browser. It is a great automated tool for performing webpage audits.

Here are the results:

### Lighthouse scores for my React/Rails blog:

![](https://cdn-images-1.medium.com/max/640/1*jaM-rwhBSKDpfTu-FqxVHg.jpeg)

The scores are not terrible, but there is definitely room for improvement.

### Lighthouse scores for the JAMstack site:

![](https://cdn-images-1.medium.com/max/640/1*sPTYh9gXL2i5jvA3uR0wrw.jpeg)

The JAMstack site almost scores perfectly across the Lighthouse metrics. Navigating through the site reflects these scores: pages loading blazingly fast and it generally feels crisp.

### Resources

If you are interesting in exploring JAMstack further, here are some of resources I used while learning about this topic:

- [WTF is JAMstack?](https://jamstack.wtf/#getting-started) a straightforward primer on the JAMstack architecture.
- [Gatsby Tutorial](https://www.gatsbyjs.org/tutorial/): This will walk you through your first Gatsby app. There are plenty of “starters” on the site to help you get your first site up and running. I personally used the [gatsby default starter](https://github.com/gatsbyjs/gatsby-starter-default).
- [Netlify](https://www.netlify.com/)
- [Tania Rascia](https://www.taniarascia.com/migrating-from-wordpress-to-gatsby/): aka my web dev hero.