teleren/devto huggingface dataset:
My react app is working in browser but not in my mobile
Tags: react
Published: 2022-01-16 16:12:27

I'm developing a react app, I want to try some functions in my mobile but when I try to connect to it, I have an error. I understand that is an asynchronus problem... I'm trying to map an (by the moment) undefined array. But I don't understand by in the browser is working well and in my mobile not.

`const eventsFetch = async () => {
    const resEvents = await getAllEvents();
    const newArray = resEvents.filter((e) => {
        const date = new Date(e.date);

    return date.getTime() >= Date.now();
    });

    newArray.sort((e) => e.important === true ? -1 : 1);
    setEvents(newArray);
}`

Here is an screenshot from the mobile browser.. I tried with Chrome, Safari and Brave and always I got the same error.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7p61syfzd3o3d9146pl.jpg)

By last, I already try adding the optional chaining operator to the array, but I have the same result.

If I add a console.log with the result of the array after the filter and the sort, in my computer I can see that it's working fine. Here an image:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp3t7kglxq2u3vx0djnk.png)

The getAllEvents function:
`export const getAllEvents = async() => {
    try{
        const req = await fetch(getAllEventsUrl, {
            method: "GET",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin": "*",
            },
            credentials: "include",
        });
    
        const response = await req.json();
    
        if (!req.ok) {
            const error = new Error(response)
            error.status = req.status;
            return error;
        }
        
        return response;
    } catch(error) {
        return error;
    }
};`
The problem with sticky headers and sticky sidebars
Tags: ux
Published: 2022-01-16 15:59:08

I hate sticky headers. And sticky sidebars. Let me tell you why.

 By that I mean any content that stays at the top of the page even after you've scrolled down. I also hate sticky sidebars. By which I meant content at the side of the page that doesn't move as you scroll down.

## The problem with sticky headers
By sticky headers I mean any content that stays at the top of the page even after you've scrolled down. They're generally used to make the navigation always be at the top of the screen, no matter how far down it you've gone.

My initial problem with these is that they're unnecessary. If I need to go to another page, I'll just go back to the top of the page. On a computer you can use the Home key, on a mobile or tablet you can press on the very top bit of the screen where it tells you the time, connectivity, battery etc.

But if it was merely unnecessary, I could live with it. The big problem with it is that it makes it impossible to read all of the content. To show you what I mean I've created a Codepen.

{% codepen https://codepen.io/nicm42/pen/YzrgPEo %}

It has a sticky header, then below it is a heading and 100 paragraphs. In the embed the last paragraph I can see is paragraph 7.

If I page down - using either the page down key or the spacebar - the nav stays where it is. And because I've made sure the nav only fills the left half of the screen I can see that paragraphs 8 and 9 go behind it. If it filled the whole screen and I paged down, I'd have missed those two paragraphs completely.

Which is so annoying, because this is how I scroll. I either miss things and am confused or have to then use the arrow keys to scroll back up a bit.

There was a point when Twitter did this. Back then all tweets were 140 characters and the only way to retweet was to put RT at the start. This meant that all tweets were in the same size box. When I was on the website and pressed page down, literally a whole tweet went behind the header. The only way I could tell what was going on was if I had half a tweet at the bottom of one page and half a tweet of a different tweet and the top of the page. It's confusing and annoying.

So, stop it. Or carry on using it, but at least make sure all the content is readable and it's not vanishing below your sticky header (position: fixed and some padding at the top of the body will solve it nicely).

## The problem with a sticky sidebar
They're unreadable. If there is content below the bottom of the screen and you can't scroll it, how can you read it? This is a problem on blogs on dev.to. Even with my browser full screen I have to zoom out to 80% to see it all. And then of course it's too small to read easily.

How exactly are they expecting people to read all of that? Or maybe they aren't, in which case why is it there in the first place?

It's annoying that there is something there that could be important or interesting, but there is no way of seeing it.

## In conclusion

Please make sure your website is readable.
How To Get Web Development Freelancing Projects As Fresher & My Experience
Tags: webdev, beginners, javascript, career
Published: 2022-01-16 15:58:43

**How to get web development freelancing projects** when you are a student and what is it's benefits. I will also share my experience how I got my first freelancing project. 

## Benefits of Having Freelancing Projects

Well, I am not sharing how you can get projects for your web development agency. Here I am sharing you can get projects for learning more and learn how real works are done in real projects. 

If you have any freelancing projects that will help you in cracking web development interviews. Because in my first web development interview the interviewer asked do you have done any freelancing projects. 

Secondly these projects helps you in developing your skills. 

## Video
{% youtube ipoLMO1tI28 %}

This video is in Hindi. If you know Hindi this will be helpful to you. 

## How I Got My First Project

I got my **first project** through my senior of my college. He has a startup and he needed a developer. Then he call me and asked some questions for testing my knowledge and saw my personal projects. Then he gave me the project and I was the backend developer. I sharped my skills when I was working with them. This also helped in getting my job. 

## How to Get Web Development Freelancing Projects

Make good connections with your seniors who are also doing freelancing, job or have startups. Then can give you projects and also help you in learning new things. They can also help you in getting job refers. 

LinkedIn is the best social media to get projects. Make a professional LinkedIn profile. Share your knowledge there and also share your personal projects also. 

Many startups also need freelance web developers for their on going projects. You can find small startups and mail them. Write about your skills, your projects and share your resume. If they needed they will contact you. 

These were some tips on **how you can get web development projects if you are a fresher**. Comment below how you got your first project.
Leetcode 1885 Count Pairs in Two Arrays
Published: 2022-01-16 15:52:14

```java
class Solution {
    public long countPairs(int[] nums1, int[] nums2) {
        // We are counting i&j that ((nums1[i]-nums2[i])+(nums1[j]-nums2[j])>0)
        int N = nums1.length;
        int[] nums = new int[N];
        for (int i = 0; i < N; i++) {
            nums[i] = nums1[i] - nums2[i];
        }
        // sort that, then this question is like a 2Sum question.
        Arrays.sort(nums);
        long res = 0;
        // Use two pointers like 2Sum
        int i = 0;
        int j = nums.length - 1;
        while(j > i){
            // if nums[i] + nums[j] > 0, then (j-i) are all available results
            if(nums[i] + nums[j] > 0){
                res += j - i;
                j--;
            }else{
                // or increase i to try new value to make the sum larger
                i++;
            }
        }
        return res;
    }
}
```
Leetcode 540 Single Element in a Sorted Array

Published: 2022-01-16 15:50:55

```java
class Solution {
    public int singleNonDuplicate(int[] nums) {
        return singleNonDuplicate(nums, 0, nums.length-1);
    }
    private int singleNonDuplicate(int[] nums, int l, int r){
        int mid = (r-l) / 2+l;
        int left = mid-l+1;
        // if there is only one element to search (nums[l])
        if(r == l){
            return nums[l];
        }
        // if nums[mid] is the unique element 
        if(nums[mid] != nums[mid-1] && nums[mid] != nums[mid+1]){
            return nums[mid];
        }else if(nums[mid] == nums[mid-1]){
            // if 
            if(left % 2 == 1){
                // if left is odd, then the unique element is at left [l, mid] 
                return singleNonDuplicate(nums, l, mid);
            }else{
                // if right is odd, then the unique is at [mid+1, r]
                return singleNonDuplicate(nums, mid+1, r);
            }
        }else{
            if(left % 2 == 1){
                // if left is odd, then the unique element is at right [mid, r]
                return singleNonDuplicate(nums, mid, r);
            }else{
                // if right is odd, then the unique element is at left [l, mid-1]
                return singleNonDuplicate(nums, l, mid-1);
            }
        }
    }
}
```
Leetcode 759 Employee Free Time
Published: 2022-01-16 15:49:52

```python
class Solution:
    def employeeFreeTime(self, schedule: '[[Interval]]') -> '[Interval]':
        # In this question, we just find the union of schedules
        schedule_set = set()
        # flatten the intervals and use set to remove duplicates
        for employee in schedule:
            for interval in employee:
                schedule_set.add((interval.start, interval.end))
        # sort mainly by starting index
        working_times = sorted(list(schedule_set))
        start = -float("inf")
        end = float("inf")
        # res is the union of all working time
        res = []
        for working_time in working_times:
            # initial
            if start == -float("inf") and end == float("inf"):
                start = working_time[0]
                end = working_time[1]
            # if new working time is inside previous times
            elif start <= working_time[0] <= working_time[1] <= end:
                pass
            # if new game has overlapping with previous times but not inside it
            elif start <= working_time[0] <= end <= working_time[1]:
                end = working_time[1]
            # if there is no overlapping
            elif end < working_time[0]:
                res.append((start, end))
                start = working_time[0]
                end = working_time[1]
        # we pop the last element
        if not (start == -float("inf") and end == float("inf")):
            res.append((start, end))
        res2 = []
        # find leisure time
        for i in range(len(res) - 1):
            res2.append(Interval(res[i][1], res[i + 1][0]))

        return res2
```
Leetcode 1209 Remove All Adjacent Duplicates in String II

Published: 2022-01-16 15:48:42

```java
import java.util.Stack;

class Solution {
    class Wrapper{
        // wrapper for counting adjacent duplicates in String
        //c -> character
        char c;
        //n -> count number
        int n;
        Wrapper(char c, int n){
            this.c = c;
            this.n = n;
        }

        @Override
        public String toString() {
            return "Wrapper{" +
                    "c=" + c +
                    ", n=" + n +
                    '}';
        }
    }
    public String removeDuplicates(String s, int k) {
        Stack<Wrapper> stack = new Stack<>();
        int i = 0;
        //use sliding window O(n) to count duplicate adjacent elements
        while(i < s.length()){
            char c = s.charAt(i);
            int j = i+1;
            while(j < s.length() && s.charAt(j)==c){
                j++;
            }
            int left = (j-i);// duplicate numbers
            // find previous  Wrappers
            while(!stack.isEmpty() && stack.peek().c == c){
                Wrapper pop = stack.pop();
                left += pop.n;
            }
            left = left % k;
            if(left != 0) {
                stack.push(new Wrapper(c, left));
            }
            // update i
            i = j;
        }
        StringBuilder sb = new StringBuilder();
        for (Wrapper wrapper : stack) {
            sb.append(String.valueOf(wrapper.c).repeat(Math.max(0, wrapper.n)));
        }

        return sb.toString();
    }
}
```
Introducing GitFichas!
Tags: git, opensource, github
Published: 2022-01-17 10:53:37

---
title: Introducing GitFichas!
published: true
date: 2022-01-16 15:44:33 UTC
tags: git,opensource,github
canonical_url: https://jtemporal.com/introducing-gitfichas/
---

I started a new project, and I want to tell you all about it! 👀

For some time now I’ve been helping anyone who needs help with Git. From what I’ve seen, most people use git commands on a daily basis without necessarily understanding them…

This is not a problem, especially if you are starting your journey with versioning, however, not understanding the commands can get you into trouble with Git (conflicts, I’m looking at you). And as much as Git helps us in the development process to track changes, conflicts and detached heads are annoying things to solve, especially if you don’t understand what you need to do, right?

In order to improve the lives of those who use Git, I started [GitFichas](https://gitfichas.com/). GitFichas is nothing more than a site that aggregates Git study cards, in its original form, it was intend as a friendly resource in Portuguese, and now it officially has its version in English. Each card is made to be the simplest possible way so anyone can understand each command or concept.

[![GitFicha explaining how to interactively with command git add -p](https://gitfichas.com/assets/img/projects/en/008/thumbnail.jpg)](https://gitfichas.com/en/008?utm_source=blog)

<center>
<i>GitFicha number 008 talking about git add -p</i>
</center>

The cards are images that explain commands or concepts that I use daily in Git. They even bring little-known or used tips, that when properly applied, they can really come in handy.

Every week a new card is released on Wednesday.

I post the cards on my profile on [Twitter](http://twitter.com/jesstemporal) and [LinkedIn](https://www.linkedin.com/in/jessicatemporal/), but you can enjoy and follow [GitFichas on Instagram](https://instagram.com/gitfichas) or subscribe to the [GitFichas’ channel on Telegram](https://t.me/gitfichas).

And if you want to suggest a command or concept you’d like to see in the form of a card reply to this tweet below, and even though the tweet is in Portuguese is in Portuguese, don’t be shy and say _hi_. 👇

<center>
<br>
<blockquote>
<p lang="pt" dir="ltr">Perguntando pro meu TCC: Que comando <a href="https://twitter.com/hashtag/git?src=hash&amp;ref_src=twsrc%5Etfw">#git</a> você tem dificuldade mesmo rodando ele com frequência?</p>— Jessica Temporal (@jesstemporal) <a href="https://twitter.com/jesstemporal/status/1419992266828091408?ref_src=twsrc%5Etfw">July 27, 2021</a>
</blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</center>

I’m saving the commands and questions that are sent to me in a queue to make new cards as soon as possible. 😉
DomainFactory: Verständliches WordPress Hosting für kleines Geld
Tags: wordpress, hosting
Published: 2022-01-16 16:17:07

---
title: DomainFactory: Verständliches WordPress Hosting für kleines Geld
published: true
date: 2022-01-16 15:32:32 UTC
tags: WordPress,hosting
canonical_url: https://bloggerpilot.com/domainfactory/
---

![DomainFactory WordPress Hosting](https://bloggerpilot.com/wp-content/uploads/2022/01/domain-factory-desktop.png)

In Deutschland gibt es bestimmte Hoster, die kennt im Grunde...

Der Original-Artikel erschien auf [DomainFactory: Verständliches WordPress Hosting für kleines Geld](https://bloggerpilot.com/domainfactory/).

FomainFactory ist ein einzigartiges Hosting-Unternehmen, das sich auf die Erstellung von Websites für kleine Unternehmen spezialisiert hat, die mit ihrer eigenen Domain beginnen und nicht viel Geld für das Hosting bezahlen wollen. Bei DomainFactory bekommst du einen zuverlässigen Hosting-Service zu einem günstigen Preis, ohne dass du auf Funktionen verzichten musst, um das Beste aus deiner Website herauszuholen.
Taskforce 4.0 week 5
Published: 2021-11-28 20:44:32

Hello Everyone!

I can't believe the Bootcamp remains with only one week to go😮, this was the fifth week, and I can say it was the fastest week among all. Please allow me to take you through this week:

As usual, on Monday We started the week by implementing the feedback that were given during the last week's demo. After that, we were introduced to the new tasks that we had to deal with during the whole week.
On the technical part we had to implement Tests, Logs and security for our application. By testing your are checking whether the functionalities in your application are really functioning in the expected way, Logging means keeping track of every single activity that happened in your App and security refers to protecting some functionalities and give access to a certain people with the right privileges. 

On the part of soft skills, we also had different sessions, I can say the design thinking with Olaf, cultural awareness with Silke and Time management with Blaise. These are sessions that helps us to grow not only technically but also professionally.

So far I can say it has been an amazing journey and I can't wait to see what the last week of the bootcamp has kept for me.
See y'all and have a productive week!✌
Console.table() | Jim
Tags: javascript, webdev, debugging
Published: 2022-01-16 15:22:46

What is `console.table()`?

I know you are mostly using `console.log()` for displaying some data for a lot of reasons. One of the reasons might be to just show a fetched array of data.

Please stop doing that, there is a best method for showing an array of data, which actually shows the JSON/array data as a data table. Which makes debugging or seeing data in a more readable way. You can see the field name at the top just like the table.

It is as you can guess is `console.table()`.

It shows all the fields even if some object might not have that particular field value(the box remains empty). So you don't have to look through all the data if you know, how hard it is to see a big array of objects.

So, at least try that out to make your life easier.

To know more check the MDN documentation: [here](https://developer.mozilla.org/en-US/docs/Web/API/console/table).
Week 1 of my Web Development journey
Tags: discuss, webdev, beginners
Published: 2022-01-16 15:09:43

As I mentioned before, I will be willing to share my weekly experience. Recently, I’ve found myself on [codewell.cc] (http://codewell.cc), which is a site where you can practice your front end web development skills using basically HTML, CSS and JavaScript. I picked up a challenged, entitled “Developer Portfolio”, which you can find it [here](https://www.codewell.cc/challenges/web-developer-portfolio--617d4897a383e41090a3e46f), in case you wish to do some practices. The reason I did this challenge was to refresh my memory and my skills when it comes to CSS. I already had an online boot camp about these two technologies, where I also published 4 different small projects, but that was a very long time ago. During the portfolio challenge, I’ve faced quit some issues when it came to responsive design, JavaScript animations and publishing my code on GitHub and take it online to GitHub live pages. All is sorted out now and this challenge really helped me to understand more how CSS and HTML works with each others, and how a GitHub repository should be initiated.
As for the learning side, I’m still taking freeCodeCamp’s JavaScript curriculum, and to be specific, some basic Algorithm. As soon as I finish it, I’ll be starting with React, so that I can be able to implement it to my front end projects.
That’s all for the previous week, in case you reached to this part, I would really like to know how your week was and what were you working on.
Integrating Swagger OpenAPI in spring boot project for easy API documentation
Tags: java, backend, springboot, discuss
Published: 2022-01-16 15:01:35

This post describes how you can integrate swagger open api in a spring boot project.So you can share an api documentation to users and at the same time let them try the APIs without installation of any tool like postman.


www.codeklutz.com/api%20specification/rest%20api/Integrating-Swagger-OpenAPI-for-easy-API-documentation-in-springboot/
Reaching first 100 followers on DEV 🎉🚀
Tags: career, writing, productivity, beginners
Published: 2022-01-16 14:54:52

First of all, thanks to the Dev community for giving feedback on my posts and appreciating my content. 

## How it started

I always had a thing for writing. I had been writing [Medium blogs](https://medium.com/@anshuman-bhardwaj) about my travel for some time now. It brings me joy to share and express myself through words.

During my college, I made a [YouTube channel](https://www.youtube.com/channel/UC9-rIQbbBVxJyTIWPdhK4YA) and posted tutorials about CPU simulators & assembly programming. It made me realize that I love to teach. Last December, when I checked, my channel reached 300 subscribers, and I thought, let's continue doing what I like. 

I thought this year let me start contributing to the Dev Community and resume making YouTube videos. So during this New Year's long weekend, I re-branded my YouTube channel and created a Dev account.

I've posted two articles on Dev and received more than 2k views with 150+ reactions and gained 100+ followers.

## Where it's headed

I've been a developer for four years now. Although I have a CS degree, I consider myself a self-taught engineer. I've grown so much in my career that at the age of 22, I'm an Eng. manager with five direct reports. I feel my experience will be a lot helpful for the community.

I plan to continue writing and making videos at least once per week. It would be an achievement to keep this going for a year.

## Goals

1. Improve my writing and speaking skills.
2. Create content that I can be proud of
3. Deliver one Dev post and a YouTube video per week. 
4. Earn the 4/8/16 week streak badges from Dev. 

---

_I hope you enjoyed reading this article as much as I enjoyed writing it!_

For more such content, please follow me on [Twitter](https://twitter.com/sun_anshuman)

> Until next time

<img width="100%" src="https://media.giphy.com/media/kRkJXYahXjSE0/giphy.gif" />