teleren/devto huggingface dataset:
JAMstack Roundup for December 17th 2019
Tags: jamstack, react, graphql, webdev
Published: 2019-12-17 22:11:25

###Here are 5 great articles we read this week!
1. [Deploying a static NuxtJS site to Cloudflare Workers](https://scotch.io/tutorials/deploying-a-static-nuxtjs-site-to-cloudflare-workers)

    Recently Cloudflare announced Workers support for static sites. This opens up a whole new era of static website deployment. 🔓

2. [Six Web Performance Technologies to Watch in 2020](https://simonhearne.com/2019/2020-predictions/)

    Don't bet on 5G and HTTP/3 to make things faster 🙅‍♀️🙅‍♂️, there are six technologies that I believe will have a bigger impact on web performance in 2020.

3. [How to Add Search Functionality to a Gatsby Blog](https://www.aboutmonica.com/blog/create-gatsby-blog-search-tutorial)

    This tutorial will is based off of how I implemented a basic search on this site and will cover how to create a search filter on a site built with [GatsbyJS](https://www.gatsbyjs.org/). 🔍

4. [Adding Google Calendar to your JAMstack](https://www.raymondcamden.com/2019/11/18/adding-google-calendar-to-your-jamstack)

    I’m a huge Google Calendar user and I know many other people are as well. I thought it might be interesting to see if you could add upcoming events, driven by a Google Calendar, to a static website. 📅

5. [Creating a Markdown Blog with Next.js](https://tinacms.org/blog/simple-markdown-blog-nextjs/)

    Next.js is simple and flexible. Compared to a full-fledged static site generator, there are less prescriptive guiderails placed on developers in the implementation of an app or site. Due to this flexibility, this article shares just one perspective to approach building a simple, markdown-based blog. 🤗
How To Set Goal 
Tags: motivation
Published: 2019-12-17 22:05:31

Goals help us to move you forward in one direction. We have to decide what we want to achieve in our life and start working on them to make our dream comes true.

Without a goal, we are living an aimless life that is not going to go anywhere.

So here the question arises that, how you can set a realistic goal to help you achieve you more in whatever you do.

  Think: Whether you think you can, or you think you can’t — you’re right. You have to figure out what you want to achieve.

It doesn’t matter whether your goal is small or big. First, you have to crystal and clear mindset what you want to get from your life.

 Write it down: If you write down your goals, it increases your chances that you will achieve your goal.

 Believe: You have to believe in yourself that you have to power to do the impossible because unless you believe in yourself, no one else going to believe in you.


 Start Working: Nothing will work unless you do. Take the first step towards your goal.

If your goal is to become healthier, take time from your busy schedule to starting running, doing exercise, eating healthy food.

Whatever your goal may be, you won’t be able to achieve it unless you start working on them.

 Persistence: We all gone through it when you start working on your goal, and after a few days we just quit working on them.

Your brain starts creating the obstacle that why you can’t achieve your goal.

So, you have to focus on your goal, not problems. When you start focusing on your goal, you will get a solution to every problem.

 Celebrate: Celebrate what you have achieved, and it will make your chances higher to achieve your aim.
CORS problems aren't always CORS...
Tags: cors, web
Published: 2021-01-09 12:51:40

---
title: CORS problems aren't always CORS...
published: true
date: 2019-12-17 21:15:28 UTC
tags: cors,web
canonical_url: https://www.solarwinter.net/cors-problems-arent-always-cors/
---

Having wasted several hours trying to work out what was wrong with my code, only to find it was nothing to do with that, I'm just recording this for later.

Firefox was giving me this error:

_Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:4572/[...]. (Reason: CORS request did not succeed)._

Seemed clear enough. So I spent several hours checking headers, adding debug into LocalStack (which I'm using to mimic S3), and the like.

Eventually it dawned on me that the 'network' tabe wasn't even showing the pre-flight OPTIONS request. So I did what I should have done some time back and tried another browser (Chrome), which worked fine.

Thanks to [https://stackoverflow.com/posts/51888226/revisions](https://stackoverflow.com/posts/51888226/revisions) I eventually worked out that it was because Firefox didn't accept the self-signed certificate on the local server. Nothing to do with CORS. (The server started off as HTTP, for that matter.)

So. Chrome is arguably doing the wrong thing by allowing an HTTP PUT from an HTTPS site without a murmur. But that error from Firefox is **really** misleading...

Hopefully this might help someone else, even if it's just me in six months time!
Does anyone know how to enable a screen reader to announce to a user when a button has been clicked? or removed?
Tags: react, reactnative, javascript, aria
Published: 2019-12-17 20:46:12

Hey all! I am currently working on making a site more accessible and my question that i'm in need of help with today is this... How can I a make a screen reader announce when a button has been clicked or removed? Heres some more context. Currently when a user is on a shop check out page and finds a product that they would like remove from their cart they then click on the "remove" button. My task here to to have a screen reader announce to the user that this product has been removed. So after they click the "removed" button the screen reader should announce this action to the user whether its something like: "Button pressed" or "Removed". This site has been coded using JavaScript and React Native. I have tried using 

aria-relevant={'all'}
        
aria-atomic={true}

and
        
aria-role={alert}

on the <View> component where the "remove" button lives. There is an onPress event that removes the product from the users cart. Is there a way to announce "Removed" when a user removes a product from their cart?? Whether is on the <View> or in the onPress event handler/function??
Landing the First Job
Tags: students, beginners
Published: 2019-12-17 20:15:47

---
title: Landing the First Job
published: true
description: Part 4 of DEV Student Series
tags: students,beginners
---
There are so many things to think about when searching for that first dev job, and even more to keep in mind once you actually start. The best tips come from those that have been there before, so let's check out some posts from different folks and see what methods and strategies they used to succeed. 

If you’re looking for an internship or freelance work to start off, don't be afraid to put yourself out there. Let the DEV community know you are looking for work. [Ravi](https://dev.to/ivarojha) has these tips on applying for internships:

- Find the right point of contact
- Keep the intro short
- Talk more about what you can give to the company, less about what you’ll take away…

{% link https://dev.to/ivarojha/how-to-apply-for-software-engineering-internships-at-startups-4jfb %}

After you have some experience under your belt, make sure you know how to market yourself for full-time positions. Update your code on GitHub, add your DEV articles to LinkedIn, stay in contact with connections that have had positive work experience with you, and reach out to mentors and the community for advice. We suggest getting experience with open-source projects as a great resume builder.

Starting that first job can be stressful and nerve racking, as [Amanda](https://dev.to/amandasopkin) points out in her article *Self Care for Developers* don’t forget to:

- Celebrate how far you’ve come 🥳 
- Be thankful to those who helped you get where you are 
- Practice overall self care

{% link https://dev.to/amandasopkin/self-care-for-developers-51a0 %}

Remember that even senior developers are constantly learning and making mistakes. Never be too proud to admit and grow from these. If you take responsibility for your actions and communicate effectively even when situations become difficult, then you are acting as a good teammate.

{% link https://dev.to/jacobherrington/50-things-i-wish-i-d-known-at-my-first-developer-job-part-1-2dm4 %}

{% link https://dev.to/torianne02/looking-for-your-first-dev-role-advice-for-young-devs-by-a-young-dev-h2a %}

{% link https://dev.to/jamesmh/transitioning-into-your-first-junior-developer-role-2n8d %}
***

We hope that this four part series gives you the tools you need to succeed as a beginner dev. Follow the [#career](https://dev.to/t/career), [#internships](https://dev.to/t/internships), and [#beginners](https://dev.to/t/beginners) tags for more articles to help you get your start.

If you’re a senior dev or in a hiring position, how do these tips level up to what you are looking for in beginners?
How to break out of SDE-I role
Tags: discuss, career, webdev, backend
Published: 2019-12-17 20:01:55

---
title: How to break out of SDE-I role
published: true
description: This article is for the people who are in their first job and want to learn things so that they can make that big jump in their career. There must be a guide that can tell, how much work is left.
tags: discuss, career, webdev, backend
cover_image: https://i.imgur.com/aV8yfFk.jpg
---

A few days ago, I posted a new blog on [my personal blog.](https://ranvir.xyz/blog/)

[Breaking out of Software Developer-I role as a web developer](https://ranvir.xyz/blog/breaking-out-of-the-sde-1-role/). Please head over to the post if you want to read the detailed description.

Here are some of the key points that I want to share here as well. **Experienced Devs**, please share your checklist as well will add it there.

* Learn Database designing
* Learn some DevOps
* Learn how to debug
* Learn to write tests
* Learn about scaling issues
* Learn a little bit about security
* Learn about caching
* Learn to review code properly
* Maintain your personal websites
* Help out new joinings and business guys
* Ask for the promotion, when you feel like you are ready to step up.
Host graphql or BaaS for single person side project
Tags: discuss, react, graphql, javascript
Published: 2019-12-17 19:55:26

I've recently started planning for a new side project and am working on picking out a basic stack. Since it's just me, my goals are to keep the infrastructure to a minimum to avoid having to manage a lot of resources. I have done some backend programming in the past, but have been exclusively front end for the past few years. I would be excited to try out graphql if a good hosted service exists. I know that AWS has AppSync, but haven't seen much talk about it. Previously I've stuck to firebase/firestore for side projects like this, since I've found them easy to manage in the past.

What types of services should I be checking out?
express-telescope: A beautiful error page for Expressjs apps
Tags: javascript, typescript, opensource
Published: 2019-12-17 19:52:36

In the local development, we see the Expressjs error page a lot. Most probably the countless time in every day. You can do a beautiful representation of the error page, the will be more readable, eye-catching and nice to see.Telescope brings a beautiful error page of your application.

Thanks for reading! you can support the express-telescope project directly on
GitHub: https://github.com/getspooky/express-telescope
Install :  npm install express-telescope
Tweening with GSAP inside Vue
Tags: vue, gsap, animations
Published: 2019-12-17 19:38:59


I really enjoy working with Vue.js, because it's easy to setup and has a great community.
I've also enjoyed building interactive experiences using Adobe/Macromedia Flash in the past. One of best thing in Flash, was animations. This could be done using the the timeline interface in Flash itself. But it was also possible using ActionScript, by using libraries such as [Tweener](https://code.google.com/archive/p/tweener), [Twease](https://code.google.com/archive/p/twease) & [TweenLite](https://greensock.com/tweenlite).
<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/dlzx1n0mhixspj2hky7b.png" alt="Flash timeline" style="width:100%"><figcaption>Animating with the timeline and keyframes in Flash</figcaption>
</figure>

TweenLite has been succeeded by GreenSock Animation Platform (GSAP).It still has the almost the same syntax, and is still compatible with TweenLite.

## Setup

If you have a vue project it's really easy to start using GSAP, just install it using NPM

`npm add gsap`

or use from a CDN

`<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>`

Once you've included GSAP in your project, you can start using it inside your components.

Here's an example of a box being rotated and changes background color. The animations overlap, have different durations and ease.
{% codepen https://codepen.io/timvdeijnden/pen/WNboaZm default-tab=js,result %}

The timeline.to expects 3 arguments, the last one is optional.
`.to( target:[ Object | Array | String ], vars:Object, position:[ Number | String ] ) : self`

I use the `this.$el` reference to animate the component node, I specify the attributes I want to animate. And for the background color animation I also specify a relative position. As soon as the component has been mounted the animation starts, using the Vue's [mounted lifecyle hook](https://vuejs.org/v2/api/#mounted).

By creating animation using JavaScript you can create a number of animations easily, for example fading in letters, changing to multiple colors, and animating a group.

{% codepen https://codepen.io/timvdeijnden/pen/NWPbEzN default-tab=js,result %}

In this example all the spans are animated, then the component itself changes font color 6 times and it animates out using a scale and alpha 0.

Note that I use timeline.from the first time, and timeline.to the other times. This way I don't have to specify the initial styles in CSS.

As you can see the timeline is really powerfull, and it's easy to use together with Vue.

I've also created a GitHub repo with these examples: https://github.com/TimvdEijnden/vue-gsap-example
ORM vs Query Builders vs Raw SQL
Tags: discuss, orm, sql
Published: 2019-12-17 19:06:22

I've recently been working on an dated side project which is built in node.js coupled with an ORM querying against Postgres. 

Since picking this back up, I'm starting to reach the point where ORM is getting in the way and I'm now reaching back to plain SQL statements against my DB. 

This got me thinking, do I really need an ORM anymore? What are the benefits I aimed to achieve at the outset of the project and do they still seem relevant now? 

I took some time to see how the sentiment looked on google and found a few (some quite recent) blog posts suggesting ORMs are to be avoided, ditch the ORMs and get back to basics:

https://blog.logrocket.com/why-you-should-avoid-orms-with-examples-in-node-js-e0baab73fa5/

https://eli.thegreenplace.net/2019/to-orm-or-not-to-orm/

Since I build in Node.js I then ended up looking into the world of SQL query builders, namely Knex.js which a few of the ORMs out there also use. Hmm ok, now query builders do I really need this in my life? 

End of the day, all of this has me thinking. I'm proficient and happy to write raw SQL. I find ORMs provide good structure whilst prototyping early on and adjusting the model as I go, but this may just all be an illusion, since I equally would have little issue doing this work directly in my DB and all things said I would probably push more of the work and design correctly into my DB rather than polluting my application with such decisions.

I'd like to get some views from the Dev community:

Are ORMs still relevant? 

If deemed that SQL queries in your application are fine, I'd be interested to understand whether you bundle these into a service / db access layer in your application or you find yourself peppering them across files.

Have you found benefit in using a query builder such as the features offered by Knex?

Do you feel as though you are using an ORM knowing you are going to be breaking out into native SQL at some point? In which case, is that OK with you?
The seven sins of meetings with remote participants
Tags: meetings, productivity, inclusion
Published: 2019-12-17 18:50:02

---
title: The seven sins of meetings with remote participants
published: true
description: seven things not to do when you have a meeting with remote participants
tags: meetings,productivity,inclusion
cover_image: https://thepracticaldev.s3.amazonaws.com/i/95ovlem1tx9rb28f0kf7.jpg
---

## "Thou shalt not forget about the agenda or deviate from it"

It's a lot of work to stay up late (or early) and dial into a meeting. An agenda published at least a day before makes it worth while. If people can't attend, they can add the info you need from them to the agenda. 

## "Thou shalt not cancel meetings shortly before they start"

This isn't "giving people back the time", this is "annoying people who stayed up late to have this meeting". 

## "Thou shalt not all speak at the same time"

Nothing is more grating when you are sitting at home late night and have a cacophony of people for the first 5 minutes talking about what the cafeteria is serving. Sure you can mute, but how would you know when to tune in again? 

## "Thou shalt not keep your mic on when you are typing"

Look, we all love some breakbeat and drum and base. But not while trying to follow a meeting. This also applies to heavy breathing and sneezing. Or eating. 

## "Thou shalt not abandon the chat"

Anyone who has trouble connecting won't be able to tell you. But often you can already type something in the chat. As a person not in the room it is also daunting to try to interject, so often people leave feedback in the chat instead. 

## "Thou shalt not assume people can see your presentation clearly - or at all"

Bumping up fonts, not presenting intrinsic and detailed flowcharts is the idea. Imagine blurry things all over them. Even better: a shared slide deck so people can see it on their own machine. 

## "Thou shalt not scribble on whiteboards and assume people can follow"

Digital meeting systems are sophisticated and whilst Teams f.e. can make handwritten notes readable and even "see" through people blocking whiteboards, taking notes in the tool on screen includes everyone.
Problem with iFrame.
Tags: iframe, javascript, html, jquery
Published: 2019-12-17 18:25:35

Hi guys.
I have a problem with jquery (the code is here https://pastebin.com/ieEwvMYW).

I want to make the text written in the textarea appears in the input of the site of the iframe tag. The id of that input is "CreateChatroomInputName" and I put it in a var of jquery ( var myFrame = $("#myframe").contents().find('#CreateChatroomInputName'); ) but it's not considered.

Can you help me to solve this problem?
How to automatically deploy to GitLab pages w/ CI 🚀
Tags: gitlab, parcel, ci, tutorial
Published: 2019-12-17 18:12:14

Long before GitHub actions were released, GitLab had [pipelines](https://about.gitlab.com/blog/2019/07/12/guide-to-ci-cd-pipelines/). They can do a ton of things, one of the simplest is to build & deploy a static site. When I learned this, I moved my projects there and have been using it for that since.
<img alt="GitLab logo" src="https://thepracticaldev.s3.amazonaws.com/i/sjc9rjwxbzr0wpg3hx6b.png" width=200 />
There are a ton of options when deploying a static site nowadays: Now/Surge/Glitch, the list goes on... They work but all have a major flaw: they all require an extra step to run. And I'm _lazy_. 😌💤

---

Automatic deploys (upon pushes to a branch) can be yours with just two steps: a build script and continuous integration (CI) configuration. Both take ~10 seconds to set up.

## 1. Build script 🔨

As long as your project has a build script that produces artifacts, the output directory can be hosted automatically. I've been using [Parcel](https://parceljs.org/), so if I just provide the CLI arg `--out-dir public` it will put the build output in `public`.

Since the GitLab page URL for this project has a subroute (the repository name), you'll need to specify a public URL so assets are linked to correctly. In Parcel land, this means adding `--public-url /my-project/`.

So for a project in Parcel, this is what the script should look like in package.json:

`"build-gitlab": "parcel build src/index.html --out-dir public --public-url /my-project/"`

> Webpack can do all of this too, just in the config instead of args.

## 2. CI config ⚙️

Make a `.gitlab-ci.yml` in the root of your project, and add this:

```yml
image: node:latest

pages:
  stage: deploy
  script:
  - npm install
  - npm run build-gitlab
  artifacts:
    paths:
    - public
  only:
  - master
```

This adds a job called `deploy`: it installs dependencies then runs our build script from above, and then hosts the artifacts. Obviously you can [customize](https://docs.gitlab.com/ee/ci/yaml/) this config to your liking (changing deploy branch, etc), but adding this file and pushing to master will Just Work™️.

---

And that's it. Now every time you push to `master` it will trigger a deploy. Nice!

![nice](https://i.giphy.com/media/iI9fd2UjMTgSGeKUEQ/giphy.gif)
Day 14 – Serving HTML Pages - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-17 18:06:14

__Do you know we can send html pages to the client?__


Yes! You can do it using node js.

First we’ll create the server as like we created in day 12 tutorial

{% post nerdjfpb/day-12-creating-own-server-learning-node-js-in-30-days-mini-series-3ef %}

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1sea2wz282nl87qptf3w.png)

For sending the html file we need the `fs module` which in built in node.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/65mbbjbuux5fk0ucxh69.png)

I got the starter from bootstrap – https://getbootstrap.com/docs/4.4/getting-started/introduction/

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wvsx4y21hjnt12zc5wbm.png)

We need to create stream using fs module. So that we can send the html file.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n6yvlooe0rs9hnpq32v9.png)

Then we can send it using pipe and send the response.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x5iv60o3j2z1e16uj48b.png)

Now run it using node app.js

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/24ja0dnc9jjhceipzymf.png)

__See the result__

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fo3o15304pa3w71ds6cx.png)

###Let me know if you have any questions about it.

You can see the graphical version here
{% instagram B6LrHKcgNXv %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day14-nodejsin30days/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !


###__You can read the old posts from this series (below)__

{% post nerdjfpb/day-1-learning-node-js-in-30-days-mini-series-55e7 %}

{% post nerdjfpb/day-2-learning-node-js-in-30-days-mini-series-5023 %}

{% post nerdjfpb/day-3-learning-node-js-in-30-days-mini-series-24i4 %}

{% post nerdjfpb/day-4-learning-node-js-in-30-days-mini-series-1koc %}

{% post nerdjfpb/day-5-learning-node-js-in-30-days-mini-series-21jm %}

{% post nerdjfpb/day-6-learning-node-js-in-30-days-mini-series-758 %}

{% post nerdjfpb/day-7-learning-node-js-in-30-days-mini-series-3023 %}

{% post nerdjfpb/day-8-var-vs-let-vs-const-learning-node-js-in-30-days-mini-series-1i72 %}

{% post nerdjfpb/day-9-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2dfe %}

{% post nerdjfpb/day-10-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2802 %}

{% post nerdjfpb/day-11-creating-and-deleting-folders-learning-node-js-in-30-days-mini-series-3a2d %}

{% post nerdjfpb/day-12-creating-own-server-learning-node-js-in-30-days-mini-series-3ef %}

{% post nerdjfpb/day-13-buffer-stream-learning-node-js-in-30-days-mini-series-5c5d %}