teleren/devto huggingface dataset:
Adding Colors with CSS modules and sass. Adding a CSS Reset |  Vue 3 typescript component - part 4
Tags: tutorial, webdev, vue, typescript
Published: 2021-01-17 18:09:27

In this part, we will be adding color variables so that the user can define there own themes even multiple themes on the same page!

Check out the video! and if you like it leave a thumb up!

{% youtube jlecGbHkhLk %}

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
JVM Tutorial - Java Virtual Machine Architecture Explained for Beginners
Tags: java, jvm, programming, software
Published: 2021-01-17 18:08:41

Whether you have used Java to develop programs or not, you might have heard about the Java Virtual Machine (JVM) at some point or another.

JVM is the core of the Java ecosystem, and makes it possible for Java-based software programs to follow the “write once, run anywhere” approach. You can write Java code on one machine, and run it on any other machine using the JVM.

JVM was initially designed to support only Java. However, over time, many other languages such as Scala, Kotlin, and Groovy were adopted on the Java platform. All of these languages are collectively known as JVM languages.

In this video, I’ve discussed the JVM, how it works, and the various components that it is made of. Please subscribe to the channel and like the video if you find it helpful.
{% youtube jnpuRvRdTgI %}
#13 DevOps Diary: Events are back
Tags: devops, kubernetes, newsletter, tutorial
Published: 2021-01-17 18:05:07

Welcome beautiful people!

This week is yet another week full of Kubernetes learning resources. Personally, I started learning Go and I am consistently surprised by the level of support from the community; [this is just one example.](https://twitter.com/goinggodotnet/status/1350063893293502465)

Hope you enjoy this week's newsletter 😊 

If you have any comments, suggestions, anything you would like to have included in next week's edition, [please do let me know](https://devops.anaisurl.com/contact).

## Top Kubernetes Learning Resources 📖

This is an [open source documentation](https://ramitsurana.gitbook.io/awesome-kubernetes/docs/learning-resources), linking to Kubernetes resources and providing explanations. [You can also contribute here](https://github.com/ramitsurana/awesome-kubernetes).

## Videos🎥

- This week, I had the chance to [spontaneously record an episode on Kubernetes Services](https://youtu.be/n8ou7brCcLw) with  [David McKay](https://twitter.com/rawkode) and [Philipp Strube](https://twitter.com/pst418) in which I asked all those questions newbies might be wondering about, getting started with Kubernetes. Also, have a look at David McKay's [YouTube channel](https://www.youtube.com/channel/UCrber_mFvp_FEF7D9u8PDEA).
- If you are new to Kubernetes, or also, if you have already been using Kubernetes for some time, you might want to [check out k9s](https://youtu.be/5Nhbl6LwP2o) as part of my #100DaysOfKubernetes series. It is a terminal based UI that allows you to easier manage all your cluster resources.

## [View the full newsletter here!](https://blog.anaisurl.com/13-devops-diary-events-are-back/)
Newsletters I actually enjoyed in 2020. 👩🏻‍💻🌍💫
Tags: webdev, career, productivity, news
Published: 2021-01-17 17:50:39

Hi Everyone, 
Here's a list of newsletters I actually enjoyed in 2020! What's been your favorite newsletter? Feel free to comment down below!

[**Hackernewsletter**](https://www.hackernewsletter.com/)
More of a weekly newsletter, with articles on programming, startups, and current happenings.

[**GitHub explore**](https://github.com/explore)
Catches you up on what's trending. There are different options on how frequently you'd want to receive content.

P.S. You'll need a Github account in order to sign up for email updates.

[**Weekly newsletter by Siddharth Kshetrapal**](https://sid.st/blog/)
A friend recently recommended this newsletter to me, and honestly, I've thoroughly enjoyed Siddarth's content. It's definitely Javascript focused, but he also has other things in there about growth as a developer and other tidbits.

[**Status code newsletters**](http://statuscode.com/)
They have a list of different newsletters you can subscribe to. I can only attest to the Javascript and Frontend Focused ones. I think they do a good job of curating an insightful list of resources and tutorials.

Thanks for reading :)
How to test static members with Mockito in Flutter
Tags: flutter, mockito, testing
Published: 2021-01-17 17:49:06

I'm starting my journey with unit testing in Flutter. Early in the process, while I was writing tests for my Firebase sign in workflow, I faced a situation that I struggled to surpass and want to share. I needed it to test a static member call.

Concretely, I wanted to test a call to the `GoogleAuthProvider.credential()` static method. I wanted to do this to get the OAuth credentials and pass them to `FirebaseAuth.signInWithCredential()`. This way I could use Google Sign In through Firebase Authentication.

![call to GoogleAuthProvider.credential()](https://dev-to-uploads.s3.amazonaws.com/i/44if06juxtjp6siu7283.png) 

In my test, I couldn't mock this static method call. All my attempts failed. My only hope was to refactor my code to make it testable for this particular case.

![failed test](https://dev-to-uploads.s3.amazonaws.com/i/dgj3xbeoft99t4p5i8so.png)

After several failed attempts -such as creating a mock to override the static method, doing the same with Fake instead of Mock, etc-, I realized that the solution implies wrapping the call in a class, so I'll be able to test it indirectly. However, the test structure requires this new wrapper class to be passed as a dependency for the class where the relevant call takes place.

![first attempt](https://dev-to-uploads.s3.amazonaws.com/i/eye0nbidfw7lxc9tmwgp.png)

Well, the test will pass if I mock this new wrapper class and use it in `when()`. But I didn't want to depend on this class and make my overall architecture ugly and _ad-hoc_.

Finally, I decided to make this little modification:

![little modification](https://dev-to-uploads.s3.amazonaws.com/i/kwwmjj2du8h8xzdwvfs0.png)

This way, making the dependency optional, I could mock my wrapper class, call it on `when()`, and pass the test, without compromising my overall structure.

Also, this new wrapper eventually could serve as a place to implement additional forms of authentication, besides GoogleOAuthCredentials.

![pass test](https://dev-to-uploads.s3.amazonaws.com/i/khb80q1hmn54z4qm3td4.png)
 

-------
I'm learning a lot of unit testing with these kinds of situations and enjoying testing my apps. I hope eventually implement Widget and integration testing too for this same project.
Die 5 besten WooCommerce Themes
Tags: wordpress, woocommerce, wordpressthemes
Published: 2021-01-18 08:11:21

---
title: Die 5 besten WooCommerce Themes
published: true
date: 2021-01-17 17:48:26 UTC
tags: Wordpress,woocommerce,WordPressThemes
canonical_url: https://j0e.org/woocommerce-themes/
---

![Die besten WooCommerce Themes](https://j0e.org/wp-content/uploads/2021/01/woocommerce-themes.png)

 Meine Wahl der besten WooCommerce Themes. WooCommerce ist das beliebteste E-Commerce-Plugin zum Betreiben selbstständiger Online-Shops mit …

[Die 5 besten WooCommerce Themes](https://j0e.org/woocommerce-themes/)
Highlighting navigation items on scroll in React with IntersectionObserver
Tags: react, javascript, html, performance
Published: 2021-01-17 17:41:35

This week I was working on my personal website (https://www.thomasledoux.be), and I needed my navigation items to be highlighted when scrolling to the linked section. 
I found some solutions with a scroll listener, but none using the widely supported Intersection Observer (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

So I decided to write the logic myself.
What has to be done first, is referencing the `<section>`'s using `React.useRef`.

```javascript
import * as React from 'react'
const personalRef = React.useRef(null)
const portfolioRef = React.useRef(null)
const contactRef = React.useRef(null)
```

Now we have the reference to the `<section>`'s we can fire up the IntersectionObserver. I prefer to do this using the `React.useEffect` hook. The ref objects are added as dependencies, so we can reference these when they are ready. I use the 0.5 threshold, this will cause the observer to be triggered when the `<section>` is >50% visible. The `navElement` gets the navigation element which has a href pointing to the `<section>`'s id. 

```javascript
React.useEffect(() => {
    let observer
    if (personalRef.current && portfolioRef.current && contactRef.current) {
      const options = {
        threshold: 0.5,
      }
      observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          const navElement = document.querySelector(
            `a[href="/#${entry.target.id}"]`,
          )
          if (entry.isIntersecting) {
            if (!navElement.classList.contains('active')) {
              navElement.classList.add('active')
            }
          } else if (navElement.classList.contains('active')) {
            navElement.classList.remove('active')
          }
        })
      }, options)
      observer.observe(personalRef.current)
      observer.observe(portfolioRef.current)
      observer.observe(contactRef.current)
    }
    return () => observer.disconnect()
  }, [personalRef, portfolioRef, contactRef])
```

And that's it! The `active` class will be added to the navigation element which points to the `<section>`. 
By adding the return function at the end of the useEffect hook, we make sure the IntersectionObserver is cleaned up correctly.

Full code can be found on https://github.com/thomasledoux1/website-thomas
3 Principles I wanna apply at work in 2021
Tags: career
Published: 2021-01-17 17:40:17

I'm a big fan of goals. They can be really motivating, especially when I have a lot of control over how I go about achieving them. I've been struggling with having productive S.M.A.R.T goals at work though.

So this year I'm trying out something new. Instead of any specific goals, I hope to apply these three principles to the challenges that I come upon professionally.

### Accept the Chaos

A job as a Site Reliability Engineer is an adventure at best and total mayhem on the, not so best, days. There are of course, ideals of minimizing interruptions and reliable planning that we embrace but I think it's healthy to accept that at least some chaos is just part of the job.   

### Embrace Spontaneity 

Sometimes I hear about a project or an idea and I just completely fall in love with it. I just can't shake its sheer possibility. This year, I wanna let myself do that more often! If some chaos comes with the gig then making the best of an exciting opportunity seems like the best way to grow.

### Reduce Work In Progress

After we begin a project and before we ship it to our users, there's work in progress. Every project is a work in progress for a period, some for longer than others. 

Some Work In Progress is good for me! It means we're working on non-trivial stuff. It also helps me to have a few things in progress, so when I'm stuck on or bored/tired of a project for the day, I can switch to another fairly productive thing. 

Too much work in progress is bad for me! I have to switch between projects too often and I usually don't make enough progress on any single one.

### Excited to look back

I'm excited to look back at this commitment and see the effect that it would've had on my professional life!
5 Time saving things about client-go, I didn't know!
Tags: kubernetes, go
Published: 2021-01-17 17:34:06

[client-go](https://github.com/kubernetes/client-go) is the official go client for talking to Kubernetes (k8s) APIs.

A while back, I read parts of [Programming Kubernetes](https://www.oreilly.com/library/view/programming-kubernetes/9781492047094/) by [Michael Hausenblas](https://mhausenblas.info/) & [Stefan Schimanski](https://twitter.com/the_sttts?lang=en). I learned a whole lot about client-go that still helps me.



1. k8s API is divided into [apigroups](https://kubernetes.io/docs/concepts/overview/kubernetes-api/#api-groups-and-versioning)! Core objects don’t (like pods), everything else is pretty much under an API Group
2. [k8s.io/client-go](https://github.com/kubernetes/client-go) isn’t enough to talk to kubernetes API, you need [k8s.io/api](https://github.com/kubernetes/api) and [k8s.io/apimachinery](https://github.com/kubernetes/apimachinery) too
    * You have to match their versions for it to all work!
    * See the [client-go versioning](https://github.com/kubernetes/client-go#versioning) for simple instructions!
3. Kinds map to resources, resources map to HTTP Paths through RESTMappers, Scheme connects a kind and a Resource
4. Almost always use [informers](https://godoc.org/k8s.io/client-go/tools/cache#NewInformer) instead of watch to watch events, the exception is just watching events to log them, then maybe it doesn’t matter. 
    * See the [package docs](https://godoc.org/k8s.io/client-go/tools/cache#NewInformer)
5. Last but not the least, there’s a fake client! You can use it to test your code!
    * See [example](https://github.com/kubernetes/client-go/tree/master/examples/fake-client)!

There are many [working examples](https://github.com/kubernetes/client-go/tree/master/examples) in the upsteam repo now! Check them out to learn more.
Creating a Test HTTP Server in Go
Tags: go, testing, http
Published: 2021-01-17 17:32:32

`httptest.NewServer` gives us the ability to spin up a local HTTP Server. This is very useful say, when [testing an HTTP client](http://hassansin.github.io/Unit-Testing-http-client-in-Go).

### Usage
Here's a very basic usage of `httptest.NewServer`:

```go
server := httptest.NewServer(
		http.HandlerFunc(
		    func(w http.ResponseWriter, req *http.Request) {
			_, _ = fmt.Fprint(w, "OK")
		}))
	defer server.Close()
```

In the code above, `server.URL` can be used to connect to the server. For example, we could pass it to the following `pingService` func to test it.


```go
func pingService(url string) ServiceStatus {
	// TODO: make sure url is actually a valid URL
	res, err := http.Get(url)
	// expecting the HTTP client to err out if the service is down
	if err != nil {
		// TODO: add TestURL to the log
		log.Errorf("[%s], is DOWN", url)
		return ServiceDown
	}
}
```

### A more complete example
Following is a more complete example of `pingService` and its tests:


#### `pingService()`
```go
// ServiceStatus indicates the status of a service i.e "UP", "FAILING", "DOWN"
type ServiceStatus string

const (
	ServiceUP      = ServiceStatus("UP")
	ServiceDown    = ServiceStatus("DOWN")
	ServiceFailing = ServiceStatus("FAILING")
)

func pingService(server *http.Server) ServiceStatus {
	// TODO: make sure server.URL is actually a valid URL
	res, err := http.Get(server.URL)
	// expecting the HTTP client to err out if the service is down
	if err != nil {
		// TODO: add TestURL to the log
		log.Errorf("[%s], is DOWN", server.URL)
		return ServiceDown
	}

	if res.StatusCode >= 200 && res.StatusCode <= 500 {
		log.Infof("[%s], is UP", server.URL)
		return ServiceUP
	} else {
		log.Errorf("[%s], is FAILING", server.URL)
		return ServiceFailing
	}
}
```

#### Testing `pingService()` 
```go
// TestStatusDown tests pinging a non running HTTP service
func TestStatusDown(t *testing.T) {
	ss := pingService(exampleTestService)
	require.Equal(t, ServiceDown, ss)
}

// TestStatusUP tests a running HTTP service
func TestStatusUP(t *testing.T) {
	sv := httptest.NewServer(
		http.HandlerFunc(
		    func(w http.ResponseWriter, req *http.Request) {
			_, _ = fmt.Fprint(w, "OK")
		}))
	defer sv.Close()

	ss := pingService(sv)
	require.Equal(t, ServiceUP, ss)
}

// TestStatusFailing tests a failing HTTP service
func TestStatusFailing(t *testing.T) {
	sv := httptest.NewServer(
		http.HandlerFunc(
		    func(w http.ResponseWriter, req *http.Request) {
			w.WriteHeader(http.StatusInternalServerError)
		}))
	defer sv.Close()

	ss := pingService(sv)
	require.Equal(t, ServiceFailing, ss)
}
```

### Further Resources:

- [golang.org/pkg/net/http/httptest/#Server](https://golang.org/pkg/net/http/httptest/#Server)
- [Unit Testing http client in Go](http://hassansin.github.io/Unit-Testing-http-client-in-Go)
Weekly Notes, Goals For Next Week
Tags: webdev, programming, devjournal
Published: 2021-01-17 17:13:44

Now that I have finished my structured coding Bootcamp, I want to use Sundays as an opportunity to reflect on my previous week's work and set goals for the next week. I'm looking forward to exploring new topics while I continue my job search. 

## Last Week

Last week I focused on finishing up my React/Redux project review, preparing for/taking my mock behavioral interview, and looking into what I'm going to want to spend my time learning now that I am finished with my last project. 

#### What I learned/Overall Plan for the Next Few Months

There is a **lot** to learn in the realm of programming. I feel very fortunate to have a post-grad outline provided by my Bootcamp that I can customize to fit my own career goals. From digesting the information from the post-grad plan as well as countless articles, I've decided to take my plan one week at a time and focus on setting weekly learning topics based on my interests and job postings I'm interested in. I've also decided that I will be continuously working on new projects and using my new learning to advance my past projects. 

## Next Week

In the upcoming week, I have a mock technical interview, which I've chosen to do in React. To prepare for this, I am currently refreshing my understanding of React/Redux with Free Code Camp's Front End Libraries section. I am almost done with the reading/practice problems and plan to build all the practice projects and a front-end focused portfolio in the upcoming week. In addition to this, I've found a few resources on interview questions and hope to find some coding challenges to work through as well.
 
#### Resources I plan to use next week: 
- [500 React Interview Questions](https://github.com/sudheerj/reactjs-interview-questions)
- [Frequently asked: React JS Interview Questions and Answers](https://medium.com/@vigowebs/frequently-asked-react-js-interview-questions-and-answers-36f3dd99f486)
- [Top 50 React Interview Questions You Must Prepare In 2021](https://www.edureka.co/blog/interview-questions/react-interview-questions/)
- [Free Code Camp](https://www.freecodecamp.org/learn/)
- [React Documentation](https://reactjs.org/docs/hello-world.html)
- Various Coding Challenges that I can find
Crossing Over from a Bootcamp
Tags: ruby, javascript, react, devjournal
Published: 2021-01-17 17:10:06

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

The hardest part of my experience with a coding Bootcamp has been after it ended. I just finished my coursework with the Flatiron Bootcamp for Software Engineering and I can honestly say this has been the hardest, yet most rewarding, thing I've done. It was a roller-coaster, going from very basic knowledge of what code even was to building 5 projects in the span of 6 months. That should say it all.  

I built projects in the CLI, with Ruby/Sinatra, Ruby on Rails, JavaScript, and React-Redux respectively. But during the time we had some sort of structure and schedule to do these, now it's up to us to figure out what we should do and it has been a challenge. Thankfully, Flatiron even provides a Post-Work section to help us with the transition. 

I have decided to improve my past work during my ongoing job search and write weekly updates on this blog as a journal. Hopefully, this can help others going through similar situations and for a way for me to look back at my progress.

01-17-2020,
Ken
MY MLH HACKATHON EXPERIENCE🔥
Tags: localhackday
Published: 2021-01-17 15:19:36

I am sidhant thakur, a beginner and exploring about many technologies. I have taken part in few hackathons but this time the hackathon i attended was the most interesting and having fun loving organizers and teammates. The whole process was designed such that we would learn automatically and also rationality was there in terms of points given and the work submitted so i and my guildmates always wanted to learn ,contribute and earn some precipus points. Team leaderboard each day gave us a sense of competency and that was quite good as it prepared us for next day with full enthusiasm and energy.

There were many localhost workshops . One of mine favourite ones going to be held tonight on gps. We played games like dino,built tic tac toe game and learnt about some new technologies. I woke up several night to complete some projects as working alongside my exam preparation is somewhat hectic. But there were lot of challenges which we can complete ,day wise and week long challenges too. I met some more fuild mates and interacted with them . It was a great meeting in sharing a meal with them. Great hackathon,would like to contribute more if i get a chance .🤩👨‍💻😀
My First Experience : MLH Local Hack Day
Tags: mlh, majorleaguehacking, localhackday
Published: 2021-01-17 16:51:21

Hello all! I want to share with all of you that I have participated in Major League Hacking Build series knowns as MLH-LHD . Every day I am exploring new hacks and challenges.
I like this event every much there are so many technologies about which you will come to know and build something new.
One of the best thing is that it has Daily and Week long Challenges in which one have to make projects and MLH team guide you to make something and explore the technologies.
I had learnt to make a Tic-Tac-Toe game in java.
Docker for beginners: Installing Docker on Windows 10
Tags: codenewbie, webdev, docker
Published: 2021-01-17 16:48:39

**Before Installation**
As a beginner this part can easily be overlooked but it is an important step. There are some system requirements before installing Docker, in this case, on Windows OS and here is a guide on what to do before installation.
* Check the Windows version that you are using. 
The latest Docker version runs on Windows 10 64-bit: Pro, Enterprise, or Education (Build 16299 or later).
There is also a Docker package for Windows 10 Home. 

- Check the RAM size. Another system requirement is 4GB system RAM.

Below are the rest of the system requirements;
- Hyper-V and Containers Windows features must be enabled.
- BIOS-level hardware virtualization support must be enabled in the BIOS settings.
After confirming this, you can also have a look at the [product manual](https://docs.docker.com/docker-for-windows/install/) and then download and install Docker. 

**Confirming installation**
Open the terminal and type the following.
```docker -v```
You should see a docker version. If you don't see a Docker version, reinstall or restart your machine.