teleren/devto huggingface dataset:
Day 288 : Shine So Brite
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-14 22:04:58

_liner notes_:
- Professional : Pretty good day. Helped out a coworker with a React Native issue they were having. Got that figured out. Spent the rest of the day working on my blog post. Oh and all my documentation updates from last night were approved and merged. Good thing because it looks like the new version will be coming out soon. Felt good to mark those tickets done.

- Personal : Last night, after work, I headed to Publix. They have $5 sushi. I'm not a food expert, but I like them. Also got some other items I needed like milk and salad. Stayed up to make sure I got my updates to the documentation pushed to the repository. Could really do much because my battery was super low.

![Huge stone mountains with snow tops with a valley in the middle with orange and green trees in Yosemite, CA, United States](https://dev-to-uploads.s3.amazonaws.com/i/sltuld0jm5y4fxnhyahl.jpg)

What a change from yesterday. The sun shine so bright that you wouldn't have believed that it was super cloudy the day before. My battery went from 12% in the morning to 91% by early evening. I did have both the roof mounted and briefcase solar panels charging. Good to know that I can get to a good level within a day. Definitely won't be running the induction stove that long again. haha Going to continue working on my blog post, want to get a draft done tonight and listen to tracks for this week's radio show.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube W_ybxoKE8QM %}
Modern JavaScript: Preparation for React Dev (part 2) 
Tags: javascript, react, functional, html
Published: 2021-01-14 21:49:09

Continuing examination of JavaScript concepts that will be needed as we begin to learn React.  [Part 1 of this article](https://dev.to/raddevus/modern-javascript-preparation-for-react-dev-part-1-6k6).

The inspiration for these items comes from chapter to of the fantastic book, [Learning React (O'Reilly publishers) by Alex Banks & Eve Porcello](https://amzn.to/2XEfEpa)

## Array Method : Map
Keep the following in mind as we begin to delve in to some functional aspects of JavaScript.

Arrays in JavaScript have a method named map().

Keep the following details about he map() method in mind:
* accepts one parameter which is  function that returns a single value or object
* the map() method returns an array of items
* When you call map() on the array (passing in your function) it will call the function once for each element in the array that it is running on. 
```JavaScript
let allItems = ['a','b','c'];
// fakeFunc will run 3 times, once for each element in allItems
allItems.map(fakeFunc);  
```
* Whatever value your function returns will be added to the final array that is returned by map().
* It is possible for your passed in function to take 0 to many parameters, but it may only return on value (or object).  Very often your method will take one parameter.

## Long Version of map() : No Arrow Function
First, let's take a look at the long version of the map() function, where we use a function definition (aka declaration) instead of an arrow* function.

*We'll go over arrow functions in part 3 of this article series.  After we look at the longer method they will make more sense.

```JavaScript
let allItems = ['a','b','c'];
function convertToByte(inChar){
   return inChar.charCodeAt(inChar);
}
allItems.map(convertToByte);
```
If you copy/paste and run that code in your Web Dev console (F12 in most browsers) you will see that an array is returned with the charCode values for each character.  

The last line in the following snapshot is the array that is returned from map().

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

### Add Emoji Character
Just for fun, let's try it again with an emoji character in the array so you can see the value.

**NOTE**: I named the `allItems` array as `allItems2`, just so I wouldn't get an error message about `allItems` being redeclared.

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

This `map()` method is very cool because if we did this with imperative code (we write the algorithm) instead of the functional declarative way, we would have to write a for loop to do the work to iterate over each item in the array. 
`map()` does all that work for us.  Very cool.

## Arrow Function Makes It Cleaner
We can make it a bit cleaner with an arrow function though.   

We will delve into arrow functions in part 3 of this series.  See you next time.
Measure execution time of function in javascript
Published: 2021-01-14 21:37:51

As we thrive to build performant and scalable applications, profiling and measuring execution time becomes an important part of development.
Often, we need to locate the piece of code that is taking most of the time in the execution stack.

Though there are different ways to measure execution time in javascript, I struggled to find something customizable.
Here's an attempt to create a simple yet customizable function that measures the execution time of given functions.

{% gist https://gist.github.com/ThisisAbhilash/f1fdc7ec0ad1e94c1133769ef383d278 %}
Fresh Start
Tags: devjournal, 2021, fresh, start
Published: 2021-01-14 21:24:44

**2020 has been such a tough year**. 

For me. 
For everyone.

I had so many dreams, plans, and things I wanted to do. 
Something went well, something didn't.

We can't talk about the cause might have been the pandemic or other external causes but I am of the opinion that when you fail, it is all on you. No excuses accepted.

From failure, you must learn and do better the next time.
2021 is here and I am ready to make this one of the best years in my life.

I wish the same to you and everyone who has been so supportive of me over the years!
If I still create content, it is because of you! <3 

I am back and this is a fresh start! 

{% youtube LjhcM9NOQ2o %}
   
   
   
   


Let's stay connected online and looking forward to talking with you!

- **Youtube:** [Domenico Solazzo's Channel](http://bit.ly/YT_DOMENICOSOLAZZO)
- **Instagram**: [domenicosolazzo](https://www.instagram.com/domenicosolazzo/)
- **Linkedin**: [solazzo](https://www.linkedin.com/in/solazzo/)
- **Medium**: [domenicosolazzo](https://medium.com/@domenicosolazzo)
- **Facebook**: [domenicosolazzo](https://www.facebook.com/domenicosolazzo.labs/)
- **Twitter**: [domenicosolazzo](https://twitter.com/domenicosolazzo)
- **Snapchat**: [domenicosolazzo](https://twitter.com/domenicosolazzo)
- **TikTok**: [https://www.tiktok.com/@domenicosolazzo](https://www.tiktok.com/@domenicosolazzo)
- **Github**: [domenicosolazzo](https://github.com/domenicosolazzo)
- **Website**: [https://www.domenicosolazzo.com](https://www.domenicosolazzo.com)
- **DevTo**: [https://dev.to/domenicosolazzo](https://dev.to/domenicosolazzo)
- **Hashnode**: [https://hashnode.com/@domenicosolazzo](https://hashnode.com/@domenicosolazzo)
Easy way to Parcelize on Kotlin
Tags: android, kotlin, parcelize
Published: 2021-01-14 21:20:26

On Android, `Parcelable` is an interface that a class can implement to be passed within an Intent from an Activity to another one, this way, transporting data from one Activity to another one.

To achieve this your class must implement the `Parcelable` and override some methods.

```kotlin
data class Product(
    val id: String,
    val title: String,
    val description: String,
) : Parcelable {
    override fun describeContents(): Int {
        TODO("Not yet implemented")
    }

    override fun writeToParcel(dest: Parcel?, flags: Int) {
        TODO("Not yet implemented")
    }
}
```
Once the class get bigger, you will need to recheck those methods and adapt what is needed to make it continue working.

Thanks to Kotlin, there is an easy way to do this without the needed to override those methods. We just need to use the `@Parcelize` annotation on the class like this:

```kotlin
@Parcelize
data class Product(
    val id: String,
    val title: String,
    val description: String,
) : Parcelable
```

This annotation Instructs the Kotlin compiler to generate the `writeToParcel()`, and `describeContents()` methods, as well as a `CREATOR` factory class **automatically**.

However, to use this annotation you must use the `kotlin-parcelize` plugin by adding this to your `build.gradle` file:

```gradle
plugins {
    ...
    id 'kotlin-parcelize'
}
```

This is pretty much it to do to start using the `@Parcelize` on Android!
Understanding Rendering in Web Apps: CSR
Tags: html, javascript, webdev, csr
Published: 2021-01-14 21:17:12

## Client-Side Rendering
This category includes approaches that make network calls for data and construct HTML all in the browser (AJAX). This is typically done in Single Page Applications ([SPA](https://en.wikipedia.org/wiki/Single-page_application)).

### Vanilla AJAX
Asynchronous Javascript and XML (AJAX) is a web programming technique whereby the DOM is modified to present data from a network request issued by javascript without refreshing the page.
The following code snippet is an example of such.

```javascript
<div id="myDiv"></div>

<script>
   //async function to use await syntax on promises
   async function getAndDisplayUser(){
      const div = document.querySelector('#myDiv');
      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
      const user = await response.json();
      div.innherHTML = `<p> name: ${user.name} phone: ${user.phone} </p>`;//data from URL is 'rendered' to the page using JS
   }

   getAndDisplayUser();
</script>

``` 
### AJAX in Client-Side Frameworks
Client-side frameworks typically support performing network requests whether by APIs provided by the framework, utilizing other libraries or by using the standard fetch function. Combining that with the framework's templating syntax would allow you to perform AJAX.

Examples
* Angular - [HTTP Client module](https://angular.io/api/common/http/HttpClientModule)
* Vue - Fetch, [Vue Axios](https://www.npmjs.com/package/vue-axios) 
* React - Fetch, [React Axios](https://www.npmjs.com/package/vue-axios)

The following is an example of AJAX (CSR) using react axios
```javascript
// Post a request for a user with a given ID
render() {
  return (
    <div>
      <Get url="/api/user" params={{id: "12345"}}>
        {(error, response, isLoading, makeRequest, axios) => {
          if(error) {
            return (<div>Something bad happened: {error.message} <button onClick={() => makeRequest({ params: { reload: true } })}>Retry</button></div>)
          }
          else if(isLoading) {
            return (<div>Loading...</div>)
          }
          else if(response !== null) {
            return (<div>{response.data.message} <button onClick={() => makeRequest({ params: { refresh: true } })}>Refresh</button></div>)
          }
          return (<div>Default message before request is made.</div>)
        }}
      </Get>
    </div>
  )
}
```
From my research, it appears that AJAX is the only way to do Client Side Rendering so you may see these terms be used interchangeably.

In the next post, we shall take a look at how these approaches play with the Single Page-Application, Multi-Page Application architectures.
jQuery trigger()
Published: 2021-01-14 21:15:50

Hi dev!🙋‍♂️

During my work i used an event looks very interessant:  is a trigger() event.

The trigger() method triggers the specified event more times:
🧑‍💻

```html
<button type="button" class="click"> CLICK </button>
        
<div class="container">
</div>
```

```javascript
$('.button').click(function(){
    $(document).trigger('nameOfMyTriggerEvent')
})

$(document).on('nameOfMyTriggerEvent', function(){
    $('.container').hide();
})

```

It's easy and very usefull if you need to trigger an event more times.

Hope it helpfully! 
✌️
This was crated via the API
Tags: gitlab
Published: 2021-01-14 20:50:29

---
title: This was crated via the API
published: true
description: How I used GitLab 
tags: gitlab
cover_image: https://i.ibb.co/jwrQGdP/arseny-togulev-MECKPo-KJYj-M-unsplash.jpg
---
Back in November, [Nick Maris](https://dev.to/nickmaris) wrote an article about [posting articles in Dev.to from GitLab](https://dev.to/nickmaris/post-dev-to-articles-from-gitlab-1op1).

It was something I instantly wanted to try for a couple of reasons:
1. I love GitLab, and want to use it for more and more things
1. I write stuff fairly regularly, and it would give me a way of cross-posting easily.

Now that I have outlined [my goals for 2021](https://dev.to/_garybell/my-goals-for-2021-1740) which include blogging twice per week, this seemed like something I needed to implement. Without it, I'd simply be copying and pasting content and checking formatting. Massively eating into my time.

So I finally did it. I followed the instructions on Nick's post, and set up a couple of articles to test. This is one of them, the other will come tomorrow, and will be my first cross post. Tomorrow's is a bit of a cheat, as I'd already copied the content into Dev.to, and then the content from Dev.to to the `.md` file for the article, but it is (at the time of writing) a draft to be published.

If you're seeing this, then you too can know that it's possible to do. If you use source control for creating your articles, and use `.md` files anyway, then this could help you get your content live at a time that suits. You'll be able to schedule content to get published even when you are on holiday, or otherwise unable to get online.

---
Photo by [Arseny Togulev](https://unsplash.com/@tetrakiss?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/robot?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
My learning experience of CWoD Stage 1 .
Tags: computerscience, career, showdev
Published: 2021-01-14 20:47:46

Just uploaded my experience in Medium article ,do checkout [here](https://subhdec99.medium.com/crio-winter-of-doing-6a9652d49576).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sgl6swodkhf4aj5ju9au.png)
Understanding Rendering in Web Apps: SSR
Tags: ssr, html, javascript, webdev
Published: 2021-01-14 20:39:34

Server-Side Rendering approaches typically generate markup on every request to the server. They return dynamic HTML content 'On the fly'.

# Server-side scripts/languages
Server-side scripting languages provide syntax that is interpreted by the view engine of an [application server](https://en.wikipedia.org/wiki/Application_server) to dynamically write HTML and send it in an HTTP response.
Examples:

* Zend Engine - [PHP](https://www.php.net/)
* .NET - [ASP](https://en.wikipedia.org/wiki/Active_Server_Pages)
* Java - [JSP](https://en.wikipedia.org/wiki/Jakarta_Server_Pages)

The following is the example of a PHP script.
![](https://www.studytonight.com/php/images/first-php-example.png)

## Template Engines
For application server runtimes such as; Nodejs, Python, Java, PHP etc. there are libraries called template engines that can provide templating syntax.

Examples:

* Nodejs - [Handlebars](https://handlebarsjs.com/), [Pug](https://pugjs.org/api/getting-started.html)
* Python - [Jinja](https://jinja.palletsprojects.com/en/2.11.x/)
* Java - [Thymeleaf](https://www.thymeleaf.org/)
* PHP - [Smarty](https://www.smarty.net/), [Blade](https://laravel.com/docs/8.x/blade)

The following is an example of a handlebars template:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wq4ep6ew3b2i4n5j5w6j.png)

### Isomorphic/Universal JS
These approaches (also called meta-framework) allow you to render the first page of a [client-side framework](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) app on the server then deliver it to the client. This would allow the browser to show page content without needing to execute any javascript. The page is first only visible but then becomes interactable (or [hydrated](https://en.wikipedia.org/wiki/Hydration_(web_development))) when the client-side framework's javascript has finished loaded on the browser. Isomorphic frameworks run on nodejs on the server. 

Examples of these are:
* Angular - [Angular Universal] (https://angular.io/guide/universal) (Runs on an [express](https://expressjs.com/) app)
* React - [NextJS](https://nextjs.org/)
* Vue - [NuxtJS](https://nuxtjs.org/)
* Svelte/Angular/React - [MeteorJS](https://www.meteor.com/)

In the next post, we shall look at Client-Side Rendering.
Git flow initialize
Tags: git, github, gitflow
Published: 2021-01-14 20:21:27

To inizialize **git flow** with default branches configuration, run

```shell
git flow init -d
```

It will create a git flow structure to your project

```shell
Initialized empty Git repository in /Users/giulia/Sites/giulia/test/.git/
Using default branch names.
No branches exist yet. Base branches must be created now.
Branch name for production releases: [main]
Branch name for "next release" development: [develop]
.git/hooks/post-commit: line 8: git-stats: command not found

How to name your supporting branch prefixes?
Feature branches? [feature/]
Bugfix branches? [bugfix/]
Release branches? [release/]
Hotfix branches? [hotfix/]
Support branches? [support/]
Version tag prefix? []
Hooks and filters directory? [/Users/giulia/Sites/giulia/test/.git/hooks]
```

> 📚 More info
>
> - [A successful Git branching model](https://nvie.com/posts/a-successful-git-branching-model/)
> - [Git-flow cheatsheet](https://danielkummer.github.io/git-flow-cheatsheet/)
> - [A collection of Git-flow extensions](https://github.com/nvie/gitflow)
Chasing Liberty, creating Deep Impact and destroying The Day After Tomorrow
Tags: writing, productivity, 365figures, indonesia
Published: 2021-01-14 20:17:39

Perjalanan #365figures hari ini membawa Anda ke beberapa film :). Deep Impact (DI) (1998), The Day After Tomorrow (TDAT) (2004) dan Chasing Liberty (CL)(2004).

Ide menggambar ini diawali saat saya dihubungi beberapa rekan dosen dari beberapa Perguruan TInggi untuk membuat proposal Riset
Kolaborasi yang saat ini sedang ramai diperbincangkan. Semangat kemudian kembali menurun ketika membaca luaran yang diharapkan. Masih syarat yang sama. Apa tidak bosan para pembuat program itu. Setiap hari yang disalin adalah fragmen persyaratan yang sama. Dari ujung rambut sampai ujung kaki. Kalau saya tidak cinta dengan ilmu saya, hidrogeologi, pasti sudah berulang kali pula saya mengurungkan niat mengajukan proposal.

Kembali ke film. Patung Liberty (PL) sebagai simbol kebebasan sudah bolak-balik rusak. Pertama di DI dan kemudian di TDAT. Juga di film-film bencana lainnya. Anda sebut saja. Asal bencana dahsyat itu melanda AS, pasti PL inut kena akibatnya. Dari jubahnya ternoda darah, tembok pipi cuil, sampai kepalanya terpenggal dan jatuh di jalanan Kota New York atau tenggelam dalam gelombang tsunami raksasa.

Sementara di CL, tidak ada PL. Itu film cinta ringan, tidak ada latar belakang ilmu kebumiannya. Film itu tentang seorang putri Presiden AS (rekaan) yang ingin membebaskan diri dari protokol pengamanan Gedung Putih saat tamasya keliling Eropa.

Apa hubungannya dengan kita kelompok dosen dan peneliti?

Tiga film itu hanyalah penggambaran saya betapa kita ini sangat mendambakan kemerdekaan. Apa saja. Kemerdekaan berpikir, kemerdekaan berkarya, kemerdekaan ilmu dll. 

Namun di sisi lain secara sengaja kita memmenjarakan diri sendiri dengan berbagai ketentuan yang mengikat. Alasannya untuk memperluas jangkauan, internasionalisasi, menambah jejaring dll, tapi sebenarnya malah menjauhkan kita dari hal-hal yang seharusnya dilakukan.

Bercermin dari film CL. Rupanya kenyamanan menjadi putri Presiden AS ternyata tidak sebanding dengan kebebasan berekspresi dan kebebasa hidup.

Jadi sampai kapan kita melakukan apa yang kita lakukan sekarang?

Hanya Anda yang bisa jawab. Saya pakai telunjuk saya sekarang.
Astra 3.0 mit Header und Footer Builder
Tags: wordpress, astra, update, wordpressthemes
Published: 2021-01-18 08:09:43

---
title: Astra 3.0 mit Header und Footer Builder
published: true
date: 2021-01-14 20:17:16 UTC
tags: Wordpress,astra,update,WordPressThemes
canonical_url: https://j0e.org/astra-3/
---

![Astra 3.0 mit Header & Footer Builder](https://j0e.org/wp-content/uploads/2021/01/astra-3-update.png)

 Du möchtest deine Website mit einem individuellen Header und Footer personalisieren unabhängig von deinem Page-Builder …

[Astra 3.0 mit Header und Footer Builder](https://j0e.org/astra-3/)
AzureFunBytes Episode 26 - Terraform and @Azure with @zdeptawa
Tags: azure, tutorial, terraform, beginners
Published: 2021-01-14 20:10:11

This week [Zachary Deptawa](https://twitter.com/zdeptawa) joins me again!  This time we'll dive a bit deeper into Terraform!    Zachary has a ton more information to share about how to deploy your applications using HashiCorp Terraform along with Microsoft Azure. Join us with your questions and learn even more fundamentals.

{% youtube DEHP18NCMso %}

AzureFunBytes! - Byte-sized content with a live Twitch show!

Learn about Azure fundamentals with me!

Join me, ask questions, and learn about Azure!

Live stream is available on Twitch at 2 pm EST Thursday. You can also find the recordings here as well:

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes
https://aka.ms/jaygordononyoutube

Join me, ask questions, and learn about Azure!


Useful Docs:

[Microsoft Learn: Azure Fundamentals](https://cda.ms/1jV) 
[Microsoft Azure: $200 Free Credit](https://cda.ms/1tj) 
[Terraform with Azure](https://cda.ms/1z2)
[Quickstart: Configure Terraform using Azure Cloud Shell](https://cda.ms/1z3)
[HashiCorp Terraform on Azure](https://cda.ms/1z5)
[Infrastructure as Code](https://cda.ms/1z6)
[Configure the Azure Terraform Visual Studio Extension](https://docs.microsoft.com/azure/developer/terraform/configure-vs-code-extension-for-terraform?WT.mc_id=devops-12370-jagord)