teleren/devto huggingface dataset:
Grace Papers work update
Tags: codenewbie
Published: 2021-01-18 21:06:09

---
title: Grace Papers work update
published: true
description: 
tags: #codenewbie
cover_image: https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29kZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60
---

# Hi family

Welcome back fam, it has been a few months since I have blogged, and for good reason.

In the wake of the disaster that was 2020, I managed to find myself a dream role as a developer.

# Organisation

It couldn't have been a better fit from the get-go.

The organisation is called [Grace Papers](https://www.gracepapers.com.au/), and we are committed to fighting gender discrimination, by working with governments and corporations to improve their employment practices to support people returning to work after having children, driving inclusion in the workplace, and instilling practices that will help retain talent through nurturing and supporting employees.

It just couldn't have been more perfect, and it made 2020 worth the wait.

# Tech & Learning

The stack is a fresh React front-end and a Laravel back-end, and I plan to do a lot of regular blogging as I learn and skill up.

My two main focuses will be 

1. A11y ~ as we build the front-end in React I am committed to ensuring it is built with Accessibility in mind first, not as something we will add later.

2. Laravel/PHP ~ the rest of my blogs will be about my learning path in the back-end.

Well, stay tuned I have my first A11y post coming tonight ot tomorrow morning.
Two Sum Problem - JavaScript solutions
Tags: javascript, leetcode, 100daysofcode, algorithms
Published: 2021-01-18 20:52:32

Hi there!
I've made a few videos on Two Sum Problem😅

Intro video
{% youtube RVt9jujTvds %}

Naive Solution
{% youtube NGv6KqVNero %}

HashTable Solution
{% youtube RVt9jujTvds %}

Enjoy the video 😀🙏
How to animate a button on click with TailwindCSS in Next.js or React.js
Tags: tailwindcss, nextjs, react, animate
Published: 2021-01-18 20:51:15

This post will assume that you already have a working installation of Next.js or React.js and have added the [TailwindCSS library](https://tailwindcss.com/), if that's not your case you can read about installing it [from scratch here](https://tailwindcss.com/docs/guides/nextjs).

We're going to use a super simple animation of a button 'wiggling' when it's pressed, and we'll use Tailwind to create a [custom animation](https://tailwindcss.com/docs/animation) to use it as a class in our project.

The first step is to create the animation, so if you followed step-by-step the guide at the beginning lets start by editing the `tailwind.config.js` file like so:

```javascript
//./tailwind.config.js

module.exports = {
  purge: ["./pages/*.js"],
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-3deg)" },
          "50%": { transform: "rotate(3deg)" }
        }
      },
      animation: {
        wiggle: "wiggle 200ms ease-in-out"
      }
    }
  }
};
```
The important bit is the `keyframes` values inside the `extend` property of `theme`. Here we can define our [CSS Transforms](https://www.w3schools.com/cssref/css3_pr_transform.asp), for this example I added a simple rotation that simulates a 'wiggle' of the button but you can define whatever you want here.

After adding the `keyframes` we also need to add the `animation` property inside `extend` and here's where we'll define the name of our animation to be used later on, we're also referencing the newly created `wiggle` transform as a property inside the animation.

Once we have the animation created we'll use React `useState` to define when to show it and when to hide the animation once it's done, also take a look as how we use the `animate-wiggle` class which was created in the `tailwind.config.js` file.

Here's how I animated a button inside a generic page in Next.js:
```react
import React, { useState } from "react";

export default function IndexPage() {
  const [effect, setEffect] = useState(false);
  return (
    <div className="flex h-screen flex-col justify-center">
      <div className="flex justify-center">
        <button
          className={`${
            effect && "animate-wiggle"
          } bg-blue-500 p-4 text-white rounded hover:bg-blue-700 hover:shadow-xl`}
          onClick={() => {
            setEffect(true);
          }}
          onAnimationEnd={() => setEffect(false)}
        >
          Wiggle wiggle...
        </button>
      </div>
    </div>
  );
}
```
As you can see we're using the state of `effect` to decide when to show the animation. We're using the `onClick` event to set the state to true and then the `onAnimationEnd` event to remove it.

If you're interested, you can play with it here: 
{% codesandbox button-animation-in-nextjs-or-react-with-tailwind-css-l2vqk %}
Hello
Tags: welcome, kotlin
Published: 2021-01-18 18:58:23

Hello :)

Who am I?

I am a developer who extremely loves technologies I am using. Currently, it is Kotlin with its environment (serialization, coroutines, ktor, multiplatform, etc.), docker, linux (preferably elementary os on my laptop).
I am a person who has created his own Jenkins image 'cause some time ago I was using Raspberry PI to host it (😔).
I am a person who has got a Bachelor degree in Omsk State university and was lucky enough to get a Master degree in Wuhan University (both related to CS). The environment of the last one has pushed me to investigate linux servers, VPNs, proxies and different other topics.
I am a person, who has created several interesting (imho) projects like tgbotapi, krontab or microutils (and some others); worked with different layers of applications like server-side (hello, Ktor and Spring 😊), desktop (SDL long time ago, JavaFX when it was included in JDK and TornadoFX mostly when JavaFX was excluded), Android (that time when I was using AlarmManager (instead WorkManager as for now), manual setting up of codes for getting a result in activities and different other things).

Thank you for your interest:) I am a person, who is in love with the work he does and I hope it will never change.

P. S. I hope, you love the things you are doing too :)
3 things that could help Junior Developers to stand out during an interview (besides coding)
Tags: agile, github, career, devpool
Published: 2021-01-18 20:37:52

**1. Work on projects using version control:**
In professional Work on projects using version control: In professional settings, we use a version control system like git. It allows us to work on new features/code, whiteout touching the codebase. It means we have a master branch that contains production-ready code and you would branch out to work on a new feature. Let's say you need to implement a new button, you would branch out from master to write new code that would display a button. Once you are done writing the code, you would merge the code back to master, after it passed all the tests. So take a look at GitHub or GitLab and get familiar with basic commands like push, pull, merge, and commit.

**2. Have a basic understanding of agile development:**
There is a certain prosses set in place that helps companies to deliver software for their customers. In software development, we have a number of steps before the code can be released. We have a set of Requirements, Design, Development, Testing (Design, Development, and Testing is repeated till testing has been satisfied), and only after you can Deploy. This is something you probably can't really practice by yourself. But knowing this could increase your chances of getting a junior position.

**3. Start getting familiar with task management tool(s):**
When you are working with a team, you will have visibility on what your team is currently working on, what's been done, and what is coming up. But the best part about it, you can use it to separate the problem into manageable tasks that aren't connected to each other. If let's say you are working on a feature that touches both frontend and backend. Right out of the gates, you can create two tasks and focus one part at a time.

These are my top 3 pieces of advice that could help junior developers to stand out during the interview process. Sometimes it's not enough to rely only on the technical side especially when you are just starting out and still developing your skills.

Subscribe to my youtube channel DevPool as my goal is to help beginners and juniors to succeed in the tech industry.

[YouTube - DevPool](youtube.com/channel/UC03vw5F2isFkbJhyEZU5bvg?sub_confirmation=1 "DevPool")
Released Cirrus 0.6.1 🚀 - A component and utility centric SCSS framework designed for rapid prototyping.
Tags: showdev, webdev, css, beginners
Published: 2021-01-18 20:23:27

Hey everyone!

I have never posted about this before, but I have just released a small update to Cirrus which builds on the changes made in 0.6.0.

## What is Cirrus?

Cirrus is a component and utility centric SCSS framework
designed for rapid prototyping. I started this project back in late 2016, but never really wrote about it. The main reason why you should use it is if you need to proto-type a project ASAP with many pre-styled component classes. There's a lot of CSS frameworks already out there, but Cirrus comes with my (and those who contributed in the past) take on what a CSS framework should have and a distinct style.

If you're interested, feel free to check out [Cirrus](https://github.com/Spiderpig86/Cirrus/)! [Documentation](https://cirrus-ui.netlify.app/)

## Onto the Updates

#### 🎉 Features

- Added rounded tag groups, added primary color to control themes, updated BEM notation for `tag`. [#49](https://github.com/Spiderpig86/Cirrus/pull/49)
- `tile` now inherits overflow rules. [4a4f276](https://github.com/Spiderpig86/Cirrus/commit/4a4f2769466676898e1e6c7291804943fc475034).
- Using multiple column breakpoint classes will now respond accordingly. For example with the code example below, the div will span 8 columns for large screens and above but will span 4 columns for all screen sizes up to large. This is more in line with the behavior seen in most major frameworks. [e6a0fd2](https://github.com/Spiderpig86/Cirrus/commit/e6a0fd26ca7ef33efe9d61097203d6281de00f57)

    ```html
    <div class="col-xs-4 col-lg-8"></div>
    ```

- Added BEM compliant class names for `card`. The old class names will still be supported but will be deprecated in a future release. [#51](https://github.com/Spiderpig86/Cirrus/issues/51)

#### 🐛 Fixes

- Removed extra space between label and `input-control` when the input contains an icon. [#47](https://github.com/Spiderpig86/Cirrus/pull/47)
- Fixed `tile` not overflowing correctly in smaller screens. [ad43bc2](https://github.com/Spiderpig86/Cirrus/commit/ad43bc2147416d065d4cdaf06a650693826d6784).
- Fixed inconsistent `card` UI when certain heights caused by overflowing text content. [8859388](https://github.com/Spiderpig86/Cirrus/commit/88593887d1f62719e8990e231994c5775b2aaf36)

#### 💥 Breaking Changes

- Shifted column sizes down one step: new `xs` that begins at 0px, old `xs` -> new `sm`, old `sm` -> new `md`, old `md` -> new `lg`, old `lg` -> new `xl`. This is to have better consistency with the majority of viewports we see today. [d2784b7](https://github.com/Spiderpig86/Cirrus/commit/d2784b7a27985298ada702eb9ea15b9097b436a2)

## Thanks for reading!
:gem: Thank you for taking the time to check out this post. For more content like this, head over to my actual [blog](https://slim.netlify.app/). Feel free to reach out to me on [LinkedIn](https://www.linkedin.com/in/serbis/) and follow me on [Github](https://github.com/Spiderpig86).
Simple Portfolio with PaperCSS and React
Tags: css, react, portfolio
Published: 2021-01-18 20:21:22

Hello dev.to community !!
I have created a very simple portfolio with [PaperCSS](https://www.getpapercss.com/) and [React](https://reactjs.org/).

Take a look here in [my own portfolio](https://bevilaqua.surge.sh).

![me](https://dev-to-uploads.s3.amazonaws.com/i/sf94wimwwpd52iwog6om.png) 

I published my portfolio with [surge.sh](https://surge.sh) and the code is in my [github](https://github.com/bevilaquabruno/portfolio-papercss).

<a href="https://www.buymeacoffee.com/bevilaqua" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-pink.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Fullstack React Meetup
Tags: react, node, meetup, javascript
Published: 2021-01-18 20:20:21

## A Fullstack React Meetup

I am starting a monthly meetup for Fullstack React and would like to invite anyone who wants to learn more about JavaScript, React, CSS/SCSS, APIs, GraphQL, Document Databases and overall just wants to join a community of folks getting together to learn about web development using the React ecosystem and related technologies.

### Fullstack React Meetup
Time: Jan 22nd, 2021 11:00 AM Pacific Time (PST)

[Add to your calendar](https://couchbase.zoom.us/meeting/tJModeGgqz0rGdUuy9pGsLA9HjRKfQ9aT-2X/ics)

**Join Zoom Meeting** 
https://couchbase.zoom.us/j/97528856131

**Source Code** 
[github.com/couchbaselabs/couchbase-nodejs-blog-api](https://github.com/couchbaselabs/couchbase-nodejs-blog-api)

### Upcoming Fullstack React Meetup Schedule

- **February 26th (11am PST, 2pm EST, 7pm GMT, 8pm WAT)**: 
Build a REST API with Session-based Authentication using Express JS.

- **March 26th (11am PST, 2pm EST, 7pm GMT, 8pm WAT)**: 
Build a React Blog Frontend for our REST API that we built in the March meetup.
 
- **April 23rd (11am PST, 2pm EST, 7pm GMT, 8pm WAT)
Fullstack React and GraphQL
  Create a self-contained repository with an Express Server, GraphQL API, and Apollo Client in React.

### Past Meetups:
- **January 22nd (11am PST, 2pm EST, 7pm GMT, 8pm WAT)**: React From Scratch
  Build a React project from scratch using Webpack, Babel, ESLint, and custom components using SCSS.

Developers typically only need to be introduced to new technology and shown the basics to get them started. The real learning will come as they take that knowledge and apply it to their projects. Therefore we focus a lot on providing a view of the overall landscape of fullstack development in React and applying the basics across all of these technologies more shallow than deep dives (except for React). By the nature of the program, in time those attending will become very proficient in React from a fundamentals standpoint and be able to use the community members as a resource or ask questions.

## How Much Does it Cost?

**Other than your time, it's free and open to anyone**

Join any of our meetups via Zoom. This meeting is open to the public.
JavaScript Strict Mode
Tags: html, javascript, codenewbie, tutorial
Published: 2021-01-18 20:11:41

{% youtube CmAljcmsnJs %}

---
Brendan Eich knew it would be impossible to create a programming language without mistakes in 10 days, so he created a **multi-paradigm** type of language.

> Multi-paradigm is a term in computer programming that allows different [styles of programming](https://techstack.hashnode.dev/javascript-coding-style). That is the ability to structure code in different ways.

The *Multi-paradigm* approach made JavaScript flexible and versatile. In fact, JavaScript at first was not created to last long, it was created to support Java to improve the users' experience on the web.

> Java and JavaScript are two different programming languages even though JavaScript syntax initially was to look like Java

Over time, JavaScript began to evolve and new features were added to the language to overrule past mistakes. The big release or version of JavaScript was in 2015, called **ECMAScript 2015**. Ever since then JavaScript JavaScript releases new versions or updates every year.

The downside was mistakes made before ECMAScript 2015 by the JavaScript creators got stuck in the language forever. But there's a JavaScript mode or directive called **use strict** that disallows any past mistake code structure.

---
[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613668162316/G1zfmhxQd.png)](https://www.cssigniter.com/members/aff/go/belloosagienoah)

---
### use strict
The directive looks like a string, `"use strict"` or `'use strict'`. It is either located at the topmost of a script or the top of a function.

> Although a JavaScript program or script that uses classes and modules enables `'use strict'` automatically.

For example, an undeclared variable will lead to a bug when `use strict` is used in a program. 

Undeclared Variable
```js
'use strict';

name = 'Bello'; // ReferenceError: name is not defined
console.log(name);
```

Declared Variable

```js
'use strict';

const name = 'Bello';
console.log(name) // Bello
```

[Edit on Replit](https://repl.it/@techstackgit/strict-mode#index.js)

---
### Conclusion
It is a good practice to`"use strict"` mode at the top of a program (script) or the top of a function. In future articles, the line for `"use strict"` will be skipped.

**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>
Binary Rage - my fun with open source
Tags: csharp, writing, database, opensource
Published: 2021-01-18 20:08:24

Hi there

So back in the day I coded and opensourced [Binary Rage](https://github.com/mchidk/BinaryRage) (link for github).

It was very fun to code - but the support was pretty wild.

Will I do open source again - I think so.

These days I am on a mission to help the regular Joe and Jane with login-issues of different kind.

As an example of my articles
[My blog about login](https://mchidk.medium.com)

[Therap Login](https://mchidk.medium.com/therap-login-what-you-need-to-know-dfdb30952adc)
[Wix Login](https://mchidk.medium.com/wix-login-what-you-need-to-know-90b9efc21d04)
[Chegg Login](https://mchidk.medium.com/chegg-login-you-need-to-read-this-5c7ce23c0ffd)
[Tjmaxx Login](https://mchidk.medium.com/tjmaxx-credit-card-login-what-you-need-to-know-dbb545807c12)
[Sexy Youtubers](https://mchidk.medium.com/sexy-youtubers-992c2ddab051)
[Survey Junkie Login](https://mchidk.medium.com/survey-junkie-login-what-you-really-need-to-know-6026ef77e8fe)
[Packback Login](https://mchidk.medium.com/packback-login-what-you-need-to-know-99ea8e0563b)
[Invisalign doctor login](https://mchidk.medium.com/invisalign-doctor-login-what-you-need-to-know-bedf5650fde6)
[Clickbank Login](https://mchidk.medium.com/clickbank-login-login-guide-207c26336b71)
[us bank login](https://mchidk.medium.com/u-s-bank-login-login-guide-888e28954b76)
A beginner's guide to open source
Tags: opensource, codenewbie, programming, csharp
Published: 2021-01-18 20:06:41

If you are into programming , there's a more than 60 percent chance that you have stumbled upon the word "open-source" more than once. Though, do you feel like you don't have enough experience to contribute to projects or either don't feel confident enough to make someone else's project better than it was? Then this post is for you. Take it from a person who contributed to some highly complex projects in C++ with a little knowledge of the language.

In the first month of my first year in college, I was completely clueless as to what I needed to do. Should I code? Should I build projects? Should I contribute to open-source? Should I join societies/clubs ? And the list never ends..
So, I decided to learn a bit of C++ and ended up watching many YouTube videos related to it. But soon I found myself get stuck in what some people call "The tutorial Hell". That is when I realized that all the knowledge that I was gaining was of no use if I couldn't put it to some use. So I enrolled myself in DevScript Winter of Code and would also suggest other fellow beginners to do the same. The program provides a list of projects from which you can choose and solve the issues.
In order to successfully complete the program , one thing I would suggest is "Be CURIOUS". Even if you think you know a lot or don't, keep pinging your project mentors and get on their nerves. Read blogs, watch tutorials related to the issue and keep trying until you are able to solve the issue and create a pull request. 


The best way to learn something is by DOING. Until and unless you don't apply your knowledge to practical use, you won't feel connected to the topic and won't be able to excel beyond a certain point. You will reach what I call a "plateau" and to avoid this, you can contribute to open source projects. Start with DWOC, then maybe even move onto GSOC next!! :-D

Remember there are no limits as to what you can achieve and what defines your path is the choices that you make every moment.
Keep LEARNING. Keep CODING.
Import Cycles in Golang: How To Deal With Them
Tags: go
Published: 2021-01-18 19:59:49

As a Golang developer, you probably have encountered import cycles. Golang does not allow import cycles. Go throws a compile-time error if it detects the import cycle in code. In this post, let’s understand how the import cycle occurs and how you can deal with them.

Read the full blog here:
[https://jogendra.dev/import-cycles-in-golang-and-how-to-deal-with-them](https://jogendra.dev/import-cycles-in-golang-and-how-to-deal-with-them)
How to Fix Google Chrome/Chromium asks for password to unlock keyring in Linux
Tags: linux, tutorial, beginners, devops
Published: 2021-01-18 19:51:04

It has been noticed that, Google Chrome and some other Chrome Engine based browsers such as Chromium, Microsoft Edge (Dev), etc are asking the password to unlock the keyring every time they have launched 

![Keyring](https://dev-to-uploads.s3.amazonaws.com/i/bsay5259a0o7q9qhugh5.png)

In this article, we are going to discuss, how we can easily solve this issue


##Step 1: 

###Install a text editor

I am going to use `leafpad` text editor,  you can use any other editor as your wish. To install `leafpad`, write this command in your terminal `sudo apt-get install leafpad`

##Step 2:

###For Google Chrome

Write this command, `sudo leafpad /usr/share/applications/google-chrome.desktop`

##Step 3:

After running this command, a text file will open, as you can see in this image

![exec](https://dev-to-uploads.s3.amazonaws.com/i/nxkmlh1eya6i3hwxc6jj.png)

Here you have to search for the keyword `Exec`, (Search menu -> Find or Ctrl+F)

Now, where-ever you find `Exec`, add the following line of code `--password-store=basic` with the rest of the line

Finally, `save` the file (File -> Save or Ctrl+S), launch Google Chrome again, you will not see the keyring pop-up anymore :)

###For Chromium

Write this command, `sudo leafpad /usr/share/applications/chromium-browser.desktop`  and follow the `Step 3` discussed previously

###For Microsoft Edge (Dev)

Write this command, `sudo leafpad /usr/share/applications/microsoft-edge-dev.desktop`  and follow the `Step 3` discussed previously.

###Update:

Updating the browser might bring the keyring back, In that scenario, repeat the discussed steps again.

###[Watch on YouTube](https://www.youtube.com/watch?v=g9HvgpEayag)

Thanks for reading. Have a great day :)

Coffee https://www.buymeacoffee.com/rahedmir
My first side project! Feeder!
Tags: sideprojects, python, rss
Published: 2021-01-18 19:37:29

Checkout [Feeder](https://github.com/cshintov/feeder).

The name is a play on words `feed` and `reader`. Or may be it helps you to feed on knowledge.

It's a teeny tiny RSS feed reader. It can accept a single url of an rss feed or a file containing multiple feeds.

You can use it to read `dev.to` feed like this:

`python reader.py --url https://dev.to/feed/ --read`

If you pass in `--read` flag it launches each article of the feeds one by one on the browser after asking for your permission. Without the flag it just prints out title, description and the link to the article one by one on the terminal.

I hope to add more features in the coming days, stay tuned! Cheers!