teleren/devto huggingface dataset:
Storybook Docs First Page
Tags: storybook, javascript, testing
Published: 2019-10-15 14:13:06

---
title: Storybook Docs First Page
published: true
date: 2019-10-14 00:00:00 UTC
tags: storybook, javascript, testing
canonical_url: https://committed.software/posts/storybook/firstpage/
---

[![storybook](https://committed.software/static/539f5c8478124e59686bba8183047688/a8200/storybook.png "storybook")](/static/539f5c8478124e59686bba8183047688/0309e/storybook.png)

Storybook has been a great tool for helping the development and testing of our components. Now with the addition of the [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) it will likely become our default platform for documentation and communication of our visual design libraries.

However, one problem we have found is that there is no way to declare which page the documentation should open on. You can sort the stories and the first will be displayed. You can also add a parameter to the story metadata and use that for sorting.

For `.mdx` documentation:

```js
<Meta title="Components|Button" component={Button} parameters={{ order: 5 }} />
```

or for Component Story Format

```js
export default {
  title: "Components|Button",
  component: Button,
  parameters: {
    order: 5
  }
};
```

Then sort the stories in your `config.js`:

```js
import { addParameters } from "@storybook/react";

addParameters({
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind
        ? 0
        : a[1].parameters.order - b[1].parameters.order
  }
});
```

But after sorting your desired first page may not be the first in the ordering. To set a specific first page we create our own simple addon. As it’s small, you can put it straight into the `addons.js` file along with any other registered addons:

```js
import { STORIES_CONFIGURED } from "@storybook/core-events";
import addonAPI from "@storybook/addons";

addonAPI.register("my-organisation/firstpage", storybookAPI => {
  storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
    if (storybookAPI.getUrlState().path === "/story/*") {
      storybookAPI.selectStory("Kind", "story");
    }
  });
});
```

This is only triggered on load when the stories are configured. Also by testing the url for `/story/*` we do not interrupt requests for a specific story or docs page.

## Limitations

This description applies to `v5.2` upwards, though I think similar things can be done using `sortStoriesByKind` for earlier versions. Also, if an incorrect story URL is entered then the first page by the ordering will be used. If this is a concern you can add into the addon:

```js
import { STORIES_CONFIGURED, STORY_MISSING } from "@storybook/core-events";
import addonAPI from "@storybook/addons";

addonAPI.register("my-organisation/firstpage", storybookAPI => {
  storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
    if (storybookAPI.getUrlState().path === "/story/*") {
      storybookAPI.selectStory("Kind", "story");
    }
  });
  storybookAPI.on(STORY_MISSING, (kind, story) => {
    storybookAPI.selectStory("Kind", "story");
  });
});
```
P2P rendering the web? 👥
Tags: webdev, javascript, architecture
Published: 2019-10-13 23:45:48

Conceptually I have been thinking about render farms and how this pear to pear rendering might apply to the web, 3D artist use render farms to speed up rendering of complex and intensive calculations by spreading the load amongst a literal farm of machines dedicated to the task.

As you visit a website, you and several other visitors are talking to some sort of server about what you need in order to view this page, none of you are working together to share what you might already have, it's quite a selfish model if you think about it, the poor server is under so much load (assuming no load balancing). Lets think torrents for a moment, once you have those precious bits, you can become a seed and share what you have at the same time as downloading what you need, this becomes faster if thier are more peers seeding.

So could the web work this way? Well I think it's possible with a combination of the following technologies to atleast do 10% of the above.

- Headless Chrome
- WebRTC
- Server Sent Events
- Indexdb

🧙 WHIS stack (concept)

Now you might be thinking either.. what is all that? Or that sounds like the test suite at Netflix or Github. You are correct in atleast feeling a little puzzle d. 
WebRTC is used typically for video and audio streaming between clients but it can send text and Buffers, Headless Chrome is found testing the web, bots and more, Indexdb client side persistence and SSE for single direction real time communication from server to client (like web sockets only in one direction).

### Fitting the Pieces Together 🌹
What if for instance, for every 30 visitors a headless chrome 'worker' is spawned, this browsers job is to create a webrtc P2P rendering farm to share data between it's 30 owners, it will also persist state in its local Indexdb for those guests (possibly working around the whole 🍪 and laws situation? Client nor server saves the data). The peers will send signals to the headless browser we will coin the term 'Worker Browser', these signals will relate to fetching cached copies of the page, fetching UI and state changes and providing SSR. If needed the server can communicate with the Worker Browser and it's associated peers through Server Sent Events (oh know the worker died).

It would be great if requests could be chunked and torrented but I'm not sure how, is request interception a thing?

This was a highly speculative post with I'm sure a lot of holes 🕳️, so let's chat about it down in the comments.
News API in Golang
Tags: news, go, api
Published: 2019-10-13 23:39:25

---
title: News API in Golang
published: true
description: A basic and fast implementation for newsapi.org 
tags: news , golang,  api
---

This was a fast job coding weekend. While putting up a few series of news aggregation services for a new product I cross path with https://newsapi.org, is pretty slick, straight forward and above all free for developers.

They have support for several programming languages but currently I'm a heavy gopher, and it turns out that they don't have support for it.

So... I coded a fast API interface to integrate it into my projects (or use i as a small microservice) It's of course a WIP and I will continue to add features to it.

[Github REPO](https://github.com/jpramirez/go-newsapi)
Hope you like it !
Subscribe or not is the question (paid membership)
Tags: angular, ask, discuss, healthydebate
Published: 2019-10-13 22:16:35

---
title: Subscribe or not is the question (paid membership) 
published: true
description: Talking about paid membership
tags: #angular #ask #discuss #healthydebate
cover_image: https://thepracticaldev.s3.amazonaws.com/i/205ayec04i0szsr93drz.jpg
---

Well this is a question for the reading article/blog persons, I'm a person who read articles/blogs all the time kind of every morning or when I receive a notification of an interesting topic (sometimes in toilet :) ),but the thing is sometimes you need to pay to read something (exp: medium articles) and you begun asking yourself will it be worth ? will I consume this membership ? is it needed since if you want you can look for this blog and find it for free on another website or in the personal website of the blogger? but in same time you need to have it all in one place not look for it otherwise you will not read it, like for example I'm learning angular and you know it's like a sea you can't look for everything when you need it but sometimes you get notif or find interesting article about performance or how to make things ?  or how to avoid this ?or ?or ?.
So my question here is, is it worth to pay for this kind of service? and if yes do you find the number worth? and if some of you have paid membership on which website are they?
1st portfolio, which languages/framework to use
Tags: help, beginners
Published: 2019-10-13 15:23:42

Hi everybody,👋

I am very beginner as a web developper, I have studied during 5 months in an intensive training courses, different langages.
I saw all the basics (HTML/CSS/PHP/JS/JQuery...) and I choose a speciality ReactJs. I finished that course with a disappointed feeling as I feel like "don't know anything". Most of you, are gonna probably tell me that that is the imposture syndrom but I know that this is not 100%. During five months, learning things was very difficult, and I know that they are still a lot of work to do for me, to improve and get things easier.. I can't realise really if I have learnt things during that time, as it's like sometimes, my head is empty...anyway..so in order to continue and improve my skills💪 as I am back at my job which is not developper web but IT support; I decided to do a portfolio, more likely a cv as I haven't got real project done except one at school...

My question is which langages I can use to begin with...I read some post already on Dev and to me, I though it wouldn't be a bad idea to start by the begin, so It could give me more confidence...and using html, css, boostrap(easy responsive), jQuery, what do you think?🤔

Thanks for all your advices😀
vanila js project
Tags: javascript
Published: 2019-10-13 20:37:50

 Some one help me my project 

Javascript. Use `https://countriesnode.herokuapp.com/v1/countries`, `https://countriesnode.herokuapp.com/v1/countries/(:code)` endpoint for json data.

routes:
  - `/` - for displaying basic links for the other routes
  - `/countries` - will render country list from countries API

 - `/countries/(:code)` - will render a single country

  - Countries list at `/countries` must contain the list of countries and the languages spoken in that country. Both in English and native languages. It should also contain the continent it is located in.
  - `/countries/(: code)` must render the currency and area code (phone) of that country.

Preferred libraries:
  1. Vanilla/raw JavaScript routing
  2. Axios or fetch
[astuce] Fichiers langues utilisables dans vos champs personnalisés
Tags: tips, customfields, multilingual, joomla
Published: 2019-10-18 18:38:51

---
title: [astuce] Fichiers langues utilisables dans vos champs personnalisés
published: true
date: 2019-10-13 19:53:46 UTC
tags: tips,customfields,multilingual,joomla
canonical_url: 
---

Comment rendre utiliser ses champs personnalisés dans un contexte multilingue.

Ou encore comment traduire certaines parties de ses champs personnalisés.

[Lire la suite...](/traduction-champs-personnalises)
dotgrid notebooks
Tags: development, design, notes, dotgrid
Published: 2019-10-13 19:01:37

---
title: dotgrid notebooks
published: true
description: notebooks for design and development
tags: development, design, notes, dotgrid
---

When taking notes or writing/drawing ideas what sort of notebooks or apps do you use? 

I sometimes use Evernote on my phone but I generally prefer to write things down rather than type. 

My favourite notebooks are dotgrid and I buy mine from [dotgrid.co](https://www.dotgrid.co/) admittedly they aren't the cheapest but they are great quality and worth it in my opinion as I've bought numerous the past couple of years including the recently released dark version 😍. 

Anyone else use them or similar?
Gnome memory monitor extension
Tags: python, gnome, linux, ubuntu
Published: 2019-10-13 18:42:54

You can use Python to create a gnome extension that shows memory use. (Gnome is quite a memory eater). 

![top bar](https://thepracticaldev.s3.amazonaws.com/i/oceh7n7v33haeymfn0cu.png)

**See that little memory icon with the percentage use? That's what we'll build.**

If you have the memory problem with gnome, *the lazy fix for this is not to tweak gnome, but to add a more ram memory.*

To create gnome extensions in Python, you can use argos. An extension that lets you use Python to create your extension

<img src="https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F_7G6ciJUMuAk%2FTGOQMOWsMGI%2FAAAAAAAABZU%2F_K91q5OU6hw%2Fs1600%2Fyo%2Bdawg%2B31.jpg&f=1&nofb=1">

So first install the <a href="https://github.com/p-e-w/argos">argos extension</a> and enable it in gnome-tweak-tool. This extension is in the default ubuntu repo.

The extension can be refreshed, by setting the filename

    ram.3s+.py

would referesh every 3 seconds.

    ram.6s+.py

would refresh every 6 seconds.


## Enter the matrix

Now we type a few lines of Python. The module psutil can give you the current memory use. 

    #!/usr/bin/python
    import os
    import psutil

    print( str(psutil.virtual_memory()[2]) + "% | iconName=gnome-dev- memory")
    print("---")
    print("Use: " + str(psutil.virtual_memory()[2]) + "%")
    print("---")

Save it in ~/.config/argos

Make sure to

    chmod +x your_script.py

Then it will show the memory right in your top bar! :D

![top bar](https://thepracticaldev.s3.amazonaws.com/i/oceh7n7v33haeymfn0cu.png)

**Resources:**
* <a href="https://github.com/p-e-w/argos">Argos Gnome extension</a>
* <a href="https://pythonbasics.org">Learn Python programming</a>
* <a href="https://en.wikipedia.org/wiki/GNOME">About Gnome desktop</a>
A boilerplate for REST API Development with Node.js, Express, and MongoDB
Tags: javascript, node, mongodb
Published: 2019-10-13 18:09:54

Hello Everyone,

I have created a boilerplate application for API development built with Nodejs, ExpressJs, MongoDB.

Checkout: [Nodejs Expressjs MongoDB Ready-to-use API Project Structure](https://github.com/maitraysuthar/rest-api-nodejs-mongodb)

Features:

-   Basic Authentication (Register/Login with hashed password)
-   Account confirmation with 4 (Changeable) digit OTP.
-   Email helper ready just import and use.
-   JWT Tokens, make requests with a token after login with `Authorization` header with value `Bearer yourToken` where `yourToken` will be returned in Login response.
-   Pre-defined response structures with proper status codes.
-   Included CORS.
-    **Book** example with **CRUD** operations.
-   Validations added.
-   Included API collection for Postman.
-   Light-weight project.
-   Test cases with [Mocha](https://mochajs.org/) and [Chai](https://www.chaijs.com/).
-   Code coverage with [Istanbuljs (nyc)](https://istanbul.js.org/).
-   Included CI (Continuous Integration) with [Travis CI](https://travis-ci.org).
-   Linting with [Eslint](https://eslint.org/).


Any feedback suggestions are much appreciated. Pull requests are welcome.

Have a nice day!
The importance of the right partnerships
Tags: partner, partnership, ecosystem, alliance
Published: 2019-10-13 17:27:03

Recently, my company was chosen by CloudBees to be a part of their new [Technical Alliance Partner program]
(https://devops.com/cloudbees-announces-new-technical-alliance-partner-program/).  Unlike other partnerships that often do not have significant criteria or a well-defined purpose, this partnership was formed among only 27 companies to create new revenue and growth opportunities in the DevOps marketplace.

As a small dev team (~5 people), it is critical we expend energy on the right things, including partnerships.  We typically only create partnerships with the largest technology companies that have a certification process.  This allows us to demonstrate value to their business, sales and technical teams firsthand.  This is one of the best ways to gain traction within the partner organization and open up opportunities to collaborate with the them and others in their partner ecosystem.  Ultimately, it can lead to significant business and relationships we would struggle to create due to our size.

Most do not want to go it alone, nor do they have to.  Finding the right strategic partnerships can expand and grow your company in ways it might not be able to otherwise.

I'd be interested to hear how others leverage partnerships, even personal ones for career advancement.
CSS Challenges #2 | Tooltips
Tags: css, challenge, ui, easy
Published: 2019-10-13 17:18:23

The first week of this series is already over and to be honest the challenge has received more attention than I expected so I'm glad that everyone is liking it.

Here's a post outlining different solutions that people came up with for implementing breadcrumbs, combined with some talk about how the html side should look like: 

{% link https://dev.to/mikister2012/css-challenges-results-1-breadcrumbs-bi3 %}

## What is this

If you're new, hello there! It's good that you want to improve your skills with css. This is a series aimed at helping you do just that by challenging you to recreate a suggested feature or element. I'll only be posting challenges that will be of use when building stuff. So no code golf or obscure stuff.

This is a weekly challenge, so every Monday there will be a new thing to build. Also every Monday I'll summarise all the submissions to last week's challenge.

Post links to your solutions (codepens, jsfiddles, whatever your prefer) in the comments if you solved the challenge.


## Tooltips

The topic this time is tooltips, used to display additional info about an element when it's being hovered over. 

### Requirements

* Tooltips should appear on `:hover` and `:focus`

## Read More

* [MDN - attr()](https://developer.mozilla.org/en-US/docs/Web/CSS/attr)
* [Inclusive Components - Tooltips & Toggletips](https://inclusive-components.design/tooltips-toggletips/)
<read more, include something about attr()>

----

That it for this week, have fun.
Dear CFML (ColdFusion) Developers
Tags: cfml, coldfusion, lucee, hiring
Published: 2019-10-13 17:17:11

---
title: Dear CFML (ColdFusion) Developers
published: true
description: Looking for a CFML (ColdFusion) job? Please read this.
tags: cfml, coldfusion, lucee, hiring
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wo3186nuh3vretjtrugh.jpeg)

Recently at work we were looking to bring on a new [CFML (ColdFusion)](https://en.wikipedia.org/wiki/ColdFusion_Markup_Language) developer and I was in charge of the hiring. I did a lot of first interviews and discovered there seem to be three types of CFML developers:

### 1) Stuck in the Past

If you are still listing Fusebox on your resume in 2019 you need to fix that.  I know some people are restricted at work in what they can use but download [ColdBox](https://www.coldbox.org/) or [FW/1](http://framework-one.github.io/) and build a small app with it.  Figure out how MVC really works. Learn something new even if you can't use it at work.

### 2) Stuck in the Present

OK. You know ColdBox, FW/1, MVC and all the latest and greatest CFML.  What *else* do you know?  I see a lot of developers who have no experience outside CFML.  Go download Python, Go, Node... *something* and try it out.  Try to recreate small snippets of your CFML code in these different languages. What's better? What's worse?  

### 3) Into the Future

The third type of CFML develop I see knows ColdBox or FW/1.  They have some experience in other languages.  They have a [Github](https://github.com/) account where I can see some of their experiments and what they have worked on recently.  They may [blog](https://www.coldfusionbloggers.org/), contribute here to [dev.to](https://dev.to/) and participate in the community on [Slack](https://cfml.slack.com/?redir=%2Fmessages) and local meetups. 

I don't think this takes a great effort either.  Hang out on Slack occasionally.  Once a month or so for a meeting, and a few hours here and there in the evenings working on something new.

As a hiring manager I'm looking for people in the third group who are improving themselves, learning new things and maybe contributing back some of that knowledge to the community.
Simple Tic Tac Toe App
Tags: react, showdev, 100daysofcode, github
Published: 2019-10-13 17:16:41

I publicly committed to the 100 Day of Code challenge today.

{% twitter 1183341140562591744 %}

After geting a bit familiar with react, I used create-react-app to scaffold this simple game. It was interesting making it.

You can view it here: https://mikister.github.io/tic-tac-toe-react-100daysofcode/

And here's the code: https://github.com/mikister/tic-tac-toe-react-100daysofcode

Interestingly the most problematic part was adding the app to github pages. Here a github gist that helped me with this:

{% gist https://gist.github.com/cobyism/4730490 %}
We all are Codengers!! 
Tags: coding, story, programmer, computerscience
Published: 2019-10-13 17:16:38

---
title: We all are Codengers!! 
published: true
description: A story of Codengers
tags: #coding #story #programmer #computerScience  
---

<img src="https://thepracticaldev.s3.amazonaws.com/i/ymyxjxjc5jgf6rz03p20.jpeg">
Hello, everyone, nothing has been written on this website for a long time. The reason behind this was Codengers. Now you are thinking about "What is Codengers?"
Then here about the Codengers...
We are college students who running a codding community for all college. So Codengers is the name of our community. It's about 6 months ago our community also become a part of the Coderdojo Community which comes under the Raspberry Pi Foundation, Ireland, Dublin. (Search on Google "Allahabad@Codengers")
As a programmer, we were trying to do something which will be beneficial for others also i.e. students who are not part of the community at our college. A simply says other college students, studying in the Computer Science branch. But the question was "How?". So we started figuring out what are the basic problems students facing during his study. The most basic one was students of tier 3 colleges do not know about websites from where they can get quality of resources if they know about any good website then they have to pay a huge amount to complete their certification course which they can't afford. Even most of our friends we found they generally do not about alternatives to paid software. 
So we started searching for the solution on the internet and start making a list of websites from where everyone can get paid courses for free and not only courses software for free.
After making the list we have to wait for 2-3 months to collect money so we can run a website where you will get everything for free. 
Now our website is active for the last 15-20 days. Here some features/materials of our website: 
 <ul>
<li>Paid Courses of Websites like Udacity, Udemy,Lynda etc. <b>(Torrent File)</b></li>
<li>Enroll your self directly in online Udemy Certification Courses</li>
<li>E-books</li>
<li>Best Alternative of paid softwares and Cracked Softwares also</li>
<li>Interview Preparation Kit for companies like Google</li>
<li>Daily Practice Problem</li>
<li>Selected Articles/Blog </li>
<li>Paid PC Games</li>
</ul>
and much more... 

Currently, we have a 500+ GB programming language courses, More than 1 GB of E-books, and the list goes on...

To take a look please visit at <a href="https://codengers.org"> Codengers </a>.
If you want to support us please share it with others also.

Hope you like the content. Have any question, please feel free to ask and we are always looking forward to suggestions.

<i>Note: This website is just a huge collection of links we do not promote or support piracy. We just tried to make the collection of top high rated content from where anyone can get for free.</i>