teleren/devto huggingface dataset:
How I Use CSS Grid for Sticky Headers
Tags: css, grid
Published: 2020-10-07 20:30:28

Adam Racki's great [blog post](https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/) made me realize that it is possible to use `display: grid` to create sticky headers. As much as the contribution inspired me, it also confused me (why all this complexity in the code examples??). Here is what I took from it:

1. Sticky headers traditionally get positioned with `display: absolute;` or `display: fixed;`.

2. While this does work, there is a much more elegant syntax with `display: grid`.

## Demo: {% codepen https://codepen.io/xaverfleer/pen/JjKjLmr %}

## Code
### HTML
```html
<!DOCTYPE html>
<html>

<head>
  <title>Sticky Header</title>
  <meta charset="UTF-8" />
</head>

<body id="wrapper">
  <h1 id="sticky">A Panda Bear</h1>
  <main id="scroll-element">
  <img alt="A panda bear" height="500px" src="https://images.unsplash.com/photo-1526716121440-dc3b4f254a0a"/>
  </main>
</body>

</html>
```

### CSS
```css
#wrapper { height: 500px; display: grid; }
#scroll-element { overflow: auto; }
```

## What's the magic?
tbh, there is none (as with everything you understand).

## Really, what's going on?

Together the heading and the content are larger than what can be shown at once. The image is stands for lot of content. It has a fixed (large) height.

The CSS rule `overflow: auto;` allows the browser to scroll the `id="scroll-element"`.

The header with `id="sticky"` is always completely shown since the `id="scroll-element"` can shrink and overflow.

That's it.
Managing Application Delivery with Azure DevOps and A/B Testing in Azure
Tags: azure, tutorial, devops, testing
Published: 2020-10-07 19:30:18

#### 📺 036 - April Edwards 🎙️ Frank Boucher

{% youtube L8SRy3GB3IQ %}

---

In this episode, April is joining Frank for a deep dive into automating and continuously deploying your application using Azure Services. This session will use [DevOps principles](https://docs.microsoft.com/en-us/azure/architecture/framework/devops/testing?WT.mc_id=allaroundazure-devto-apedward) to show how operations and developer teams can work together to safely automate those tedious and manual tasks to deliver their application in Azure.  Starting with automating our build and deployment of a web application, backend service, and database. Adding in automated operations to include A/B testing and automating approvals for a successful deployment.

Building a Deployment Pipeline, April will demos how simple it is to incude these [best practices](https://docs.microsoft.com/en-us/azure/app-service/deploy-best-practices?WT.mc_id=allaroundazure-devto-apedward) to our development cycle. Pintch of YAML, a few clicks and voila!

---

### Useful Links

🔗 [Blog post](https://azapril.dev/2020/07/28/managing-application-delivery-with-azure-devops-and-a-b-testing-in-azure-webapps)

🔗 [Testing your Application and Azure Environment](https://docs.microsoft.com/en-us/azure/architecture/framework/devops/testing?WT.mc_id=allaroundazure-devto-apedward)

🔗 [Set up staging environments in Azure App Service](https://docs.microsoft.com/en-us/azure/app-service/deploy-staging-slots?WT.mc_id=allaroundazure-devto-apedward)

🔗 [Azure Functions deployment slots](https://docs.microsoft.com/en-us/azure/azure-functions/functions-deployment-slots?WT.mc_id=allaroundazure-devto-apedward)

🔗 [Deployment Best Practices](https://docs.microsoft.com/en-us/azure/app-service/deploy-best-practices?WT.mc_id=allaroundazure-devto-apedward)

### Learn more about April Edwards

🔗 [@TheAprilEdwards](https://twitter.com/TheAprilEdwards)

🔗 [Bio](hhttps://azapril.dev/bio/)


### Find Us On

📺 [Twitch](https://www.twitch.tv/microsoftdeveloper)

🔗 Twitter [@allaroundazure](https://twitter.com/allaroundazure)

☁️
Clojure and Google Sheets
Tags: clojure, googlesheets, java, javasdk
Published: 2020-10-07 19:25:25

---
title: Clojure and Google Sheets
published: true
description: 
tags: clojure, googlesheets, java, javasdk
cover_image: https://cdn-images-1.medium.com/max/800/1*KR9FnpOlPoF8uSJrEW4ibg.png
---

I've created a simple example with clojure using java google sheets SDK to integrate with google sheets.

**The example read some IBOVESPA stock prices**

This is possible because of clojure and Java interop
"With the sheer amount of Java code in production (and more being written every day), no modern programming language can hope to succeed without being able to interoperate with it. Rich Hickey choose well when he picked the JVM to host the Clojure language. Not only does Clojure benefit from state-of-the-art technology (raw performance, HotSpot, just-in-time compilation, adaptive optimization, garbage collection, and more), but also it makes the goal of seamless Java interoperability easier to achieve. The result is that Java interop with Clojure is both elegant and easy to use. " - Clojure in action (chapter 5)




You can see the repository example here 
[https://github.com/pvgomes/clojure-google-sheets](https://github.com/pvgomes/clojure-google-sheets)


or can see how to run the read and write using this example by this video

[https://www.youtube.com/watch?v=posNZFWSEgU](https://www.youtube.com/watch?v=posNZFWSEgU)
Lockdown positives
Tags: php, startup, javascript, blog
Published: 2020-10-07 19:12:32

During the pandemic situation in my country (Poland) I decided to spent my extra time making little experiment. But first I want to tell you what's my background. 

When the lockdown was started I save about 1h per day because of work remotely from my home. I don't like to get bored so I started making content for my Instagram (@octocode). This content is in polish but it doesn't matter. I extend my community from 98 followers to 600+ within 2 months. Why do I tell you about it? Because I met interesting people who inspired me to take the next step.

I decided to make a little experiment - try to build a startup based on the community. I asked my followers what project should I build. The winner is Meetenderly.com It's a calendar that you can embed on your website and you can sell your time. Let's imagine that you are a consultant and you want to sell your consultations. 

You can create events like "60 min. consultation" set a price ex. 100$ and it's ready. Meetenderly will provide you code to embed on your website and it will be ready to sell your time. 

I want to ask you what do you think about my idea. Remember that it's an experiment and I want to create this project based on community feedback. Every comment, suggestion, or idea is priceless for me.

For now, I have a landing page. I made it within 1 day so it's not perfect. You can leave me feedback about it. On my Instagram, I document my journey with this project so if you want to follow me it would be nice :) For today I published content in polish but I think if you join me there I try to publish in English because it's the next thing I want to try - improve my English skills.

Please let me know what do you think about this experiment and project as well.
What Keyboard Layout Do You Prefer?
Published: 2020-10-07 18:57:42

Last week I commented on this discussion asking what keyboards the DEV community uses.

{% link https://dev.to/maxdevjs/what-keyboard-do-you-use-1nnn %}

I showed my Tokyo60 keyboard with the HHKB variant of the QWERTY layout because it stressed my pinky less without having to reach for the bottom left corner. Instead, I replaced the usual capslock key with CTRL and put it on another layer. I still rarely use capslock though.

![Tokyo60 v2 with Holy Pandas](https://dev-to-uploads.s3.amazonaws.com/i/ar7tqrqs5af5coi4vw4i.jpg)

So whether it be for ergonomics or style, what keyboard layouts have you tried or prefer?

Some example of layouts other than QWERTY or its variants: 
- [Dvorak](https://en.wikipedia.org/wiki/Dvorak_keyboard_layout)
- [Colemak](https://en.wikipedia.org/wiki/Colemak)
- [Split](https://kinesis-ergo.com/split-keyboards/)
- [Ortholinear](https://keyboardkings.com/complete-overview-of-an-ortholinear-keyboard/)
How to change the port of a Next.js application
Tags: javascript, beginners
Published: 2020-10-07 18:48:17

I have been building my personal website using Next.js. By default, Next.js server runs on port `3000` which is good but sometimes you want to run the server on a different port maybe because you already have a service running on it, or maybe it's not your favorite port(which in my case is `8080`). So, let's see how can we change it.

### Create a next.js project.
Creating a next.js project is pretty simple and straight forward. Just simply run the below command in your terminal.
> Assumption: You already have yarn or npm install on your local.

```
npm create-next-app
# or
yarn create next-app
```

You can change the port using the following command.
```
yarn dev -p 8080
or
npm run dev -p 8080
```
visit http://localhost:8080/ to see your website up and running. This command is temporary and will run the server on `8080` whenever you enter the above command. But what if you want to make this permanently. 

### Change the Port Permanently

Once you have your project setup check the `package.json` file in the main folder.

```
{
  "name": "hashnode-blog-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}
```
Now what we need to change here is in the dev key inside scripts.

Change it to `"dev": "next dev -p 8080",` from `"dev": "next dev",`

Now run the below command to run the server
```
yarn dev
or
npm run dev
```

visit the http://localhost:8080/ you should be able to see the website. Something like this.

![Screenshot 2020-10-07 at 11.52.07 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602094939706/MJzFNlOt0l.png)
Use Native GPS With VueJS for iOS and Android
Tags: ios, android, gps, vue
Published: 2020-10-07 18:34:37

Hi people who want to conquer the planet! *Human btw*

Today I show you how to use **GPS** inside your **VueJS** app of destination to **Android** or **iOS**.

If you can’t understand how **VueJS** can be integrated inside mobile app take a view on my last post !

[Mobile App in 5 minutes with VueJS](https://dev.to/simerca/mobile-ios-android-app-with-vuejs-in-5-minutes-really-52n5)

## Did you know Capacitor ?

Capacitor is a library from develop by **Ionic** and It make a join with **JavaScript** code and **Native Mobile** functions.

Today we speak about the GPS but Capacitor have lots of functionality take a look here

https://capacitorjs.com/docs/getting-started

The first thing is to init capacitor inside your project application

```bash
npm install @capacitor/core @capacitor/cli
```

Next run 
```bash
npx cap init
```

Dont forget to change build dir inside the `capacitor.config.js`

**NOW**

Inside your application when you want get GeoLocation from user,
You do use 

```javascript

import { Plugins } from '@capacitor/core';

const { Geolocation } = Plugins;
export default {

methods:{
  async getCurrentPosition() {
    const coordinates = await Geolocation.getCurrentPosition();
    console.log('Current', coordinates);
  },
  watchPosition() {
    const wait = Geolocation.watchPosition({}, (position, err) => {
    })
  }
}
}
```

Now you can look on variable `coordinates`, has you can see is there an object like

```
{
speed:0, // on km/h
latitude:x,
longitude:x,
accurate:x // on metters
}
```

It's directly work on you browser and you can build it with Capacitor into a Mobile App.

You can enable high accurency with this option
```
enableHighAccuracy: true;
```

exemple
```javascript
const wait = Geolocation.watchPosition(
{
enableHighAccuracy: true;
}, (position, err) => 
{
console.log('error',err);
})
```

Very easy to use in your application !
Swagger - Magento 2
Tags: magento2
Published: 2020-10-07 18:00:38

Everytime I have to test API calls in a project, I need to search the configurations that need to be done. So finally thought of writing a simple blog post I end up using.

I have used two API testing methods for Magento.
- Postman (there is a Chrome plugin available)
- Swagger (which is inbuilt in Magento 2)

NOTE:
Please check https://github.com/dotmailer/dotmailer-magento2-extension/issues/557 before starting as there might be an error 
```
{"schemaValidationMessages":[{"level":"error","message":"Can't read from file http://paboda.order.local/rest/all/schema?services=all"}]}
```

Link to access: your_magento_url/swagger

By default there will be a few of API calls available but to use all methods we need to 
- create an integration user in Magento backend
- configure Swagger with API key

To create inegration user in Magento Backend
1. SYSTEM > Extensions > Integrations > Add New Integration
2. Give a name like "TestAPI"
3. Enter the current user's password
4. Go to API tab and select the sections (I usually mark all)
5. Save
6. In the list of Integrations, click on "Activate" in Activate column for the integration you created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t9taldwkpwjpac68ic9a.png)
7. Allow the list of actions
8. Click on "Done"
9. There will be 4 values generated
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5wvyks223h3devqts254.png)

To Configure Swagger with API key
1. Give the value of "Access Token" in SYSTEM > Extensions > Integrations > Add New Integration > Integration record > Integration Info Tab > Integration Details, as the api_key
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0jciq6bot9wxvyqdxgeh.png)
2. Click on apply

There will be API calls available to be executed.

Another setting related to API calls is as the following. The default value will be "No".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g53e87zui9ei8a91qd5u.png)

To fix "The consumer isn't authorized to access %resources." even when the access token is given,
`bin/magento config:set oauth/consumer/enable_integration_as_bearer 1`
Day 3 : Continuation of Weather App Implementation
Tags: 100daysofcode, javascript, react, webdev
Published: 2020-10-07 17:35:48

Application Components:
1. Input box to take user input
2. Search Button
3. Card to display the temperature information

Currently i am using hardcoded data. As a further step, i am planning to fetch data from a weather Api and make use of that in the application rendering.

Initial screen 

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

After Search Result

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

Things to-do next:
1. Fetch data from an API
2. Make UI look better
3. Handle all corner cases
Definition of terms, Eloquent Javascript
Tags: 100daysofcode, books, javascript
Published: 2020-10-07 17:35:35

Still on the book: [Eloquent Javascript](https://eloquentjavascript.net/11_async.html).

I learnt to define a couple of terms in programming. Defining the function of a tool or concept is as important as learning how to apply it. I started with the later. Today I looked into the former. 


_What is a module?_
> A module is a piece of program that specifies which other pieces it relies on and which functionality it provides for other modules to use (its interface).


_What is a Minifier?_
A minifier is a tool used to reduce the size of a program by automatically removing unnecessary pieces of code or rewriting code to reduce the file size.

_What are Packages?_
> A package is a chunk of code that can be distributed (copied and installed). It may contain one or more modules and has information about which other packages it depends on. 

_What is a bundler?_
A bundler is a tool that helps you put together all your JavaScript code or modules into one Javascript file before publishing to the web. The gist behind having a bundler is that fetching one javascript file is faster than fetching several tiny modules.

_What is a promise?_
An object that may produce a value sometime in the future.

_Day 83 done and dusted._
Hacktoberfest PR #1: A PR almost as simple as typing "Hello, World!" 
Tags: opensource
Published: 2020-10-07 17:30:54

I did say I wanted to learn new technologies, what better way than to force myself into trying them out working on PRs for hacktoberfest. I swear, I'm not interested in the free t-shirt.

So release 0.2 has now commence. Our professor wants us to make 4 PRs for the month of October as part of the annual event to celebrate open source. Sounds easy enough right? Well, when you consider that I'm fresh and new into the open source scene, it seems almost challenging for me to even find a repo with an issue that I can help contribute to without another more experienced person beating me to it.

I finally found one in the form of a react-github-resume repo which displays all of a user's repositories in a resume liked style. The author wanted to switch from using the fetch API to using axios. This was exciting for me since I always wanted to work with axios and this gave me the experience I would've needed. So I asked if I could be assigned the issue and I was given the opportunity to give it a shot.
https://github.com/sabesansathananthan/React-GitHub-Resume/issues/1

I quickly switched around to using axios instead of fetch, however, when testing it on dev, it would routinely redirect to the 404 page. This was strange for me especially since the return status from the Github API call was 200, meaning that the data was being grabbed. After hours of staring at code, I messaged the slack group asking for help. My professor, David, then directed me to the axios github page, and in particular, the response object's available methods on the readme

![Axios Response Object attributes](https://dev-to-uploads.s3.amazonaws.com/i/e6njtmow615kp6oxhw2o.png)

The attributes here were different from the Fetch API which was what I was more used to. In particular, the "statusText" and "data" properties were equivalent to the "response.ok" and "response.json" properties in fetch. I quickly fixed these changes and finally the app worked as intended. I had a small issue where I couldn't grab my required screenshots because I had hit the rate limit for the API and had to make an access token in order to make the request successful, but I was able to get what I needed, made the PR, and 2 hours later, my PR was accepted. 
https://github.com/sabesansathananthan/React-GitHub-Resume/pull/12

It feels really good to have a PR accepted on a project that's not owned by someone that I know. It goes to show how much my work means, even if it's something as small as a bug fix. I still have another 3 PRs left to make. I want to try to scale up the challenge so hopefully my next PR is as more exciting as this one. Until next time, stay tuned!
Snapshot Testing in Swift 📸
Tags: swift, xcode, testing, ios
Published: 2020-10-07 17:11:42

Speed up your UI tests by doing Snapshot Tests in Swift, they are an easy way to ensure that the UI doesn’t change unexpectedly when you modify your code.

Check out this article to learn how to start leveraging the benefit of Snapshot Testing in your project 👍

{% medium https://medium.com/dev-jam/snapshot-testing-in-swift-9d52cbec075c %}
9 Must Have Chrome Extensions For Front End Developers
Tags: chrome, extension, frontend
Published: 2020-10-07 17:08:18

As a front end developer, it's obvious you use chrome but have you ever think of how it can help speed up how you work and build amazing stuffs.

In this post, I'll show you **top 9 chrome extensions you should have as a front end developer**.

Now let dive in. 

## 1. ColorPick EyeDropper

This is my number one chrome extension which I use almost on a daily basis. With the help of this extension, you can grab colors either from a webpage or an image. 

You can get colors in RGB, RGBA, HEX and HSLA format and you can easily copy the color codes via the inbuilt clipboard. 

## 2. WhatFont

By mere looking at the name you should be able to guess what it does. This chrome extension gives you the exact name and details of any font either on a webpage or image. 

## 3. CSS Viewer

This is definitely a must-have for front end developers. This tool give you css properties of any element by just hovering over the element.

## 4. Keyframes

Keyframes is a powerful chrome extension for creating CSS animations. 

With the help of this extension, you don't have to switch between your browser and code editor while creating animations. 

## 5. Screenshots 

Taking screenshots made easier. This extension will help you take screenshots either full page or visible content and you can save the screenshots in PDF and PNG format. 

## 6. Imageye

Imageye is yet another superb chrome extension which allows you to download all images available on a webpage. You don't have to save images one by one which will take much of your time, you can simply call Imageye to the rescue. 

## 7. Dimensions 

Ever wanted to know or measure the distance between elements on a webpage but don't know how you gonna do it? 

Dimensions got ya. With this chrome extension, getting the distance between elements on a webpage is a walk in the park. 

## 8. Pesticide For Chrome 

Remember those days when you had to add a red border on that element to see where and how it is positioned on the webpage? 

Those days are now over with Pesticide For Chrome. This chrome extension add pesticide CSS to your webpage outlining each element to see how they are being placed on the webpage. 

## 9. Web Developer 

This is the most amazing chrome extension developers must have. This extension allows you to style files, validate html and css files, resize images, disable scripts and lots more. 

So guys that's it. Hope you enjoyed this simple and short article. Which extension are you using that you find extremely useful and is not listed here? Or have you used one of these extensions before, what's your experience like? 

Drop a comment, like and share as well.
New Courses
Tags: courses, udemy, todayilearned, showdev
Published: 2020-10-07 16:54:21

Hello students,

I'm Anant Rungta (https://www.linkedin.com/in/anant016/)

I've brought a new course for you on STL - Standard Template Library

There's a Discount Coupon Link for you guys - https://www.udemy.com/course/stl-standard-template-library/?referralCode=A7DC028CD0411B0F7377

My other discounted course links -
- MTA 98-382 Preparation - https://www.udemy.com/course/mta-98-382/?referralCode=C4D6071FB742C591F0D2

- Web Development Interview Questions - https://www.udemy.com/course/web-dev-interview-prep/?referralCode=4912CA88E55CEA9D56B6

- Node.js Crash Course - https://www.udemy.com/course/nodejs-crash-course-for-backend-engineer/?referralCode=2F7AF51DC20D6CCB16CF