5 Free 'non-AI' Design Tools to Create Human Loving Landing Pages

Vivek Agrawal — Mon, 16 Dec 2024 14:03:42 +0000

Around a week back I had to build a landing page for my free cryptography course for web developers. As I started building it, I collected some tools along the way.

These tools tremendously helped me make the landing page so much more beautiful than what I could built.

These tools left me thinking -- why the heck I didn't know about them earlier!

Just to be clear: I am not at all commercially related to any of these tools. I just loved them and I know you will too. That's why I'm sharing it with you guys.

All the tools mentioned in this list are completely free with no ads and no paywalls. They are actually free gold I would say.

1. SVG Repo

This website has a huge collection of SVG vector graphics and icons. I adore their ad-free and simple design. There's no paywall. All the SVG graphics are totally free. You can use these SVGs as icons or in some other graphics.

This website has a SVG editor as well. I found it super helpful in changing the color of the SVG to match my landing page's color palette.

➡️ Check it out: SVG Repo

2. Excalidraw

It's a hugely popular drawing tool. The lightning moment for me was when I discovered the Excalidraw libraries. The excalidraw library contains pre-made graphics by the community. This helps in quickly creating cool looking graphics and diagrams.

For example, I used some pre-made graphics from the excalidraw library to create the below graphic for my course's landing page. And it just took me around 10 minutes to do it all. Without excalidraw libraries, it would have taken lots of time to execute it.

➡️ Check it out: Excalidraw

3. Haikei

This is such a well-engineered tool. It allows you to create SVG designs. You can use these designs as a background in parts of your landing page or inside your product as well.

I used this tool to create a background for my landing page's past work section:

➡️ Check it out: Haikei

4. unDraw Handcrafts

This tool has lots of hand drawn SVG graphics that can be used to highlight parts of headings in your landing pages. These hand drawn graphics are so pleasing that you will find its use in various situations.

I downloaded a hand drawn rocket from this site and put it on my landing page's about section:

➡️ Check it out: unDraw Handcrafts

5. Hero Patterns

I always wondered from where did those SVG patternistic backgrounds came from. When I found Hero Patterns, man, I was stunned.

Hero patterns has lots of SVG background patterns. The website allows you to choose the right colors and then you just need to copy and paste a CSS snippet.

I used this tool to create a graph paper sort of background for the curriculum section of my course's landing page:

➡️ Check it out: Hero Patterns

The last three tools I found from Marc Lou's ShipFast Documentation. He's an inspiring product builder!

You should follow me on Twitter. I try to put useful stuff there. And I will respect your time.

Thank you for reading!

-vkweb

Cryptography concepts that we all developers missed. But we should have known.

Vivek Agrawal — Fri, 08 Nov 2024 18:26:37 +0000

Let me come straight to the point before I tell the story behind it.

People in the open source community know me by -- vkweb.

I have created a free and open-source course to teach cryptography concepts to developers. It's purpose designed for the needs of a developer. Contains only what we developers need to understand. Basically, anybody who opens a terminal during the day (or night) should benefit from it.

🟢 It's live as : Curious Cryptography.

Let's now get to the story behind it. At the end we have course's contents.

It started during my initial days as a beginner developer learning to code with Harvard's online course CS50x. I found various cryptography terms while I used to read documentations around the web.

Terms like -- salt, password hashing, PBKDF-2, key pairs. Like most of the developers, I too did not pay much attention to them, just skimmed through them a little on Google and moved on to fixing the next most important bug or the next feature to write.

Some time went by. I was progressing with CS50x. I saw a tweet or maybe it was a blog post, I can't recall accurately, but it was surely from Quincy Larson, the founder of freeCodeCamp.org. He informed the open source community that they have decided to revamp their full-stack curriculum.

Quincy encouraged the open source community to help build the new curriculum. I thought, let's see if there's anything I can help with. I browsed through the issues of their CurriculumExpansion GitHub repository, and found an issue I wanted to dive into.

The issue was about teaching cryptography concepts to freeCodeCamp learners. I decided to take it on. So, I first studied in depth how RSA public-key algorithm works internally. Khan Academy's videos and articles were my best friend during those times.

RSA digital signature system made for freeCodeCamp's cryptography curriculum.

Me with inputs from Kristofer Koishigawa, created a pull request with course contents. In this course, freeCodeCamp learners would build a digital signature system by coding their own public key RSA algorithm. As they built, they would learn about encryption, hashing, public keys, private keys.

A small disclaimer: do not ever write your own cryptographic algorithm for production. That RSA implementation was just for teaching purposes. Now, let's move on.

We are here today. Now, after these 4–5 years, that course never went live. I don't know the reason. And when I look back I realize, that course was not the right way to teach.

Recently, I got some free time to work on my own projects. I decided to build a fresh new course for developers on cryptography.

This time I wanted to do it right. The freeCodeCamp's course that we made was not very useful for developers.

We developers don't need to and should not deal with the internal maths that go inside the algorithm. That's for cryptography experts, that's a whole different subject. We developers should care about the concepts in enough depth, that we know what we are doing and why we are doing.

So that we developers don't do like the below xkcd comic guy (the stick character's name is cueball).

Don't do the above. From: https://xkcd.com/1553.

I started working on this new course. I collected concepts that were important for developers. I wanted to cover only those concepts that developers might encounter in their daily developer life.

Also, I wanted the course to be interactive, fun and with some depth. So, I built my own course website with a coding challenge and interesting diagrams.

Let me give you an overview of the concepts that will be covered in the course. This way you can see if you should spend time on the course or pass it. The course should take around 1.5 hours to complete. It is divided into 6 parts.

1. Symmetric key encryption

Scytale -- ancient encryption device.

Our course starts with how Cryptography started off as a need for ancient emperors to be able to talk to their army commanders without their enemy being able to understand the messages. We discuss one of the most fundamental cryptography principle -- Kerchoff's principle. We make you realize why having very high variations in a key is core to the security of encryption.

2. Code challenge: Caesar's cipher

Complete the decryption challenge.

This is a coding challenge where you will complete the decrypt function so that ciphertext gets converted to plaintext in the expected way. You will understand the most famous encryption technique in code -- Caesar's cipher!

3. Cryptographic hash functions

File integrity check using a cryptographic hash function.

We talk about hash functions in use with hash tables and then we introduce cryptographic hash functions. We will understand why cryptographic hash functions must not have hash collisions. We see two examples where hash collisions could be dangerous -- in Ubuntu package integrity checks and in Git commits.

4. Password hashing

Hashing prevents revealing cleartext passwords to the attacker.

It only gets more interesting. We give you a problem. Imagine you have a precious database of thousands of users, how will you store the passwords so that even if the attacker breaches the DB, your users' passwords are not revealed. And also, why encrypting the passwords is not the right way.

5. Rainbow table and the salt

The attacker amazed with rainbow table's efficiency.

We see why simply hashing the passwords is never enough. Attackers started using a powerful data structure called Rainbow table to crack passwords in matter of seconds. Then we see how the salt come into the picture to protect us from this attack!

6. PBKDF-2: slowing down

Parallelized password cracking with a Nvidia GPU.

The final attack we face is -- GPU based attacks. GPUs are packed with thousands of cores. They can run billions of parallel tasks. They are a super power for password crackers.

We will learn about PBKDF-2 (Password based key derivation function). And how it helps to defend against the GPU-based attacks. We also see how Django uses PBKDF-2 internally to protect passwords.

Congratulations buddy 🎉. This completes the first half of the course!

The second half of the course is expected to be around - Diffie-Hellman key exchange, RSA public-key encryption and TLS.

Before I make second-half, I decided to release the first-half so that I can get developers' feedback and see if the first-half is providing any value.

If lots of developers get some real value out of this, then I will work hard on the second-half. It all will forever remain free, that's a promise.

// Detect dark theme var iframe = document.getElementById('tweet-1330244083093221378-150'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1330244083093221378&theme=dark" }

I will post updates on my Twitter. Follow me there, I tweet rarely but I try to be useful.

Please let me know in the comments below or on my Twitter DM if you feel this course is valuable, it'll act as a source of motivation to work further on the course!

I will be waiting for your comments and feedback!

Thank you for reading this, you champion! <3

-- vkweb

DEV Community: Vivek Agrawal