teleren/devto huggingface dataset:
Tailwind CSS card components
Tags: tailwindcss, css, tutorial
Published: 2021-03-30 14:19:50

---
title: Tailwind CSS card components
published: true
date: 2021-03-16 16:09:44 UTC
tags: tailwindcss, css, tutorial
canonical_url: https://web-crunch.com/posts/tailwind-css-card-components
---

{% youtube yrEisCrDwKw %}

In this guide, I create a series of Tailwind CSS card components inspired by the [Bootstrap framework](https://getbootstrap.com). The amount of variants you can create from a card component seems limitless so I tossed out a few to get you off to the races. I hope you enjoy it!

### Why Tailwind anyway?

Tailwind CSS has become my go-to framework of choice in the past couple of years since its birth. I used to write object-oriented or BEM-styled CSS which worked decently but suffered dramatically at scale.

In a team setting, I began to learn very fast just how nuanced writing CSS is. Every developer has their own ideas and philosophies on how and where to write CSS. Until you adopt a common pattern/convention for authoring code can you truly write it consistently. This very problem is why many frameworks exist today. They are pretty opinionated by design. Having a set of constraints from the start is what makes frameworks, frameworks in my opinion.

Tailwind CSS is a hybrid framework. It has a set of conventions and opinions but pairs that with a vast amount of configurable options. This ultimately allows developers to use the framework but still create a unique design on the front-end.

I can say without a doubt that I'm all-in on Tailwind CSS. It has increased my productivity dramatically and I can't advocate using it enough. It does take some getting used to initially but very soon after you will see just how powerful it can be.

### A new mini-series

Tailwind ships with zero components by design. The intention is for you, the developer, to create those based on your own set of constraints. Luckily, this is fairly easy to do thanks to the plethora of class names in your arsenal.

My goal with this video and the others in this collection is to open your eyes to how to use Tailwind to create your own custom components should you need them. Doing this will allow you to create more unique designs rather than reaching for Tailwind UI like a lot of other developers do. This is all to say that Tailwind UI is not bad but over time you will likely see many websites looking similar much like the Bootstrap craze of our yesteryears.

Be sure to [subscribe to the YouTube channel](https://www.youtube.com/user/webcrunchblog?sub_confirmation=1) or [my newsletter](https://digest.web-crunch.com/) for automatic updates if you haven't already.
Easy way to create a Django project in four steps
Tags: python, django
Published: 2021-03-16 12:10:36

From this post, you will understand why Django is dubbed the framework for perfectionists with deadlines.
For some beginners who want to start their careers or start with web development using Django, it is not always easy, all these processes which burn the vision, which give goosebumps. But let me tell you that it's much easier than you think.
To be eligible to read this article, and to practice it, you will need to download and install python (https://www.python.org/downloads/release/python-392/) on your computer if you do not have it already installed.
Then check if it has been successfully installed by typing the following command in your windows PowerShell terminal: 
`python --v`
If it gives you something like: **python 3.x.x** then congratulations 🎉
Actually, latest versions of python have pip (pip is a package manager used to install and manage packages written in Python.) included by default.

*First Step*: Create a virtual environment for your project. The goal of virtualenv is to prevent different versions of libraries/packages from messing with each other.
`py -m venv env`. Note that you have the option to choose how to name your **env**.
In the root of the folder, however, you will see an env folder created.

*Second Step*: Activate the virtual environment by typing this command in your terminal => Let's consider this is the structure of where you are working `C:\projects\myproject>`, then it should look like this: `C:\projects\myprojects>env\Scripts\activate`
If after this command, your terminal now looks like this: `(env) C:\projects\myproject>`, it just means your environment is ready.

*Third Step*: Install Django
We are going to use pip to install. It's so easy you can't imagine.
`pip install django`
Done ✔

*Fourth Step*: You can now use the django command to create your project which will contain all the applications you will create for the proper functioning of your project
`django-admin startproject myproject_name`
A `manage.py` file will be created, as well as a `myproject_name` folder. The `myproject_name` folder will contain 5 files including `__init__.py`, `asgi.py`, `settings.py`, `urls.py` and `wsgi.py`

That's all. Your Django project is ready! 😎

The next article will focus on creating an application as well as setting up a PostgreSQL database.
Android Dev says Hi
Published: 2021-03-16 15:46:48

Salve salve Developers!

Meu nome é Victor Goulart, sou natural de Florianópolis e hoje decidi dar um passo adiante na minha carreira: começar minhas publicações relacionadas a desenvolvimento, com maior foco em Android. O principal intuito é ajudar quem precisa e ainda aprender coisas novas.

Atualmente faço parte do time de Front-end da [Cyberlabs](https://cyberlabs.ai/) atuando principalmente com Development Experience. Crio bibliotecas em Android Nativo para aplicações nativas e Plugins para Nativescript. Inclusive, temos uma iniciativa Open Source chamada [Yoonit](https://github.com/Yoonit-Labs), onde desenvolvemos nossas principais bibliotecas que abrangem Mobile e Web.

Conforme eu for criando novas publicações irei postar aqui, então até uma próxima e se puder da um confere no [Yoonit](https://github.com/Yoonit-Labs) e deixa uma estrelinha nos repos que curtir!
DuckDuckGo !Bang + Siri = ?
Tags: showdev, productivity
Published: 2021-03-16 15:41:50

#Last two months struggle
Last two months I have been working on creating Chrome extensions to enhance search functionality on various sites. While the extensions solved the problems they were designed for, they did not provide enough value gain for the user. The number of downloads were far from what my goal was, but the engagement from the marketing activities were huge! That must mean that the execution was wrong.

#A new approach 
So, I decided to take my work to the next step by taking into account all the feedback I have received. I am making an assistant like "Siri" but for the browser. Instead of retrieving the results, page navigation is performed, like DuckDuckGo !Bang.

Today is the day of release of [Quantleaf.com](https://quantleaf.com)!

## The functionality
Here are some 'cool' things you can search!

- github invert binary tree creation date from one year ago c++
- subreddit wallstreetbets search gamma sort by hot
- tweets from elonmusk about bitcoin between 2011-01-10 and one year ago
- 10-k AAPL file date from 6 months ago
- facebook marketplace price < 100 search microwave condition new
- ebay charity bids > 0 and bids < 100 search Bob Ross 

There are currently 11 sites 'indexed' in the search engine.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pckm3dbezc5xh027v5qg.PNG)

## Better execution
To address the concern that the search engine is too hard to use, I spent a lot of time improving the suggestions/autocomplete. The current solution gives you a lot of help when you are not sure what you can't do. Let’s say you want to search on Ebay. What you do now is that you write "Ebay '' and then you can use the suggestions to guide you. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/innv9wflgu1qqr2xckec.PNG)

# Why not just use Google
- Speed. It is faster, for example reaching a subreddit on Reddit: "subreddit stocks"
- Privacy. No private data is collected. 
- More functionality (try searching on the examples above on Google)

Thank you for reading
Marcus
Tire PrintScreen pelo terminal no Linux
Tags: linux, braziliandevs, bash, ubuntu
Published: 2021-03-16 15:38:07

Olá pessoal, hoje vamos aprender como tirar um _Print Screen_ pelo linha de comando, um recurso muito útil para quando temos apenas o acesso ao terminal do servidor.

Realize a instalação do programa **fbcat**.

```
sudo apt-get install fbcat
```

Para salvar a captura de tela precisamos redirecionar a saída do comando para um arquivo com a extensão **ppm**.

```
sudo fbcat > captura01.ppm
```

Agora podemos converter o arquivo **ppm** para **png** com o comando abaixo:

```
convert captura01.ppm captura01.png
```

Pronto pessoal, agora podemos salvar as capturas de tela pelo terminal do servidor 😎.

## Referências

FBCAT 0.5.1 — PACKAGES — GNU GUIX. **GNU Guix**. Disponível em: https://guix.gnu.org/packages/fbcat-0.5.1/. Acesso em: 23 dez. 2020.

LEWANDOWSKI, Piotr; WILK, Jakub. **Linux Manpages Online - Man.cx Manual Pages**. Disponível em: https://man.cx/fbcat(1). Acesso em: 23 dez. 2020.

SLACKJEFF. Screenshot/Printscreen Via Console Linux. 13 ago. 2017. **YouTube**. Disponível em: https://www.youtube.com/watch?v=65D1Vbrq97Q. Acesso em: 23 dez. 2020.
Any good resources on diversity in tech in Europe?
Tags: discuss
Published: 2021-03-16 15:35:46

It seems like a lot of discussions and initiatives around diversity in tech I see online are quite US-centric, and I think there's an important local aspect to diversity, where every region's population is different, as are the issues minorities are facing. Are there job boards like [Diversify Tech](https://diversifytech.co) that have a European focus? Are there any relevant groups or people to follow?

I'm asking about Europe because that's where I live and work, but I think it might be useful to share resources for other regions as well.
sysctlview 2.1
Tags: freebsd, desktop, kernel, unix
Published: 2021-03-16 15:35:32

[sysctlview](https://gitlab.com/alfix/sysctlview) is a graphical [sysctl](https://man.freebsd.org/sysctl/3) MIB explorer for [FreeBSD](https://www.freebsd.org), each object represents a parameter of the kernel, *sysctlview* can show the properties of an object and get or set its value.

**New version improvements**:

Click a column title to sort, example with "Name" column:

[![](https://alfonsosiciliano.gitlab.io/images/sysctlview2-1-a.png)][imglink1]

[imglink1]: https://alfonsosiciliano.gitlab.io/images/sysctlview2-1-a.png


Added *Handler* entry (kernel function pointer to get or set a value) can be *Defined* or *Undefined*. It is useful to know if an object has a value and because the OID of a *node* with a *Defined* handler can be extended to pass an input.

[![](https://alfonsosiciliano.gitlab.io/images/sysctlview2-1-b.png)][imglink2]

[imglink2]: https://alfonsosiciliano.gitlab.io/images/sysctlview2-1-b.png


And...

```changelog
CHANGELOG

2021-03-12 version 2.1

  * update: sysctl library to sysctlmibinfo2 2.0.1
  * update: menu link "Help -> Handbook"
  * update: handle NEEDGIANT like a normal flag
  * update: menu "Help -> Flags"
  * update: manual DESCRIPTION
  * update: menu "Help -> FAQ"
  * add: sort trees clicking column title
  * add: "[CLICK TO SHOW]" for value of a SKIP object
  * add: Handler entry in ObjectWindow
  * add: opaque format S,pagesizes
  * fix: indent menu "Help -> About -> License"
  * fix: delete CTLMASK_SECURE
  * delete: license.h, merged with mainwindow.cc
```

-------------------------------------------------------------

To install the port ([deskutils/sysctlview](https://www.freshports.org/deskutils/sysctlview)):
```default
# cd /usr/ports/deskutils/sysctlview/ && make install clean
```

To add the package:
```default
# pkg install sysctlview
```
**To know more**: https://gitlab.com/alfix/sysctlview
Getting started with Node JS
Tags: node, beginners, javascript
Published: 2021-03-16 15:27:13

Hey folks! I just started learning node JS and thought to share with all of you who are new to node JS and wanted to learn node JS.
so we are gonna see little insights of node JS and after that we will write our first code in node JS.
## So What is Node JS?
* Node.js is a cross-platform JavaScript runtime environment that allows developers to build server-side and network applications with JavaScript.
* NPM is a package manager which comes bundled with node JS which helps in downloading packages into a node_modules folder.
* You can use npm init command to initialize your project which will ask basic information about your project and creates one file package.json which will have all information you provide.

* So package.json file is face of your project which will contain all the information about your project as well as all those dependencies needed for your project with their version name.

* Their are a lot of frameworks available which will ease our work while writing our code like express, sails, Hapi, Koa etc.
* But first let we use simple Node JS without any framework to understand it in depth.

* In your folder create index.js and do npm init after that write this code in index.js file and do node index.js from the command line from the same path where your index file exists. 
```
const http = require("http");
const port = 8000;

function requestHandler(request, response) {
  console.log("Request received.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Welcome to node.js World");
  response.end();
}

const server = http.createServer(requestHandler);
server.listen(port, function(err){
    if(err){
        console.log(err);
        return;
    }

    console.log("Server is up and running:", port);
});
```
In this case, on each and every url, you found “welcome to node.js world”. Now we will send different response, according to requested url.
```
const http = require("http");
const port = 8000;

function requestHandler(req, res) {
	if (req.url == "/") {
		res.writeHead(200, { "Content-Type": "text/html" });
		res.end("Welcome to the homepage!");
	}
	
	// About page
	else if (req.url == "/contact") {
		res.writeHead(200, { "Content-Type": "text/html" });
		res.end("Welcome to the contact page!");
	}
	
	// 404'd!
	else {
		res.writeHead(404, { "Content-Type": "text/plain" });
		res.end("404 error! File not found.");
	}
}

const server = http.createServer(requestHandler);
server.listen(port, function(err){
    if(err){
        console.log(err);
        return;
    }

    console.log("Server is up and running:", port);
});
console.log("Server has started.");
```
Here, we track requested url and respectively show that content on that url, and handle 404 condition in all other cases. 
I hope this article helps you getting started with node JS, don't forget to tell me in comment section how much you liked this post and in case any query reach me out !
Happy Coding!
C'est quoi git
Tags: github, git, gitops, whatisgit
Published: 2021-03-16 15:16:25

Comme on l’avez vu  dans notre derrière vidéo  Road to Devops  , GIT a un rôle important dans la pipeline Devops, dans cette vidéo on va voir ce que c’est que #GIT​ et pourquoi il est  le plus  populaire des outils de Version control système
[![Alt text](https://img.youtube.com/vi/yGt0ewCWCBk/0.jpg)](https://www.youtube.com/watch?v=yGt0ewCWCBk)
Off-by-one errors in Python API pagination
Tags: python, tips
Published: 2021-09-08 21:35:37

---
title: Off-by-one errors in Python API pagination
published: true
date: 2021-03-16 15:00:00 UTC
tags: python,tips
canonical_url: https://katiekodes.com/pagination-off-by-one/
---

If you have `json.loads(response.text)` in a Python script using `requests` to perform a loop over API calls structured something like `response = requests.get('https://example.com')` inside the loop, and you sporadically see an error stack ending in `raw_decode` mentioning `ValueError` from `None` like this, you might have an off-by-one error in your loop condition:

```python
`File ".../json/__init__.py", line ..., in loads
  return _default_decoder.decode(s)
File ".../json/decoder.py", line ..., in decode
  obj, end = self.raw_decode(s, idx=_w(s, 0).end())
File ".../json/decoder.py", line ..., in raw_decode
  raise ValueError(errmsg("Expecting value", s, err.value)) from None
```

Check to see if you have an off-by-one error that's making you enter the loop one more time than is actually necessary to fetch all the data.

1. It's possible that you made a typo and that you just need to fix the condition for continuing your loop.
2. It's also possible the at the API is lying to you and saying there's a "next" page when there isn't _really_ one.  In that case, consider adding an extra guard to the loop entry condition that verifies for example, `and response is not None`.

You'll often see this problem sporadically -- e.g. if the API's pagination is in multiples of 100, only when there happen to be exactly 800 records in the dataset _(or maybe 799 or 801)_, with your code otherwise working.
My 2021 Certification goals
Tags: aws, azure, career
Published: 2021-03-16 14:59:00

Hello Amazing people 👋

Hope everyone is doing great.
This week I had some time to think about what my certification goals are for this year and I planned them out. As some of you may know, I had this great idea of getting started with cloud certifications last year, planning and staying consistent did help me get 8 of them!

{% twitter 1344534469051445248 %}

I have 6 of them planned for this year for now.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615567890157/4SRyCAc_c.png)

So, I will be starting with Azure AI Fundamentals (AI-900) and will follow along with the new Security certifications by Microsoft, the Microsoft Security, Compliance, and Identity Fundamentals (SC-900). I am  planning to take both of these in March, since they are fundamentals, I am hoping I will be able to make it in time.

Moving on in the Azure world, I am planning to take Microsoft Azure Administrator (AZ-104) in May. I will have almost 45-50 days to prepare for this.

AZ-104 is followed by AZ-400, which is the 'Designing and Implementing Microsoft DevOps Solutions' exam, this would also get me the DevOps Engineer Expert badge.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615567527000/pAPYXrR6z.png)

Now enough with the Azure certs (just kidding). Time for some AWS. The next one I have planned for is AWS DevOps Engineer Professional, which I am thinking to take in late July (probably on my Birthday).

Last but not least, I am planning to get into the Linux certifications and hence start with [Linux Essentials by LPI](https://www.lpi.org/our-certifications/linux-essentials-overview).

Oh, by the way, have you checked out my latest video on YouTube, I did some tech swag unboxing 👇

{% youtube ZyzTyx2ekCU %}

Let me know in the comments, what certification are you planning to take this year.
Clip-path Image Hover Effects
Tags: 100daysofcode, html, css, clippath
Published: 2021-03-16 14:57:56

The day 86 of challenge #100DaysOfCode

Clip-path Image Hover Effects Using HTML5 & CSS3

Demo : https://clip-path-css3.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day86

Follow me on github

https://github.com/saidMounaim
HELP ME PLEASE
Tags: react
Published: 2021-03-16 14:54:06

I'm new in react, and I want to do my first app but I can't for this error, I wrote npm start and....

C:\Users\PC\Desktop\Escritorio\programming\test>npm start

> test@0.1.0 start
> react-scripts start

internal/modules/cjs/loader.js:628
  throw e;
  ^

Error: No valid exports main found for 'C:\Users\PC\Desktop\Escritorio\programmi
ng\test\node_modules\postcss-safe-parser\node_modules\postcss'
←[90m    at resolveExportsTarget (internal/modules/cjs/loader.js:625:9)←[39m
←[90m    at applyExports (internal/modules/cjs/loader.js:502:14)←[39m
←[90m    at resolveExports (internal/modules/cjs/loader.js:551:12)←[39m
←[90m    at Function.Module._findPath (internal/modules/cjs/loader.js:657:22)←[3
9m
←[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:960
:27)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:855:27)←[39m
←[90m    at Module.require (internal/modules/cjs/loader.js:1033:19)←[39m
←[90m    at require (internal/modules/cjs/helpers.js:72:18)←[39m
    at Object.<anonymous> (C:\Users\PC\Desktop\Escritorio\programming\test\node_
modules\←[4mpostcss-safe-parser←[24m\lib\safe-parse.js:1:17)
←[90m    at Module._compile (internal/modules/cjs/loader.js:1144:30)←[39m {
  code: ←[32m'MODULE_NOT_FOUND'←[39m
}

What can I do?
How do you stay engaged during technical talks?
Tags: discuss, codenewbie, webdev, help
Published: 2021-03-16 14:53:46

I recently started my first dev role. There's a lot to learn. To help me rampup, my team has been great in scheduling one-on-ones to explain tools our team uses. In addition to that, we also have a library of past tech talks, as well as bi-weekly knowledge shares, demos, and design reviews, all of which are recorded.

I've been rewatching the most relevant to absorb the information. However, I've noticed that people are following along during the actual talk and asking insightful questions during Q&A. 

On the other hand, I can actively listen during the first 10-15 minutes, after which my brain does one of these:

![Gif of Dumbledore putting his hands in on his hips](https://media.giphy.com/media/720g7C1jz13wI/giphy.gif)

There's a lot of information shared during each 1-hour presentation. It's hard to keep up and take notes during. But rewatching hours of video will be harder as I take on more responsibilities.

### Question:
How do you engage and stay engaged during technical talks? What strategies do you recommend for getting the most from these dense, technical presentations?

Photo by Pixabay from Pexels
How to Add Tailwind CSS to Your Angular Application 2021
Tags: beginners, angular, tailwindcss, webdev
Published: 2021-03-16 14:47:52

According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. I like to think of it as a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.   Angular, on the other hand, is a platform that allows you to build high-quality enterprise applications. Combine Angular with Tailwind CSS and you have a perfect stack for building top-notch web applications.







   >  In this article, I will walk you through how you can add 
       Tailwind CSS to your Angular application.





   🚩  This article assumes that you're using the Angular CLI 
       version 11.2.0 or higher.


# 1. Generate a new Angular application
Let's start by creating a new Angular project using the ng new command:

```
   ng new my-app
```

When the CLI asks you "which stylesheet format would you like to use?" choose CSS because:

  * With Tailwind, you don't need a CSS preprocessor like Sass. 
     You'll rarely need to write custom CSS anyway.

  * Your CSS will compile much faster because it won't need to 
     pass through multiple compilation pipelines.


# 2. Install the needed tailwind dependencies
  Now, install the required dependencies:

```
   ng add @ngneat/tailwind
```

> follow the instructions below:

```
   ? Would you like to enable dark mode?

     none
     class
     media
```
 select **class**  then click (enter)

```
   ? Would you like to use tailwind directives and functions in 
     component styles? (might increase build time) (y/N) y
```

```
   ? What @tailwindcss plugins do you want to enable?

     ⭕ aspect-ratio
     ⭕ forms ✔
     ⭕ Line-clamp
     ⭕ typography ✔
```
select **forms** & **typography** 

> The command above install all needed packages and update the 
  project files.


# 3. Enjoy
You can now start your Angular application and enjoy using Tailwind:

```
   ng serve --open
```

***

`If you enjoyed this article, follow [@CodeBase__](https://twitter.com/CodeBase__) on Twitter for more content like this.`