teleren/devto huggingface dataset:
Formatting Dates in React Js with fns
Tags: react, javascript, webdev, tutorial
Published: 2021-09-22 01:19:10

If you are new to reactjs, you will agree with me that date format is quite different from that of core javascript where what is needed to do is just writing  a simple date object: `new Date()`. 

However in the modern day JavaScript library which is reactjs, getting and formatting date is quite different. Though there are ways to format dates, but I will show you the simplest way you can go about it.

 * 1 **install npm date-fns** in your project directory (root directory)
```
C:\MyProjects\react-project>npm install date-fns
```

* 2 **use import { format } from 'date-fns'** within your component

```
import { format } from 'date-fns'
```

* 3 **use the new Date() object** within your component

Now, after doing **2** and **3** as mentioned above, you can then make use of the Date() and format it as you wish. For example:
  ```
{format ( new Date(), 'do MMMM Y')}
```
This will give us the current date. Example: *22 SEPTEMBER 2021*
Should one get good at test-last development before learning TDD?
Tags: discuss, tdd, healthydebate, watercooler
Published: 2021-09-22 00:43:19

I'd been writing tests for a while in a test-last development manner before learning how to develop software using the test-driven technique.

I find that many developers feel daunted by the practice of writing failing tests before writing the implementation/production code to make the tests pass, especially when they have little or no experience writing tests at all.

Since I can't go back in time and learn software testing using a test-driven development approach, I honestly don't know what it feels like and have thus decided to elicit the opinion of the community :)

Do you think it's better to introduce someone with no test writing experience to the practice of software testing with TDD right off the bat? Or is it better to learn TDD after becoming familiar with test-last development?
Android Runtime and Dalvik
Tags: android, java, tristan
Published: 2021-09-22 00:33:07

#Introduction
- This series is going to be dedicated to the basic to Android development. Join me and let us try to build and understand some cool stuff. All the resources I used can be found [HERE](https://ticketnote.dev/ticket/snBFwevmopivAL5VaDAP)

### Dalvik(DVM)
- Before we talk about the Android Runtime(ART) it makes more sense to get a better understanding of it predecessor Dalvik.
- So what is Dalvik? Well Wikipedia states, `Dalvik is a discontinued process virtual machine in the Android operating system.`. In less techy terms, Dalvik(DVM) is a virtual machine that is specialized to run on low memory mobile devices. In the early days of mobile phones, the main limiting factor was memory. Dalvik uses `just in time compilation`(JIT) which compiles small chunks of code at execution. Essentially, it compiles code it needs. This is a big help when it comes to memory limited environments.
- So, Dalvik takes normal bytecode and then compiles it down to `Dalvik bytecode` which is stored in a `.dex` file. Those `.dex` files are then what gets run on our Android application. The `.dex` files are much more compact then normal class files, which again helps with memory consumption.

- So basically Dalvik is a JVM that produces `.dex` files which are optimized for low memory environments.

###Android Runtime(ART)
- As the size of applications grew and  phones became more powerful, Dalvik became more outdated and the user could see performance lagging. ART was created to fix the growing concerns. The major change with ART was the change from JIT compilation to `ahead of time compilation`(AOT). Instead of compiling code at runtime, code is compiled before running the app. This gave a large performance boost. ART still uses the `.dex` files, however, it gives us further optimizations to improve performance for the user. Some of the features introduced in ART are:

- **Improved garbage collection**
- **Development and debugging improvements**

- A list of all the improvements can be found [HERE](https://source.android.com/devices/tech/dalvik)

- So essentially the Android Runtime(ART) is just a new and improved Dalvik

#Conclusion
- Thank you for taking the time out of you day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
Boilerplates
Tags: angular, react, vue
Published: 2021-09-22 00:23:41

There are a few commonalities between the boilerplate code. For starters, they all contain HTML, CSS, and JavaScript files. Another commonality is that they all have their own dependencies. Also, React and VueJS do not have typescripts. On the other hand, Angular and StencilJS do.

I have some prior experience using React and, more recently, a little bit of VueJS. Furthermore, I think that VueJS is the easiest to get going. If I were to build an application tomorrow, I would use VueJS. VueJS, from what I have learned, has responsive visual components which are easy to use and integrate. Another word that is worth mentioning pertaining to VueJS is how flexible it is.

**Organizations Repo:**
https://github.com/TheKodingKrab/boilerplates 

**Boilerplate Repo:** 
https://github.com/react-boilerplate/react-boilerplate
Installing open-wc on a MacOS Laptop
Published: 2021-09-22 00:17:31

Hi guys! In this post, I am going to talk about how to get dependencies on MacOS and the installation of *open-wc*.

First, make sure you have the correct version of Nodejs installed on your computer. Link: https://nodejs.org/en/. Also, make sure to download Visual Studio Code. Link: https://code.visualstudio.com/download.

Next, create a folder to store projects for IST 402 and name it, for example, “edtechjoker.”

Then, open up the terminal, which can be done multiple ways, but my personal favorite is hold command, space bar, and type in terminal then enter. Next, go to the directory where the folder is stored. For example, cd Desktop (enter) cd *edtechjoker* (enter). Once in that folder from the terminal, a good practice is to ls to see the contents of the folder.

A. Then type the command:
*npm install —global yarn*

If an error states that permissions are needed, then run the command:
*sudo npm install —global yarn*

B. *npm init @open-wc*
 
C. It will prompt you to make a few decisions next:

&nbsp; &nbsp; &nbsp; a. Select *Scaffold* a new project (enter)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urd9wm9huioqvrk9yaet.png)

&nbsp; &nbsp; &nbsp; b. Select *Web Component*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/916fcf7grv8vgt7klp03.png)

&nbsp; &nbsp; &nbsp; c. Use the spacebar to Select *Linting*, *Testing*, *Demoing* (enter)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiqqfb8f3fhdvb0m493n.png)

&nbsp; &nbsp; &nbsp; d. Select *No* for Typescript

&nbsp; &nbsp; &nbsp; e. Tag name should be called *hello-world*, all lowercase

&nbsp; &nbsp; &nbsp; f. Select *Yes* to file structure to disk
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsblngosi1cg00pwyqsk.png)

&nbsp; &nbsp; &nbsp; g. Select *Yes*, with yarn 

D. A confirmation message should pop up
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta907xgc45ivtn54lmah.png)

**Good Luck!**
Explicando e entendendo SPA de um jeito simples
Tags: webdev, frontend, beginners, singlepageapplication
Published: 2021-09-22 00:08:52

Meu primeiro post aqui e quero aproveitar para trazer um assunto que venho estudando ultimamente. 

Como quase todo mundo, comecei minha jornada dev com a tríade clássica HTML, CSS e Javascript. Aí a gente mal começa a caminhar e já quer correr, certo? Pois bem, fui estudar React.

Alguns cursinhos, tutoriais e projetinhos depois, reparei que ninguém explica muito sobre o conceito de Single Page Application. Acredito que uma explicação simples já poderia ajudar o dev iniciante(assim como eu) a entender um pouco melhor algumas coisas. 

Então vou tentar explicar aqui de um jeito bem simples, só para desanuviar um pouco o pensamento. Vamos lá!

Trata-se de um método utilizado no desenvolvimento front-end, 
que consiste na criação de aplicações dinâmicas que carregam os recursos conforme necessário. O desenvolvimento é feito quase que totalmente no lado do cliente (client-side).

Os recursos - HTML, CSS e Javascript - carregam quando o usuário acessa a aplicação pela primeira vez.  A partir daí, quando o usuário navega pelas páginas da aplicação, as requisições ao servidor já não são mais necessárias, diminuindo o tempo de carregamento.

Mas como assim? Na prática, o que ocorre não é uma mudança de página, mas uma substituição de conteúdos da página atual por outros conteúdos que vão sendo carregados a medida que navegamos. Ela se comunica com uma API RESTful por chamadas HTTP, e seus dados trafegam em formatos como JSON e XML.

Existem ainda aplicações híbridas, que utilizam o conceito de SPA em algumas partes, e em outras a navegação é prossegue de maneira tradicional.

Na desenvolvimento de SPA's são utilizados algumas bibliotecas e frameworks e como React, Angular e Vue, por exemplo. 

Como principais vantagens, destacam-se um melhor aproveitamento de código, o que facilita a manutenção; melhor experiência do usuário; melhor performance.

Mas também existem desvantagens, como uma maior curva de aprendizado; renderização no lado do cliente, o que depende de boa conexão; e dificuldades com a questão do SEO, devido a falta de tags HTML, uma vez que o Javascript que cuida da renderização da tela, dificultando assim a leitura dos robôs.

Bom, espero que tenha ajudado a entender um pouquinho o conceito de SPA. A ideia aqui, em princípio, é compartilhar algumas anotações minhas de estudo com outras pessoas que também estão estudando essas mesmas tecnologias. O próximo passo agora é se aprofundar um pouco mais na arquitetura front-end e estudar as tecnologias de interesse.

Bons estudos!
{emayili} Managing CSS
Published: 2021-09-25 11:09:23

---
title: {emayili} Managing CSS
published: true
date: 2021-09-22 00:00:00 UTC
tags: 
canonical_url: https://datawookie.dev/blog/2021/09/emayili-managing-css/
---

![{emayili} Managing CSS](https://datawookie.dev/blog/2021/09/emayili-managing-css/featured.jpg)

I love the clean simplicity of an R Markdown document. But sometimes it can feel a little bare and utilitarian. This is especially the case if it’s rendered into the body of an email. How about injecting a little more pizzazz?

```
library(emayili)

msg <- envelope()
```

## (In|Ex)cluding Rendered CSS

By default the knitting process for an R Markdown document will inject CSS from [Bootstrap](https://getbootstrap.com/) and [highlightjs](https://highlightjs.org/). When you `render()` an R Markdown document in `{emayili}` these CSS will be included in the `<head>` of the HTML document. This actually results in quite a lot of content, often more than contained in the `<body>` of the document.

If you want to generate a more lightweight message then you can use `include_css` option to turn off the CSS.

```
msg %>%
  # Do include rendered CSS (default).
  render("styling.Rmd", include_css = TRUE)

msg %>%
  # Don't include rendered CSS.
  render("styling.Rmd", include_css = FALSE)
```

Let’s take a look at those two options. This is what it looks like in Thunderbird when the rendered CSS is included.

![](https://datawookie.dev/blog/2021/09/emayili-managing-css/css-include.png)

And this is it without the rendered CSS.

![](https://datawookie.dev/blog/2021/09/emayili-managing-css/css-exclude.png)

## Custom CSS

Now, what about including some custom CSS? Use the `css_files` argument to specify one or more CSS files that will get baked into the message.

```
msg %>%
  render("styling.Rmd", include_css = FALSE, css_files = "styling.css")
```

Here’s the contents of `styling.css`:

```
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

h2 {
  font-family: 'Pacifico', cursive;
}

p {
  font-family: 'Roboto', sans-serif;
}

body {
  background-color: grey;
  color: white;
  margin: 0 30px;
}

hr {
  height: 1px;
  background-color: white;
  border: none;
}
```

We’re pulling in some custom Google Fonts, changing the background colour of the page and adding in some margins, along with a few other tweaks.

And this is what it looks like. I can’t claim to have any aesthetic sense at all. Sorry. I’m sure that you can do a lot better!

![](https://datawookie.dev/blog/2021/09/emayili-managing-css/css-custom.png)

With these options at your disposal there’s really no excuse for creating “ordinary” emails. Now’s your chance to be extra-ordinary.
IST 402 Introduction
Published: 2021-09-21 23:56:19

Hi guys! I am Taylor Bracone from Long Island, New York. I am a junior majoring in Human-Centered Design and Development with a focus in Cybersecurity and a minor in Security Risk Analysis. I have some web development skills already through my previous classes, my job, and an internship. I work as a Research Assistant/ Developer for the College of Information Sciences and Technology to help make lives easier through technological designs. Our goal for the project is to provide more efficient ways to track growth and development, among other things, within the agricultural field. I also did an internship on the project. About my classes, I took IST 256, which is programming for the web class. When I heard about this class, I thought it was a perfect way to further my knowledge. I am interested in web development because it is an essential tool to have in the career field. It opens up new possibilities. Also, I am a person that likes to solve problems and explore the unknown, which provides me the opportunity to do so.
Web Component Frameworks
Published: 2021-09-21 23:38:10

1) Commonalities
All the four frameworks use JavaScript, HTML and CSS. Also they have similar file structures and directories. Angular and StencilJS both use typescript while VueJS and React do not.

2) What is duplicate / overlapping?
1. package.json file
2. All have a source directory

3) The easiest DX (Developer eXperience) to get going
In my opinion, VueJS has the easiest developer experience. The file structure is the most simple among the four frameworks and it's very easy to understand. And you only need to know very simple JavaScript to create functional applications.

4) If starting to build an "app" tomorrow, which would you prefer and why?
I would choose the VueJS framework. Because it's the most easy to get going with the simplest file structure. There are also a lot of resources and tutorials for the VueJS framework and a big developer community.

Group repo:
https://github.com/IST402/boilerpoint

My React repo:
https://github.com/JT-aa/boilerpoint

React tutorial:
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
Open-wc installation
Published: 2021-09-21 22:43:10

1) Install Node.js from https://nodejs.org/en/download/
2) Install VSCode from https://code.visualstudio.com/Download
3) Install npm: in terminal
```
npm install
```

4) Install yarn: in terminal
```
npm install --global yarn
```

5) create open-wc
```
npm init @open-wc
```
Choices:
> Scaffold a new project
> Web Component
> Choose all three Linting+Testing+Demoing
> No on using Typescript
Do you want to write this file structure to disk?
> Yes
Do you want to install dependencies? 
> Yes, with yarn

To run the project:
cd project-name
npm run start

example:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqpcmy22tyj63dg41eek.png)
One line CLI tool to fuzzy search pods?
Tags: kubernetes, docker, bash, todayilearned
Published: 2021-09-21 22:40:10

`fzf` is a nice tool that allows you to fuzzy search line separated input. So what if we want to fuzzy search our active pods?

[![asciicast](https://asciinema.org/a/t9AMfUExfzwSHv2y3H8BC2lk3.svg)](https://asciinema.org/a/t9AMfUExfzwSHv2y3H8BC2lk3)

```
 kubectl get po --no-headers --field-selector=status.phase=Running -o custom-columns=":metadata.name" | fzf | head | xargs kubectl logs -f
```

- [fzf](https://github.com/junegunn/fzf)
All You Need To Know About react-icons.
Tags: react, javascript, tutorial, typescript
Published: 2021-09-21 22:22:03


Hi, I'm [Aya Bouchiha](developer.aya.b@gmail.com), today, we'll talk about one of the most popular react libraries, which is **react icons**.

## What is react-icons?

-   **react-icons**: is one of the most famous react libraries that provides us the icons of 20+ libraries including font awesome, bootstrap icons, box icons...

+ [home page](https://react-icons.github.io/react-icons/)
+ [github](https://github.com/react-icons/react-icons)

## Installation

```shell
npm install react-icons --save
```

```shell
yarn add react-icons
```

## How To Import A Specific Icon

```jsx
import { x } from 'react-icons/first-two-letters-of-x';
```

### Example

```jsx
import { ExAmple } from 'react-icons/ex';
```

## Real Examples

```jsx
// importing from font awesome icons
import { FaHtml5 } from 'react-icons/fa';

// importing from bootstrap icons
import { BsFillReplyFill } from 'react-icons/bs';

//  importing from material design icons
import { MdDoneAll } from 'react-icons/md';

// importing from box icons
import { BiCalendar } from 'react-icons/bi';
```

## Usage

```jsx
import {FaCss3Alt} from 'react-icons/fa';
const Component = () => {
    return (
        <FaCss3Alt  />
    ):
};
```

### Icon Context (Configuration)

```jsx
import { IconContext } from "react-icons";
import {FaCss3Alt} from 'react-icons/fa';
const Component = () => {
    return (
        <IconContext.Provider value={{
            size:'1.5em',
            className:'css-icon',
            style:{margin:'.5em 1emp',},
            color:'blue'
        }}
        >
            <FaCss3Alt  />
        </IconContext.Provider>
    ):
};
```
Note: by default the size property is **1em**.


## Suggested Posts

+ [Do You Like Using Your Phone To Evolve Your Productivity and Your Coding Skills ? Here are 15 Mobile Apps That Will Help You to!](https://dev.to/ayabouchiha/do-you-like-using-your-phone-to-evlove-your-productivity-and-your-coding-skills-here-is-10-mobile-apps-that-will-help-you-3b0o)
+ [My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps](https://dev.to/ayabouchiha/my-favourite-library-for-providing-logging-in-logging-out-with-google-functionalities-in-my-react-apps-50l0)
+ [Projects Tutorials For Learning React.js](https://dev.to/ayabouchiha/10-projects-tutorials-for-learning-react-js-4i07)
+ [Resources to master 5 popular react libraries](https://dev.to/ayabouchiha/resources-to-master-5-popular-react-libraries-2n81)

Have a great day!
Do You Want To Learn Django ? Here Are Some Awesome Ressources.
Tags: django, python, beginners, codenewbie
Published: 2021-09-21 22:21:15

## Youtube Courses
### Programming With Mosh 

+ [Django Tutorial For Beginners (2021)](https://www.youtube.com/watch?v=rHux0gMZ3Eg)(1h)

### Tech With Tim

+ [Django For Beginners - Full Tutorial](https://www.youtube.com/watch?v=sm1mokevMWk)(3h)

### FreeCodeCamp

+ [Django For Everybody - full python university course](https://www.youtube.com/watch?v=o0XbHvKxw7Y)(18h 30min)
+ [Python Django Web Framework - Full Course for Beginners](https://www.youtube.com/watch?v=F5mRW0jo-U4&t=12309s)(3h 45min)
+ [Python Backend Web Development Course (with Django)](https://www.youtube.com/watch?v=jBzwzrDvZ18)(10h)

### Traversy Media

+ [Python Django Crash Course](https://www.youtube.com/watch?v=e1IyzVyrLSU)(1h)

### Academind

+ [Python Django Course for Beginners 2021](https://www.youtube.com/watch?v=t7DrJqcUviA)(4h)

## Books

+ [Django for Beginners: Build websites with Python and Django](https://www.amazon.com/Django-Beginners-Build-websites-Python-ebook/dp/B079ZZLRRL)
+ [Django 3 By Example: Build powerful and reliable Python web applications from scratch, 3rd Edition](https://www.amazon.com/Django-Example-powerful-reliable-applications-ebook/dp/B0868SN6HF/)
+ [Django for Professionals: Production websites with Python & Django](https://www.amazon.com/Django-Professionals-Production-websites-Python/dp/1081582162)


Have an awesome day!
Stop Selling Other Candidates On Your LinkedIn Profile [Turn It Off In 15 Seconds]
Tags: linkedin, career, interview, codenewbie
Published: 2021-09-21 22:11:13

Did you know that your LinkedIn Profile is recommending other people to recruiters and hiring managers? 

Some of those profiles could be competing for the same opportunities as you, so showing them right on the sidebar next to your accomplishments and work history doesn't make any sense. 

It's great to help other people, I do it all the time, but this doesn't make sense if you're trying to create the ideal recruiter funnel and get the most out of you time on the platform. 

![LinkedIn feed preferences for People Also Viewed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ama5z6ep2tuzl4aec0hk.png)

All you have to do to stop competing with other developers on your own LinkedIn profile is turn off one single setting in your preferences. 

{% youtube 67VntPqUZFw %}

Watch the video learn how, and check out our latest blog post for more [LinkedIn profile best](https://codingcareerfastlane.com/linkedin-profile-best-practices/) practices.
IST 402 Introduction
Published: 2021-09-21 22:09:14

Hi everyone, my name is Jingtao Han and I'm a graduate student in IST pursing a degree in data mining. This is my second year as Penn State. I chose this course because this course(and the instructor) seems very interesting and exciting and it can expand my knowledge base in front end and web developing. I chose this course because it can contribute to the interface of my data mining projects. I'm very excited for this class and making new friends here.
JavaScript
Tags: method, javascript, beginners, html
Published: 2021-09-21 22:01:09

Well, that's the beginning. Here are some examples of using JavaScript.

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

    document.getElementById()
Returns the element that has the ID attribute with the specified value.
This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.

    document.createElement()
    .innerHTML
    .innerText
Creates an Element Node with the specified name.
Both __innerText__ and __innerHTML__ return internal part of an HTML element.
The only difference between __innerText__ and __innerHTML__ is that: __innerText__ _return HTML element (entire code) as a string_ and display HTML element on the screen (as HTML code), while __innerHTML__ _return only text content_ of the HTML element.

    document.querySelector()
__querySelector()__ returns the first element that matches a specified CSS selector(s) in the document. __querySelector()__ only returns the first element that matches the specified selectors. To return all the matches, use __querySelectorAll()__ instead.

    document.addEventListener()
    document.addEventListener("mouseover", myFunction);
    document.addEventListener("click", someOtherFunction);
    document.addEventListener("mouseout", someOtherFunction);
Attaches an event handler to the document.
Use __document.removeEventListener()__ to remove an event handler that has been attached with __document.addEventListener()__. Use __element.addEventListener()__ to attach an event handler to a specified element.

    document.appendChild()
Appends a node as the last child of a node. This method can be used to move an element from one element to another.

###SCRIPT in the HEAD or in the BODY of HTML
When JavaScript is placed at the bottom of HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
But putting JavaScript in the __head__ of HTML doesn’t ALWAYS cause errors.