teleren/devto huggingface dataset:
Simple Responsive Login Form
Tags: codepen
Published: 2023-01-21 20:22:20

It has been long since I last shared anything here. And the reason for that is too long to summarize here, so I will spare you the boring details and get to the business at hand. Let us talk about responsive login form.

I woke up early today to a post about a simple login form for a website and the coder was so kind enough to post the codes as well. I read the code and found that there were so many unnecessary `<div>` and `<p>` inside a form. I copied the code (by typing) and was halfway through copying the style when I noticed that the page was not responsive. I thought, why would you make an unresponsive page in these times where every user has a different devices with different widths and heights, so shouldn't we as developers make sure that our designs are responsive? Soon the websites we will have to design and build will be a mix of 3D and 2D browsers, some of which are already out there.

And don't get me started on the way visual data is being bend and twisted along with the AI trend that's has everybody talking. Anyhow, this is my own little experiment on `calc()` and it has done me a wonderful service. This is the tool that will give you responsive design, and don't forget the property value `vmin, vmax` and `vw, vh` as they will give you a responsive effect. 

For more info check [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)  

{% codepen https://codepen.io/djeylani/pen/vYapwxo %}
My portfolio?
Published: 2023-01-21 20:21:11

## This is my portfolio

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j49qwd06rxt7efow3sus.png)


[Folio](https://ota200.github.io/folio/)
4 months in the making, ( most of that time I was procrastinating )

Followers, judge this site out of 10, I want to know if its any good.
ChatGPT: The Artificial Intelligence that Understands You
Tags: openai, chatgpt, artificialintelligen, dalle2
Published: 2023-01-31 10:41:54

---
title: ChatGPT: The Artificial Intelligence that Understands You
published: true
date: 2023-01-21 20:14:04 UTC
tags: openai,chatgpt,artificialintelligen,dalle2
canonical_url: https://medium.com/@sobhan.python/chatgpt-the-artificial-intelligence-that-understands-you-e830fa3724ee
---

![AI](https://cdn-images-1.medium.com/max/1024/1*DFbDPDYaRDKZVs-j0s114A.png)

Hey everyone!

**I wanted to share something really exciting that I came across recently — ChatGPT by OpenAI. As you may know, OpenAI is a cutting-edge technology company that specializes in artificial intelligence and machine learning. They have been making headlines in the tech industry for their cutting-edge work in natural language processing and deep learning.**

One of their most recent developments is ChatGPT, a language model that is specifically designed to understand and respond to natural language. This means that it can converse with humans in a way that feels natural and intuitive. It can answer questions, write emails, and etc.

![Ai](https://cdn-images-1.medium.com/max/1024/1*bWfv3aeSQ2r7R9OxbR-4AQ.jpeg)

I’ve been playing around with ChatGPT and I have to say, I’m really impressed. The level of understanding and accuracy it has is truly astounding. It can understand context and generate human-like responses, which makes it an ideal tool for businesses looking to improve their customer service, chatbot interactions, and even content creation. For example, if you’re running an e-commerce website and you want to create product descriptions, ChatGPT can write descriptions that are engaging and highly informative.

I’m really excited to see how this technology will continue to evolve and change the way we interact with machines. With the rapid advancements in AI and machine learning, it’s exciting to think about the possibilities of what can be achieved in the future.

**Overall, I think ChatGPT is a truly innovative technology that has the potential to change the way we interact with machines. It’s exciting to see what the future holds for AI and NLP and I can’t wait to see what other advancements OpenAI will make in the future.**

What are your thoughts on this technology? Have you had a chance to play around with ChatGPT? I’d love to hear your thoughts in the comments!
First project: 4X4 tic-tac-toe
Tags: beginners, python
Published: 2023-01-21 17:52:33

Hi everybody, hope this is thee right place to publish.
Mostly a 'reward yourself' and 'self-reflection' kind of post, congratulating myself for finishing my first python 'project'.

I know, it's small, has lots of non-pythonic code, and a loooot of room for improvement, but it's done.
I'm doing the CodeAcademy CS career path, and at the end, we're supposed to perform a small project and publish a post about, so here I am doing it.

It's a super-simplistic tic-tac-toe program, for 4X4, implemented at the terminal.
The user gets to choose the easy vs. difficult versions: the first is just random selection of a move while the latter is a kind of very simplistic algorithm I came up with that says:
1. First priority is not to lose, so if the oponent is 1 move away from victory- we'll block the,.
2. If not- we'll add our X or O to the line/col/oblique that has the most of our sign.

I had some dillemas of which data structures to use and whether there are more efficient ways to implement the conditions, but overall, it was nice to see that in the 'difficult' version I am unable to beat the computer (always ends up with a draw).

https://github.com/orenplen/codeAcademy_CS1_capstone/blob/main/tictactoe.py

Conclusions and what I've learnt:
1. Carrying out the first program that I did from scratch without any help. 
2. Performing the full git 'cycle', so that this project is now in my github. That took some time but finally worked.
3. Using the terminal, for the first time not only partially as an excercise, but rather as an intergral part of the project.
4. The time.sleep() function + the fact that I need to do flush=True when printing to the terminal if I want the bits of text to be printed gradually and not one at a time.
5. Using an IDE (VScode) and integrating it with the terminal. I'm still getting used to it (have worked on Jupyter notebook before and it's a completely different experience). It is packed with so much real-time info that still confuses me a bit (I'm actively ignoring all the data that's presetned once I open a parantheses) but it's really nice to see how it helps with identation and with finding problems in the code. Is that legal??? :P
6. Overall, there seems to be so much to learn that I sometimes feel I will never get it. On the other hand, building such a program just several weeks ago would have seemed also not possible, so who knows...

That's it for now.
This is the link to the game.
Hope I didn't waste anyone's time!!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owz8a8hgh9jodqg5lkmp.png)
OSDC course 2023 Post #2
Published: 2023-01-21 20:04:32

This week we learned about version control and how to open a new issue in gitHub.

In the second part of the lesson, we learned how to create a website using gitHub pages. This is done by creating a main repository that should be named "username.github.io".
Each repository that is not the main username.github.io becomes a subfolder of the main repository.
You can find my website [here](https://adieg.github.io/).


This week one of our assignments was to follow my course friends, these are some of them:
@anatlavitzkovitz 
@dshisher 
@shanibmo 
@silent_mobius
Why Kotlin for Android?
Tags: android, kotlin, jetpack, mobile
Published: 2023-01-21 20:02:53

As an Android developer, you may be wondering why you should consider using Kotlin for your next project. Kotlin is a modern programming language that was first introduced by JetBrains in 2011, and it has been gaining popularity in the Android development community ever since. In this blog, we will explore some of the reasons why Kotlin is considered to be a great choice for Android development and how it can benefit you as a developer.

First and foremost, Kotlin is a modern programming language that is designed to be more expressive and concise than Java. This means that you can write less code to accomplish the same tasks, which can save you time and effort in the long run. Additionally, Kotlin has a more robust type system and a better support for functional programming, which can make your code more readable and less error-prone.

Another benefit of Kotlin is that it is fully compatible with Java. This means that you can easily use existing Java libraries and frameworks in your Kotlin code, which can save you a lot of time and effort. Additionally, you can also use Kotlin code in your Java projects, which gives you the best of both worlds.

Kotlin also brings some new features to the table such as Null Safety, extension functions, coroutines and many more which makes it more powerful than Java. For example, with Null Safety, you can easily avoid null pointer exceptions, which are a common source of bugs in Java. With coroutines, you can write asynchronous code that is both efficient and easy to read.

Additionally, Kotlin is supported by Google, which means that you can be sure that it will be supported for the foreseeable future. Google has announced that it is making Kotlin a first-class language for Android development, which means that you can be sure that it will be fully supported by the Android ecosystem in the future.

In conclusion, Kotlin is a modern programming language that is designed to be more expressive and concise than Java. It is fully compatible with Java, which means that you can easily use existing Java libraries and frameworks in your Kotlin code. Additionally, it brings some new features to the table, such as Null Safety, extension functions, coroutines and many more which makes it more powerful than Java. With Google's support, it's a great choice for Android development. So, as a developer trying to understand why Kotlin is good for Android development, I hope this article makes it a bit more clear for you.

###
AWS Cloud Quest: API with Database Study Note
Tags: aws, cloud
Published: 2023-01-21 19:54:07

This is the DIY challenge of the API with Database task in AWS Cloud Quest.

### DIY Steps:
1. Create a new DynamoDB
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf8xmu5t2qpxpevfo1ht.png)
2. Modify line 18 in `labFunction` Lambda to `table_name = "vehicles"`
3. Create API Gateway resource and method
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtgmi8e2zhu5hfcbpr2o.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz232vi88seymv4dhvpn.png)
4. Deploy API
Cap X: El mal entendido rol del arquitecto de software, El libro negro del programador. 💻
Tags: programming, spanish, productivity, books
Published: 2023-01-21 19:43:29

## **El mal entendido rol del arquitecto de software**

* Muchas veces tener un rol específico de arquitecto de software perjudica a un proyecto de software

* Es un gran error establecer desde un inicio una arquitectura de software fija y estática para todo el proyecto.

Un arquitecto de software profesional debería tener las siguientes peculiaridades:

* Mucha experiencia para un nicho específico de la tecnología, es este caso el desarrollo de software.

* Ha pasado por muchos roles en su carrera: programador, tester, analista, etc.

* Haber trabajado con varias tecnologías y dominarlas.

* Capacidad de dirección y liderazgo en el equipo.

Poquísimas personas cuentan con estas características, el desarrollo de software es una carrera que exige mucho a los programadores en cuanto a mantenerse actualizados en las tecnologías, por este motivo muchos optan por un ascenso que involucre más toma de decisiones que aspectos técnicos del proyecto.

* **En la gran mayoría de los proyectos no se necesita un rol de arquitecto de software.**

* Plantear una arquitectura fija desde el inicio del proyecto es un grave error.

* No confundir el rol de arquitecto con el de responsable técnico, este último es el encargado de escoger técnicamente las herramientas a usarse en el proyecto.

* Al desarrollar desconocemos completamente como vamos a resolver ciertos aspectos de la solución hasta que realmente tenemos y entendemos el problema realmente.

* Muchas veces se entienden o se toman mal los requerimientos.

* El desarrollo ágil viene a mejorar todo esto: más entregas cortas y frecuentes, se avanza con mayor seguridad programando módulos de fácil cambio, entonces la arquitectura va tomando forma a medida que el proyecto avanza.

* Una metodología ágil debería estar presente en la mente de cualquier programador profesional.

* Desarrollo ágil > Arquitecto de software.

---

Te dejo el link gratuito de [*El libro negro de programador*](https://underpost.net/ir/pdf/cy3/el-libro-negro-del-programador.pdf) por si te intesa leerlo, o dale click a la imagen:


[![libro](https://www.digitalskillsinstitute.com/assets/media/books/5541eba31b4b42b5bb021dc77c70d658-480.jpg)](https://underpost.net/ir/pdf/cy3/el-libro-negro-del-programador.pdf)
CSS is hard! Not anymore.
Published: 2023-01-21 19:34:22

Here are 10 CSS generators to save you 15+ hrs every week:

1. Blob maker

→ The blob maker tool helps you create different unusual shapes and allows you to copy and download the SVG.
👉 https://www.blobmaker.app/

2. Getwaves

→ It's a waves generator that helps to make different waves and allows you to copy and download the SVG.
👉 getwaves.io

3. Neumorphism

→ It's a Neumorphism generator in which you can experiment and get CSS code.
👉 neumorphism.io

4. Glassmorphism

→ It generates glass morphism effect you can play & customize and get the CSS code for it.
👉 glassmorphism.com

5. CSS Glow Generator

→ A box-shadow CSS generator that helps you quickly generate box-shadow CSS declarations for your website.
👉 https://lnkd.in/dRgitBbK

6. Cubic-bezier

→ Cubic-bezier is a tool to Preview & compare cubic-bezier easings as you customize &, and it lets you copy it.
👉 cubic-bezier.com

7. css3 generator

→ It comes with many useful generator tools to demonstrate many CSS properties in a quick visual way.
👉 css3generator.com

8. CSS filter generator

→ It helps you create and visualize images with different CSS filters applied to them.
👉 cssfiltergenerator.com

9. Clip Path Maker
→ It's an easy CSS clip-path maker, it allows to make many complex shapes with clip-path property.
👉 bennettfeely.com/clippy

10. CSS Grid Generator

→ CSS Grid layout generator helps to create grid box containers and grid items that adjust their position as per grid rules.
👉 https://lnkd.in/dXdxgQjs

Thanks for reading.

👉 https://linktr.ee/naoufelk
LAMBDA
Published: 2023-01-21 19:21:03

**Lambda** is a serverless compute service which can help you to run a code without managing servers.

*The code you run on lambda is called **Functions***
*Lambda scale automatically.
*Lambda is serverless which means you don't have to worry about
managing servers like EC2.

In a bigger picture,
*Lambda allow developers to focus on core business logic for the app they are developing instead of worrying about managing servers.

*Lambda is a building block for many serversless applications.

In lambda, serverless simply means AWS manages the servers for you and you cannot access them.

In the real world, lambda is used for

*Real-time file processing
*Sending email notifications
*Backend business logic.


Features of lambda.

*It support popular programming languages like java,node.js, python and ruby. 
*Lambda can execute your code in response to events. 
*You author code using your favorite development environment or via the console.
JSON maping in ReactJS
Tags: javascript, react, beginners, programming
Published: 2023-01-21 19:20:29

- Create a JSON file with .js extension 

# Data.js
```
const JSONdata = [
  {
    id: 1,
    quote: "Life isn’t about getting and having, it’s about giving and being.",
    author: "Kevin Kruse",
  },
 {
    id: 2,
    quote: "Whatever the mind of man can conceive and believe, it can achieve.",
    author: "Napoleon Hill",
  },
]
```

#App.js

```
import React from "react";
import JSONdata from "../Data";

const Home = () => {
  return (
    <>
      {JSONdata.map((dataForMap) => {
        return (
          <>
            <center>
              <h1>------------------</h1>
              <p>{dataForMap.id}</p>
              <p>{dataForMap.quote}</p>
              <h4>{dataForMap.author}</h4>
            </center>
          </>
        );
      })}
    </>
  );
};

export default Home;
```

# Finally Done !!!
To strive, to seek, to find, and not to yield
Tags: reflections, mindset, growth
Published: 2023-06-23 17:09:52

---
title: To strive, to seek, to find, and not to yield
published: true
date: 2023-01-21 19:14:26 UTC
tags: reflections,mindset,growth
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*82WW1RjC6seA_IQ_)
_Photo by Tommy Lisbin on Unsplash_

2022 is over, It’s been my best year professionally so far, I worked for two companies (yes I got a new job as a React Developer 🥳) and I grew a lot since the beginning of that year, I did a bunch of interviews with different companies which made me proud of how far I’ve gone since graduation, and being that kid who doesn’t know what to do with his life, applying endlessly for jobs and never receiving a callback.

The process was not easy, It was filled with ups, downs, ups, deep deep downs, frustrations, anxiety, and depression. I didn’t have any connections to the tech world when I started, I didn’t have the tech background required to get a job, I have never coded before college, I have only learned about HTML & CSS in college and that’s it. I never did a coding Bootcamp at college, and when I applied after college I was refused TWICE!   
At that point, I wasn’t sure if coding was “my thing”, I really felt like giving up.

But, here I’m, a frontend developer with 2 years of experience, and here’s my secret:

> To strive, to seek, to find, and not to yield

Even though, It was dark and seemed like a hopeless situation, I believed in myself, I didn’t care that others didn’t believe in me, I did it, one step at a time, day after day, after day, after day. Till I was able to get that first job.

If you kept believing in yourself, working, sharpening your own skills, learning, studying, and not giving up, I’m sure you can do it too!

![](https://cdn-images-1.medium.com/max/1024/1*1CFaPW78vImDeF7aYezdsQ.jpeg)
_Photo by VisualizeValue on Instagram_

So, why am I sharing all this? 2023 started and I find myself in the same shoe I was wearing when I got out of college, I’m uncertain about my future and what it holds, I haven't found stability in my career yet, and I don’t feel like I’m standing on solid ground, and that reminded me of my old self, and I knew exactly what I should do, keep learning, keep progressing, little by little, you will find yourself where you want to be. It might take weeks, months, or even years, but as long as you keep believing that It’s possible, It’s possible.
Using BLDR(SFMC) as a workflow tool.
Tags: sfmc, email, bldr
Published: 2023-01-21 19:00:08

In a previous post, I introduced [bldr.io](https://bldr.io); an Open-Source Command Line Interface (CLI) that integrates with Salesforce Marketing Cloud (SFMC) to provide users access to their assets/files within the platform from their local environment and the ability to modify them without having to copy/paste/update them in the platform. 

In this post I want to dive into how builder can be used within a team setting to manage projects within SFMC leveraging GIT.

Suppose you work on a team with Email Developers and Production Specialists.
 
- Email Developers are usually team members who are responsible for taking the email design/creative and ensuring that it will render correctly across the various email clients.

- Production Specialists are usually team members who are responsible for putting the final touches on the emails before it goes out the door.

In my previous roles, these two team members are split for various reasons. Email Developers may not have final image assets, final links, or have in-depth knowledge of an ESPs scripting language (in the case of SFMC - AMPscript). So they will typically use placeholder images and links to keep their process moving.

So how can BLDR help with this flow?

- Marketing Team receives creative brief for campaign/series of emails to be worked on
- Designer creates email designs or provides templates for build
- HTML Developers start working on coding the emails and checking render tests
- Developer passes file to Production Specialist to update image URLs, links etc.

Right about here is where the inevitable changes happen; rendering issues pop up, image URLs change, links change... any number of updates/adjustments need to happen.

Now if you're currently using some form of Version Control for your email development process, you're already ahead of the game. However, as well all know, it's easy to make quick updates directly in SFMC and forget to pass them back to GIT.

Through leveraging BLDR to manage pushing/updating your code in SFMC you now make GIT and your local version the source of truth. 

In addition to it being the source of truth, your team can leverage branches to work in tandem!
Dark Mode Toggle ↔️
Tags: javascript, tutorial, codenewbie, webdev
Published: 2023-01-21 18:36:34

I have always been intrigued by how a simple dark mode can enhance a user interaction experience. To kick off my creative coding journey, I designed the widely used dark-mode toggle.

Let's get building 🏗️

Here's how the toggle would work ->

{% codepen https://codepen.io/mihir_chhatre/pen/oNMpgPa %}

#### _<u>HTML</u>_

An `input` tag of type 'checkbox' allows switching between modes. 

Using the `label` helps create a view for the toggle. Inside the `label`, I have used [Font Awesome](https://fontawesome.com/icons) icons to represent the ☀️ and 🌑.  The toggle animation and current state representation can be mimicked using a ball within the toggle.

Within the HTML code, it is important to observe how the `input` and `label` are linked to produce a check & un-check effect each time the label is clicked.
<br>

#### _<u>CSS</u>_

First, we need to import Font Awesome to represent the icons. This can be achieved by navigating to the CSS section within the codepen settings. (Simply search 'font awesome' and add it to the external stylesheet.)

The height and width of the `body` are set to 100vh and 100vw respectively. This essentially means if your screen's dimension is 800*1000, the `body` will have a dimension of 800*1000 (100% of the screen dimension).

It is important to note that 100% is not the same as using 100vh(or 100vw). An example of one such scenario is shown below - 

{% codepen https://codepen.io/mihir_chhatre/pen/mdjporW %}

`p` is set to 100% height. However, since it is enclosed within a `div` whose height is 200px, `p` will have a height of 200px. To ensure that `p` has the height of the entire body, we can substitute 100% with 100vh to ensure `p`'s height is independent of `div`'s height.


Why use `box-sizing`? 
This property allows us to include the padding and border in an element's total width and height. 'border-box' informs the browser to include any border and padding within the values you specify as the element's dimensions.

The value of the checkbox can be obtained by using the checked pseudo-class. Since we use the adjacent selector('+'), we first target the label, and then the ball.
<br>


#### _<u>JavaScript</u>_

We target the checkbox and add an event listener to it. Since a checkbox input is used, the change function (adding/removing the 'dark' class to/from the body) is triggered each time the input is checked or unchecked (the mode is toggled).

---

Voila!
You have a functioning dark mode toggle that you can tweak and reuse! 👏

(P.S Dark Mode >>> Light Mode)