Forem: Alejandro Foronda

Learn Next.JS by doing!

Alejandro Foronda — Sun, 11 Oct 2020 14:51:25 +0000

Next.JS is a great framework!

I created something that (hopefully) makes it fun to learn.

Is small set of 3 small challenges. I will definitely appreciate all feedback possible since this can be improved and maybe create similar resources for other technologies?

Let me know what you think!!

Solve the challenges!

Creating websites with txt files! | Proof of concept | Would love to hear your feedback!

Alejandro Foronda — Wed, 12 Feb 2020 01:40:19 +0000

Can programming be more accessible?

Proof of Concept

I believe so!, but first... Why should programming, or technology creation be more accessible?

The answer (at least for me) lies on the fact that there are so many creators out there that want to make so many things and have great ideas but they find themselves in front of a very steep road to do so. And we as engineers haven't made the path much smoother over time. In fact even many experienced developer can have a rough time on SO answers or reddit forums.

How?

There are many people and great companies working on democratizing technology for everyone with all sorts of different approaches. Myself took the approach of making it text based, as if you were taking notes.

The first idea was to configure a JSON file to change colors, add products and so on, and even though JSON is really human friendly is not human enough for people just getting started.

So I came up with this approach, where you basically put the name of a property, a colon and the value without { [ " which might and surly has scared a lot of people in the past.

Sample

name: My product!

price: 19.99

description: 

My Awesome product is awesome

lorem ipsum

Just like that you would create a product and have it ready on a predefined template.

Future & Present

I have no idea if this would actually increase productivity of a lot of people or if this is not something that would actually help someone. It even could be used from any note taking app out there, Notion was a big inspiration for this as well

I really hope it does, as the same mechanism could be used for making blogs, or even APIs where programers could use it as a headless CMS... but I'm getting ahead of myself. If you have some time I would definitely love to hear your thoughts and suggestions.

Code Challenge #5 | styled jsx | Raising Card

Alejandro Foronda — Thu, 09 Jan 2020 16:28:09 +0000

Challenge

Make the card component be able to receive an image prop and display it on the top half of the card.

Solve the challenge on CodeSandbox

Remember

To edit the sandbox you'll need to fork it.

Solution

You can send your solutions and request any help by reaching us via twitter to @thatgoodcompany or via email to contact@thatgoodcompany.com.

The joy of creating - The reason why I learned to code

Alejandro Foronda — Sun, 05 Jan 2020 00:03:39 +0000

When you experience the feeling of writing weird words that somehow create a website you can't go back.

Byproduct

I have a business development bachelor's degree but somehow I've been working as a software developer for about 6 years now. Although I was always interested in technology and computers and the famous Game Boy it never crossed my mind that I could be the one creating things that could run on said devices.

How I "entered" the industry then?

In my third year of college, I and a few classmates wanted to create what we now would call a "web app". We had this idea of making an online place where you could bet on local soccer matches (we later found that this was illegal but that's the beauty of being young, right? 🥳 also the service never came to fruition so no laws were broken).

Getting started

To achieve this we needed a lot of web development work done and neither of us had the skills or a friend that could help and knew how to do it.

Web Apps

Some of you might be thinking that here I learned to code, and in just 3 weeks we had our MVP (that term didn't exist or wasn't popular back then) done!... That didn't happen We did try, but as soon as we saw <!DOCTYPE html> we were like "Oh @!*@$&% no &@#($# way!".

We ended up going to a company that would sell us the product, which was super expensive (actually it was pretty accessible since the company was new but for early '20s college students it was insane).

Lessons

So the final product worked, but it wasn't what we imagined. The meetings with the company were tedious, we couldn't communicate efficiently, everyone was just tired about the idea and we found out about the illegality of the service so we just put everything to rest.

However even though, the final product wasn't what we imagined I loved it, maybe not the design or how it worked, I loved it because something that I imagined had become real and people around the globe could potentially access it and use it.

So.. My past me was thinking, I'm probably going to have many more ideas like this one "Am I going to go to a company every time?"

My first game

I started with something simple, so I decided to grab a book on C++ and decided to make a game... Yeah 🤦🏻‍♂️

Since I was probably going to have more ideas like the one I and my classmates had, I decided that I probably should learn how to create those types of products.

I started with something simple, so I decided to grab a book on C++ and decided to make a game... Yeah, you can figure out what happened next and if you don't immediately think "What's wrong with you" please don't start this way and don't make the same mistake I made.

That path didn't turn out well to say the least however thanks to the book I did learn about loops, variables, primitives, and conditionals which turn out to be very helpful eventually.

I did end up making the game I wanted but with a low-code | no-code tool Construct 2 that with knowledge from the book it felt like I had superpowers.

Create

Eventually, I found myself to limited by Construct 2, even though is a great tool I wanted to do more.

Seeing my first game become a reality was exactly what I needed to once again grab a book, watch Youtube, Coursera, Udacity and learn more about how to create things. When you experience the feeling of writing weird words that somehow create a website you can't go back.

I personally think that in the industry we make everything really hard for newcomers, maybe we're in too deep that we don't see how hard it is for others to understand... but I remember, and it's really difficult.

Wow I wish there's a day when I can write code as fast as he does.

The thing I remember the most is when I was watching a tutorial video from @jeffrey_way and just thinking "Wow I wish there's a day when I can write code as fast as he does".

Opportunities

After many, many hours of watching tutorials, failing miserably I was able to break into the industry and I'm so happy I took this path.

It has open many opportunities for me and even one of the products I made Avísame! (no longer available) got me tv, radio, newspaper interviews, and a fellowship in a program sponsored by the US State Department.

I'm not mentioning this to praise myself but to maybe inspire someone taking on this journey. Many, many things that you don't foresee can happen in your life, and learning such a key skill in an industry that's changing the world it's definitely worth it.

How to start learning?

I'm sorry to tell you there's no definitive answer to this. However, I do have some tips that maybe can help you in this journey.

Big O, Data Structures and Recursion

To be a good Software Engineer you need to know everything on this title, Queues, Stacks, Hash Maps, Hash Sets and if your algorithm is On or On^2.

However, if you're just starting I wouldn't focus on these concepts just yet, focus on getting thigs to work, every try you should try something a little more difficult. Eventually, all will just "click".

I'm sure many experienced developers might have a different opinion on this and consider that this is fundamental to start learning, however for me it wasn't, especially when you're just trying to grasp some other "simpler" concepts that when you're starting are really hard to understand.

By doing

Frustration is going to be your greatest enemy

You should watch tutorials, read books, take courses, there's a lot of great and free content out there. However, my advice here is don't stay on the loop of "I should learn this one more thing before starting, I don't know it yet".

As soon as you think you've learned something new just go ahead and create something using that new learning and only then you'll consolidate knowledge and realize that you understand it or otherwise you should probably check a little more documentation on one specific thing.

Frustration is going to be your greatest enemy, however, it's necessary to really learn something. Don't be afraid to fail as many times as needed.

Challenges

For me, challenges are a great way to learn something. Sometimes you are not on the mood to create something but you want to practice a new concept or skill.

This is an example of a simple challenge that even though it is really simple it helps you to learn some key concepts of html.

Olen Kusm noticed that his name is misspelled, He asked you to fix it for him!

Please correct his name.

Help

Lastly, don't be afraid to ask for help, write in forums, Twitter, friends. Maybe most of the time you won't get any responses, double-check that your question is clear and specific and then try again. There are many of us out there that are really happy to help someone.

Plug

I believe you should have good company when learning programming and for that reason, I've created that good company where I post challenges and starters so you can start creating as fast as you can.

PS.
Pika is my nickname since I was in elementary.

Code Challenge #4 | Stripe + NextJS | Change the price of the book

Alejandro Foronda — Fri, 03 Jan 2020 22:30:18 +0000

Challenge

Using the next starter project as a guide, can you change the price and image of the book?

Solve the challenge on CodeSandbox

Remember

To edit the sandbox you'll need to fork it, in order to work you must add CodeSandbox secrets with your Stripe's test keys. The name of the env variables is STRIPE_PUBLIC and STRIPE_SECRET.

Solution

You can send your solutions and request any help by reaching us via twitter to @thatgoodcompany or via email to contact@thatgoodcompany.com.

Starter Template #2 | Next JS + Stripe Checkout

Alejandro Foronda — Fri, 03 Jan 2020 22:19:22 +0000

This template is a starter for those looking to use Next JS whit Stripe Checkout in a project.

DEMO

You can check a live sample in CodeSandbox. To test the complete flow you need to open the browser in a new tab.

NOW

You can deploy the project to Zeit's NOW directly from codesandbox or by cloning this repo.

Setup

localhost

Create an .env file with STRIPE_SECRET and STRIPE_CLIENT as well as a .env.build file with STRIPE_CLIENT and any other variable that Next needs at build time.

CodeSandbox

Add CodeSandbox secrets for STRIPE_SECRET and STRIPE_CLIENT.

NOW

Keep the now.json file and add the environment variables with the NOW CLI now secrets add <secret-name> <secret-value>.

Code Challenge #3 | Edit a blog post | Vuepress

Alejandro Foronda — Fri, 03 Jan 2020 22:11:15 +0000

Challenge

Edit a blog post!

SOLVE CHALLENGE on Code Sandbox

You can send your solutions and request any help by reaching us via twitter to @thatgoodcompany or via email to contact@thatgoodcompany.com.

Code Challenge #2 | Implement a dark theme | Tailwind + NextJS

Alejandro Foronda — Fri, 03 Jan 2020 22:08:11 +0000

Challenge

Can you implement a dark theme to this landing page?

You can send your solutions and request any help by reaching us via twitter to @thatgoodcompany or via email to contact@thatgoodcompany.com.

Starter Template #1 | NextJS + Tailwind CSS

Alejandro Foronda — Wed, 01 Jan 2020 00:35:06 +0000

This template is a starter for those looking to use Tailwind CSS in a NextJS project.

CodeSandbox
Github

Setup Description

NextJS

Next CSS plugin This is used in nextjs.config.js as "withCSS".

Instructions

npm install --save @zeit/next-css
Create a nextjs.config.js in your project if you don't have it already.
Import the plugin to your project.

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({})

Tailwind

Since NextJS already uses PostCSS we just need to create a postcss.config.js to load the required plugins for tailwind to work properly and efficiently.

To Work Properly

tailwind Tailwind npm package: this will load the necessary css.
autoprefixer Autoprefixer npm package: this package will add vendor prefixes to CSS rules.

To Load Efficiently

cssnano cssnano npm package: this package will minify the css output.
purgecss purgecss npm package: this package will traverse your code and remove all unused css classes that tailwind generates.

Instructions

npm install --save tailwindcss autoprefixer purgecss cssnano
Create a postcss.config.js in your project if you don't have it already.
Import the plugins to your project, the plugins for optimization should only be loaded in production.

// postcss.config.js

//load purgecss 
const purgecss = require('@fullhuman/postcss-purgecss')({

    // Specify the paths to all of the template files in your project 
    content: [
        './pages/*.js', './pages/*.tsx',
        './components/*.js', './components/*.tsx' 
    ],

    // Include any special characters you're using in this regular expression
    // Recommended algorithm by tailwind but you're free to change it to your needs
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

// load cssnano
const cssnano = require('cssnano')({
    preset: 'default',
});



module.exports = {
    plugins: [
        //load tailwindcss
        require('tailwindcss'),
        //load autoprefixer
        require('autoprefixer'),
        //only use purgecss and cssnano on production builds
        ...process.env.NODE_ENV === 'production'
            ? [purgecss, cssnano]
            : []
    ]
};

Code Challenge #1 | Zonama, an e-commerce platform wants to know about you!

Alejandro Foronda — Tue, 31 Dec 2019 04:02:27 +0000

A new challenge has arrived!

Zonama, a big eCommerce platform wants to know more about you and needs to see your information online. We found for you a nicely designed presentation card but you need to edit the information.

Create your card

You can send your solutions and request any help by reaching us via twitter to @thatgoodcompany or via email to contact@thatgoodcompany.com.

Problem based learning

Alejandro Foronda — Sat, 28 Dec 2019 23:11:59 +0000

Software development should be easier to learn

Linked lists, Binary trees, Hash maps, Hash Sets, Big O…

You do need to know all the things mentioned above to become a Software Engineer, but you likely don’t need to know everything to start creating on the web.

What the team at that good company is trying to do is to lower the barrier of entry and make it easier for everyone to start learning and creating for the web.

How?

By solving challenges that have all the setup in place, with a clear small goal that will make you realize how certain aspects of the web work.

Will it work?

We hope so! problem-based learning has had some great results around the world. The fact that you’re actively learning instead of passively learning it’s a key factor. Passive learning is necessary but it needs to be complemented with action.

What’s next?

We’ll be publishing code challenges for you to solve with a variable difficulty level.

thank you

We want to acknowledge some of the great products and open source projects that are empowering web creators in so many different ways that make it easy for you to create, have a great experience and publish your work: Next JS, Zeit, Svelte, CodeSandbox among others that we’ll keep mentioning and using for our challenges.