DEV Community: Alex Cocan

Create a fullstack* Angular App with one line of code

Alex Cocan — Thu, 15 Feb 2024 20:02:27 +0000

Introducing create-angular-auth-nav, a groundbreaking CLI tool designed to streamline the process of setting up new Angular projects with authentication and navigation features right out of the box. This package is a boon for developers looking to fast-track their Angular application development without compromising on quality or scalability.

With create-angular-auth-nav, jumpstart your Angular application equipped with a robust authentication system powered by Node.js, Express, Passport.js, and Bcrypt. Tailored to save you hours of coding and configuration, this tool scaffolds a project where you can immediately start adding your unique business logic and UI components.

Why create-angular-auth-nav?
Rapid Setup:
Generate a fully operational Angular project with pre-configured authentication and routing in mere minutes.

Secure Authentication:
Leverages Passport.js and Bcrypt for a secure authentication setup, ensuring your application's security from the get-go.

Customizable Template:
While offering a comprehensive starter template, it allows for easy customization to suit your specific project needs.

Enhanced Productivity:
Frees developers from the repetitive setup tasks, allowing them to focus on feature development and user experience enhancements.

Getting Started

To kick off your Angular project, simply run:

npx create-angular-auth-nav

This command creates a new directory with all the necessary setup for authentication and navigation. Follow the on-screen instructions to navigate into your project directory and launch the development server.

Embrace the Future of Angular Development

Embrace create-angular-auth-nav for your next Angular project and set a new standard for rapid development and high-quality code. Visit the npm package page for detailed documentation and advanced customization options.

App preview:

Disclaimer

This cli project create-angular-auth-nav is provided "as is", without warranty of any kind. The creators of this package shall not be held liable for any claims, damages, or other liabilities arising from its use. Your use of this tool constitutes acceptance of these terms.

Elevate your Angular development workflow with create-angular-auth-nav today and experience unparalleled efficiency in bringing your applications to life.

*Database is missing from this app,as that depends on user's needs.

Create a fullstack* React App with one line of code

Alex Cocan — Thu, 15 Feb 2024 19:39:56 +0000

In today's fast-paced development world, finding tools that streamline the creation process is like striking gold. Enter create-react-auth-nav, a CLI tool that scaffolds a full-stack application with React, Node.js, Express, and Passport.js. This package is a treasure trove for developers looking to jumpstart their projects with authentication and navigation features already baked in. It not only speeds up the initial setup but also incorporates best practices for security with Bcrypt for password hashing.

What makes create-react-auth-nav particularly valuable is its focus on productivity. By eliminating the boilerplate setup, developers can dive straight into the heart of their projects, focusing on unique features rather than wrestling with repetitive setup tasks. The package is designed to be intuitive, ensuring a smooth workflow from the get-go.

For those eager to explore this tool and how it can enhance your development process, check out create-react-auth-nav on npm. It's a straightforward way to elevate your projects, ensuring you're building on a solid, secure foundation while saving precious time. Embrace the future of development with create-react-auth-nav and watch your productivity soar.

App preview:

Disclaimer:
This project, create-react-auth-nav, is provided as-is without any warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. The use of create-react-auth-nav is entirely at your own risk. The author(s) or contributors shall not be liable for any damages, including but not limited to direct, indirect, incidental, special, consequential, or punitive damages arising out of or in connection with your access to, use of, or reliance on this project. By using create-react-auth-nav, you agree to this disclaimer and acknowledge that the project is offered freely for use, modification, and distribution under its specified license, without any obligation for support, maintenance, or updates.

*Database is missing from this app as this depends on user's needs.

Read More Read Less Button… HTML vs JavaScript, which one do you prefer?

Alex Cocan — Mon, 21 Sep 2020 16:53:25 +0000

Photo by Miguel Á. Padriñán from Pexels

Although I went deep into HTML, completing the www.W3schools.com free course, I somehow forgot about the great option HTML provide out of box with regards to “Read more…” button, very useful feature for lengthy articles.

HTML <details> and <summary> option:
Here comes the handy HTML tags <details> and <summary>, with summary being a child of . The Summary tag has a useful attribute of "open", which will keep the modal open and display the long content <summary open>.

A live example below:
<h1> Some great headline</h1>
<details open>
<summary>Read More....</summary>
<p>Some extremely long content… Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quisquam odit quas vitae, inventore fugit voluptatibus ratione commodi accusamus in deserunt assumenda quis quam voluptas quod unde alias nobis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis rerum, dolore blanditiis nesciunt accusamus, debitis asperiores quis inventore sequi numquam, odio illum natus molestiae hic minima? Praesentium,quia. Cum, iusto! </p>
</details>

JavaScript option:

The JavaScript option involves a little more code only to achieve similar result.

The HTML part:
<h1> Some great headline</h1>
<p>Some extremely long content <span id="readLess">. . . </span> <span id="readMore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quisquam odit quas vitae, inventore fugit voluptatibus ratione commodi accusamus in deserunt assumenda quis quam voluptas quod unde alias nobis distinctio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis rerum, dolore blanditiis nesciunt accusamus, debitis asperiores quis inventore sequi numquam, odio illum natus molestiae hic minima? Praesentium,quia. Cum, iusto.</span> </p>
<button onclick="readMore()" id="morebtn">Read more</button>

Adding CSS:

#readMore{display:none;}

Finally, the Javascript part:

function readMore() { let readLess = document.getElementById("readLess"); let readMore = document.getElementById("readMore"); let moreBtn = document.getElementById("morebtn"); if (readLess.style.display === "none") { readLess.style.display = "inline"; moreBtn.innerHTML = "Read more"; readMore.style.display = "none"; } else { readLess.style.display = "none"; moreBtn.innerHTML = "Read less"; readMore.style.display = "inline"; } }

That’s all folks! That was my first article since I started learning Front End Development, I hope it will be useful for less experienced developers.

What is your favorite use in this case HTML or JavaScript? Please leave comments below.

Full example code below:
https://codepen.io/furbo1/pen/rNeQJVq