teleren/devto huggingface dataset:
Status Update: 2019-10-11 - PECL
Tags: phalcon4, status, update, pecl
Published: 2019-11-01 21:12:38

---
title: Status Update: 2019-10-11 - PECL
published: true
date: 2019-10-11 14:28:22 UTC
tags: phalcon4,status,update,pecl
canonical_url: 
---

A quick update on v4, PECL, docs and sample apps, brought to you by the Phalcon Team :)

### PECL

We are excited to announce that we now have an account with [PECL](https://pecl.php.net/)!

![](https://blog.phalcon.io/assets/files/groot.gif)

We have been trying for years to get this account so that we can offer an easier and faster way for users to install Phalcon but were not successful. However after nearly 10 requests, the PECL team has approved our submission and we are now in business!

Our page is: [https://pecl.php.net/package/Phalcon](https://pecl.php.net/package/Phalcon)

There is still a lot of work to be done to prepare Phalcon for PECL and we will need to work on updating the relevant page in the PHP manual, but the most difficult part is done!

### RC

We have been working hard to fix issues and offer minimum enhancements for v4. As you can see in our [CHANGELOG](https://github.com/phalcon/cphalcon/blob/4.0.x/CHANGELOG-4.0.md) a lot has been added since RC1.

We thank the community for contributing to these issues! You guys are the best.

We will be releasing RC2 most likely this week coming.

### Sample Apps

[Vokuro](https://github.com/phalcon/vokuro) and [REST API](https://github.com/phalcon/rest-api) have been upgraded to v4. We are now working on the [DevTools](https://github.com/phalcon/phalcon-devtools).

### Documentation

We are continuing to review and revise all of our documents. The status of this effort can be seen [here](https://github.com/phalcon/docs/issues/2322). As you can see we have around 30 documents to review and revise.

If you would like to help with the revisions for the documentation, go to the above issue and pick any of the documents (`en/` folder) and issue a pull request!

### Social Media

We are present in pretty much all the social networks out there. Feel free to follow us for updates and news:

- [Forum](https://phalcon.link/forum)
- [Discord](https://phalcon.link/discord)
- [Github](https://phalcon.link/github)
- [Telegram](https://phalcon.link/telegram)
- [Gab](https://phalcon.link/gab)
- [Parler](https://phalcon.link/parler)
- [MeWe](https://phalcon.link/mewe)
- [Bitchute](https://phalcon.link/bitchute)
- [Facebook](https://phalcon.link/fb)
- [Twitter](https://phalcon.link/t)
- [YouTube](https://phalcon.link/youtube)

\<3 Phalcon Team
DEV Job Application
Tags: career
Published: 2019-10-11 16:44:35

## I just applied to DEV!

I applied to the Software Engineer (All Levels) position. The application was much better than most jobs I apply to. It didn't feel too intrusive or overly complicated, just as though you were having a sit-down with them and some coffee. And, it is remote! Hopefully, I get a position with the company and be able to say I was a part of DEV. I really enjoy this platform and the people on it and I believe it is a hub for developers to engage, learn, and express their opinions. That is why I applied to DEV. So I can work with and learn from the people that make this platform possible.

### Wish me luck.
How to generate beautiful README documentations with README-JSX
Tags: readme, jsx, javascript, react
Published: 2019-10-11 16:42:19

README-JSX is a package that lets you write your README documentations in jsx, opening a multitude of new possibilities and oppurtinities to get creative. Not only that, but it also provides you with all the necessary components for writing traditional markdown without having to struggle with spacing and formatting...

# Installation
You install the package as a dev dependecy like so `npm i -D readme-jsx`

# Usage

You then create a README.jsx file in the root folder, and proceed to write your jsx code, note that `metadata` allows you to parse your package.json file properties:

```jsx
// README.jsx
const React = require("react");
const { BADGE, metadata} = require("readme-jsx");

module.exports = (
  <React.Fragment>
    <BADGE 
    label="LICENSE" 
    message={metadata.license} 
    style="for-the-badge" 
    color="blue" />
  </React.Fragment>
)
```

# Generating README.md

Finally, you launch your script which will generate the README documentation for you:

```jsx
// /scripts/readme-gen.js
const { generateMD } = require("readme-jsx");
generateMD("./README.jsx").then(() => {
  console.log("README.md generated !");
  process.exit();
});
)
```
```shell
node ./scripts/readme-gen.js
```

# Results

![](https://camo.githubusercontent.com/27696237478fda5d41b2104a2dd39813de1c1a65/68747470733a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d4c4943454e5345266d6573736167653d4d495426636f6c6f723d626c7565267374796c653d666f722d7468652d6261646765266c6f676f3d266c6f676f436f6c6f723d76696f6c6574266c696e6b3d266c6162656c436f6c6f723d626c61636b)

# Conclusion

As you could see, writing README.md documentations has never been as easy and flexible as it is now thanks to this package, for a more advanced example, check out this [file](https://github.com/solidsnail/readme-jsx/blob/master/README.jsx)
Recursively Counting files by Extension on Mac or Linux
Tags: linux, mac, bash, tips
Published: 2019-10-11 16:38:31

---
title: Recursively Counting files by Extension on Mac or Linux
published: true
date: 2019-10-11 16:35:16 UTC
tags: linux, mac, bash, tips
canonical_url: https://www.petefreitag.com/item/883.cfm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4i0pwt5qg03fcuf6930y.jpg
---

Back [in 2004](https://www.petefreitag.com/item/162.cfm) I wrote up a blog entry showing how to get a count of files by a specific extension. For example you want to know how many js files are in a directory, you can run this:

```
find /some/dir | fgrep -c '.js'
```

The `-c` in the grep command tells it to count the matches. I'm actually using `fgrep` here because I'm not using regex.

The above would also match a file, or a directory had `.js` anywhere in the path, so we could improve that script by using a [regular expression](https://www.petefreitag.com/cheatsheets/regex/) `$` character, for example:

```
find /some/dir | grep -c '\.js$'
```

Now we are limiting the .js to show up only at the end of the file. Note, because I'm using `grep` which uses regex, I now need to escape the `.` as `\.`

**What if you want a listing of all file extensions and the count of files in a directory?**

Here's one way to print out a list of extensions and the number of files of each type:

```
find /some/dir -type f | grep -o ".[^.]\+$" | sort | uniq -c
```

This will print out a nice list like this:

```
5 .js
3 .html
1 .css
```

**How it works**

First we have `find /some/dir -type f` which just limits find to output all the files in the directory recursively. The `-type f` omits directories from showing up in the list.

Next we have `grep -o ".[^.]\+$"` the `-o` tells grep to only output lines that match the pattern, and only output the match. The pattern is just a regex that says look for a dot followed by one or more chars that are not a dot `[^.]\+`, at the end of a line `$`.

Next we pipe into the `sort` command which just puts every thing in order.

Finally we pipe into `uniq -c` which counts each unique line (the file extensions) and prints out the results. Cool!
Your Ideal Companies to Work at?
Tags: hiring, career
Published: 2019-10-11 16:18:47

Talented engineers are a hot commodity right now, especially in NYC. And since the job economy is doing so well, candidates still have so many opportunities to choose between. 

We've been using a variety of ways to get in touch with engineers in our stack:

-Inclusive job posts (devoid of years of experience)
-Trusted 3rd Party Technical Recruiters
-Reaching out directly to you in any way imaginable! (it's called sourcing)

I imagine it must get tiring to hear from recruiter after recruiter all boasting about how great their opportunity is for you, and how you'd be a "perfect fit" on the team.

I'm actually curious to hear from you. From the tech stack or team, to the company's mission or interesting technical challenges... what do you look for in a company when you're on the job search?
Essential items for my programming motivation
Tags: motivation, productivity
Published: 2019-10-11 16:13:11

For a few months now I have told myself "Okay, you need to start programming at home". I have wanted to start on projects that I find interesting and improve my programming skills along the way. However, I have always been the type that could never really get anything done at home. Since my college days, I always had to be in the library because I knew that studying at home was out of the question. My attention span is short and I know that if I am home, something else will grab my attention (Oh look! dirty dishes that need washing!). 

I decided that in order for me to find motivation to program at home and increase my productivity I needed to set up some sort of work space. I had tried setting up my laptop on my dining table but that was neither comfortable nor practical. Any time I wanted to eat I would have to put my laptop away and without fail, I would forget about it or be too lazy to set it up again. 

Since a dining table set up wasn't going to work, I bought a few items that I believed would be essential to *my* productivity and motivation. 

## Small Desk 
My laptop needed a permanent home so I bought a cheap but cute and practical desk that was small and wouldn't take up too much space in my apartment. [This desk](https://www.amazon.com/Writing-Computer-Industrial-Folding-Notebook/dp/B06XZV3F8F?ref_=fsclp_pl_dp_5) fulfilled everything I was looking for. Small, easy to assemble, and cheap. 


## Desk Chair
Although my dining room chairs are fine for sitting a few minutes to eat a day, they are extremely uncomfortable for multiple hours of sitting. A [chair](https://www.amazon.com/Ergonomic-Computer-Office-Midback-Chair/dp/B0147WIC7E/ref=sr_1_4?keywords=desk+chair&qid=1570809973&s=home-garden&sr=1-4) with decent back support was necessary. 

## Monitor 
I needed an extra [monitor](https://www.amazon.com/dp/B07743412C/ref=twister_B077V23PNF?_encoding=UTF8&psc=1) because let's be real, one screen just isn't enough. One screen for the editor and the other for the browser. 

These items have been essential in my motivation to program at home. I don't have to put anything away because I have a dedicated space for my laptop setup. All I have to do is hit the power button, get comfortable and start programming. 

It has only been a few days but I have been working on a side project *every single day*. I'm hoping to keep it up!
 ![it's only my third day out here](https://media.makeameme.org/created/its-only-my-5c2e5a.jpg)
Free"RxJS unit testing in Angular" video-course is released!
Tags: rxjs, webdev, frontend, angular
Published: 2019-10-11 16:10:44

---
title: Free"RxJS unit testing in Angular" video-course is released!
published: true
description: 
tags: rxjs, webdev, frontend, angular 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vnk518jcrt8d7f8e6yxn.png
---

Hey!
Angular and ngRx are hardly using RxJS lib under-the-hood, and for this code, we need to develop unit tests. 

Say you heard something about marbles or maybe about special TestScheduler from RxJS, and also there are jasmine-marbles, rxjs-marble testing lib - phew... “Isn’t it too much to just create some unit tests? I am overwhelmed!” 

Well, you are right, it is too much! But ... after this course you will be an expert of RxJs unit-testing approaches) 

Interested? Find link [here](https://mailchi.mp/9c8299ec62c2/rxjsunittesting).

BTW.. it will be completely FREE 😎
Intro video:
{% youtube D8Ip3mq-N-k %}
(Other) Projects you can do to Become a Front-End Master in 2020
Tags: webdev, javascript, css
Published: 2019-10-11 16:09:44

---
title: (Other) Projects you can do to Become a Front-End Master in 2020
published: true
description: 
tags: webdev, javascript, css
---

I love [this post by Simon Holdorf](https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h). He's got some ideas for you to level up your skills as a front-end developer next year. Here they are:

- Build a movie search app using React
- Build a chat app with Vue
- Build a weather app with Angular
- Build a to-do app with Svelte

... and 5 more like that.

All good ideas. All _extremely_ JavaScript framework focused. 

I like the idea of thinking of being a front-end developer as being someone who is a browser person. You deal with _people_ who use some kind of client to use the web on some kind of device. That's the job.

I love JavaScript frameworks, but knowing them isn't what makes you a good front-end developer. Being performance-focused and accessibility-focused, and thus user-focused is what makes you a front-end master, beyond executing the skills required to get the website built.

In that vein, here's some more ideas.

- Go find [a Dribbble shot](https://dribbble.com/) that appeals to you. Re-build it in HTML and CSS in the cleanest and most accessible way you can.
- Find a component you can abstract in your codebase, and abstract it so you can re-use it efficiently. Consider accessibility as you do it. Could you make it more accessible while doing it such that the entire site benefits?
- Install the [Axe accessibility plugin for DevTools](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/) and run it on an important site you control. Make changes to improve the accessibility as it suggests. 
- Spin up a copy of [Fractal](https://fractal.build/). Check out how it can help you think about building front ends as components, even at the HTML/CSS level.
- Build a beautiful form in HTML/CSS that does something useful for you, like receive leads for freelance work. Learn [all about form validation](https://css-tricks.com/form-validation-part-1-constraint-validation-html/) and see how much you can do in just HTML, then HTML plus some CSS, then with some vanilla JavaScript. Make the form work by using [a small dedicated service](https://serverless.css-tricks.com/services/forms).
- [Read a bit about Serverless](https://serverless.css-tricks.com/about/) and how it can extend your front-end developer skillset.
- Figure out how to implement an SVG icon system. So many sites these days need an icon set. [Inlining SVG](https://css-tricks.com/pretty-good-svg-icon-system/) is a great simple solution, but how you can abstract that to be easy to work with for your workflow? How can it work with the framework you use?
What must we do to encourage more female coders?
Tags: discuss, watercooler, healthydebate
Published: 2019-10-11 16:05:34

I have become much more aware that the software engineering industry does not support female coders as much as it should.

Primarily this is because I welcomed a daughter into the world two months ago. 

So...

- What can we, as an industry, do now to encourage more female coders?
- What can I, and other fathers like me, do to help my daughter if she decides to enter this industry?
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-10-11 15:15:57

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![go-crazy-friday](https://media.giphy.com/media/xUA7beJ2eGj2dfsaXu/giphy.gif)
How to mimic componentDidUpdate() with React Hooks
Tags: devjournal, javascript, react, reacthooks
Published: 2019-10-11 15:09:31

`useEffect` is a very useful hook. It receives a callback function that executes when the component has mounted and every time it updates. So it works similarly to the old `componentDidMount()` and `componentDidUpdate()` methods for class components.

There is a tiny problem, though. Sometimes, we might not want it to work like **both** `componentDidMount()` **and** `componentDidUpdate()`. Sometimes we want to execute the hook only when the component mounts or only when it updates.

## How to keep `useEffect` from executing on mount

React doesn't really offer a clean way to do it. In future versions, it may be handled by an argument. But right now, the best way I've found is [a reference hook](https://reactjs.org/docs/hooks-reference.html#useref).

### What is a reference hook?

It's a hook initialised with `useRef`. It returns a mutable object whose `current` property gets initialised to the argument we pass when we declare it. It looks something like this:

```javascript
const refHook = useRef(initValue)
```

### How does it help us?

We can use the reference to check whether the component has just mounted or updated. We initialise it as `false` and change the state to true on the first render. Then, we use this information to decide whether our `useEffect` should do something or not.

```javascript
const App = props => {
  const didMountRef = useRef(false)
  useEffect(() => {
    if (didMountRef.current) {
      doStuff()
    } else didMountRef.current = true
  }
}
```

This hook will check if `didMountRef.current` is `true`. If it is, it means that the component has just updated and therefore the hook needs to be executed. If it's `false`, then it means that the component has just mounted, so it will skip whatever action it is supposed to perform and set the value of `didMountRef.current` to `true` so as to know that future re-renderings are triggered by updates.

> **Note!** it is important to remember that what gets initialised when we define the reference hook is the `refHook.current` property, not the `refHook` itself.

### Why don't we use a good ol' `useState`?

I suppose that it would be possible to do something like this:

```javascript
const App = props => {
  const [ didMount, setDidMount ] = useState(false)
  useEffect(() => {
    if (didMount) {
      doStuff()
    } else setDidMount(true)
  }
}
```

That, however, comes with a problem. Unless we add some controllers, the change in state will trigger an update of the component immediately after it mounts, as its state will have changed. This, in turn, will trigger the effect hook. So the reference hook helps us avoid all the trouble associated to controlling it through state.
5 Useful Tools Every Front-end Developer Should Know About
Tags: frontend, design, productivity
Published: 2019-10-11 15:06:40

As a front-end developer, your job is to take care of the look and feel of a website by adding cool interactions, color combinations, animations, and great visual designs. But not all of us are very creative when we are on the text editor, right? (I'm not).

So, sometimes we need to shift ourselves from the editor to other tools so that we can see the design possibilities before actually writing it.

So, here I'm gonna list 5 tools that will boost your creativity and inspire you to create more beautiful and interactive designs.

###5. [REMOVE.BG](https://www.remove.bg/)

![Remove BG](https://www.remove.bg/images/samples/combined/s2.jpg)

I can understand that when you ask for a transparent PNG image from your client, but you end up getting a JPEG? This tool is a time-saver unless you wanna use photoshop to manually remove the background of an image. With this tool, you can remove the image background for FREE.


###4. [Clippy](https://bennettfeely.com/clippy/)

![Clippy](https://bennettfeely.com/_img/clippy_1200x900.png)

I'm sure you know about the clip-path property. The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. But isn't it quite frustrating to imagine the shape and then code it?? This tool will allow you to create the shape and give you the CSS snippet for it.


###3 [GradPad](http://ourownthing.co.uk/gradpad.html)

![GradPad](https://bashooka.com/wp-content/uploads/2014/11/css-gradient-tool-2019-8.jpg)

Nowadays gradients are in trend (I'm personally not so fond of it :p). And if you like gradients but confused about the right combinations, this tool will be very helpful for you. GradPad allows you to generate CSS color gradients and then gives you the CSS snippet for it.


###2 [Trianglify.IO](https://trianglify.io/)

![Trianglify](https://qrohlf.com/images/trianglify/trianglify.png)

Trianglify.IO is a low-poly pattern generator. You can choose the available color palette or make a custom palette for your pattern. Just choose the variance and cell-size. You can then export the low-res preview of the pattern. You can get it in high-res PNG and SVG by paying $4.


###1 [Keyframes](https://keyframes.app/)

![Keframes](https://keyframes.app/media/screenshots/new_demo.gif)

Creating animations has got a lot easier. Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor. And it gives you the CSS snippet when you're done. You can either use the extension or the web app. With the extension, you can animate any element of any website you are on.

##Thanks for reading it to the end

This was my first post and I'm still understanding this editor.

I'll love it if you give your feedback. Thank you!