teleren/devto huggingface dataset:
Hands on with PHP7.4
Tags: php, docker, fpm, lemp
Published: 2019-11-30 07:44:03

---
title: Hands on with PHP7.4
published: true
description: PHP7.4 became production ready few days back. Let's give it a try with ease. 
tags: php, docker, fpm, lemp
---

As most of us already know, PHP7.4 became production ready few days back. It comes with some cool features like:
- Short Arrow Functions
- Spread Operator for Arrays
- Typed Properties
- Opcache Preloading

... and much more! We can't thank the team behind PHP enough!

If you are a PHP developer or PHP enthusiast you must be excited already to get hands on with PHP7.4.

If you want to give it a try with ease - the docker way, then I have created a docker image with not just PHP7.4 but tons of common and useful PHP extensions. Check it out.

TLDR: `docker pull adhocore/phpfpm:7.4`


{% github adhocore/docker-phpfpm %}


If you want a full docker based LEMP stack with PHP7.4, then I have got you covered as well.

TLDR: Run `docker run -p 8080:80 -v $(pwd):/var/www/html --name lemp -d adhocore/lemp:7.4` then visit [localhost:8080](http://localhost:8080). There you have dockerized LEMP stack with PHP7.4.

{% github adhocore/docker-lemp %}

Oh and both the images are built on top alpine base so should be slimmer.

#### Further reading

[PHP7.4 Changelog](https://www.php.net/ChangeLog-7.php)
[PHP7.4 Benchmark](https://community.centminmod.com/threads/php-benchmarks-7-4-vs-7-3-vs-7-2-vs-7-1-vs-7-0-php-fpm.18741/)
Beginner  Google Cloud  and seo expert
Published: 2019-11-30 07:24:13

Hey, 👋 I'm Vipin, a Marketer  😬 , self-thought coder, from India, cHENNAI. I am looking forward to sharing my experience from Digital marketing and google cloud  .<a href="https://cbseneet2019.co.in/"> neet 2020</a>


Since last year I've been exploring wordpress , seo, and BDE . So if there's anyone interested in software with a minimal amount of code let me know 😉
Mobile and Web Development Environment 
Tags: androiddevelopment, mobileapplicationdevelopment
Published: 2019-11-30 07:12:01

If you are looking for the android web development company in India and setting up a web development environment on your Android device. So Trident Analytical Solutions avail of your web services and mobile web services as per your requirement. They have highly skilled developers who develop and design your requirements and Tas.co.in offers many options like the variety of your businesses. Contact details Email:info@tas.co.in, Call  @ +91-9795771110, Website: https://tas.co.in/
How to Manage Apartment Water Reading by Online System
Tags: managingwater, waterbill, watermaintenanceapp, waterreadingpanel
Published: 2019-11-30 06:42:44

---
title: How to Manage Apartment Water Reading by Online System
published: true
description: 
tags: managing water, waterbill, water maintenance app, Water Reading Panel
---

![Manage Apartment Water Reading](https://thepracticaldev.s3.amazonaws.com/i/tk9r7x2yu40mgk625nnm.jpg)

Save time managing water and waste water with simple scheduling and streamlined reporting. This app enables you to fix any water issue you might have anywhere in the world. The Water Bill App will help you with water maintenance billing.

Simplify your water permit activities and ensure process consistency and data integrity by save all of your permits related information in one central, web-based location.
water management can be applied by contractors or water supplier to decrease water costs and efficiently allow water by maintaining grade support users see a change in yields, water usage, and farm productivity.

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

Water Bills App Features:
-------------------------------------
1. Email Registration & Login 
2. Forgot Password & Resend Email 
3. Home screen with count all bills 
4. Listing of Due Water 
5. Bill of Customer 
6. Detail of Water Billing 
7. Navigation Drawer Menu 
8. Filter Water Bill (By Bill No., Date, Payment Status) 
9. Customer Bill Reporting 
10. Push Notification of Bill 
11. Enquiry Page to Send Message 
12. View Customer Enquiry 
13. About us Terms and & Conditions 
14. Customer Profile with Update 
15. Mobile Responsive Web Admin Panel 
16. Firebase Google Integration 
17. Custom Sweet Dialog 
18. Update Login Security

App Sample on Play Store
----------------------------------------
https://play.google.com/store/apps/details?id=info.maintenance.waterbills

Admin Panel Demo
----------------------------------------
https://www.awaysofttech.com/waterbills
Running F# in WebAssembly with Bolero
Tags: fsharp, webassembly, webdev, dotnet
Published: 2019-11-30 06:16:20

WebAssembly has enabled some interesting scenarios for developers that aren't necessarily fluent in the latest browser technologies.

> Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
>
> https://webassembly.org

With the right pieces in place, we have the potential to write frontend web applications in any language we choose.

In this episode of On.NET, you will learn from [Phillip Carter](https://twitter.com/_cartermp) how to run F# code in WebAssembly in the browser using an open source framework called Bolero.
{% youtube xoDllSX6KOE %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).


## Useful Links
* [Bolero: F# in WebAssembly](https://fsbolero.io/)
* [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor)
* [WebAssembly](https://webassembly.org/)
* [IntelliFactory](http://www.intellifactory.com/)
Are you "mocking" me?
Tags: ruby, testing
Published: 2019-11-17 01:06:23

Hi, everyone! I was hoping this blog would be about how to make a mock call to an API but unfortunately, I didn't have enough time to get to that. So today's short blog will be about what mocking is in RSpec. Let's begin!


## What is mocking?

*"Mocking is a technique in test-driven development (TDD) that involves using fake dependent objects or methods in order to write a test."* (1)

One handy thing to note about mocking, if you have the *rspec* gem as a dependency in your Gemfile then you already have the *rspec-mocks* gem available to use.

## Things I've Heard in Relation to Mocking

- Test Doubles
- Stubs
- Message Expectations

## Next Steps

Over the next week I'll *hopefully* be able to give you all examples of successfully mocked API test for a project I'm working on, but in the meantime, please share with me anything that you think might be helpful!

## Resources

1) [Mocking with RSpec: Doubles and Expectations](https://semaphoreci.com/community/tutorials/mocking-with-rspec-doubles-and-expectations)

2) [Project: RSpec Mocks 3-9](https://relishapp.com/rspec/rspec-mocks/docs)
Penit Launched new Christmas poetry contest 2019
Tags: watercooler, poets, contest, poetry
Published: 2019-11-30 06:16:14

hey guys,

I don't have an idea that how many people are inclined towards poetry and writing but consider it as an update for all.

There is a website out there called [penit.ink](http://penit.ink), they have launched a contest for all the authors out there. I myself, like to write sometime so felt like sharing it here...

You can find all the details about the contest in the link below.

[Details of the contest...](https://penit.ink/penit-christmas-poetry-contest-2019/administration)

PS: please participate, it's free and it's fun...
How many of you received Hacktoberfest T-shirt?
Tags: hactoberfest, digitalocean, opensource
Published: 2019-11-30 06:07:36

---
title: How many of you received Hacktoberfest T-shirt?
published: true
description: 
tags: Hactoberfest, digital ocean, opensource
---


How many of you received Hacktoberfest Swag? Send Pics and be proud of your contributions to the open-source community.
:)
ReactJS Live Code Conversations
Tags: react, jquery, livecodeconversations, reactjslive
Published: 2019-11-30 05:27:09

---
title: ReactJS Live Code Conversations
published: true
description: ReactJS Live Code Conversation - Mario & Chad talk jQuery to React and React Suspense
tags: ReactJS, JQuery, Live Code Conversations, ReactJS Live
---

Hey everyone, we had a fun time with our series "Live Code Conversations" on ReactJS Live, our Youtube channel where we do live coding and talk code. 

In this video, we look at conversion of jquery code to react, and discuss ArtificialGalaxies.com project.  

Watch the live created video here on our Youtube ReactJSLive Channel. 
Dont forget to smash that like button and subscribe!

{% youtube 1m29l7kFAu4 %} 

And, you can also join our ReactJS Live groups here at these links:

Facebook
https://facebook.com/groups/ReactJSLive

Discord Invite:
https://TinyURL.com/DiscordTech  

Thanks for checking out the video! Be sure to follow the series Mario and I put on, we have a lot of fun, and seeing Mario learn web development and react "live" is fun, and there are lots of bad jokes to keep the coding session fun! 

Cheers!
Prefetch lazy-loaded component
Tags: react, devjournal, thoughts
Published: 2019-11-30 04:26:26

---
title: Prefetch lazy-loaded component
published: true
description: Thoughts on prefetching lazy-loaded component
tags: react, devjournal, thoughts
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vrb1s13akbwwukmelgyq.jpg
---


[Cory House](https://twitter.com/housecor) has posted following tweet today.

{% twitter 1200554167644966912 %}

Cory has pointed out a feature in [CRA](https://create-react-app.dev/) to enable prefetching lazy component, but I learned of a way to apply it on a project.

---

## Scenario

Suppose that you are building a customer intake site.

When a user receives a call, the user can quickly load up the initial customer page  
because the site is small because non-essential code is split (lazy loaded).

Validating user (to confirm that the user has the correct customer's page on) will be the idle time to prefetch the lazy component such as tabs to fill in the customer's information, and modal confirmation boxes, etc.

The typical workflow will be,

1. User searches for the customer
1. Customer page is loaded fast (initial site is small due to code split)
1. User confirms with customer if the right page is loaded (providing idle time for prefetch)
1. During the idle time, non-essential (not needed right away on load) such as modal or forms in tabs are loaded.
1. User can gather data from customer, and enter it quickly.

## Thoughts

So this would especially be effective for LOB (line of business) apps with lots of data to enter or look up.

Ones I can think of are,

1. **Intake screen** - where a user confirms the right customer page, and during that time, other forms/modals or non-essential but needed components are loaded.
1. **Dashboard** - where graphs outside the viewport is lazily but prefetched (user analyzing the top graph will give enough time for other graphs outside the viewport to be prefetched during that time)
1. Any **Master-detail** pages - e.g.) A site with lots of image with modal for details such as
   - [Unsplash](https://unsplash.com/)
   - [Pixabay](https://pixabay.com/)
1. **Nav menu** - Top level menu is loaded right away, and menu items shown on hover are loaded lazy but prefetched.

---

[Image Credit](https://imgflip.com/i/25pd8f): Created with the Imgflip [Meme Generator](https://imgflip.com/memegenerator)
I went from portering in a restaurant to coding in Silicon Valley. Ask me anything.
Tags: ama, career, inclusion, siliconvalley
Published: 2019-11-30 04:03:41

### My name is Joe, and I'm... 

- getting paid to write code as a professional engineer in Silicon Valley

- renting a nice two-bedroom house with a backyard

- able to afford the best private education for my child

- able to gift my partner with the time to work on her own business idea

- humbly invested in a hard tech startup and cryptocurrencies

- working for one of the fastest-growing enterprise software companies in the US 

To most people's definition of capitalistic success, my life might be considered average (tangentially, that also indicates how wrong our perception of success has become). However, I had started with many combined disadvantages compared to what you would consider as the stereotypes:

#### Born in an English-speaking world

I was born to a middle working-class family in a [vacation country called Thailand](https://www.pommietravels.com/wp-content/uploads/2011/11/The-Hangover-2-street-scene.jpg). I only came to the US about five years ago.

#### Educated in tech or related fields

I had no formal education in tech or any US education at all. The closest were night classes, a month at Recurse Center, and a few MOOCs. All for which I never had to pay a single dime.

#### A genius

I've never been a tech whiz kid or a rockstar. I'm more of an artist/writer/humanitarian character. I just really love writing and digging into how things work.

#### Worked or interned with big tech companies

I had portered in a restaurant, filled shelves for Trader's Joe, and almost got a job handing out flyers at a strip club.

#### Single

I raised a family with my partner while doing all those things.

### Ask Me Anything

My goal is to encourage people from different backgrounds to keep their chin up and celebrate their uniqueness. So, ask me anything about your tech career, life-long goals, obstacles, values, and just about anything under the sun. How can I help?
I Find Git Extensions Confusing 
Tags: git
Published: 2019-11-30 03:41:39

I made the recommendation to us [git extensions](https://git-extensions-documentation.readthedocs.io/en/latest/git_extensions.html) as the standard git tool if you don't already have one. I thought this would be good, it sets up a diff tool and provides all the nice advanced git capabilities. So why do I end up so confused?

When I go to help I request an operation. They right click on something and the option is available. Well, that might do what I'm thinking, but I don't know. This creates a complex matrix of options to achieve something. 

It has some nice usability improvements, but I think it does not help to guide the user. You already need to understand what git is doing in order to make the most of it.
Costco Outage - Lessons that needs to be learned
Tags: performance, outage, blackfriday, thanksgiving
Published: 2019-11-30 02:35:26

Last year's Thanksgiving and Black Friday for Costco didn't cause this much trouble. But this year, Costco website started stuttering since Thanksgiving. Costco's this year's deal is a steal for those who are looking Apple devices, Surface devices, TVs, and other general purpose items. 

Business Insider reported that, this outage costed $11 million dollars. You can checkout the history of downtime in the DownDetector.com 

![Costco Outage - Lessons that needs to be learned](https://media.giphy.com/media/L4gMepUXL0deEgRJda/giphy.gif)

After a downtime, Costco implemented queuing mechanism, it is similar to the physical queue where you stand to checkout in the store. After a minute, it will allow you to enter into the store. This queue will be implemented whenever user searches for an item or trying to login into their account.

Costco.com > Search for 'surface' > Click on the first item > Add item to Cart - this flow has more than 15MB data transferred, more than 100 requests logged, and took more than 90 seconds. 

![Data](https://media.giphy.com/media/3osxYc2axjCJNsCXyE/giphy.gif)

If you are new to performance testing, search *Costco downtime blackfriday* in Google to read about importance of performance testing and how you can correlate between web performance, user experience, and revenue.

Please share your views about any other outage that you had experienced yesterday and today.

[My blog](https://qainsights.com)
[My community](https://community.qainsights.com/post/5de1cf84fe2d297801d0fb5a)
Seed Data for SET card game

Published: 2019-11-30 02:24:35

For a project at school, I worked on a SET card game. One challenge I had was getting a database of cards. The first idea I had was to use google images to find all 81 cards. It was hard to find a collection of all 81 cards as individual images. As you can see from the screenshot below there weren’t any.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/aae1hon31anpg9wguhey.png)

Next, I considered taking a picture of every single card with my phone. That idea was rejected because it would be too much work and lower quality.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/yjwrst323prresglit9o.png)

After searching Google Images more, I did find a single image with all 81 cards.

I tried to crop all the images using command+shift+4 to screenshot but that was taking too long too. I was advised to try slicing images using canvas and pointing coordinates to each card.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/emqt98g10f5q8aa1vheo.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ln4952hq5wid5rqowjie.png)

This also took too much work and was a headache. 

I thought I had a huge breakthrough when I discovered an image splitter. The first one I used split images into squares for Instagram.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3j9tst9ow8bjenouu4m4.png)

The card images were rectangular and needed to be square so it wouldn’t be off-centered so I changed the resolution and stretched the card images horizontally. 

It sort of worked but cards were still off-centered.

After looking around some more I stumbled upon a public GitHub repo that already had all the card images so I just used those instead.

TLDR: Look harder for images before making your own.
Building a Simple and Clean Modularized Angular Project
Published: 2019-11-30 01:43:41

This Angular Project will be the frontend side of this Asp.net Core 3.0 backend [project](https://dev.to/emperoar/building-a-simple-and-clean-asp-net-core-3-0-web-api-13lk).

we will be using [Visual Studio Code](https://code.visualstudio.com/)  for this project.

We will build our Simple Project using Angular CLI.
we will start with

**Create your Project**
We will call this project Business SPA application.

execute this command in your angular cli
<code>ng new businessspa-fe</code>


**Create your Company Management Module**
<code>ng g m modules/companymgmt --routing</code>

**Create the Company Component inside Company Management Module**
<code>ng g c modules/companymgmt/company</code>

**Create your Service**
Execute this command in angular cli.
<code>ng g s services/company</code>
Create the *CRUD* functions for this services
*Get, Post, Put, Patch, Delete*

**Create your Model**
create a new folder call it  *models*
create a new typescript file name it:  *company.model.ts* 
<code>
export class Company {
   public int: number;
   public name: string;
}
</code>

{% instagram B410xLkAYXh %}

**If you need detail tutorial, drop a commend below we can do a one x one session.**
stan's links
Published: 2019-11-30 01:42:42

https://flatironschool.com/career-services-commitment/
https://pages.github.com/
https://semantic-ui.com/elements/icon.html#health
https://react.semantic-ui.com/usage/
https://ctrlq.org/code/20526-javascript-image-uploader
https://www.npmjs.com/package/react-images-upload
https://www.npmjs.com/package/react-slideshow-image
Rendering nested objects in Svelte
Tags: svelte, beginners, todayilearned
Published: 2019-11-30 01:25:26

Hi.

Total beginner here.

I've been re-learning some basic web development over the past few weeks and, along with vanilla JS, I've been working on a project in Svelte. One of the stumbling blocks for me was iterating through nested objects — actually, objects inside arrays ... inside objects ... inside arrays.

This may have been completely obvious to most people working with JavaScript or Svelte but, as a newbie, the way Svelte makes iterating through nested objects *so* easy came as a revelation.

Let's pretend we have an array of *Real Jabronis* in our code, those Jabronis carry with them an array of *Lame Moves*.
```javascript
const realJabronis = [
		{
			name: 'Soda Popinski',
			age: 43,
			height: '6\'5"',
			lameMoves: [
				{
					name: 'Triple Trotting Jab',
					power: 0.5,
					delay: 0.3
				},
				{
					name: 'Just an Uppercut',
					power: 0.9,
					delay: 0.6
				}
			]
		},
		{
			name: 'Kin Corn Karn',
			age: 35,
			height: '5\'11"',
			lameMoves: [
				{
					name: 'Mongolian Chop',
					power: 0.5,
					delay: 0.4
				},
				{
					name: 'Karate Kick',
					power: 0.9,
					delay: 0.6
				}
			]
		}
	];
```

Now let's pretend we're training an up-and-coming fighter and they need a list of the *Lame Moves* they need to train for if they want to fight these *Real Jabronis*. Svelte makes this **stupid easy**:

```html
{#each realJabronis as realJabroni}
	<h1>{realJabroni.name}</h1>
	<h2>Lame Moves to Train For</h2>
	{#each realJabroni.lameMoves as lameMove}
		<h3>Move Name: {lameMove.name}</h3>
		<p><strong>Power: {lameMove.power}</strong></p>
		<p><strong>Delay: {lameMove.delay}</strong></p>
	{/each}
{/each}
```

And you basically get exactly what you need. 

![Some Real Jabronis](https://thepracticaldev.s3.amazonaws.com/i/gszw0x1wr9l9vguygnzj.png)

You can also, if you want to use components in these iterations (and you know you do,) pass each of these iteration levels into your component through props:

```html
{#each realJabronis as realJabroni}
	<RealJabroni name={realJabroni.name} lameMoves={realJabroni.lameMoves} />
{/each}
```

And, of course, `export let lameMoves = [];` from inside `RealJabronis.svelte` will give you a nice array to work with.

**What tips do you have for iterating through nested objects and arrays in Vanilla JS?**
Building a Simple and Clean Asp.net Core 3.0 Web Api
Published: 2019-11-30 01:20:33

Using Visual Studio 2019 Preview.

The Frontend Side of this project is an Angular App which you can also learn how to build by following this [post](https://dev.to/emperoar/building-a-simple-and-clean-modularized-angular-project-57d9)

**Update your Starup.cs**
{% gist https://gist.github.com/EmpeRoar/6a4e4dc48f53aae81e4fbed5230669a7 %}

**Build your api project**

Create your endpoint Controller.
{% gist https://gist.github.com/EmpeRoar/1709e27d1e9cb0435656321ae94a70d8 %}

**Build your model project**
Create your simple model
{% gist https://gist.github.com/EmpeRoar/79e64a77f45f0f9a00c5b9a9f8ab4126 %}

**Build your efcore infra project**

Create your DbContext Interface
{% gist https://gist.github.com/EmpeRoar/7bb1d8216a596a270c7b17a97733cefc %}
Create your DbContext Implementation
{% gist https://gist.github.com/EmpeRoar/bdc1aaa8b9f90d1ab3d65460a6bae480 %}

{% instagram B5HPmxPAH-A %}


If you need detail tutorial drop a commend below we can do a one x one session.
The Use-Case Paradox
Tags: coding, philosophy
Published: 2019-11-30 01:06:15

---
title: The Use-Case Paradox
published: true
description: Re: Your Ultra-Clever Solution
tags: coding, philosophy
---

**The Use-Case Paradox**

Everything possible has a valid use case somewhere.

However: If you think you found a new valid use case of something, you probably didn't.