DEV Community: Kendra Wing

Choosing Frontend Libraries/Frameworks: create-react-app or create-next-app?

Kendra Wing — Sat, 13 Jan 2024 23:56:13 +0000

In the field of frontend development, the appropriate tooling and framework play a vital role in the creation of high-quality and effective web applications. Widely used tools for beginning projects are create-react-app (CRA) by React and create-next-app by Next.js. This blog post will delve into the advantages and disadvantages of each, aiding you in making a well-informed choice for your upcoming project.

✔️ Pros of create-react-app:

Quick setup: Create React App offers a fast setup process, allowing developers to begin coding immediately instead of focusing on lengthy configuration tasks.
Opinionated defaults: It is pre-configured with logical defaults, including Webpack, Babel, and a development server, which facilitates both new and experienced developers in starting with modern JavaScript and JSX.
Support for the React ecosystem: It integrates flawlessly with the entire React ecosystem, incorporating popular libraries like Redux, React Router, and others.
Automatic updates: Create React App remains updated with the latest developments in the React ecosystem, simplifying the use of new features and improvements.

👎 The cons of using create-react-app:

Low flexibility: While Create React App offers an excellent starting point, it may not be flexible enough for advanced or custom projects that require significant customization or alterations to the build process.
No server-side rendering (SSR): If your project critically needs server-side rendering, Create React App alone is not sufficient, necessitating either an ejection or the use of alternative frameworks like Next.js.

☞ React.js Installation

npx create-react-app my-app
cd my-app
npm start

What is create-next-app?

Create Next App is essentially a command-line tool tailored specifically for assisting developers in establishing Next.js applications. Next.js, built upon React, helps enhance React applications by introducing functionalities like server-side rendering and static site generation, among others.

✔️ Benefits of create-next-app:

Server-side rendering (SSR): Next.js offers built-in server-side rendering, which not only enhances performance but also automatically optimizes an application for search engines without any additional configuration.
Static site generation (SSG): Next.js enables the creation of static HTML files that are quicker to load and less demanding on servers.
API routes: Next.js allows for the creation of serverless API routes, enabling the hosting of backend functions directly within your frontend application.
Automatic Code Splitting: In standard Next.js applications, JavaScript code is automatically broken into smaller chunks, aiding in optimizing the load time of an application.

👎 Cons of using create-next-app:

Learning curve: The introduction of new concepts and complexities in Next.js compared to Create React App can increase the learning requirements for developers who are not familiar with these concepts.
Overkill for simple projects: If your project does not require server-side rendering, static site generation, or advanced routing, Next.js might introduce unnecessary complexity.

☞ Next.js Installation

npx create-next-app@latest
### On installation, you'll see the following prompts:
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

⚡Conclusion

Both create-react-app and create-next-app are indeed wonderful tools for initiating backend projects, each offering its own set of strengths and optimal use cases. If you are seeking a quick and hassle-free setup for React applications, create-react-app is your go-to choice. Conversely, if your requirements include server-side rendering, static site generation, or more advanced features, create-next-app paired with Next.js offers a dynamic framework to fulfill these needs.

Ultimately, the choice between create-react-app and create-next-app hinges on the specific requirements of your project. Evaluate the pros and cons discussed here and select the tool that aligns most closely with your development goals and needs.

Happy coding!

Note: Always ensure you are up-to-date with the latest version of create-react-app and the most recent documentation for create-next-app to fully leverage their feature sets and enhancements.

Helpful sites where I've learned LLM Prompts in 2023

Kendra Wing — Mon, 01 Jan 2024 06:17:55 +0000

2023 has been an incredible year for diving into the world of Large Language Models (LLMs) and Prompt Engineering. The journey has been exhilarating, thanks to the plethora of online resources and vibrant communities that have opened their arms to learners like me. I want to share some of these valuable resources as we wrap up the year, hoping they can be as beneficial to you as they have been for me.

FlowGPT(https://flowgpt.com/)

FlowGPT is a hidden gem for prompt engineering enthusiasts, with a vibrant community for event participation and sharing. This open platform supports a wide range of LLM models, including ChatGPT, Google Palm, and others, and encourages users to find, share, and improve prompts. It promotes learning through community input, which goes beyond simple sharing. FlowGPT's community feature promotes engagement and collective growth in the developing LLM scene, making it ideal for both beginners and professionals. (Note: Some models like GPT-4 have usage limits.)

Learn Prompting (https://learnprompting.org/docs/intro)

LearnPrompting.org provides a free, open-source curriculum for learning ChatGPT and other AI tools for people of all skill levels. This resource offers extensive documentation and guidelines, making it a good starting point for prompt engineering. In addition, its vibrant Discord community is ideal for brainstorming, collaborating, and networking with peers. Stay ahead of the curve in the fast-paced world of AI by connecting with other supporters in this dynamic field.
(Note: Newly added Video Courses do cost.)

DeepLearning.AI (https://www.deeplearning.ai/)

DeepLearning.AI, working together with OpenAI, offers a free online course named 'ChatGPT Prompt Engineering for Developers'. This compact yet thorough training explains how LLMs work, imparts recommended practices for prompt engineering, and shows how to use LLM APIs in diverse applications. Participants receive a certificate from DeepLearning.AI upon completion, indicating their proficiency in this cutting-edge topic.

As we move forward into another year, filled with potential and opportunities for further learning, I encourage you to explore these resources. Stay curious and keep learning!

👋 Thanks for checking out this article! Connect with me on LinkedIn and GitHub!

How to write a good README for your project

Kendra Wing — Wed, 23 Mar 2022 21:42:25 +0000

A good README.md is essential for any project. It is a summary of your project and gives users instructions & important information. This is a simple guide to help you make an accessible guide for your project.

What is a README?

A README is a file that explains the details and all important information for a project. A standard README file will have a .md (Markdown) extension and will be at the root of your project repo. Note: Get used to typing in the Markdown Language for your project README's! There is still a lot of different styling & editing options available in markdown vs .docx, .txt. etc.

The Structure of a README

Example of a Good README

Project Title
This is the must have of any project. It is important to know what your project is going to be about and the title represents that.
Project Description
This is an important part of your project and what many developers and non-developers will look at. It is vital to have the most accurate and correct information. The description needs to be well written with no grammar errors and that is readable to users of multiple backgrounds. It is important to put some time and thought into writing the description of the project. It does not need to be long but needs to summarize the project. (What does your app do? What tech did you use?)
Table of Contents (Optional)
A table of contents is good if you have a lengthy README and can help users navigate to sections quickly but is not a must have.
Getting Started
This section typically is brief and will list the pre-requisites that the user must have in order to start using the project code. This section can be similar or be combined with the Installation section. (Ex: Must have node -v)
Installation
This is where you will list the full instructions for users on how they can install and start using your project. This should include multiple steps and have detailed descriptions and outcomes for users. It is important to take your time and write these steps as thoroughly as possible. This will help users a lot and will help prevent users from coming back and asking follow-up questions.
Other Instructions, Specifications, Attributes, or Project Info
This section(s) can include any other relevant project information. This can include information specific to a particular OS or Framework (Ex: Linux, React, etc). Certain projects have specific instructions and information that may need to have their own separate sections. As you develop your project you will get a better idea of what you need to include in your README and how to structure it.
Contributing
It is important to list all the names and information of the people who've contributed to the project. Be sure to include their GitHub Profile Name and any other social media they may want to have listed. There are some cool markdown contributing badges that I will list in the Good Resources below.
Acknowledgements
Similar to Contributing it is important to include all the sources that helped you complete this project. It's always good to give credit where credit is due.
License
Choose a license for your project. To learn more about license's check out choosealicense.com.

✧ Optional: Additional Sections

How to Contribute to the Project
Add ways that that developers can contribute to the project.

Tests
Write tests for your application and then provide examples on how to run them.

Examples
You really go the extra mile when you provide examples of your code/application. This could be a screenshot, code block, video, webpage, etc. This can be really helpful to your users.

Badges
Try adding some cool markdown badges! There are badges at sites like shields.io and they include important code monitoring and other tracking info. Check out the Good Resources section below.

Example of a Good README

Good Resources

Make a readme the basics of a readme.
Awesome Open Source has some great README templates.
CLI readme generator a command line package.json & git config file.
Shields.io badges for all your markdown documents.
Badges Generator create your own markdown badges.
Contributing Badge a contributing badge for your project README.
choosealicense.com information for license's for projects.
Open Source License Article information on open source license's.

👋 Thanks so much for reading this article! Please check out my other articles on Dev.to and connect with me on LinkedIn.

Kendra WingFollow

Developer & Advocate. I Build Creative UI & Innovative Apps with React.js, APIs, SQL, JS Frameworks, Open Source, & LLMs / AI 🔮.

How to Start Contributing to Open Source

Kendra Wing — Sun, 16 Jan 2022 00:39:44 +0000

This has been my first year as a developer and I've learned a lot by contributing to multiple open source projects. I've heard from other Dev's that they've had trouble finding open source projects and just generally knowing where to start in the open-source community so I decided to write about resources & tips that helped me.

What is Open Source?

Open Source is a term that refers to software bases or platforms with source code (GitHub, Gitlab, Bitbucket, etc.) that is accessible and can be modified or enhanced by anyone.

Open source projects are a great way to collaborate with other Developers and build a network. Contributing to open source projects can help you develop & learn and make an impact to important projects in Tech. Some popular examples of open source include- Mozilla Firefox, Linux, WordPress, Bitcoin, and Android. ☞ Learn more at opensource.com, digitalocean.com, and github.com.

Where to Start?

I first started learning and contributing to open source during a Hackathon event. I was able to start my own open source project and found other developers to help grow the project. It was a great opportunity to connect and collaborate on some code.

It's important to have an understanding of your skills level and to know the basics of GitHub and git (git clone, git pull, git push, git status, git status, etc.) ☛ git cheatsheet

1. Find Open Source Projects:

firsttimersonly.com has links to everything you need to get started on open source.
goodfirstisssues.com & goodfirstissue.dev are the sites where I found open source repos that needed help and let me filter by the programming language (HTML, CSS, JavaScript, etc.). Anyone regardless of skill level can use these sites.
Devpost has a list of multiple hackathons that you can participate in. You DON'T need to do a Hackathon to contribute to open source it is just a good resource for new dev's.

2. Once you've found a project your interested in...

Go to the repo's README.md
Look at the Contributing section to find out the project's requirements and instructions on how to contribute. ⚠️ Make sure to find a project that clearly states the instructions for contributors. This is especially important if you are new to open source. *Be sure to read the Code of Conduct before getting started on any project you contribute to!

3. Look at the project's open issues:

Most open source projects will have open Issues that describe errors, updates, enhancements, and other things that are needed for the project. It is good to look through all the open issues and see if you can contribute & complete that issue. If there are no open issues and you would like to make your own contribution be sure to look at the README.md (mentioned in Step 2) for instructions.

4. Fork & Clone the project down to your machine and start coding!

5. Make a Pull Request
An open source project pull request template should include the following:

PR Title/Subject
Description of code changes, enhancements, etc.
Reason for submitting PR (fixes bugs, enhancement, etc.)
Tests or Checks performed on code
Any other documentation...

🚨 The most important things for any Pull Request is to write a clear and concise message of the changes you made. Proofread and correct any types in your code before you make a PR! * Be sure to do a git pull so you have the up to date code.

I hope you find this brief guide helpful. Contributing to Open Source is a great way to connect, contribute, learn, and develop some awesome code! I highly recommend any new Dev's to find an Open Source project and show off some of your skills! Best of luck to you in your coding journey! 💻💪💫

👋 Connect with me on LinkedIn

Kendra WingFollow

Developer & Advocate. I Build Creative UI & Innovative Apps with React.js, APIs, SQL, JS Frameworks, Open Source, & LLMs / AI 🔮.

I plan on writing additional posts on how to Create a PR, Write a good README.md, Repo Basics (Maintainer, Labels, Issues, Deployment, Code of Conduct, License, etc.), and good Collaboration with other Dev's tips. Being a Junior Dev I hope to pass on some tips to other Dev's who are starting out. Stay tuned for more updates!

My Hacktoberfest2021 Journey

Kendra Wing — Mon, 01 Nov 2021 00:49:24 +0000

Hacktoberfest 2021 ~ Women In Tech App/API creation ~ A Web Dev's Reflection

Hacktoberfest2021

kwing25 / Women-Who-ve-Changed-Tech

Updates coming soon 2023... Women Tech Pioneers API & React App 👩🏻‍💻. List of amazing Female Tech & STEM Pioneers. Contributions to the list are welcome!

‣The Project ‣The Beginning ‣The Future ‣Being a Maintainer ‣Women In Tech ‣Thanks ‣See more

This was my 1st time being a Contrbutor & Maintainer in Hactoberfest. I'm a new Bootcamp Grad & Developer and this event was a great opportunity to contribute to Open Source Projects.

The Project

Looking at the many open source projects I decided I wanted to do more than just contribute. For a while, I've wanted to do a Female Tech Pioneers Web API/React App after noticing that there aren't many sources online of just Females in Tech. I decided to start a project that would build the foundation of an all-Women Tech & STEM Pioneer API and Website. I wanted to have multiple contributors building a list of Female Tech Individuals. It's been surprising to see the number of people Contributing to the list. I didn't think that there would be many people who would see the Repo and it's been incredible working with people all over the world 🌎.

The Beginning

I started with the goal of developing a simple Front End React JS and a JSON & Yaml File for the API List. Creating the basic structure of the site I used Sass/SCSS for Styling, Bootstrap for Structure, and npm packages (Font Awesome, React-Scroll-Motion). For the API Development I used Postman.

The Future

This project is just in its infancy and I plan on developing this into a full Web API using REST & React.js as the main technologies. Having multiple Collaborators & Contributors will help to the project's development. Contribute☞

Being a Maintainer

Being a maintainer on a repo can be very rewarding but also involves a lot of work. GitHub & GitLab make Devops/Repo Management accessible for users and is vital for open source collaboration. Issues, Docs, PR's, Tracking, Actions, Projects, Etc.. One of the most important things I've learned is that having strong connections & communication with other collaborators can make a huge difference in a project.

Women in Tech

My experience as a Woman in the Tech Industry has come with challenges. I started out taking Computer Networking courses and wanted to get certifications in IT and Security. There were very few women in these classes and sometimes I was the only one. I never let this stop me from going into this field and I don't want this to stop any other woman from pursuing a career in tech. But I had to learn and grow more confident in myself. Amy Hood the CFO of Microsoft put this feeling into good words-

"Every job I took, I was deeply uncomfortable in terms of feeling unqualified. Every step, every risk I took, built confidence."

When you love a certain field and are passionate about it you can achieve about anything (usually easier said than done). There are so many talented women in the Tech Industry and so many that have made a lasting impact. My ultimate goal for this project is to document women in Tech and make sure there remembered in Tech history.

Thanks

👏 Many great Contributors on this project. See the list ☞ github.com/kwing25/Women-Who-ve-Changed-Tech/graphs/contributors

See more

Contact-

Ada Lovelace was my first entry to the list. ✦ Known as the 1st Computer Programmer. Ada was brilliant in Mathematics & Computing. She lived in the 1800s and is still remembered today for her contributions in this field.

  {
    "id": "1",
    "name": "Ada Lovelace",
    "known_for": "First Computer Programmer",
    "Bio": {
      "Summary": "The daughter of famed poet Lord Byron, Augusta Ada Byron, Countess of Lovelace — better known as \"Ada Lovelace\" — showed her gift for mathematics at an early age. She translated an article on an invention by Charles Babbage, and added her own comments. Because she introduced many computer concepts, Lovelace is considered the first computer programmer"
    }
    {
    "Fields": [
      {
        "Computing": [
          "Programming",
          "Algorithms"
        ]
      }
    ],
    "Legacy": "Lovelace's contributions to the field of computer science were not discovered until the 1950s. Her notes were reintroduced to the world by B.V. Bowden, who republished them in 'Faster Than Thought - A Symposium on Digital Computing Machines'. Since then, Ada has received many posthumous honors for her work.",
  }