teleren/devto huggingface dataset:
Next JS Starter Kit with TypeScript and Tailwind CSS
Tags: nextjs, tailwindcss, react, webdev
Published: 2021-11-05 15:54:53

---
title: Next JS Starter Kit with TypeScript and Tailwind CSS
published: true
description: Next JS Starter template built with React, TypeScript, Tailwind CSS with awesome developer experience ESLint, Prettier.
tags: Nextjs, tailwind, react, webdev
cover_image: https://github.com/ixartz/Next-js-Boilerplate/raw/master/public/assets/images/nextjs-starter-banner.png?raw=true
---

I've just updated my Next JS Starter Template to the latest version, Next JS 12. The perfect starter kit to start your Next JS in seconds with TypeScript and Tailwind CSS 2. It was built for developer experience in mind with linter ESLint and Code formatter Prettier and VSCode.

You can test the [Next JS Starter Kit live demo](https://github.com/ixartz/Next-js-Boilerplate).

You can check out the repo at: [Next JS Starter Template GitHub](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/)

{% github https://github.com/ixartz/Next-js-Boilerplate %}

## Built with latest technology

Here is all the features included out of box:

- 🔥 Next JS 12

- 🎨 Integrate with Tailwind CSS 2 with JIT mode

- 🎉 TypeScript

- ⚛️ React

- ✏️ ESLint for TypeScript

  - with Next JS default configuration and Next JS Core Web Vitals

  - with Airbnb configuration

- 🛠 Code Formatter with Prettier

- 🦊 Husky for Git Hooks

- 🚫 Lint-staged for running linters on Git staged files

- 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript

- 🤖 SEO-friendly

- ⚙️ Bundler Analyzer

- 🖱️ One click deploy

- Vercel

  - Or, Netlify

  - Or, you can deploy manually to any hosting service

{% github https://github.com/ixartz/Next-js-Boilerplate %}
Blog Post 7: Learning Journey Week of 11/1/2021
Published: 2021-11-05 15:13:59

Week November 1st-5th 2021 was interesting because for the first time ever during this journey into Software Engineering.  I kind of saw the vision or felt the vision Gino(mentor) was trying to show me. Gino suggested I invest in note cards to remember certain vocabulary,codes, and steps. 

In the beginning of the week Gino had me read several articles/curriculums on program fundamentals.  Here is quick glance into what topics I read here (https://github.com/Ada-Developers-Academy/textbook-curriculum/tree/main/00-programming-fundamentals).

While reading the curriculum I noticed that almost everything I saw was what Gino has been teaching all along! For example, the proper steps in to push changes in GitHub Gino has been stressing to me how important it was and is.  I used one of my note cards for that.  Also I ran into a merge conflict issue with Gino in regards to some information I was updating in my about me page from my GitHub.io site.  In a weird way I was excited that I ran into this issue because I had the opportunity to see how the issue should be resolved in order to move forward in GitHub.
Beginner here, have mercy!
Tags: javascript, beginners, programming
Published: 2021-11-05 15:09:19

Hi All,

My brain is stuck and I need help.
I'm just going through the JS Fundamentals training and for the life of me, I cannot seem to fully understand when to use a variable keyword (let, const) or the "function" keyword.

I understand what each does, I've gone through the theory 4 times until now but... something's missing.

Can someone help me, please?

I hope I made this clear enough...
Creating a platform like Forem With PHP
Tags: meta, php, discuss, news
Published: 2021-11-05 15:03:28

Hello all! I'm here to notify you about a platform like Forem created with PHP. it's not ready yet, but I need help developing it. You can contribute to the code that is hosted on [Github](https://github.com/Posandu/blogg). 
Some of it's features will be,
1. Articles
2. Custom Pages
3. Notifications
4. Pages
5. Reactions
As I said, it's not done yet. Here are some screenshots if you would like to see.
![](https://user-images.githubusercontent.com/76736580/140531400-8c611914-6126-4b79-8ee9-1bec5dcfcbf9.png)
![](https://user-images.githubusercontent.com/76736580/140531449-a051dcde-69f9-4ad9-9b84-0e27d4c5cc82.png)
![](https://user-images.githubusercontent.com/76736580/140531614-8091d338-fb28-42eb-bc62-ca5e9d3f349a.png)

** *Changes may happen **

And BTW this post was also written in the platform I create.
My First Hacktoberfest Experience
Tags: flutter, dart, opensource, hacktoberfest
Published: 2021-11-05 15:02:33

I completed my First Hacktoberfest by submitting 4 PRs. My 4 PRs are accepted by Hacktoberfest Team. Special Thanks to #HarishAnbalagan for encouraging me to participate Hacktoberfest and Congratulations for your Hacktoberfest completion. After participating Hacktoberfest I got to know contributing to open source will improve our knowledge and it will help others also, So I decided to contribute more to Open Source.
How to use git cherry-pick
Tags: git, productivity, discuss, tutorial
Published: 2021-11-05 14:56:37

_This is a blog post tutorial explaining how to use `git cherry-pick`. It has a bit more info on `git cherry-pick` than the README in my project, but you can jump ahead and just use the github [tutorial](https://github.com/Cerchie/git-cherry-pick-tutorial/edit/main/README.md)._

## First, what is `git cherry-pick` ?

The description from the [documentation](https://git-scm.com/docs/git-cherry-pick) says:

"Given one or more existing commits, apply the change each one introduces, recording a new commit for each."

Well, what does that mean? I think of it as basically re-writing over your old commits, but learning-by-doing is best!

Let's get started:

## Tutorial

1. `git clone https://github.com/Cerchie/git-cherry-pick-tutorial` this repo. 

2. on line 5 in `cherry-pick.txt`, add "This sentence represents the last commit in the tutorial." and `git add .` and `git commit`. 

3. run `git log` to find the number for the 'wrong' commit:

```
commit 01ec7674c359004493950a17fbe0a42d6b08c2de
Author: Lucia Cerchie <lucia@stepzen.com>
Date:   Thu Jul 29 13:29:03 2021 -0700

    cherry-pick me
```


Run `git cherry-pick 01ec7674c359004493950a17fbe0a42d6b08c2de -x` 

You may need to resolve some conflicts.

### Optional: 

Learn how to cherry-pick multiple commits!

   - Remove your addition to line 5, save, and `git add .` and `git commit`

   - Make an addition, like "This sentence represents a middle commit", save, and `git add .` and `git commit`

   - Make another addition, like "This sentence represents the latest commit", save, and `git add .` and `git commit`

   - run `git log` to find the number for the first commit, and the latest commit. 


Now, if you want to include the first commit you made (the removal of your addition to line 5) run:

`git cherry-pick commit_number_first_commit^..commit_number_of_last_commit`

If you _don't_ want to include it, run:

`git cherry-pick commit_number_first_commit..commit_number_of_last_commit`, without the carat. 

source for optional portion: https://stackoverflow.com/questions/1670970/how-to-cherry-pick-multiple-commits

______________________

## Conclusion

I hope this tutorial was helpful! If you ran into trouble or if I can provide more accurate or clear information, let me know in the comments!
Release Notes 11.05 - Syntropy Agent Golang Refactor
Tags: devops, networking, release, go
Published: 2021-11-05 14:55:11

We're thrilled to announce the release of our Syntropy Golang Agent, replacing our previous Python-based agent. This new release is not an alternative option; rather, it's a complete refactor from scratch and a replacement going forward. It has all the features and capabilities of the previous agent, with barely any changes from the outside; however, we hope it will provide better performance and more sustainable development in the long term. We won't go into why Golang, as you can find zillion articles everywhere on the internet!

As of today, the python agent is deprecated, and all efforts are put into building the best Syntropy Agent in Go. At the moment, it's just a stable replica of the former, but new features are to be added.

**The Baseline:** For you as a Syntropy user, that won't change anything and won't affect any of your existing or future setup environments. You can consider this announcement just as FYI. Syntropy Agent setup has always been available to install via [Docker](https://docs.syntropystack.com/docs/install-with-docker) or [Ansible](https://docs.syntropystack.com/docs/install-with-ansible), and that doesn't change. We bet some didn't even know what the programming language of the current agent was!

As we progress our technology and grow the ecosystem, we listen closely to our community to build tools that matter. If you have any feedback or ideas, [let’s talk on Discord](https://discord.gg/UYDyHwk5gN).

---

**Call to action:** [Update your Syntropy Agent](https://docs.syntropystack.com/docs/update-syntropy-agent) to the latest version.

**Open Source:** the new Golang agent will be open-sourced in the near future.

**Why the announcement:** we love transparency and keeping our community in the loop.

**What to expect:** same existing functionality, better performance, and more future capabilities.


If you like the new updates and improvements, we look forward to hearing your feedback on Twitter or Discord.


---

## Get Started

Get started with Syntropy Stack with our three minute [quick start video](https://vimeo.com/499558754), or follow the [documentation](https://docs.syntropystack.com) for more details. Use Syntropy Stack to streamline your container and multi-cloud deployments and automate network orchestration.

## Get Involved

Our community helps us identify the right problems to solve for our users. Whether you’re an active user of one of our products or just getting started, [join our community on Discord](https://discord.gg/UYDyHwk5gN)! We love to foster communication among developers. Also don’t hesitate to send us a message if you have feedback or need assistance. We're happy to help!
Internal Struggles While Seeking to Make Change
Tags: greatatwork, contentment, perspective, changingcareers
Published: 2021-11-05 14:47:27

---
title: Internal Struggles While Seeking to Make Change
published: true
date: 2021-11-05 14:46:09 UTC
tags: greatatwork,contentment,perspective,changingcareers
canonical_url: https://medium.com/@bass41992ben/internal-struggles-while-seeking-to-make-change-581252cd4c
---

![](https://cdn-images-1.medium.com/max/1024/0*Tf6n69qp2w93LKXq)
_Photo by Lawrence Hookham on Unsplash_

**_This one is longer and a bit more philosophical. But these are things I think we wrestle through daily and if we do, we can work harder and be free of many pressures._**

As much as I have read and as much as I have spoken over the past few days about ‘the change you are seeking to make’, I have noticed some unwelcome guests and attitudes in my day to day life.

This is simply an acknowledgement of the issue and at the end I want to offer a solution that is incredibly difficult but worthwhile.

#### The Callout

I had a really long conversation with my wife last night about the change I am seeking to make in the workplace and the value/change I want to provide to others.

Let me offer what I think is a universal temptation to believe when we are trying to do something we think is good.

_If we receive pushback of any kind we think the other person is telling us ‘get in line, do your job, and just be happy about it.’_

But this was different. Why? Because it was my wife. I know she cares for me. She wants me to make change. BUT! She can see the things that I don’t and when certain people who you love and value in life give you feedback, YOU LISTEN!

What was her feedback to me?

‘You are not happy. You are not satisfied with what is done. There is always more to be done. You are miserable.’

Now some would think this means I need to quit my day job and move on. Some would say, ‘do something different.’ But the thing is, my wife is right. Regardless of what I do, in this moment in time, I would not be enough. It might have an allure of a particular freedom or ‘better-ness’ to it, but I would still want to do something else.

‘Doing something different’ is a phrase that masquerades as a solution.

#### Some Clarity

What was my wife _NOT_ saying? She was not telling me ‘do your job and don’t try to make things better.’ But that is what I tell myself. So double down. Ask for clarity.

#### A Soul-Piercing Question

‘How can I be content with where things are (where I am in life, where work is, etc) while also seeking and longing for change to happen?

Can those two things exist in tension? Can I leave and be satisfied with the work I did today, even though it is not where I want it to be? And keep pressing forward on the change I believe needs to happen, to serve the people I want to serve?

#### The Solution

The solution for me, and I think for everyone, is to be rooted in something. If my internal value is gained from the value I provide and the work I do, that is a never-ending cycle for me. So I have to remind myself of things that are true in my life so that I can push for change while being satisfied.

What roots you?
JavaScript: Timing the execution of a piece of code
Tags: javascript, typescript, performance, benchmark
Published: 2021-11-05 14:20:06

One of the simplest ways to have a rough idea of how long a piece of code is taking to execute is by using the `console` methods [`time`](https://developer.mozilla.org/en-US/docs/Web/API/console/time), [`timerLog`](https://developer.mozilla.org/en-US/docs/Web/API/console/timeLog), and [`timeEnd`](https://developer.mozilla.org/en-US/docs/Web/API/console/timeEnd). 

Example:
```typescript
console.time("answer time");
// where `answer time` is a label to identify this timer
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
```

Most of the time you just want to time a whole event and don't care about intermediate steps, though. Then, you just need `console.time`, `console.timeEnd`. 

That's pretty much it.
'Agenda bash' defined
Tags: meeting, definition
Published: 2021-11-05 14:12:45

---
title: 'Agenda bash' defined
published: true
description: Defines the term 'agenda bash', the practice of figuring out the meeting agenda at the beginning of the meeting.
tags: meeting, definition
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3lq1ky75tljmkesmk6f.jpeg
---

**Agenda bashing is when a group creates or updates the meeting agenda at the beginning of the meeting.**

## Why this post

I'm convinced "agenda bash" is an existing term of art. However, when I tried to cite a reference defining it, I didn't immediately find a clear definition of it online to reference. Googling a bit, I do find usages of it in e.g. IETF slideware and meeting notes. The usages seem to take it as a term of art already understood by the audience.

Therefore I'm writing a post defining "agenda bash". Be the Web content you want to see in the world, as it were. (Or maybe this is [citogenesis](https://xkcd.com/978/).)

## Agenda bashing does not preclude prior agenda drafting

Note that the agenda bashing practice doesn't preclude already having an agenda for the meeting. Coming into the meeting prepared and with shared expectations is usually a good thing. Where there's already an agenda, the bashing is more about validating that the agenda is still valuable, that the gathered people are prepared to engage that agenda fruitfully, and triaging whether there's something urgent or relevant that should be slotted into the agenda.

## Agenda bash with caution or not at all

Of course, agenda bashing is more or less appropriate in different situations. In public service, open meetings, Roberts Rules kinds of situations, changing the agenda may be  a terrible idea. If someone not at the meeting relied upon that agenda in deciding not to attend, or if people would have prepared differently had they known the agenda would be different and that missed preparation opportunity is important to them, then bash with great care or not at all.

Sometimes the thing to optimize for is fulfilling expectations and following the plan, even if the plan is no longer ideal. Surprise can be unpleasant.

## Agenda bash with joy

If it's a working session, a conference gathering, something less formal, then maybe the thing to optimize for is doing the most important/urgent/ready work available at that time. Do the work that seems to benefit most from the immediate collaboration of the people present. 

It might be that the time you know most about what you're prepared to do in the meeting, is the time of the meeting.

Surprise can be delightful.

Cover image credit: [Benjamin Child on Unsplash](https://unsplash.com/photos/GWe0dlVD9e0). Text description: photo of a modern-looking meeting room emphasizing chairs.
How To Not Cut Off The Top Of Your Section When Using Anchor Tags
Tags: css, tutorial, codenewbie, beginners
Published: 2021-11-05 14:12:00

When I created my personal portfolio, I used anchor tags in my sticky navigation bar to make it easy for readers to jump directly to the section they were interested in. But when working with a sticky navigation bar, the top of each section was cut off by the height of the navigation bar.

![Preview of the problem](https://community.codenewbie.org/remoteimages/uploads/articles/tg0alzsvt9giv2jb5hm6.png)

**NEW APPROACH**
## Here's how I solved this problem
Add the `scroll-margin-top` property to the section and set the value equal to the height of the header.


```css
/* style.css */

nav-bar {
  height: 20vh;
}

.section-id {
  scroll-margin-top: 20vh;
}
```

```html
<!-- index.html -->

<section id="section-id">
  <div>
    CONTENT
  </div>
</section>
```

**OLD APPROACH**
Create an anchor tag directly under each section, give it a class, and add the following properties to it:

```css
/* style.css */

nav-bar {
  height: 20vh;
}

.anchor {
  display: block;
  position: relative;
  top: -20px; /* this is your offset */
  visibility: hidden;
}
```

The offset depends on the height of your navigation bar. 

Your sections in your HTML file should look like this:

```html
<!-- index.html -->

<section id="section-id">
  <a class="anchor" id="anchor-id"></a>
  <div>
    CONTENT
  </div>
</section>
```

If you want to take a look at my website 👉 https://julia-undeutsch.netlify.app/

---
![Thank you](https://docs.google.com/uc?export=download&id=166Ecq6uBl61U14OUlkHOHIBv2ArKoumJ)

_Thanks for your reading and time. I really appreciate it!_
Optimize the prediction latency of Transformers with a single Docker command!
Tags: performance, aws, transformers, machinelearning
Published: 2021-12-03 08:11:24

---
title: Optimize the prediction latency of Transformers with a single Docker command!
published: true
date: 2021-11-05 14:07:37 UTC
tags: performance,aws,transformers,machinelearning
canonical_url: https://julsimon.medium.com/optimize-the-prediction-latency-of-transformers-with-a-single-docker-command-cebac9b9c91b
---

Transformer models are great. Still, they’re large models, and prediction latency can be a problem. This is the problem that [Hugging Face Infinity](https://huggingface.co/infinity) solves with a single Docker command.

In this video, I start from a pre-trained model hosted on the Hugging Face hub. Using an AWS CPU instance based on the Intel Ice Lake architecture (c6i.xlarge), I optimize my model using the Infinity Multiverse Docker container.

Then, I push the model back to the Hugging Face hub, and I deploy it on a prediction API running in an Infinity container on my AWS instance.

Finally, I predict with the optimized model and get a 5x speedup compared to the original model.

{% youtube ngB8VBbVRd4 %}

Original model: [https://huggingface.co/juliensimon/autonlp-imdb-demo-hf-16622767](https://huggingface.co/juliensimon/autonlp-imdb-demo-hf-16622767)

Code: [https://huggingface.co/juliensimon/imdb-demo-infinity/tree/main/code](https://huggingface.co/juliensimon/imdb-demo-infinity/tree/main/code)

New to Transformers? Check out the Hugging Face course at [https://huggingface.co/course](https://huggingface.co/course)
My Experience with GitHub Copilot
Tags: github, autocomplete, ai
Published: 2021-11-05 14:07:03

Yup I got the access to the technical preview of this AI model who can destroy us or Not!

Well the answer is difficult to say but first let's understand what this thing is.


Well to put forward, this thing is simply like a autocomplete extension for Code [Visual Studio Code], Jetbrain IDEs and Neo VIM.
But not any kind of autocomplete tool, it is much more.

It can write the whole line or an entire function, just by reading your comment.

Well beginners should not use this tool as if they use this tool they will not learn anything about programing.

While using this, you should be careful that you don't get habit of using this,
Why?
Cause GitHub copilot uses internet and me living in an area where Internet is not available

Well I found it useful in writing in templates for html cause I really don't know how to properly use the power of html, css and JavaScript.

But I am turning it off because I feared that if I use it more then I might forgot how to code


Peace ✌️
WPFunnels - Erstelle Sales Funnels mit WordPress
Tags: wordpress, leadgenerierung, woocommerce
Published: 2021-11-05 15:28:47

---
title: WPFunnels - Erstelle Sales Funnels mit WordPress
published: true
date: 2021-11-05 13:52:43 UTC
tags: WordPress,leadgenerierung,WooCommerce
canonical_url: https://bloggerpilot.com/wpfunnels/
---

![WPFunnels Review](https://bloggerpilot.com/wp-content/uploads/2021/11/wpfunnels-review.png)

Verkaufstrichter sind eine Möglichkeit, deinen Kunden mitzuteilen, dass du für sie da bist - relativ gesehen. Du kannst ihnen sagen, dass du bereit bist, mit ihnen über ihre Probleme oder Bedürfnisse zu sprechen oder eine Beziehung zu ihnen aufzubauen, oder was auch immer.

Der Original-Artikel erschien auf [WPFunnels - Erstelle Sales Funnels mit WordPress](https://bloggerpilot.com/wpfunnels/).

WPFunnels ist ein umfassendes Plugin für WordPress, das es dir leicht macht, Verkaufstrichter auf deiner Website zu erstellen und zu verwalten. Es ist ein Plugin für WordPress.com und WPEngine und wird ständig weiterentwickelt.