teleren/devto huggingface dataset:
react-scripts (CRA) like tooling for WordPress
Tags: webpack, javascript, wordpress
Published: 2018-10-08 14:06:40

---
title: react-scripts (CRA) like tooling for WordPress
published: true
description: Early stage talk about a tooling which could make WordPress development with modern JS a bit easier
tags: webpack, javascript, wordpress
---

Hello everyone,

This is my first post here and I would like to share a tooling I have been developing over past 2 weeks, which I believe would give a better Development Experience for WordPress developers.

Being a traditional WordPress developer myself, I know it can be a pain to setup all those webpack stuff for every new projects. On top of, if we were to leverage the advanced code-splitting of webpack, then somehow, we would need to enqueue all chunks in the entrypoint, set `dynamicPublicPath` for lazy loading (`import('').then()`) etc.

To make things easier, I came up with an idea of abstracting the build tooling inside one single scripts (much like `react-scripts`). This is the outcome so far.

{% youtube 8M8kCKnWIfY %}

And this is the repo.

{% github swashata/wp-webpack-script %}


Some of the features are:

👉 Supports Hot Reloading, right out of the box.
👉 Dynamic PublicPath, generated by a WP based PHP class, so use import(), code-splitting all you want.
👉 Can work with any local server (vvv, wamp, mamp, docker).
👉 Webpack Multi-Compiler support.
👉 Hybrid of Browsersync and webpack dev and hot middleware, finest DX.
👉 Zero-config, ES6+, reactjs, Sass, typescript support.

I request, if you are interested in WordPress development, please give this a try. I have not published yet, so you would need to clone it (a bit of pain) and run the example.

You would need to have `docker` and preferably `yarn`.


```bash
git clone git@github.com:swashata/wp-webpack-script.git
yarn
yarn build
cd examples/plugin
docker-compose up -d && docker-compose logs -f wordpress
yarn exstart
```


I would very much like to have feedbacks before I finish up the first version 😃.
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2018-10-08 13:16:37

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

#1. Game Face

Aside from being fun, Avi shares four ways competitive programming has helped his coding career. Try it out if you haven't already!

{% link https://dev.to/aviaryan/why-you-should-do-competitive-programming-even-if-a-little-1hf8 %}


#2. Stop Spam

A clever way to combat recruiter spam and quickly filter out the messages that may be worthwhile.

{% link https://dev.to/whokilledkevin/how-i-created-a-bot-that-talked-to-recruiters-for-me-54n5 %}

#3. Time Is Money

To get started with investing, our author leaves it up to the cloud to compute popular formulas to help them make more informed decisions. We'll see in 1-3 years if this was a success.

{% link https://dev.to/dansyuqri/how-i-used-google-cloud-platform-to-start-investing-in-stocks-34mb %}

#4. Try Glitch!

Stephen, a .NET Developer, shares how their initial experience with glitch (teaching their nephew how to make a website) led to teaching themselves Node.js! 

{% link https://dev.to/stegriff/how-glitch-taught-me-the-nodejs-stack-2mcp %}

#5. Salary Strategy

A few suggestions to consider the next time you're negotiating your salary.  

{% link https://dev.to/aershov24/5-salary-negotiation-rules-for-software-developers-get-20-on-top-of-your-market-rate-2jii %}

#6. If only

Inspired by the discussion "[What is your best advice for a junior developer?](https://dev.to/sergiotapia/what-is-your-best-advice-for-a-junior-software-developer-32gn)," Ted shares fifteen things they wish they knew when they were a junior.

{% link https://dev.to/tedhagos/if-i-knew-then-what-i-know-now-55pb %}

#7. Trix are for kids!

Sorry, had to. Phil shares a Rails announcement -- Trix, a rich text editor, will be brought into Rails 6 by default as Action Text. 

{% link https://dev.to/philnash/rails-6-to-include-new-action-text-framework-hdo %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Looking for Contributors for Interview website 
Published: 2018-10-08 12:12:37

---
title: Looking for Contributors for Interview website 
published: true
description: Contributors/Moderators/Advisers For https://www.onlineinterviewquestions.com/
tags: 
---
![Contributers required for https://www.onlineinterviewquestions.com/](https://thepracticaldev.s3.amazonaws.com/i/ywm5zru456bh8ae2ylch.jpg)

Hello Friends My name Sharad, I am the developer and owner of website  https://www.onlineinterviewquestions.com/. I am running this website since 14 months alone. Now looking for developers and writers who can write some articles on this website with me.

Thanks
AWS Lambda Function! *Blink, Blink*
Tags: amazonwebservices, lambdafunctions, devops, serverless
Published: 2018-10-08 11:59:56

---
title: AWS Lambda Function! *Blink, Blink*
published: True
description: Have you also always wondered why Amazon has capped AWS Lambda Function execution time to just 300 Seconds? Managing more functions = more coffee breaks?
tags: Amazon Web Services, Lambda Functions, DevOps, Serverless
---

<span style="font-weight: 400;"><img class="alignnone wp-image-799 size-full" src="https://thepracticaldev.s3.amazonaws.com/i/2yitgy95jtfysrdcqo8i.jpg" alt="AWS Lambda Function Execution Time" width="1588" height="2246" /></span>



<h2><span style="color: #000000;">Facing challenges in running AWS Lambda function?
</span></h2>
<span style="color: #000000;"> </span>
<blockquote><span style="color: #000000;">Dev has no clue what’s happening behind the scenes of this serverless service. He keeps wondering if he has configured it right every time when he launches a new function! <strong>Phew! Looks like managing more Lamdas functions = more coffee breaks for him!</strong> </span></blockquote>
<h3><span style="color: #000000;">Have you faced difficulties with AWS Lambda functions? If so, share your experiences with us.</span></h3>
TypeScript Progression Ladder
Tags: typescript, learning
Published: 2018-10-08 11:28:30

---
title: TypeScript Progression Ladder
published: true
description: The TypeScript progression ladder (TSPL) is a grouping of concepts and skills relevant to TypeScript programming. TSPL provides aspiring TypeScript programmers with a way to track and improve their TypeScript skills.
tags: typescript, learning
---

The TypeScript progression ladder (TSPL) is a grouping of concepts and skills relevant to TypeScript programming. 

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

TSPL provides aspiring TypeScript programmers with a way to track and improve their TypeScript skills.

Please check it out at http://ladder.ts.training/ and help me to improve it on Github!


**UPDATE**: One of the main pieces of feedback was that people would like to see a similar concept in other programming languages so I have created an upgraded version that allows people to contribute more lists.  Please check it out at http://www.techladder.io/
Simple Hello World in React
Tags: helloworldinreactjs
Published: 2018-10-08 10:44:12

---
title: Simple Hello World in React
published: true
description: here is my first post in dev.to about react
tags: hello-world-in-reactjs
---
First things to do is to install the node js if you don't have yet.


here is the link: [install nodejs](https://nodejs.org/en/download/)

Then see the node version in the command line:
```bash
    $node --version
```

Alternatevely you can also install the yarn:
```bash
    $npm install yarn -g # -g stands for global
```

Then install the 'create-react-app' by the command:
```bash
    $npm install create-react-app -g
```
When the create-react-app is installed, the next thing you need to do is:
```bash
    $create-react-app hello-world
```
There will be a help there after installing:
```bash
    $cd hello-world
```
To see all the directory you can use the command:
```bash   
     $ls for Mac users and GNU/Linux users
     $dir for Widows users
```
You may find the directory: "usr/"

After that you can use a text editor like: sublim text, atom or visual studio code.
The command line is:
```bash
$subl . for sublim text
$atom . for atom
$code . for visual studio code
```
But you can also open it in just for the right click.

Return back to the command line you can use the command:
```bash
$npm start
or
$yarn start
```
Congratulation!!! If there is no error. You have just created your first app in reactjs.

next things to do is to modify the App.js

When we enter inside of it you can see these lines of code. Don't worry. You can know it after reading this post.

```javascript
import React from "react";
class App extends React.Component{
render{ return( /.../ )}
}
export default App;
```
Then to get the Hello World application you can add the *jsx* inside the /.../.
To know more about the jsx you can find it in the link: [more about jsx](https://reactjs.org/docs/introducing-jsx.html)

But jsx for the hello world we can use is:
```html
<h1> Hello World 
</h1>
```
After that the google chrome will refresh and you get the hello world application.

For more documentation and help from community:
you can visit these websites:

[codepen](codepen.io)
[codesandbox](codesandbox.io)
or in [github](github.com)

Thank you very much for your reading. See you next time.
How do you develop angular application with with different back-end technologies
Tags: discuss
Published: 2018-10-08 10:38:55

---
title: How do you develop angular application with with different back-end technologies
published: true
description: 
tags: #discuss
---

I am trying to develop angular application with J2EE.

Server-side: Java, J2EE, Spring, Spring MVC, MyBatis, Maven
Client-side: TypeScript, Angular, Yarn, Webpack

In development environment, I would like to use webpack dev server to route angular application to spring application. I would use different ide to develop front end application and backend application which is eclipse and visual studio code.

In integration environment, they would be packaged as a single war. 




What is your way to develop angular application with different back-end technologies
`throw` objects and functions
Tags: javascript
Published: 2018-10-08 07:47:30

---
title: `throw` objects and functions
published: true
description: Did you know you could throw objects in Javascript?
tags: javascript
cover_image: https://images.unsplash.com/photo-1478317370563-0a8fc17e6837
---

Did you know you could throw objects/functions in Javascript? Objects mean, useful objects for the program to run, not only useful for debugging. Here's a very short one for you!

Lets look at simple code demonstrating a not-at-all-useful cache.

```js
    const cache = new Map();
    
    const read = key => cache.get(key);
    
    const store = (key, value) => {
      cache.set(key, value);
    }
    
    const fakeExternalRes = key => Math.random(0, 888);
    
    const readResource = async key => {
      let value;
      
      // try reading from cache
      // if not found, fetch it from external resource
      try {
        value = read(key);
        if(!value) throw key;
      } catch (key) {
        value = fakeExternalRes(key);
        store(key, value);
      }
    
      return value;
    }
    
    store('asdf', 'world');
    console.log(readResource('hello'));
    console.log(readResource('hello'));

/*
Output:
0.4123278447585672
0.4123278447585672
*/
```

Here, we threw the `key` and caught it to actually fetch it from external resource and store in the cache. Kinda cool way.

One gotcha here is, we generally use `throw` for exceptions and not in normal good case scenarios. So we have to make sure that we don't disturb that mindset for fellow members in the team.

This is used in `react-cache` package by the Facebook team. I have just demonstrated a very simple thing with this. But you can check out the below link for how they have implemented.

[https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L281-L305](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L281-L305)

Take care.
Interesting Functional Composition Tutorial for Haskell and JavaScript.
Tags: haskell, javascript, functional, tutorial
Published: 2018-10-08 07:11:22

---
title: Interesting Functional Composition Tutorial for Haskell and JavaScript.
published: true
description: Function composition is the key to understanding pretty much every abstraction and decision made in functional program design.
tags: haskell, javascript, functional, tutorial
---

{% youtube eyqAWCZo5bg %}

Courtesy of Alexander Noriega.

I haven't yet understood it.
React Native Simple SectionList Component Example Android
Tags: react, reactnative, javascript, android
Published: 2018-10-08 03:58:45

---
title: React Native Simple SectionList Component Example Android
published: true
description: React Native Simple SectionList Component Example Android
tags: #react #reactnative #javascript #android
---

Post Link : <a href="https://www.skptricks.com/2018/10/react-native-simple-sectionlist-component-example-android.html" >React Native Simple SectionList Component Example Android </a>

This tutorials explains how to use simple SectionList Component layout design in react native supplication and apply set onPress event on SectionList  to get value from selected section list item. SectionList is a component that extends the FlatList functionality even more. As the name suggests, it lets you render your list component with section headers. SectionList Component provides a performant interface for rendering sectioned lists, supporting the most handy features.

<a href="https://www.skptricks.com/2018/10/react-native-simple-sectionlist-component-example-android.html" >React Native Simple SectionList Component Example Android </a>

<img src= "https://4.bp.blogspot.com/-PeHYPhP5tPI/W7rQTM6KHdI/AAAAAAAACBI/WMEQUy9wfbsD4f0Y8w7z-popwl8HfLh3ACLcBGAs/s640/sec.png" />

<a href="https://www.skptricks.com/2018/10/react-native-simple-sectionlist-component-example-android.html" >Read More... </a>
Template framework for rendering HTML or Vecty components
Tags: vue, javascript, go, devlog
Published: 2018-10-08 03:20:52

---
title: Template framework for rendering HTML or Vecty components
published: true
description: Past few days I've been designing a template framework that'll work with Vecty as well as regular server generated pages. Among other cool features, it lets you use embedded JavaScript for expressions.
tags: vue, javascript, golang, devlog
---
On my path to creating my ideal frontend web framework in Go, I've been experimenting with a template system that works with [Vecty](https://github.com/gopherjs/vecty). I originally built a prototype that output HTML, like a standard template engine. Then, I adapted it to output Vecty objects and got a proof of concept working with Vecty in browser. But, I really didn't want to make a template system specific to Vecty, especially because there aren't a ton of great templating systems in Go. So, I wanted to make the core functionality neutral to outputting HTML strings or Vecty objects. This took some time to figure out, but I've done it.

While I was at it, I also added an expression evaluator system. Most templating systems need some kind of expression evaluation, which leads to them inventing a new micro-language and having to build up helper functionality from scratch or slowly build up bindings to helpers in the host language. Since structurally this templating system is inspired by Vue templates, which are valid HTML, we just needed a way to evaluate expressions used in directive attributes and interpolation brackets. In Vue this is just JavaScript so I figured why not make it JavaScript here. I grabbed an off-the-shelf Go JavaScript interpreter and made an interface so you can swap out not just different JavaScript implementations, but entirely different language runtimes.

The result is quite ergonomic both in use and in implementation. We build on an HTML parser and make a new Node tree that allows us to write custom directives, custom element parsers, and as I mentioned custom expression evaluators. So really what we have is a templating system framework inspired by Vue templates.

Now that I have this working with an HTML renderer, I'm going back to building a Vecty renderer, which has its own implementation of the basic directives. Custom elements let me wrap how Vecty handles components, and I just need to implement slots and a few other directives and I'll be ready to start building components with Vecty.

{% youtube hQ3pwaPjjEM %}
An Explanation of Recursion Like You're Five
Tags: recursion, explainlikeimfive
Published: 2018-10-08 03:09:53

---
title: An Explanation of Recursion Like You're Five
published: true
description: A response to "Explain Recursion Like I'm Five"
tags: recursion, explainlikeimfive
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ly4dijnyh39jy4s0kj8k.jpg
---

*Or: ReyCursion is a Snap*

*This post was adapted from my comment on [Explain Recursion Like I'm Five](https://dev.to/sloan/explain-recursion-like-im-five-5c6)*

Let's say you want to add up a bunch of numbers.  You have the numbers on a stack of index cards, one number on each card.  Somebody asked you to add them up and tell them the result.  That sounds like a *lot* of work.  I mean, come on, adding a couple numbers is fine, but there are probably like 50 numbers in this deck of cards.  So you hatch a plan...  

You keep the top card, and you hand the rest to your classmate and ask *them* to add up rest of the cards.  You don't tell them that this was supposed to be your job.

Your classmate says fine, but then realizes there must be like 49 cards in this deck, which sounds like a *lot*, I mean come on?  So they hatch a plan.  They keep one card for themselves and ask somebody else to add up the rest of the cards...

And so on down the line (fortunately your school is pretty overcrowded and you have a lot of classmates) until somebody is handed just one card and asked to add "them" up.  

"What do you mean add 'them' up, it's just one card."  

"But what do they add up to?"

Okay whatever, so the last person just says the number on the card.  

The second-to-last person takes that number and adds it to the card they kept, and tells it to the person who asked them.

The third-to-last person takes the number that the second-to-last person tells them and adds it to the number on the card they kept, and so on back up the line....

You get the number that the second person tells you and add it to the one card you kept.  Easy peasy lemon squeezy!  Then you tell the person who asked you.

In code, this would look something like:

```python
def sumof(deck):
    if len(deck) == 1:
        return deck[0]
    else:
        mycard = deck.pop()
        return mycard + sumof(deck)
```

One problem is that this destroys the deck.  We could have each person give the card back when they say the result (`deck.push(mycard)`), but in code it's cleaner to just pass a slice of the rest of the deck:

```python
def sumof(deck):
    if not deck:
        return 0
    else:
        return deck[0] + sumof(deck[1:])
```
A simple way to manage and start your api mock server on your local platform.
Tags: electron, crossplatform, mockserver, apimock
Published: 2018-10-08 02:11:57

---
title: A simple way to manage and start your api mock server on your local platform.
published: true
description: 
tags: [electron,cross-platform,mock-server,api-mock]
---


# <img alt="Mockman" width="150" height="150" src="http://orhcxc3kd.bkt.clouddn.com/256x256.png"/>


> `Mockman` is a powerful and convenient tool that helps you to manage and start mock servers locally.
> 
> With the app, you can easily configure the routes, request format and response of a mock server

## Screenshot

![Mockman](http://orhcxc3kd.bkt.clouddn.com/mockman.png)

## Usage

![Feature](http://orhcxc3kd.bkt.clouddn.com/mockman-preview.jpg)

1. Create your mock server - `click the add button`
2. Configure the `name`, `port` and `prefix` of your move server, make sure the port is not in use, or Mockman will give you a error notification.
3. Add some apis for your mock server.
4. Configure the `method`, `route`, `response code`, `latency`, `required request options` and `reponse data` of each api.
5. Start the server - `click the start button`.
6. After all, you can test your api locally.

> Where will your api data be stored?
> 
> Your data will be stored as a `sqlite file` absolutely on your local, the path will be different on different operation system. 
> 
> * `%APPDATA%`  for Windows
> * `$XDG_CONFIG_HOME or ~/.config` for Linux
> * `~/Library/Application Support` for macOS
Searching on DevTo is bit Odd.
Tags: help, devto
Published: 2018-10-08 01:31:42

---
title: Searching on DevTo is bit Odd.
published: true
description: 
tags: help,devto
cover_image: https://thepracticaldev.s3.amazonaws.com/i/mhwu73xx27ab3m04iz4l.png
---
Maybe I am missing something but if I search for Kubernetes I see random posts. While the search phrase and posts do match, I kind of want to be able to filter by age of the post, not necessarily how popular a post is -- because that really does not matter when you are passionate about some topic. 

So if you got some tips to search dev.to let me know.. 

(Btw I do know that I could search DDG or Google like site:dev.to [InsertSearchPhrase]
Time-lapse 1
Tags: timelapse, coding, landingpage
Published: 2018-10-08 00:39:18

---
title: Time-lapse 1
published: true
description: Made a landing page as quickly as I could this past weekend.
tags: time-lapse, coding, landing page
---

{% youtube LbyiV6xT9Ns %}

This past weekend I decided to time-lapse a landing page build.  Not crazy about the design or the copy but deploying the page was my focus.  This time-lapse is everything minus an hour and some final deployment debugging.

[Live](https://buildapart.io/)