teleren/devto huggingface dataset:
Freelancing Live Q&A - How to get started
Tags: freelancing, webdev, career
Published: 2020-05-05 11:01:18

---
title: Freelancing Live Q&A - How to get started
published: true
description: Live Q&A on freelancing and how to get started
tags: #freelancing #webdev #career
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9ntsg5cmrbuxjzt9mi6m.jpg
---

TLDR: I am organising a live Q&A about freelancing, targeted at developers who wish to start in the coming weeks. Should this have a positive response, I will organise a series of webinars in the coming weeks.

Completely free, no selling of courses, no get rich quick schemes, just pure value.

If this is of any interest please register your interest here https://forms.gle/Ts2JMs1CoNp2CoUr5. 

---

#The why
For the past few months, I have been pondering of ways I can add value to the overall dev community and after posting this article, back in 2018 (https://dev.to/fzammit/10-lessons-from-a-software-engineer--freelancer-1fho) I decided it is high time I get to share my experience as a freelancer, 15 years of it (Gawd, time flies).

I always loved the idea of a community as it brings a certain energy to the place. In the past, I used to organise meet-ups with friends and we used to have over 200 attendees, from different backgrounds (freelancers, creatives, architects, designers, developers etc) https://business.facebook.com/heydayofficial/ and now I want to create something similar for freelancers, specifically developers.

#Experiment
This is an experiment as I have no idea what the response will be like....but the idea is to organise a series of webinars split into recommended strategies (40% of the time) and questions and answers (60% of the time). I want to hear about your successes, struggles, why maybe you haven't started and what might be holding you back.

The target audience is for anyone starting off or might have 1 or 2 clients.

If you are asking whether this is the right time? There is never a right time and from my experience during the recession in 2009, this can work. More on this in the webinar...

#Register
This webinar is completely free, no selling of courses, no get rich quick schemes, just pure value and if this is of any interest please register your interest here https://forms.gle/Ts2JMs1CoNp2CoUr5.

#Questions
Any questions you have, feel free to DM me on Twitter, https://twitter.com/fzammit.

Looking forward to seeing you at the webinar :) and I would highly appreciate if you would share this with any of your friends.

Thank you!
check if Linked List is palindrome or not
Tags: linkedlist, palindrome, algo, ds
Published: 2020-05-05 10:57:37

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

## Approach
1. Find the middle Node
2. Reverse the latter half of list
3. Compare each node of the original list to reversed list.
 - Note: the list returned after reversing, breaks the original list into 2 parts, we return the prev which is reversed

#### Node Def

```java
 class ListNode {
      public int val;
      public ListNode next;
      ListNode(int x) { val = x; next = null; }
  }

```

#### Runner class

```java
public class LinkedListPalindrome{
    public int isPalindrome(ListNode root) {

        // If no Node, false always
        if (root == null)
            return 0;

        // If single Node only, true always
        if (root.next == null)
            return 1;
        
        ListNode curr = root;
        
        //1. Find the middle Node
        ListNode midNode = findMidNode(curr);
        //2. Reverse the latter half of list
        ListNode revNode = reverseNodeList(midNode);
        //3. Compare each node 
        curr = root;
        while(curr != null && revNode != null){
            if(curr.val != revNode.val){
                return 0;
            }
            curr = curr.next;
            revNode = revNode.next;
        }
        return 1;
    }
```

#### find the middle node
1. If list size is even , middle Node will be len/2 th Node
2. If list size is odd, middle Node will be len/2 th Node(floor Node)

```java
    /**
     * Use 2 pointer approach
     * fast pointer nad slow pointer
     */
    private ListNode findMidNode(ListNode root){
        ListNode sp = root;
        ListNode fp = root;
        while(fp.next != null && fp.next.next !=null){
            fp = fp.next.next;
            sp = sp.next;
        }
        return sp;
    }
```

```java 
    private ListNode reverseNodeList(ListNode root){
        ListNode curr = root;
        ListNode prev = null;
        ListNode next = null;
        
        while(curr != null ){
            next = curr.next;
            curr.next = prev;
            prev = curr;
            curr = next;
        }
        return prev;
    }
}
```
Deploy create-react-app to github pages adventure
Tags: react, javascript, github
Published: 2020-05-05 10:34:08

This year I promised myself to create my own webpage. Without thinking twice I decided to host my website at github with some constraints:
- source code should be placed at the same repo
- website should be hosted as user page (from root folder)

Looking for a deploy guide I figured out, that github allows to publish user page only from default branch (master) & doesn't allow to set custom folder as root for deployed website. Ooops 😥

A quick research gave me 3 options:
- deploy website as project (but I wish a pretty url 🥺)
- leave in repo just the final build (and how to deal with the source code?! 🧐)
- move source files to submodules (why so difficult 🙈)

Messing around for a while and almost decided to choose the submodules option, I came across the [official guide to deploy create-react-app](https://create-react-app.dev/docs/deployment/#github-pages). Last step reminded to directly setup deploy branch (master in common).

That's it! We could place source code into different branch and use master branch as build folder. So I moved the source code into dev branch & finally deployed [my page](https://alinaosv.github.io).

Hope this trick will help you to save couple of hours and deploy your user page without pain😉
Kubernetes Multi-node Cluster Deployment on AWS with Terraform
Tags: kubernetes, terraform, aws, devops
Published: 2020-05-05 10:24:46

This video explains how to use Terraform to provision Kubernetes EKS cluster on AWS. You can learn about 
- Terraform Scripts for Kubernetes
- How to connect EKS cluster from laptop
- Deploy sample application using Kubectl cli tool.
Checkout the video link: https://youtu.be/rv6MOvpXU90

{%youtube rv6MOvpXU90 %}
Tailwind CSS Tutorial
Tags: webdev, beginners, tutorial, css
Published: 2020-05-05 10:05:24

<strong>[Tailwind CSS](https://tailwindcss.com/)</strong> is a utility-first CSS library that makes development for your next website way easier and faster. It basically means you could stop writing CSS, which sounds amazing. Learn more about what it is and how you can use it in my tutorial.

{% youtube ApPEK_6KM60 %}
<center>[Youtube: Tailwind CSS Tutorial](https://youtu.be/ApPEK_6KM60)</center>

So what is Tailwind CSS doing? Instead of creating a CSS class called chat-notification, with a display flex, we simply create a class called flex, and the CSS is automatically applied.

Before:
```html
<div class="chat-notification"></div>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
</style>
```
After:
```html
<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl"></div>
```

This is a simple example where we are applying class names instead of CSS properties. Tailwind has a large number of CSS classes ready to go, so instead of doing <strong>padding-top:1.5rem</strong> we can add a class called <strong>p-6</strong> which simple and easy to get used to.

This also means you can edit things easily without jumping between files.

Some benefits include:
* Faster development lifecycle
* No requirement for additional CSS files
* Customisation of Tailwind can be done with PostCSS settings
* Large base of nice classes for shadows, fonts, colors ready to use
* You are still building your own site, so unlike bootstrap, tailwind is just there to improve your development
* Bootstrap comes with preset components, this is still available via Tailwind UI

You can find out more about TailwindCSS directly from their website:
[https://tailwindcss.com/](https://tailwindcss.com/)

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
GBAATM-Rebirth (GameBoy Advance Auto Trainer Maker): A new hope
Tags: retrogaming, qt, c
Published: 2020-05-20 12:13:32

---
title: GBAATM-Rebirth (GameBoy Advance Auto Trainer Maker): A new hope
published: true
date: 2020-05-05 10:01:16 UTC
tags: retrogaming, qt, c++
canonical_url: https://gbatemp.net/threads/gbaatm-rebirth-gba-auto-trainer-maker-a-new-hope.564321/
---

The story about how I used my quarantine to learn Reverse Engineering, C++ and a bit of assembly doing a refactoring of a legacy tool written until 2011.  
With no real C++ knowledge, using a Windows XP VM to test the original code and develop this GBA rom patcher on Linux.

[Read More...](https://gbatemp.net/threads/gbaatm-rebirth-gba-auto-trainer-maker-a-new-hope.564321/)
Epilepsy Alarms
Tags: epilepsyalarm
Published: 2020-05-05 09:55:15

<a href="https://www.frequencyprecision.com/collections/convulsion-sensors/products/convulsion-sensor-pager-set?variant=19712751534183">Epilepsy alarm</a> and safety devices can help minimize the risk of injuries associated with multiple or prolonged seizures in children with Dravet syndrome.
Using Loops in Alpine.js
Tags: alpinejs, javascript
Published: 2020-05-04 14:24:26

---
title: Using Loops in Alpine.js
published: true
description: Alpine.js can be used to iterate through arrays, and it's really simple.
tags: Alpine.js, JavaScript
---

Alpine.js is a great, new framework inspired heavily by Vue.js. It is great for adding small snippets of JavaScript behaviour to your markup, when and where you need it.

So, let’s get started with our example, imagine we’ve got an array of developer profiles. We need to loop through that array and display the name and ID number of each developer. Alpine has the `x-for` directive for us to conveniently use.

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

Here, we are using Alpine’s `x-for` directive that I spoke about earlier, to loop through each developer in the developers array. Then inside each loop iteration we are displaying the developers name and ID number, using the `x-text` directive on a div element. `x-text` will update the `innerText` of the element with the value provided. The crucial part of Alpine’s `x-for` is that the directive is placed on a `<template>` tag, otherwise it won’t work. You cannot place Alpine’s for loop on a `div` or any other standard HTML element.

That is it for this post, I hope for those of you who are adopting Alpine in it’s early phase, are enjoying it as much as I am. More posts on Alpine.js, and it’s directives are coming, for now though, enjoy.

This post is from my blog: https://nwby.io/blog/using-loops-in-alpinejs/ - if you would like to head over there you will find more posts related to JS, Laravel, PHP, Go and other topics.
Is it worth switching to PHP 7?
Tags: php
Published: 2020-05-05 09:46:16

## 1. PERFORMANCE

In benchmarks, version 7.x works up to 14 times faster than version 5.x, and the speed of pages on WordPress increases by up to 100%, however, developers safely say about an increase in performance from 20 to 70% without changing the page code.

Check other advantages put together for dev.to by [Softeris Software House](https://www.softeris.pl/en):

## 2. COMPATIBILITY

Not all CMS or frameworks were immediately ready for PHP 7, but this compatibility appeared over time. 

- Zend Framework - since ver. 2.4+
- WordPress - since ver. 4.3
- Drupal - since ver. 8
- Joomla - since ver. 3.5

## 3. INTELLIGENT RESOURCES

The increase in efficiency is not only te increase in speed, but also the reduction of resources necessary to launch individual subpages. As a result, website owners can reduce the required infrastructure to some extent, and thus save money.

## 4. SYNTAX UNIFICATION

One of the many complaints of PHP users was the lack of consistency in syntax. The latest PHP 7 release has finally solved this problem. Many operations have been added that make the sytnax more compact. This will allow to make fuller use of functional programming. 

## 5. EXCEPTIONS INSTEAD OF ERRORS

From version 7, critical errors are engine exceptions, which can be caught and handled like all other exceptions. Wise! 

## 6. SCALAR TYPE DECLARATIONS

A revolutionary change in PHP 7 is the addition of declarations for scalar types, they can be declared strings (integers), integers (int) and floating point (float) and logical types (boolean).

**Don't wait! Enter the future today** :)
Using `find()` on an array of Objects in JavaScript
Tags: javascript
Published: 2020-05-05 09:34:25

---
title: Using `find()` on an array of Objects in JavaScript
published: true
description: 
tags: javascript
---

You have hit an API endpoint to retrieve some data and you get back an array of Objects. Problem is, you need to find one of the objects in that array. You could write a loop that will loop through each element in the array and find the one you're looking for, we don't need to do that. We can do it in one line with JavaScript using the `find()` method.

```javascript
let frameworks = [
  { name: "Laravel", lang: "PHP" },
  { name: "Rails", lang: "Ruby" }
];

let laravel = frameworks.find(obj => obj.name === 'Laravel');
```

The find method is actually executing a function here and tests that function against each element in the array. Each element in the array is represented as `obj` and then we're accessing the `name` property of each element and testing if the name property is equal to the value of 'Laravel'. Once, we find the object that has a name property equal to 'Laravel', the object is assigned to the variable `laravel`.

Pretty cool right? We can find the object we're looking for with one line of code. If you have just started out on the path to learning JavaScript, then I would still recommend learning how to write loops that will iterate over an array, but once you are confident with loops, the `find()` method is perfect for keeping your code clean.

If you want to find out more about the `find()` method, you can check out it's page on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find). Enjoy.
How to Build a Modal in Vue.Js
Tags: vue, javascript, opensource, webdev
Published: 2020-05-05 09:08:36

### A great way to create a simple modal from scratch

Modals are one of the most used components in the UI, we can find them in the most popular CSS frameworks like **Bootstrap** or libraries of UI components like **TailwindUI**.

They are useful because in our projects we often want to show messages or we need to allow users to make an action without to change page.

Usually, I used Bootstrap modals on my projects but when I changed job I started to work with Vue.js and TailwindCSS and one of my first tasks was to create a modal component.

So I started some research, I found many examples and packages which were doing that, but these did not cover all the cases, some of the most common problems were:
* when the modal was very high it was cut
* when the modal was open, the body of the page was still scrollable
* they did not give to the parent the possibility to customize the content of the modal
* they didn’t give explicit methods to trigger some events on the opening and closing actions

Today we are going to build a modal component that should be fine for every need, it will fix the problems above:
* it will fit the page according to its content and it will become scrollable automatically
* when the modal is open, the body of the page will not be scrollable
* the parent will be free to customize the component adding also HTML
* there are closeModal() and openModal() events that will give you the opportunity to trigger other events.


Check out how to build your modal component on Medium 👇

{% medium https://medium.com/notonlycss/how-to-build-a-modal-in-vue-js-b3db644afaeb %}

_Ps. In the comments you will find the friends link if you have finished your monthly view on Medium. **If you are not happy that the tutorial is on Medium, nobody forces you to read it**.
Peace and love_  ✌️❤️
Productive Yet Languorous
Tags: devjournal, womenintech
Published: 2020-05-05 08:45:50

_This post was originally published on May 5, 2020 on [my blog](https://alexlsalt.github.io/blog)._

Another day! I had another pleasant realization last night at around 9pm that this week is très laidback. 

It feels so nice to not have something pressing to do at every minute of the day and evening!

While I have my client project - with steady progress each day, there's no need for stress or rushing things out the door. I wish I could go back to my past self (high school, college, etc) and teach her how to complete tasks and assignments gradually and pleasurably instead of waiting until the last minute and inevitably dreading the experience.

I've been doing a lot of personal development work during this period of COVID confinement - with meditation, thought work, and tuning in to helpful podcasts - and it has just made me realize how much progress I've made, as well as how much interesting work there still is to do!
Populate the content in react
Tags: react
Published: 2020-05-05 08:34:57

Hi,
Hopefully, this question makes sense. It's probably not necessarily react-specific question but I'm learning reactjs. And I know that react does not deal with content at all but I know that you guys have practical experience of react websites in real life. I'm trying to get up to date with the industry. In the past I did a few custom websites in html/js/css or wordpress. In terms of content, to update the website afterwards, I'd edit the html pages or the client would do it themselves (CMS).

I'm learning reactjs and am wondering what are usually data/content sources in the reactjs live apps/websites. What I mean is how does the 'content' get updated after the launch. I assume in big companies, there're IT departments who do the job. In small businesses (without IT departments), that have their websites made (in react), how would they update the content. Would you develop a react site with a headless CMS for the client to update or is there any other solution? Or for small business you wouldn't use react (for that very reason)?
I worked with a number of very small businesses in the past but am rather ignorant of a wider industry standards and the times have moved on, as well, I guess.
Thank you.
Silence the errors in Bash or Zsh
Tags: bash, zsh, unix
Published: 2020-05-05 08:34:52

Sometimes we may want to silence the errors in Bash or Zsh, such as when using `find` and we don't want the "Permission denied" messages to clobber up the results.  The `2> /dev/null` or `2>&-` can be added to the command


```bash
sudo find / -name opendiff 2> /dev/null
```
or
```bash
sudo find / -name opendiff 2>&-
```

The `2` above is the file descriptor for the [standard error](https://en.wikipedia.org/wiki/Standard_streams) `stderr`. `/dev/null` is the "[null device](https://en.wikipedia.org/wiki/Null_device)" (also called the bit bucket or black hole). The `>&-` is to close the file descriptor, and `2>&-` is to close `stderr`.
Looking for beta testers for Alexa Skill
Tags: askdev, alexa, beta, showdev
Published: 2020-05-05 07:58:56

Hi there! 

I've built a simple, but useful Alexa Skill - [Find My Phone](https://www.amazon.com/dp/B084Z6BQPB/) and I'm looking for a (rewarded) beta testers. It's a skill which can help you to call your lost phone from Alexa. Unlike others, it works with all countries and does not require to install additional apps. 

If you are interested to become a beta tester, leave a comment below, or connect with me at [voody.co](https://voody.co). I will send you an invite.

Also, if anyone is interested to start developing Skills for Alexa, feel free to ask me anything! 


Thanks!
How I can estimate the manhours that maintainance of a bad code costs?
Tags: help, professional
Published: 2020-05-05 08:17:26

In my do far short career I stumbled across a huge pile bad-written piece of code. So I want to estimate how long and how much it takes to maintain it and how long and how much it takes to just write from the start.

I want to convince my manager (and aid him) towards a direction that we should gradually re-implement pieces of our business logic. For that I need to show something in a matter of money and hours.

Do you have any methodology on how to do that?
Build your own FROGGER game - super simple vanilla JavaScript walkthrough
Tags: javascript, games
Published: 2020-05-05 08:14:14

A retro grid-based game in vanilla JavaScript, HTML and CSS

Frogger is a 1981 arcade game developed by Konami and originally published by Sega. The game was originally going to be titled "Highway Crossing Frog," but the executives at Sega felt it did not capture the true nature of the game and was changed simply to "Frogger". The object of the game is to direct a frog to its home by crossing a busy road and navigating a river by jumping on logs. By 2005, Frogger in its various home video game incarnations had sold 20 million copies worldwide, including 5 million in the United States. The game found its way into popular culture, including television and music.

It is a timed grid-based game. In this repo, I will be putting extra focus on the 'switch' use case. If you want to learn how to use switches effectively, please have a look at my code.

What inbuilt functions are we going to focus on?
- switch
- cases
- addEventListener
- removeEventListener
- setInterval
- clearInterval
- document.querySelector
- arrow functions

Rules of Frogger
- You will start on your blue starting block, or 'starting-block'
- You have 20 seconds from pressing the start button to get to your red block - or 'ending-block' to win the game
- You will lose if the time runs out
- You will lose if you get hit by a car, or 'c1'
- You will lose if you fall into the river, or '.l4, .l5, .lf2, .lf3'
- You will be safe on the road, or '.c2, .c3'
- You will be safe on the logs, or '.l1, .l2, .l3'
- You will move with the logs when on them
- You can pause the game by pressing the same button as you did to start the game

{% youtube L-FWBhjt6CU %} 

Repo here: https://github.com/kubowania/Frogger

I would love to see what you made so please tag me on twitter on @ania_kubow or mention me on Youtube so I can find it and see :)