teleren/devto huggingface dataset:
The path to CKA, and some tips.
Tags: cka, kubernetes, preparecka
Published: 2020-04-12 10:26:34

Yes, I passed the CKA exam.👍
![](https://i.imgur.com/8w9EA5v.png)


Since I have already been working with kubernetes for yeas. The way I prepare CKA and the schedule I made might not suit for the beginners. But, still, some of the tips and resources can be shared.

## Resources

1. [Certified Kubernetes Administrator (CKA) with Practice Tests](https://www.udemy.com/course/certified-kubernetes-administrator-with-practice-tests/)

I highly recommend this course. It contains the sufficient lecture for the CKA test. Most of all, the hands-on labs have good coverage for the skill you need for the CKA test.

2. Tasks tab in official k8s doc.
There are lots of hand-on task in the task tab of official document. And some of them is important for the test.

## Tips and advice

1. A least know how to use tmux!
Your test environment might have a chance to be **extremely slow**.
There was one question that took me a lot of time to wait for the command execution to be finished.
At the first attempt, I wait for about 5 mins. But the command still stuck there. I have no choice but to kill that command and skip to another questions. When I finished the rest of all question, I still have about 15~20 minutes. So I typed the same correct command again and wait for the execution to be finished. But in the end, those 15~20 minutes is not enough.
If I know the basic usage of tmux, I can keep that command being running, in a meanwhile, I can double check my answers.

2. Get familiar with `kubectl run`
Get familiar with this command, it can generate yaml templates for pods, depolyments. And save you lots of time.

3. [Tips for The Certified Kubernetes Exams: CKA and CKAD in 2020](https://dev.to/scriptautomate/tips-for-the-certified-kubernetes-exams-cka-and-ckad-49mn)
Special thanks for Derek who leaved a tips in my first article about preparing CKA.
Simplify Your React Native Style with OsmiCSX
Tags: reactnative, javascript, framework
Published: 2020-04-12 09:56:56

---
title: Simplify Your React Native Style with OsmiCSX
published: true
description: Simplify Your React Native Style with OsmiCSX
tags: #reactnative #javascript #framework
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7ixy4klzy0jpbfc7zv5f.jpg
---
Styling on react native is still quite long if we still use the full jsx object as is normal in react native. What if there is a framework for react native styling easily?

OsmiCSX is here to make styling in React Native even simpler. We no longer need to create objects for the style component. Just call style namespaces and boom, your components will look good.

here's the example of making reusable button component with OsmiCSX style
```
import React from 'react
import { TouchableOpacity, Text } from 'react-native'
import { apply } from 'osmicsx'

const button = props => {
  const { ...restProps } = props

  return (
    <TouchableOpacity
    {...restProps}
    style={apply(
      "bg-blue-500",
      "p-3",
      "px-5",
      "rounded-md"
    )}>
      <Text style={apply("text-white", "text-center", "text-sm")}>{restProps.title}</Text>
    </TouchableOpacity>
  )
}

export default button
```

or you prefer to split the styling code to another file, you also can use OsmiCSX to simplify it!
```
import { connect } from '../lib/OsmiConfig' // your osmi config path

export default connect({
  container: [
    "bg-blue-500",
    "p-2",
    "pl-5",
    "pr-5",
    "rounded"
  ],
  text: [
    "text-white",
    "text-base",
    "font-bold",
    "text-center"
  ]
})
```

Introducing OsmiCSX v0.4.0 🎉🎉🎉
in this version, we're more simplify the ability to styling in React Native. For inline style, you don't need to use an array anymore on apply() method helper.

What is OsmiCSX ?
OsmiCSX is a utility React Native style framework for rapidly building custom user interfaces. We adopted the Tailwind concept and implement it for styling in React Native. OsmiCSX designed for customizing UI in React Native and makes a reusable component with the style as you want with very simple code.

Why OsmiCSX ?
Most Style/UI framework in React Native only focused on the UI Component and not really customizable. They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

OsmiCSX is different.

Instead of opinionated predesigned components, OsmiCSX provides a low-level utility style that lets you build completely custom designs.

GitHub => github.com/OsmiCSX/osmicsx
Docs => osmicsx.github.io/docs
Adding your dev.to posts to your website
Tags: nuxt, vue, blog
Published: 2020-04-12 09:39:39

I previously had created [my blog on my website](https://debbie.codes/blog) with Netlify CMS which works great but I found myself adding posts to Medium and some to my own website. It is always good to have posts on your own site to gain more traffic etc but not many people know about my site so I felt it wasn't going to help many people. Medium makes people pay for some content so it's not really ideal. I needed a way to write posts so they could reach many people but also show up on my site. Dev.to to the rescue.

In September 2019 Dev.to opened their public API and I saw an article on how to add it and kept thinking I must get round to doing it but never did. 

Then last week Nuxt.js published a great blog post on [how to build a dev.to clone with the new Nuxt fetch](https://nuxtjs.org/blog/build-dev-to-clone-with-nuxt-new-fetch). So I decided it was time to read that post and implement the code. 

With the latest version of Nuxt.js you can now use the fetch hook in any of your Vue components which is just amazing.

If you read through [the post](https://nuxtjs.org/blog/build-dev-to-clone-with-nuxt-new-fetch) and check the [source code](https://github.com/bdrtsky/nuxt-dev-to-clone) it will give you an idea of how everything works and then really all you have to do is modify the API call to so that it retrieves posts from your username only. Really it is as simple as that. 

```js
https://dev.to/api/articles?username=debs_obrien
```

I encourage you to give it a try. Have fun and let me know how you get on.

![My Blog with dev.to articles](https://res.cloudinary.com/debsobrien/image/upload/v1586683741/debbie.codes/blog/blog_tdl2ta.png)
Can I use Google APIs also?
Tags: twiliohackathon, discuss
Published: 2020-04-12 09:31:28

I was going through terms and conditions for the hackathon and I noticed this:
"Submissions must be testable without additional charges outside of Twilio charges".
I might need to use some such paid API for my project like Google Maps, Geocode, and Geolocation APIs. Can I still participate?
CSS architecture?
Tags: programming, css, webdev
Published: 2020-04-12 11:04:32

---
title: CSS architecture?
published: true
date: 2020-04-12 09:30:00 UTC
tags: programming,css,webdev
canonical_url: https://stereobooster.com/posts/css-architecture/
---

Have you heard the term “CSS architecture”? You can search the internet for it, for example, there is the [article by Philip Walton](https://philipwalton.com/articles/css-architecture/). I understand it as a set of best practices to make CSS scalable, e.g. some rules which allow you to write a lot of CSS before it becomes unmaintainable and collapses due to incidental complexity.

Let’s step back for a moment. What is CSS? CSS is a declarative language for layout and painting engine. Right?

## Declarative languages

There are a lot of declarative languages, for example, SQL, YAML (as config), HTML (some people would argue this is not a programming language, but markup).

Have you heard about SQL architecture? There are database architects, but they not bothered with how to write big SQL queries, they rather working on the database itself, so it’s not the same.

## Layout engines

There are a lot of layout engines, for example, [flutter](https://youtu.be/UUfXWzp0-DU), [subformapp](https://www.deconstructconf.com/2017/kevin-lynagh-choosing-features), [yoga](https://yogalayout.com/), [layoutkit](http://layoutkit.org/), [Render](https://github.com/alexdrone/Render) (see [#layout-engine](https://github.com/topics/layout-engine)).

It seems they don’t have dedicated practices on how to write a lot of layout code. Maybe they don’t have the same requirements, maybe layout and visual presentation in their case can’t be separated from components.

## 🤔 Wondering

Did we, by any chance, gone too far with this CSS thing? Maybe it brings more incidental complexity in the long run than it solves essential complexity?
What's Ecma & TC39 ?!
Tags: javascript, ecmascript
Published: 2020-04-12 09:24:04

---
title: What's Ecma & TC39 ?!
published: true
description: Have you ever wondered who is responsible for adding to the ECMAScript language specification?!
tags: JavaScript, ECMAScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/x1z3720a2y72pcoauejk.png
---
Hey devs from all over the world 😊

I have been working with JavaScript for more than 2 years and I have never during those 2 years looked up ECMA or TC39. Well, I did now - about time huh! -  and I am here to tell you guys all about them.

First off, you need to know what ECMA is. it stands for the European Computer Manufacturers Association. - wow, that's a mouthful - It's an organization that standardizes information and communication systems. They work on lots of standards. ECMAScript is one of them and its called `standard ecma-262`.

TC39 is the committee that works on `ecma-262` they create, accept and reject new proposals to the ECMAScript language specification. They are composed of different members 🤓 representing big corporations like browser vendors.

Enough with the boring stuff, I got a fun fact for you! 👻 Here is the [ECMAScript language specification](https://tc39.es/ecma262/), It's a huge document and it doesn't have the term "JavaScript" in it. 😱 That's because Oracle owns the trademark for "JavaScript". So they just called it ECMAScript instead! 

That's where the term ECMAScript comes from, "legal rights". 🤯

It's hard for me to say this. Not so long ago, I genuinely thought that ECMAScript is the new hotshot JS because JS was getting old or something. - whaat!! 😮 -

Let's just set one thing straight! ECMAScript is just the term everyone uses for JS when talking about language specification. That's all it is! Don't get confused because of "legal rights".

Anyway, Let's dive into what TC39 do during their meeting. 🏊‍♂️

They meet every 2 months to discuss different proposals. Each proposal needs to pass through 5 stages to be added to the language specification. From S0 to S4. More about those stages [here](https://tc39.es/process-document/). What's important here is that S4 means that the proposal is finished and ready to be included in the next ECMAScript version.

They operate by consensus. That means that decisions must have a large "agree" and no one is strongly "disagreeing". Also, Every proposal needs a "Champion". He is the one responsible for working out the details of the proposal and presenting it to the committee. 

They track proposals on this GitHub [repo](https://github.com/tc39/proposals).

As always,
**Happy coding 🔥🔥**
**“كود بسعادة”**
Crystal Blast 2.0
Tags: gamedev, indiedev, indiegamedev, unity3d
Published: 2020-04-12 09:13:30

---
title: Crystal Blast 2.0
published: true
description: 
tags: #gamedev #indiedev #indiegamedev #unity
---

Hey.


Finally, we published our changes as [Crystal Blast 2.0](https://crystalblast.page.link/install)

- 37 new backgrounds
- new gameplay UI
- better gameplay balance
- new crystal types

It was a pretty hard journey for us this year. Free time for us meant nights of work.

Today we had the first purchase and got the new power to polish the game:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/apgg9a7qi1aihzlrjgxs.png)

Recently our balcony games became the company of friends who definitely works on the balcony because of quarantine. Hope everything will be resolved and everyone will enjoy the summer.


[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/og7bhvbep8qcasg6u4f2.png)](https://crystalblast.page.link/install)
Netlify Hooks
Tags: nuxt, netlify, vue, hasura
Published: 2020-04-12 08:55:55

For static sites we want the site to rebuild depending on a certain actions such as saving data in a database. In order to do this we need to first setup a webhook. With Netlify this is is really easy. Once your site is setup and running on Netlify just go to the Build and deploy section of your Netlify account under the settings tab and then scroll to "Build Hooks".

Click on the button "Add build hook" and give  your hook a name. Choose the branch you would like it to use, master for production or dev for testing for example. Netlify then generates a Netlify build hook URL. This is all you need as Netlify will take care of the rest by triggering a build and deployment of your site when this hook is callled. 

![Netlify Build Hooks](/img/netlify.png)

We now need to trigger this hook when we change our content in our api. With Hasura as our backend it is really easy to set up this trigger. Once your api has been created and you have a table you just need to go to the Events tab and click on create. Give your event a name. Select which table you want the trigger to apply to and then choose what operations, insert, update or delete. Now we just have to paste in our URL we got from our Netlfiy build hook and press "create event trigger". 

![Hasura Event triggers](/img/hasura.png)

And it is as simple as that. Now when we make content changes in Hasura, on the table we created the trigger on, it will trigger the Netlify build hook and our site will be built and deployed automatically. 

And we can see it worked not just by checking the content on our site but also in our Netlfiy admin panel under deploys where we can see what triggered each deploy.
GraphQL and Nuxt
Tags: nuxt, vue, graphql
Published: 2020-04-12 08:53:42

We need to use the graphql-tag to be able to add our query so first we import this

```javascript
import gql from 'graphql-tag'
```

We can then make our query listing all the data that we want to receive and ordering by what we prefer. Here we just added an export const called workshop and make it equal to our gql tag which has a query called workshops and that queries the workshops table. 

```
export const workshops = gql`
  query workshops {
    workshops(order_by: { date: desc }) {
      date
      title
      year
    }
  }
`
```

Then we need to use apollo so that we can get our data to our template. Don't forget to first install '@nuxtjs/apollo', and then add to the modules of our next config.

```
apollo: {
    $loadingKey: 'loading',
    workshops: {
      query: workshops,
    },
  },
```

And now we can do a v-for over all our data and print the title for example

```
<div v-for="(workshop, index) in workshops" :key="index" class="flex">
  <p>{{workshop.title}}</p>
</div>  
```
Add debug logger when useReducer in React
Tags: react, hook, logger, usereducer
Published: 2020-04-12 08:47:37

---
title: Add debug logger when useReducer in React
published: true
description: Finding logger in useReducer
cover_image: https://miro.medium.com/max/6890/1*LcdX_-hpJ29fehT4mFLBSQ.png
tags: react, hook, logger, useReducer
---

If you have come with Redux background and play around with React useReducer. You are properly missing some useful middleware like logger. This is especially significant when we try to debug in very complicated application. And I found this handy package:
{% github jefflombard/use-reducer-logger %}

This logger is easy to embed on reducer and super lightweight because it *__console.log__* without any extra dependency. It good enough to uncover the black box but there are few enhancements could be added on top of it:

- Fix the issue about __useCallback__ in pure function
```shell
Failed to compile.

./src/Context.js
  Line 28:29:  React Hook "useCallback" is called in function "logger" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
```
  This could be resolved by capitalise the first character of our logger function and declares as React function.
```javascript
const Logger = (reducer) => {
  // logger implementation
}
```

 - Use [__Console.Group__](https://developer.mozilla.org/en-US/docs/Web/API/Console/group) to divide every single action, previous state and next state in reducer and looks more nice and clean to me.
![Group-loggings](https://dev-to-uploads.s3.amazonaws.com/i/kg3mxwacwodi5hf2higs.png)

Thanks for reading :)
Typescript and C# LINQ
Published: 2020-04-12 07:55:44

---
LINQ is invented from NET framework 3.5 and it is an great library which help developer reduces the amount of code to do short query syntax. By using query syntax, you can perform filtering, ordering, and grouping operations on data sources with a minimum of code. You use the same basic query expression patterns to query and transform data in SQL databases, ADO .NET Datasets, XML documents and streams, and .NET collections.
Typescript also have the same feature with LINQ but it is different about syntax

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a0l2cq9a42rj4qd4yw4k.png)
Creating useEffect in nodejs
Tags: javascript, node, hooks
Published: 2020-04-12 07:32:38

---
title: Creating useEffect in nodejs
published: true
description: 
tags: javascript, nodejs, hooks
---

React hooks is one of the best parts that I like about react. It would be nice to have something like that for node. So I came up with a really simple implementation of useEffect in node.

```javascript
const useEffect = (callback, dependencies) => {
  // Calling it first time since there are no dependency
  if (dependencies === undefined) {
    return callback();
  }

  // Creating proxy for setters
  return new Proxy(dependencies, {
    set: function (target, key, value) {
      Reflect.set(target, key, value);
      callback();
    },
  });
};

module.exports = useEffect;
```
you use it as follows
```javascript
const readline = require('readline');
const useEffect = require('./useEffect');

// This has to be object because you can't create proxy of primitive types
const user = { input: '' };

let proxiedUser = useEffect(() => {
  if (proxiedUser.input && parseInt(proxiedUser.input, 10) % 2 === 0) {
    console.log(`${proxiedUser.input} is even`);
  } else {
    console.log(`${proxiedUser.input} is odd`);
  }
}, user);

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.question('Enter number? ', (answer) => {
  proxiedUser.input = answer;
  rl.close();
});

```

It essentially creates proxy of dependency and calls your callback when the dependency changes. This implementation could also be extended to handle multiple dependencies too.

On the downside with this implementation you can only use array or objects as dependencies but not simple primitives like numbers directly (you can use it by assign it as property of object like above). Since you can't  create proxy of simple primitives like numbers yet.

Here is corresponding [repo](https://github.com/Rafi993/node-use-effect) for the above source code.
freeCodeCamp Certification Experience And Guide
Tags: webdev, productivity, html, css
Published: 2020-04-12 07:17:06

Hey Folks,
I hope you all are fine and spending your time in learning new skills.

Today I want to share my experience of completing the first certification on freeCodeCamp, *for my friends who don't know about freeCodeCamp, can visit this site: [https://www.freecodecamp.org/news/about/](https://www.freecodecamp.org/news/about/)*.

*In short, I tell you that freeCodeCamp is one of the lead tech organization which helps peoples to learn to code and offering 6 different certifications and the beauty of them is that they offer all the stuff free of cost (its a non-profit organization).*

**You can check out the list of freeCodeCamp's certifications here : [https://www.freecodecamp.org](https://www.freecodecamp.org).**


For the absolute beginners, freeCodeCamp offers the first certification which is **"Responsive Web Design".**

*This certification is based on 300 hours of learning and building 5 projects,*

The learning material in this certification consists of:
1. HTML5
2. CSS3 (flexbox, grid, media queries)

And after learning all of the stuff you have to build 5 simple and easy projects as per their instructions.

**Note:** If you already know these technologies, you don't need to spend your time in learning, you just have to build and submit your projects and get the certificate.

##My Experience:##
If I told you about my personal experience, it was pretty good, I also followed their learning material, just to know more, I already had a good command on these technologies, but just to explore I put my time on learning as well, and I build the projects, I feel really good and observe that getting thigs done gives you a feeling of fulfillment and achievement.

##Worth of These Certificates:##
*"There is nothing more worthy than a human being,"* certificates just show your dedication and hard work that how much you are honest with your profession, and when you complete the certification you also have projects on your belt, which helps you to represent your self in front of anyone.

##Where Is My Certificate ?##

Click Here: [My Certificate](https://www.freecodecamp.org/certification/shahroz_ahmd/responsive-web-design).

That's it for today guys, If you have any queries, just ask me in comments.

If you want to learn more about web development, just follow my Instagram account here [@the_webdevelopers](https://www.instagram.com/the_webdevelopers/)

Thank You