teleren/devto huggingface dataset:
Tailwind v3 on the way
Tags: tailwindcss, webdev, css, javascript
Published: 2021-10-03 07:48:32

Tailwind css v3 is being cooked, probably it will be released within one or two month 😁

Have a look the upcoming features, 
https://github.com/tailwindlabs/tailwindcss/releases

JIT mode is going to be permanent in v3😍 along with extra features, day by day, It's becoming smarter🔥

It's my favorite css framework right now. It's also completed 1 million weekly downloads😍
Cache server is the King
Published: 2021-10-03 07:36:25

Cache is needed for 
Apt Install  : 
    tried squid-deb-proxy and it was a not zeroconf as advertised.
    Tried Ng cache server which failed


PIP install  

Snap Install
Distro Images
Files!!!

casching the whole ubunutu gang in one go
https://tribaal.io/full-ubuntu-mirror-trusty.html

For APT use: https://fabianlee.org/2018/02/08/ubuntu-a-centralized-apt-package-cache-using-squid-deb-proxy/

Install the client tool for apt-cache

Then in order to get old deb files into the current cache
https://www.garron.me/en/blog/ubuntu-deb-proxy-cache.html

https://community.riocities.com/Replacing-apt-proxy-with-apt-cacher-ng.html

https://wiki.debian.org/AptCacherNg
client:
apt install squid-deb-proxy-client
apt install auto-apt-proxy

help:
https://www.linuxjournal.com/content/presenting-squid-deb-proxy-speed-your-update-downloads

issues 503 
server caching on itself
Storage for all the deb files

very clear help
https://www.tecmint.com/apt-cache-server-in-ubuntu/


https://www.xmodulo.com/apt-caching-server-ubuntu-debian.html
Next.js static HTML export
Tags: nextjs, react
Published: 2021-10-03 07:34:25

If you are looking for the best hosting for your Next.js application, check out [Vercel as your Next.js host](https://daily-dev-tips.com/posts/deploying-a-nextjs-application-on-vercel/).

However, sometimes you might need to find other hosting solutions for your Next.js application.

Today, we'll be looking at how we can generate a static HTML output of your Next.js application so we can host it wherever we want.

## Creating the Next.js static HTML export

To create a static export with Next.js, we need to run the following two commands:

```bash
next build && next export
```

However, the easiest way to do this is to add these as a script in your `package.json` file like so:

```js
"scripts": {
	"build": "next build && next export",
},
```

With that in place, we can run `npm run build`. This gives us an `out` director, which can be uploaded to any server.

![Next.js out directory](https://cdn.hashnode.com/res/hashnode/image/upload/v1632549979417/h2-1l-ch1.png)

## Hosting the static HTML

Since we now have this static HTML, we can find any hosting provider and upload this `out` directory.

Let's see how this works on [Netlify drop](https://app.netlify.com/drop), for instance.

Drag the `out` directory and wait a couple of seconds and your website is all uploaded!

![Easy Next.js static hosting](https://cdn.hashnode.com/res/hashnode/image/upload/v1632550173074/8V79gspaI.png)

[View my website hosted via this way on Netlify](https://sleepy-shannon-699868.netlify.app/)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Customizable PDF viewer with self-built PDF.js
Tags: pdf, webdev, tutorial
Published: 2021-10-03 06:53:20

At first glances, PDF viewer seems to be as easy as opening a PDF URL in an Iframe; however, not only uncustomizable, but also, if some browsers doesn't support PDF browsing, it could be a problem.

A solution to this would be [Mozilla's PDF.js](https://github.com/mozilla/pdf.js). However, the PDF viewer isn't prebuilt for you in [pdf.js-dist](https://github.com/mozilla/pdfjs-dist), only some minimal JavaScript files.

<!-- excerpt -->

## Building PDF.js by yourself

By this way, it will also build the PDF viewer (which is normally used in Mozilla Firefox). You can also customize HTML, CSS and JavaScript.

```sh
git init
npm i gulp-cli
git submodule add https://github.com/mozilla/pdf.js.git
cd pdf.js
npm i

# Edit web/app_options.js (for default PDF); and `web/viewer.html or CSS files (for UI) to your liking

npx gulp generic
cp -r build/generic ../pdf.js-dist
cd -
npx http-server pdf.js-dist -o /web/viewer.html
```

## I already built it for you

This is here. Just copy the [`/dist`](https://github.com/patarapolw/pdf.js-viewer/tree/main/dist) folder.

{% github patarapolw/pdf.js-viewer no-readme %}

## My example project

[This online Lilypond compiler / playground](https://ly.polv.cc) is made using this, using the endpoint `/pdf.js/web/viewer.html?file=<FILEPATH>#pagemode=none`. It's a quick project of mine to compile MIDI and WAV files, and share it.
VIIT : Why use this website layout?
Tags: webdev, design, productivity, uiweekly
Published: 2021-10-03 06:36:42

_Save for later._
<br/>

>People scan information and don't read all the content.

![map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q106147gq2a6eso1svi.png)


#####So that's why content type and placement is important.

<br/>Content that appears above the fold is what the user will see first.


The top of the page should attract users to continue scrolling.
<br/>

####_What content is faster to consume?_

1. **V**ideos give more info than still images.
2. **I**mages are easily scannable.
3. **I**cons are perceived faster than words.
4. **T**ext used to give longer information.
<br/>

![layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twicyrzns26jkfayai2q.png)

####<br/>Are you applying it to your design?


<br/>P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻
<br/>
Connect with me : [Github](https://github.com/deyRupak)
Support me : [Buy me a coffee!](https://paypal.me/deyrdx?locale.x=en_GB)
Week 5 as a taskforce
Tags: awesomitylab, codeofafrica, taskforce
Published: 2021-10-03 06:35:15

Hello hello hello!! 

Week 5 and week last of learning sessions has come to an end, so many things have happened, so many things I have learned, so many challenges I surpassed and so far being the best version of myself. 😊 I still remember the first day when Lionel said this boot camp will get harder each day, he was right.🤣 

Fast forward, this week has been very fruitful especially the session with Thomas (the business simulation game) that session has taught me about different roles in a team, the importance of every individual part of it and how to work with everyone accordingly. It also gave me a glimpse of real working conditions on real life projects, this has helped to probably connect with who I’ll be or what I’ll be doing in the future. 
![Trial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rigxnplvuqxwa7idirfm.jpeg)
The second interesting session was Friday morning’s brainstorming session, I didn’t know coming up with ideas was that hard🤣, anyhow Friday we were told that for the rest of the bootcamp we were goin to work on our own, on a project we were goin to think of. I think this is a very interesting thing since it’s our time now to use everything we learned through the way and challenge us in this final project. We’ll be able to see how far we came and how far we can go. 

Briefly, this week was very fruitful, we practiced and had a glimpse of real working conditions and to me, this is what nourishes our minds to be greater. 😎
![Greatness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsobbs4m9xrahpjob8sh.jpeg)
Docker Cheat Sheet - Docker Networks
Tags: docker, network, bash
Published: 2021-10-03 06:30:40

## Get port details for a container:

```bash
docker container port <container-name>

# 80/tcp -> 0.0.0.0:80
# 80/tcp -> :::80
```

### Get IP for container:

```bash
docker container inspect --format '{{ .NetworkSettings.IPAddress }}' webhost
```

> `--format` - option for formatting the output of commands using **Go templates**

## How networking happens with Docker containers?

![Docker_Network](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o238wv2cnsanb4cu4uat.jpg)
 
Virtual networks get created when we publish a container. For example, if we publish container **C1** with `80:80`,
it means any traffic coming in at port 80 on the host will be forwarded to port 80 on container **C1** via the virtual network. Creating another container **C2** by default, will be put in the same virtual network, which means, **C1** and **C2** can communicate freely via this virtual network.

> **NOTE**: A host port can only be linked to one container.

> **Bridge** or **Docker0** is the default virtual network mapped to the host IP.

## Docker Network CLI commands

### Show all networks:

```bash
docker network ls
```

### Inspect a network:

```bash
docker network inspect <network-name>
```

### Create a virtual network:

```bash
docker network create <network-name>
```

> To use a custom bridge, we can use the `--driver` option.

### Attach a network to a container:

```bash
docker network connect <network-name> <container-name>
```

### Detach a network from a container:

```bash
docker network disconnect <network-name> <container-name>
```

### Connect to a network while running a container:

```bash
docker container run -d --name <container-name> --network <network-name> <image>
```

### Default network types

1. **Bridge** or **Docker0** - the default virtual network mapped to the host IP. It allows containers to communicate with each other when running on the same docker host.

2. **host** - a special network that attaches the container directly to the host by skipping the virtual network.

3. **none** - Only `localhost` interface is available in container

Using Docker networks, we can ensure that:

1. related apps are on the same Docker network
2. Their inter-communication is restricted to the virtual network
3. Traffics can be forwarded from host to container only if we publish the container with `--publish` or `-p`

## DNS

Containers can communicate with other containers in the same virtual network with host names.

Docker defaults host name to container's name. However, we can also use aliases.

To provide network aliases for containers, we can do the following:

```bash
 docker container run --rm --network <network-name> --network-alias <container-network-alias> <image>
```

So, with this containers in the same virtual network can communicate with each other via aliases.

> The flag `--rm` makes sure the container is deleted permanently on exit.
[Part 3/4] 🌐 Senior Backend Architecture Interview With a Senior Software Engineer
Tags: architecture, webdev, tutorial
Published: 2021-10-03 06:27:50

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

In this video series, I'm interviewed by a senior software engineer from one of Australia's largest software companies. In part 3 of this series, we talk about further fleshing out the model definition, exploring how we can better encode the relationships between entities/models, and whether it would be best to store them as first-class citizens.

{% youtube l7K3h1wi5Kg %}

Happy coding!
GitLab CI Inheritance Sucks
Tags: discuss, gitlab
Published: 2021-10-02 18:12:00

Or at least, cross-repo inheritance.

I've worked at a couple of places now where GitLab CI templates are heavily used, `include`d across repos, and inherited from.

I've found it confusing, inflexible, and an enemy of build reproducibility.

In a repo where this is done heavily, if I want to change something, I must figure out:

1. Does my `.gitlab-ci.yml` actually contain this job at all? Or is it from a template somewhere else?
2. Where the heck is it (or its parent) coming from? This repo includes templates from three other repos, and they include templates from other repos too. Where it at???
3. How do I change the parent job without breaking any other pipelines that depend on it? Maybe I can just inherit from it and add a `before_script`? But what if the parent job gets updated with its own `before_script` later, and my overriding it breaks something?
4. Will the person who owns the parent template's repo let me change it?

So after getting all of that out of the way, I make the change in the template repo. It breaks someone else's pipeline somewhere. But there wasn't even a commit to their repo. Their pipeline just suddenly just starts failing. What?? This totally breaks build reproducibility!

I've gotten to where I'd rather just have a bunch of duplicated GitLab CI code across repos.

Am I crazy, am I missing something, or do others feel the same?
What does "origin master" mean?
Tags: beginners, github
Published: 2021-10-03 05:57:22

Git commands are a leading cause of hair loss for many beginner software engineers, and even for some more experienced ones as well. I've finally realized something that might've helped me when I was first starting out and hopefully will save you some headaches too.
##"origin master" explained
At some point in our development career we get real familiar with the classic `git push origin master`*. What is this command actually saying though? "git push" is pretty clear, but what exactly is "origin master"? For the longest time I thought it meant:
>push from **your computer** to **GitHub**

I thought *origin* was my computer, and *master* was GitHub. To my brain, *origin* was where the new code I wanted to push had *originated* (my computer, because that's where I wrote it) and *master* was where I wanted it to go. Not so far fetched. I was right that they are two separate entities, but I was wrong about *which* two entities.

Actually, *origin* refers to the repository on GitHub (aka the "remote repository") where you originally cloned your code from, and *master* is the branch in *origin* that you want to push your changes to. *They both refer to what's on GitHub*. 

This cleared up so much for me. Suddenly, in a cascade of insight, other git commands started to make more sense too. It does get more complicated, but hopefully this simple shift in understanding is a stepping stone that will help you have a breakthrough of your own on your way to becoming a git ninja. 

*Note: GitHub has changed "master" to "main" so, increasingly, the command will be `git push origin main`. Older repos will sometimes still use "master". Good to be aware of both.
Career advice - looking for a leading role at a fresh startup
Tags: career
Published: 2021-10-03 05:23:04

---
title: Career advice - looking for a leading role at a fresh startup
published: true
description: 
tags: #career
//cover_image: https://direct_url_to_image.jpg
---
Not judging if the thesis in this thread is right or not https://threadreaderapp.com/thread/1031394865584603136.html

I've worked in startups, corporations, did some freelancing, even run my own VC-backed startup. Right now looking for new oportunities and I feel like taking a leading technical role at a new startup will work best for me.

What places would you suggest to look for just-funded startups that are deep into the hiring stage?
Install IIS on an Azure VM using PowerShell
Tags: azure, powershell
Published: 2021-10-16 02:03:06

---
title: Install IIS on an Azure VM using PowerShell
published: true
date: 2021-10-03 03:39:00 UTC
tags: azure,powershell
canonical_url: https://waiholiu.blogspot.com/2021/10/install-iis-on-azure-vm-using-powershell.html
---

This quick start article is useful (https://docs.microsoft.com/en-us/azure/virtual-machines/windows/quick-create-powershell) but if you just want a super quick way to get an Azure VM with a IIS web server up without having to remote into the server etc. and input anything into the terminal - just run the script below in a powershell terminal or on the Azure cloud shell.

### Script

 

#Part 1 - Set up credentials
  
```
$VMLocalAdminUser = "LocalAdminUser"

$VMLocalAdminSecurePassword = ConvertTo-SecureString "NotARealPassword!@#$%433" -AsPlainText -Force

$Credential = New-Object System.Management.Automation.PSCredential ($VMLocalAdminUser, $VMLocalAdminSecurePassword);
  ```
  

#Part 2 - create RG and VM
  
```
New-AzResourceGroup -Name todeleteRG -Location EastUS
New-AzVm `
    -ResourceGroupName "todeleteRG" `
    -Name "todeleteVM" `
    -Location "East US" `
    -VirtualNetworkName "myVnet" `
    -SubnetName "mySubnet" `
    -SecurityGroupName "myNetworkSecurityGroup" `
    -PublicIpAddressName "myPublicIpAddress" `
    -Credential $Credential `
    -OpenPorts 80, 443
```

        
  

#Part 3 - Install IIS and add default page with computer name
```
Set-AzVMExtension -ResourceGroupName "todeleteRG"`
    -ExtensionName "IIS" `
    -VMName "todeleteVM" `
    -Location "East US" `
    -Publisher Microsoft.Compute `
    -ExtensionType CustomScriptExtension `
    -TypeHandlerVersion 1.8 `
    -SettingString '{"commandToExecute":"powershell Add-WindowsFeature Web-Server; powershell Add-Content -Path \"C:\\inetpub\\wwwroot\\Default.htm\" -Value $($env:computername)"}'
  ```
  
### Explanation

Part 1 will create a credential object with user name and password 

Part 2 will actually create the VM.

Part 3 installs IIS with a dummy page that just displays the computername.

  

### Verify it works.

If you navigate to the IP address of the VM you've just created (can find this either on the Azure portal or just using Powershell), it should display the computer name

  

  

### Clean up

  
 
`remove-azresourcegroup -name "todeleteRG" -force`

Where to find the code
[gist](https://gist.github.com/waiholiu/34cb9648f643c8aefa242e4e46db3c04)
{Insert Hacktoberfest 2021-Related Title Here}
Tags: hacktoberfest
Published: 2021-10-03 03:12:43

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 

### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2021 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Announcing the Margarita Humanitarian Foundation Developer Blog
Tags: javascript, opensource, beginners, programming
Published: 2021-10-03 03:01:21



This blog is a friendly place for developers involved with Margarita Humanitarian Foundation's open source projects to share coding tips and tricks.

```js
const help = (others) => {...}
```

## All Our GitHub Contributors Invited

This offer is open to anyone who's had 1 or more pull requests merged into a project in the [@margaritahumanitarian](https://github.com/margaritahumanitarian/) GitHub organization.

If you're not a contributor yet, see our repos for issues to work on. We welcome everyone! You can also ask for help getting started in https://discord.gg/kf3SKPMm

## What to Write About

Anything that's fun or useful to other coders! For example:

* TIL posts (Today I Learned)
* Tips for getting into open source
* Even super-short posts are fine, such as little React or Tailwind CSS tricks plus accompanying screenshots
* Dev tricks that you want to keep notes on to remember later

## What Is Margarita Humanitarian Foundation?

We're a nonprofit public charity helping those who need help the most. For more info, see [margaritahumanitarian.org](https://www.margaritahumanitarian.org/).
My almost experience with Microservices
Tags: microservices, csharp, dotnet
Published: 2021-10-03 01:48:47

My previous experiences with micro-services wasn’t a huge success but at least it worked.

Having said that, I wanted to share some mistakes that me and my team did during the development and also what we could’ve done differently.

**Monolith Database**

One of biggest problem that we faced was having one huge MongoDB and Oracle database for all of the 40 microservices.
Hacktoberfest 2021: Finding Projects That Aren't Excluded
Tags: hacktoberfest
Published: 2021-10-03 01:35:24

## Personal Background
This is my first year and first day (I spent October 1st debating about whether or not I should try Hacktoberfest) doing Hacktoberfest. One of the things I noticed immediately was the lack of good beginner friendly projects. Just about every project that was somewhat beginner friendly was also excluded and anything else with a [`hacktoberfest`](https://github.com/topics/hacktoberfest) tag was some huge, insane repository of a full stack project or something that was in no way beginner friendly.

## Contributing
The hardest part about contributing might have been the fact there wasn't a nice list of beginner friendly projects. After that, the pull requests I made turned out to be to repositories of excluded (blacklisted) projects:
![excluded project example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6wtm26qs80rzitxl23f.png)
This means they were reported as a repository that's too easy to make pull requests to.

## Solution
Before I made any pull requests, I actually tried to find a nice list of resources with Hacktoberfest specific open source projects in it. I found many resources listing general open source projects but none listing *Hacktoberfest specific* repositories. To combat that, I decided to create [my own list](https://vivian-dai.github.io/Hacktoberfest-2021-Repos/). Similarly, I couldn't find an official list for blacklisted repositories either so I decided to compile [my own](https://vivian-dai.github.io/Hacktoberfest-2021-Repos/blacklist/)

If you find any more good, beginner friendly Hacktoberfest projects or notice anything here has become excluded, feel free to contribute. This repository is also under a Hacktoberfest label so a pull request here will count towards your Hacktoberfest contributions as well!
{% github vivian-dai/Hacktoberfest-2021-Repos %}