Decoding Jira Software Project Management: Unveiling Team-Managed and Company-Managed Projects

Categories
NVM, NodeJs Product Management Project Management Resource Management

In Jira Software, the terms “Team-Managed” and “Company-Managed” refer to different project management approaches that organizations can adopt based on their preferences and requirements.

These approaches impact how projects are configured, controlled, and managed within the Jira environment.

Team-Managed Projects:

  • Key Characteristics:
    • Simplicity: Team-Managed projects are designed to be lightweight and easy to set up, making them suitable for teams that prefer a simplified project management approach.
    • Flexibility: They offer flexibility in terms of configuring workflows, permissions, and settings at the project level, giving teams autonomy to manage their own work.
  • Configuration:
    • Project Configuration: Configuration settings are managed at the project level, allowing teams to customize workflows, issue types, and other project-specific settings.
    • Permission Control: Permissions are managed within the project, enabling teams to control who can access and perform actions within the project.
  • Use Case:
    • Team-Managed projects are often suitable for small to medium-sized teams that require autonomy in managing their work without complex administrative overhead.

Company-Managed Projects:

  • Considerations:
    • Complexity vs. Autonomy: Team-Managed projects offer simplicity and autonomy for individual teams, while Company-Managed projects provide a more structured and controlled environment suitable for larger organizations.
    • Scalability: Company-Managed projects are often more scalable for larger enterprises with a need for standardized processes and governance.
    • Adoption: The choice between Team-Managed and Company-Managed projects depends on the organization’s size, structure, and the level of control and standardization required.

When creating a new project in JIRA Software, you can choose between these project types based on your team’s preferences and organizational needs.

Project Management- Identifying Project Goals through SMART and OKR Methods

Categories
Product Management Project Management

Project management serves as the cornerstone of successful endeavors, guiding teams toward desired outcomes. One of the crucial steps in this process is the identification of clear and well-defined project goals. This article explores two effective methodologies—

  • SMART (Specific, Measurable, Achievable, Relevant, Time-Bound) and
  • OKR (Objectives and Key Results)—to facilitate the establishment of robust project goals.

**1. Understanding SMART Goals:

Specific: A clear project goal should be unambiguous and well-defined. Instead of a broad objective like ‘Increase Sales,’ opt for ‘Increase quarterly sales by 15% through targeted marketing strategies.’

Measurable: Goals should be quantifiable to track progress. Establish concrete metrics, enabling the team to assess achievements objectively. For example, ‘Reduce customer support response time by 20%.’

Achievable: Set realistic goals that challenge the team without overwhelming them. Ambitious targets are encouraged but within the realm of feasibility. ‘Implement a new feature within the next two sprints’ illustrates an achievable aim.

Relevant: Goals must align with the project’s overall purpose and contribute to its success. Ensure that each goal has a direct impact on the project’s outcomes.

Time-Bound: Assign a specific time frame for goal completion. This instills a sense of urgency and helps prevent delays. ‘Launch the product by the end of Q3’ provides a clear timeline.

**2. Embracing OKR Methodology:

Objectives: OKR’s define ambitious, qualitative goals that guide the team. Objectives are often broader and encapsulate the project’s strategic aims, such as ‘Enhance customer satisfaction.’

Key Results: These are specific, measurable milestones linked to each objective. For the aforementioned objective, key results could include ‘Achieve a Net Promoter Score of 9’ or ‘Reduce customer complaints by 25% within the next quarter.’

**3. Combining SMART and OKR:

By combining SMART and OKR methodologies, project managers can create a comprehensive framework. Start with defining SMART goals to establish clarity and precision. Once the SMART goals are in place, leverage the OKR approach to align these goals with broader project objectives and outcomes.

**4. Iterative Nature of Goal Setting:

Recognize that project goals may evolve as the project progresses or as external factors come into play. Regularly review and, if necessary, adjust goals to align with the project’s current needs.

**5. Communication and Transparency:

Transparent communication is paramount. Clearly communicate the established goals to all stakeholders, fostering a shared understanding of the project’s direction. Regularly update teams on progress and celebrate milestones, maintaining motivation.

Conclusion:

In the dynamic landscape of project management, the ability to set and adapt goals is pivotal. The SMART and OKR methodologies provide a structured and flexible approach, ensuring that project goals are both well-defined and strategically aligned. As project managers incorporate these methodologies into their toolkit, they empower teams to navigate challenges and achieve success through a clear and focused vision.

Big Question: Would “HTMX” play game changer role in the Front End Development?

Categories
Complete Information about HTMX Front End Development Front End Development Tools Front End Frameworks Front End Resources Front End Tweaks HTMX Introduction Hyper Text Markup eXtensions JS Frameworks

As of my latest knowledge, HTMX(Hypertext Markup extensions) was gaining popularity in the web development community for its approach to enhancing interactivity and user experience on the web. 

“To know more about HTMX, please follow my last article with provided link”

Facts:

However, it’s important to understand that the “future” of web development is a constantly evolving landscape, and the choice of tools and technologies depends on various factors, including project requirements, development team preferences, and industry trends.

HTMX | An alternative to writing JavaScript

Is HTMX the “next big thing” in web development? The answer lies in its ability to continually meet developers’ needs and adapt to the ever-changing landscape of web development practices. Here are key factors to consider when evaluating HTMX’s future:

Key Factors:

1. Popularity and Adoption: A technology’s success often hinges on its acceptance within the developer community. HTMX’s future looks promising if it continues to gain traction and attract contributors.

2. Simplicity and User Experience: HTMX has garnered praise for its user-friendly nature. Sustaining this simplicity while evolving to meet developers’ evolving demands could solidify its relevance in numerous projects.

3. Integration Capability: HTMX’s ability to seamlessly integrate with other libraries, frameworks, and server-side technologies is crucial. Enhanced compatibility with diverse tools can enhance its versatility.

4. Performance and Scalability: In an era of increasingly complex web applications, performance is paramount. HTMX’s ability to effectively address performance challenges and scale with modern web application demands may determine its success.

5. Community and Documentation: A vibrant, supportive community coupled with comprehensive documentation and resources can significantly contribute to a technology’s long-term viability.

6. Adapting to Web Standards: Staying abreast of evolving web standards and harnessing browser capabilities is essential. Technologies that adapt and leverage these standards tend to thrive.

7. Competitive Edge: The web development landscape is competitive, with numerous libraries and frameworks vying for attention. HTMX’s future will also depend on how it differentiates itself from competing technologies.

As HTMX continues to navigate these factors, its potential as a staple in the world of web development will become clearer.

To determine whether HTMX is the “new future” of web development, it’s essential to monitor its development, community engagement, and how it aligns with your specific project requirements. 

Keep in mind that the web development landscape can change rapidly, and new technologies may emerge over time, so staying informed and adaptable is key to making informed technology choices.

Reference URLs:

Here are the Reference URL to know more about it.

  1. https://htmx.org/
  2. https://github.com/bigskysoftware/htmx
  3. https://www.builder.io/blog/htmx-vs-react
  4. https://rakeshpant.in/htmx

HTMX : A First look and Introduction

Categories
Complete Information about HTMX Front End Development Front End Development Tools Front End Frameworks Front End Resources Front End Tweaks HTML and CSS HTMX HTMX Introduction Hyper Text Markup eXtensions JS Frameworks
HTMX | An alternative to writing JavaScript

HTMX is a modern JavaScript library that allows developers to build web applications with enhanced interactivity and user experience.

It stands for “Hypertext Markup eXtensions.”

-web

It is designed to make it easier to add dynamic and interactive features to web pages without the need for extensive JavaScript code.

What is HTMX

HTMX is a web framework that enables you to build web applications with less JavaScript and more reliance on HTML and HTTP.

The name “HTMX” stands for “HTML over the wire with Ajax.”

HTMX | An alternative to writing JavaScript

Key Features:

Key features and concepts of HTMX include:

  1. Declarative HTML: HTMX promotes a declarative approach to web development. You add special attributes to your HTML elements to specify their behavior such as how they should update, fetch data from the server, or handle user interactions.
  2. Ajax Requests: HTMX simplifies making Ajax requests to the server. Which means you can load data or perform actions on the server without requiring a full page reload.
  3. Partial Page Updates: Instead of refreshing the entire web page. It allows you to update only specific parts of the page. This leads to a smoother and more responsive user experience.
  4. Real-Time Interactivity: HTMX enables real-time interactivity by allowing you to define how elements on the page should react to user actions, such as clicks, form submissions, or hover events.
  5. Integration with Existing Tools: It can be used alongside other front-end libraries or frameworks like jQuery, Bootstrap, or even with server-side technologies like Django, Flask, or Ruby on Rails.
  6. Progressive Enhancement: It follows the principle of progressive enhancement, which means that your web applications remain functional even if JavaScript is disabled or not supported by the user’s browser.
  7. Event Handling: You can use HTMX to define how events (e.g., clicks, submits) should trigger actions on the server and update the page in response.
  8. WebSocket Integration: It can integrate with WebSocket protocols, allowing for real-time communication between the client and server.

It has gained popularity for its simplicity and its ability to improve the user experience of web applications while reducing the complexity of front-end code.

Developers appreciate it for its minimal learning curve and its ability to work with existing HTML and server-side technologies.

How it Works

HTMX | HyperText Markup extensions

There are too many best features in HTMx, below I provide one of the example to show how it works

Installation

1. Via A CDN (e.g. unpkg.com)

The fastest way to get going with htmx is to load it via a CDN. You can simply add this to your head tag and get going:

<script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/
2. Via A CDN (e.g. unpkg.com)

Download htmx.min.js from unpkg.com and add it to the appropriate directory in your project and include it where necessary with a <script> tag:

<script src="/path/to/htmx.min.js"></script>

Example-Click to Update

The below example will showcase the way of data value updating via use of it.

  • This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from /contact/1/edit
<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: joe@blow.com</div>
    <button hx-get="/contact/1/edit" class="btn btn-primary">
    Click To Edit
    </button>
</div>
  • Above code returns a form that can be used to update.
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>
  • The form issues a PUT back to /contact/1, following the usual REST-ful pattern.

Summary

To stay updated on the future of HTMX, I recommend following the official project website, blog, or GitHub repository.

Additionally, engaging with the HTMX community and monitoring industry trends in web development will provide valuable insights into its evolution and relevance in the ever-changing front-end development landscape.

Product Management and Project Management

Categories
Agile Methodologies Product Management Product Owner Project Management Resource Management

Project Management and Product Management are two distinct but closely related disciplines within the field of business and product development.

They both play essential roles in ensuring the successful execution of projects and the creation of valuable products.

Here’s an overview of each:

Project Management:

  1. Definition: Project management is the practice of planning, executing, controlling, and closing projects. A project is a temporary endeavor with a specific goal, set timeline, and defined scope.
  2. Role: A project manager is responsible for overseeing the entire project from initiation to completion. They ensure that the project is delivered on time, within budget, and meets the desired quality standards. Project managers often focus on managing resources, schedules, budgets, and risks.
  3. Key Responsibilities:
    • Defining project goals and objectives.
    • Developing a detailed project plan.
    • Assigning tasks and responsibilities to team members.
    • Monitoring progress and making adjustments as needed.
    • Managing risks and issues.
    • Ensuring project stakeholders are informed and satisfied.
    • Closing out the project and conducting a post-project evaluation.
  4. Tools: Project management tools such as Gantt charts, project management software (e.g., Microsoft Project, Asana, Trello), and various methodologies like Agile and Waterfall are commonly used in project management.

Product Management:

  1. Definition: Product management is the process of defining, developing, and delivering a product that meets customer needs and aligns with the company’s strategic objectives. Product managers are responsible for the entire lifecycle of a product.
  2. Role: A product manager is responsible for making strategic decisions about the product, defining its features, and guiding the product development team to create a successful product. They act as the bridge between various teams, including engineering, marketing, and sales.
  3. Key Responsibilities:
    • Defining the product vision and strategy.
    • Identifying customer needs and market opportunities.
    • Prioritizing features and creating a product roadmap.
    • Working closely with development teams to build and launch the product.
    • Monitoring product performance and gathering user feedback.
    • Making data-driven decisions to improve the product.
    • Collaborating with marketing and sales to ensure successful product launches.
  4. Tools: Product managers use various tools, including product management software (e.g., Jira, Productboard), analytics tools, customer feedback platforms, and market research data.

Skills

For both product managers and project managers, human skills, also known as soft skills or workplace skills, are crucially important. You will also need some specialised technical knowledge.

Product manager skills:

  • Data analysis
  • Market assessment
  • Price modeling
  • Basic user experience (UX) knowledge
  • Basic business knowledge

Project manager skills:

  • Knowledge of project management approaches like Scrum, Agile, and Waterfall
  • Risk management
  • Project management tools like Asana or Gantt charts
  • Basic budgeting

Relationship Between Project Management and Product Management:

While project management and product management have distinct roles and responsibilities, they often intersect in the development and launch of a new product.

Project managers may be responsible for overseeing the project to build the product, while product managers focus on defining what the product should be and ensuring it aligns with the company’s strategic goals.

Collaboration between these two roles is crucial to ensure that the product is delivered successfully, on time, and within budget.

Summary

While both project management and product management involve planning, execution, and achieving goals, they differ in their scope and focus.

Project management deals with the successful execution of specific projects, whereas product management is concerned with the overall lifecycle and strategy of a product or product line.

These roles often collaborate closely within organizations to deliver successful products and projects.

How to install and Configure NVM on Mac OS

Categories
HomeBrew Node Version Manager NodeJs NVM, NodeJs Typescript
NodeJs_NVM Feature Image

Introduction

  • nvm (Node Version Manager) is a tool that allows you to install and manage multiple versions of Node.js on your Mac.
  • nvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. 
  • nvm works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: unix, macOS, and windows WSL(Windows Subsystem for LINUX).

To install nvm on a Mac, you will need to follow these steps:

Install Homebrew

nvm is not available in the default package manager for Mac, so you will need to install Homebrew first. To do this, open a terminal window and run the following command:

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”

 

Install nvm

Once you have Homebrew installed, you can use it to install nvm by running the following command:

brew install nvm

Add nvm to your shell profile: To make nvm available every time you open a new terminal window, you will need to add the following line to your shell profile (e.g., ~/.bash_profile or ~/.zshrc):

source $(brew –prefix nvm)/nvm.sh

Install Node.js

Once nvm is installed, you can use it to install the latest version of Node.js by running the following command:

nvm install node

How to use specific version of NodeJS

To use a specific version of Node.js with nvm, you will need to follow these steps:

List available Node.js versions

To see a list of all available Node.js versions that you can install with nvm, run the following command:

nvm ls-remote

Install the desired version

To install a specific version of Node.js, such as version 16, use the following command:

nvm install 16

Use the installed version

Once the desired version of Node.js is installed, you can use it by running the following command:

nvm use 16

Set the default version: If you want to use a specific version of Node.js by default, you can set it as the default version using the following command:

nvm alias default 16

Top Front End Web Development Tools

Categories
Front End Development Front End Development Tools Front End Resources Front End Tweaks HTML and CSS Wep Application Performance
Front End Resources

INTRODUCTION

Front End Development Tool is a software application that helps developers to develop or build attractive web and app prototypes with ease. Those tools help to accelerate the website development process by providing handy elements and several built-in features to build an elegant and attractive web design layout.

There are various types of front-end web development software that help developers to enhance their development work.

FRONT-END TOOLS LIST

Here is a list of top front-end development tools including the website URLs and attractive features.

1. Backbone.js

It is a JavaScript library with a RESTful JSON interface and is based on the model–view–controller application design paradigm.
Website Link: https://backbonejs.org/

2. Bit

It is a standard infrastructure for components. It’s everything your teams need to enjoy autonomous development, faster releases, effortless consistency, and collaboration at scale.
Website Link: https://bit.dev/

3. Bootstrap Framework

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
Website Link: https://getbootstrap.com/

4. Chart-Js

It is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie, bubble, radar, polar, and scatter.
Website Link: https://www.chartjs.org/

5. Chrome Developer Tools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.
Website Link: https://developer.chrome.com/docs/devtools/

6. CodeKit

It combines, minifies, and syntax-checks JavaScript.
Website Link: https://codekitapp.com/

7. Code-Pen

It is one of the best front-end development tools which allows to build, deploy a website and build test cases.
Website Link: https://codepen.io/

8. Creative Tim

It provides Fully Coded UI Tools to create web and mobile apps.
Website Link: https://www.creative-tim.com/

10. Git Hub

It is a provider of Internet hosting for software development and version control using Git.
Website Link: https://github.com/

11. Grunt

It is a JavaScript task runner tool. This tool is used to implement regular processes like linting, modification, compilation, and unit testing.
Website Link: https://gruntjs.com/

12. Google Fonts

Google Font is a library of numerous free and open-source font families, a respective web directory for getting the font library, and APIs via CSS and Android.
Website Link: https://fonts.google.com/

13. HTML5 Boilerplate

HTML5 Boilerplate is an HTML, CSS and JavaScript template for creating HTML5 websites with cross-browser compatibility.
Website Link: https://html5boilerplate.com/

14. Ionic Framework

An open-source mobile UI toolkit for building high-quality, cross-platform native and web app experiences. 
Website Link: https://ionicframework.com/

15. Jasmine

Jasmine is a behavior-driven js for testing JavaScript code. It does not depend on any other JavaScript frameworks. This open-source tool does not require a DOM.
Website Link: https://jasmine.github.io/

16. LESS

LESS is a pre-processor that extends the support for CSS language. It allows developers to use techniques to make CSS more maintainable and extendable.
Website link: http://lesscss.org/

17. Materialize

A modern responsive front-end framework based on Material Design.
Website– https://materializecss.com/

18. Meteor

MeteorJs is a full-stack JavaScript framework. It is made up of a collection of libraries and packages.
Website Link: https://www.meteor.com/

19. NPM

NPM is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
Website Link: https://www.npmjs.com/

20. SASS/SCSS

It is one of the popular CSS preprocessors. SassScript is the scripting language itself.
Website Link: https://sass-lang.com/

21. Typescript

Typescript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.
Website Link: https://www.typescriptlang.org/

22. W3C Markup Validation Service

W3C’s easy-to-use markup validation service, based on SGML and XML parsers. Markup validation is an important step towards ensuring the technical quality of web pages.
Website Link: https://validator.w3.org/

Complete Guide of GIT from Scratch for Beginners

Categories
Front End Development Front End Resources GIT GIT Source Code Management Version Control System Wep Application Performance
GIT Version Control System

What is GIT

GIT or GIT SCM(Source Code Management) is an open-source, version control tool or system for tracking changes in multiple files from multiple systems in any development project.

Key feature

  • Distributed Version control
  • Coordinates work between multiplayer Developers
  • Who made what changes and when
  • Revert back at any time
  • Local and Remote repos
  • Easily set up in any operating system or easy to handle via add-on tools.

Download GIT

https://git-scm.com/downloads

Basic Commands to use GIT in the project repository

1. To initialize a local git repository

  • git init

2.  To create the new branch in the new repository or in the existing repo

  • git checkout -b “branchName” or,
  • git branch “branchName” and git checkout “branchName”

** git checkout -b  bypass the 2 steps of creating and then checkout

3. To Add File in git repo after creating the file and modify the file

  • git add “filename”

4. To Add multiple files in a git repo

  • git add -A or git add -all

5. To Check status of working Tree or repo

  • git status

6. To Commit changes or changed file in the repo

  • git commit -m “Message related to the task done or changes done” Or,
  • git commit -a -m “Message related to the task done or changes done”

** git commit -a -m   bypass the 2 steps of adding and then commit

7. To send the commit task or code to the remote directory

  •  git push

8. To get the latest code from the remote directory

  •  git pull

Few More Important Command Line List

1. To view all hidden files  

  • ls-lart

2. To resolve this  below issue

**fatal: The current branch master has no upstream branch. To push the current branch and set the remote as upstream, use

  •  git push –set-upstream  master

3. To Match with our last commit files

  • git checkout
    or,
  • git checkout -f

4. To know all the git commit and push details

  • git log

5. To know the specific number of git commit and push details

  • git log -p -”number”

6. To know the difference in current file or data and already commit files or data

  • git  diff

7. To remove any file from commit and staging

  • git rm

8. To remove any file only from staging

  • git rm –cached

Honey Bee Hexagonal shape box in HTML in SCSS CSS Preprocessor

Categories
CSS Preprocessor Front End Development Front End Frameworks HTML and CSS JS Frameworks SASS or SCSS CSS preprocessor
Hexagonal Shape box In HTML and SCSS banner

Introduction

In this article, I build a Honey bee Hexagon shape box in grid view by using HTML and CSS. In this project, we use an SCSS(SASS) CSS pre-processor to help the developers through the example.

As we know that CSS3 is playing a vital role to create any kind of prototype or form any kind of shape or element.

In this blog, I used the SASS CSS preprocessor to create the Hexagon shape box.

Below I provide the complete HTML and SASS code.

HTML Code

<section class="container-fluid categories-section">
            <h3 class="title">Categories</h3>
            <div class="hexagonal-chart-frame">
                <section class="hexagon-list clearfix">
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>      
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Groceries <br> and more</h4>
                            </a>
                        </div>
                    </div>
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Fuel and <br> Promotion</h4>
                            </a>
                        </div>        
                    </div>
        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="real_estate.html">
                                <h4 class="title">Real Estate</h4>    
                            </a>
                        </div>     
                    </div>
        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Cars and more</h4>
                            </a>
                        </div>
                    </div>
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Home and <br>Lifestyle</h4>
                            </a>
                        </div>          
                    </div>                   
                </section><!-- =Hexagonal-List 01 End= -->
                <section class="hexagon-list clearfix">
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>      
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Bars/takeaway <br>and restaurant</h4>
                            </a>
                        </div>
                    </div>        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Clothing and Fashion</h4>
                            </a>
                        </div>        
                    </div>
        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Entertainment <br>and Activities</h4>
                            </a>
                        </div>     
                    </div>
        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="electronics.html">
                              <h4 class="title">Electronics</h4>
                            </a>
                        </div>
                    </div>
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                               <h4 class="title">Building and hardware</h4>
                            </a>
                        </div>          
                    </div>
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                               <h4 class="title">Business Sale</h4>
                            </a>
                        </div>          
                    </div>                 
                </section><!-- =Hexagonal-List 02 End= -->

                <section class="hexagon-list clearfix">
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>      
                        <div class="content-block">
                            <a href="#">
                               <h4 class="title">Employment</h4>
                            </a>
                        </div>
                    </div>        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                               <h4 class="title">School-Office/ Stationery</h4>
                            </a>
                        </div>        
                    </div>
        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                          <a href="#">
                              <h4 class="title">Music &amp; Instruments</h4>
                          </a>
                        </div>     
                    </div>
        
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Health &amp; Fitness</h4>
                            </a>
                        </div>
                    </div>
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Finance &amp; Insurance</h4>
                            </a>
                        </div>          
                    </div>
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                                <h4 class="title">Tools &amp; <br> Equipment</h4>
                            </a>
                        </div>          
                    </div>
                    <div class="hex-box">
                        <div class="hex"></div>
                        <div class="hex-inner"></div>
                        <div class="content-block">
                            <a href="#">
                               <h4 class="title">Services</h4>
                            </a>
                        </div>          
                    </div>
                </section><!-- =Hexagonal-List 03 End= -->
            </div><!-- =Hexagonal Chart Frame End//= -->
        </section>

SASS Code

/**
 * index.scss
 * - Add any styles want here!
 */
/** Variables **/
$whiteColor: #fff;
$bodyBgColor: #f5f5f5;
$spaceNull: 0;
$space40: 40px;

$textCenter: center;
$transformRotate30: rotate(30deg);
$inheritVal: inherit;


/** Mixin **/
@mixin positionVal($posVal) {
   position: $posVal
}
@mixin borderRadius($borderRadiusVal) {
  border-radius: $borderRadiusVal;
}
@mixin transformRotate($transformRotateVal) {
  transform: $transformRotateVal;
}
/*** Page CSS Elements ***/
html {
  font-size: 1rem;
}
body {
  background: $bodyBgColor;
  font-family: sans-serif;
}
.categories-section {
    @include borderRadius(10px);
    margin: $space40 auto;
    padding: $space40;
    // background: $whiteColor;
    min-height: 560px;
    
    h3.title {
      font-size: 2.5rem;
      line-height: 1.5;
      color: #2a2a2a;
      font-weight: 500;
      text-transform: uppercase;
      text-align: $textCenter;
      padding-bottom: 40px;
      margin: $spaceNull;
   }
  .hexagonal-chart-frame {
    margin: 0 auto;
    max-width: 1280px;
  }
  //hex-box
  .hex-box {
    width: 150px;
    height: 150px;
    display: inline-block;            
    cursor: pointer;
    @include positionVal(relative);
    @include transformRotate(rotate(30deg));
    
    
    .hex {   
        margin: 20px auto 0;     
        width: 5.35em;
        height: 8.65em;
        border-radius: 1em/.5em;
        background: #cde1ff;
        transition: ease-In .5s;
        z-index: 1;
        // @inlcude borderRadius(1em/.5em);
        @include positionVal(relative);
      
      &::before,
      &::after {
        @include positionVal(absolute);
        width: $inheritVal; 
        height: $inheritVal;
        border-radius: $inheritVal;
        background: $inheritVal;
        content: '';
      }
      &::before {
        @include transformRotate(rotate(60deg)); 
      }
      &::after {
        @include transformRotate(rotate(-60deg));
     }
    }//hex//
    /** hex-inner **/
   .hex-inner {       
       margin: 22px auto 0;
       width: 5.2em; 
       height: 8.3em;
       border-radius: 1em/.5em;
       background: #ebf5ff;
       transition: opacity .5s;
       z-index: 2;
       top: 0;
       left: 50%;
       @include transformRotate(translateX(-50%));
       //@inlcude borderRadius(1em/.5em);
       @include positionVal(absolute);
     
       &::before,
       &::after {
         @include positionVal(absolute);
         width: $inheritVal; 
         height: $inheritVal;
         background: $inheritVal;
         border-radius: $inheritVal;
         content: '';                
       }
       &::before {
        @include transformRotate(rotate(60deg));
      }
      &::after {
        @include transformRotate(rotate(-60deg));
     }
   }
    
    //Content-block//
    .content-block {
      top: 50px;
      width: 130px;
      z-index: 2;
      left: 13px;
      text-align: $textCenter; 
      @include positionVal(absolute);
      @include transformRotate(rotate(-30deg));
      
      a {
        color: #444;
        text-decoration: none;
        
        &:hover {
          color: #fff;
        }
      }
      
    }//Content-block//
    
    &:hover {
      .hex, 
      .hex-inner {
        background: #ff4848;
        color:#fff;
      }
      a {
        color: #fff;
      }
    }//hex-box hover//
    &::after {
      content: '';
       display: none;
       width: 5em;
       height: 5em;
       position: absolute;
       top: 12%;
       left: 18%;
       z-index: 0;
       box-shadow: 0 60px 85px #888;
       @include positionVal(absolute);
       @include transformRotate(rotate(-30deg));
       // border-radius: 50% 50%  
    }
  }//HexBox End//
}


/** hexagon-list **/
.hexagon-list:nth-child(1) {
    padding-left: 12%;
 }
 .hexagon-list:nth-child(2) {
     padding-left: 6%;
 }
 .hexagon-list:nth-child(3) {
    padding-left: 2%;
}

Conclusion

In this article, I demonstrate that how we can create a Hexagon box grid and how we can use SASS in place of CSS. To view the working demo Please go though the below URL.

Stylus CSS pre-processor Information & Installation and Implementation

Categories
CSS Preprocessor Front End Development Front End Resources Front End Tweaks HTML and CSS Stylus CSS Preprocessor
stylus_css_preprocessor

Introduction

The stylus is one of the popular CSS pre-processor which add more features in comparison to simple and normal CSS.

The stylus is a scripting language that enhances the default capabilities of CSS. It also helps the developer to use the logic in CSS code such as mixins, nesting, inheritance, variables, functions, mathematical operations, Arguments, etc.

More About Stylus

  • Developer: LearnBoost (March 29, 2011 – March 26, 2015) / Automattic (March 26, 2015 – Present)
  • Designed by: TJ Holowaychuk
  • Stable release: 0.54.8 / July 16, 2020; 11 months ago
  • License: MIT License

Syntax Declaration: Stylus

Stylus uses the .styl file extension and it allows the developer to write code in many different ways. Coder can use the default CSS syntax or avoid to use brackets, colons, and/or semicolons. 

Example

/* Stylus standard CSS syntax */

primary-color = #e9e9e9;// lightGrey//
primary-bg = #239AEF;// light sky-blue//

body {
  color: primary-color;
  background: primary-bg;
}

However, we can remove the brackets:

/* Stylus syntax without brackets */

primary-color = #e9e9e9;// lightGrey//
primary-bg = #239AEF;// light sky-blue//

body
  color: primary-color;
  background: primary-bg;

Or, we can remove the brackets and the semicolons, too:

/* Stylus syntax without brackets and semicolons */

primary-color = #e9e9e9;// lightGrey//
primary-bg = #239AEF;// light sky-blue//

body
  color: primary-color
  background: primary-bg

Or, we can remove all punctuation (brackets, semicolons, colons):

/* Stylus syntax without punctuation */

primary-color = #e9e9e9;// lightGrey//
primary-bg = #239AEF;// light sky-blue//

body
  color primary-color
  background primary-bg

** Stylus does not use @ or $ symbols for defining variables.

**Instead, Stylus uses the assignment operators to indicate a variable declaration.

To Install in your system

To use the Stylus we have to install “Stylus” from ‘npm’.

Here are the steps to follow.

  1. Install Node

https://nodejs.org/en/download/

  1. Install Stylus global package

npm install -g stylus 
or,
npm install stylus -g

  1. Watch and compile a stylus file from command line with

stylus -w style.styl -o style.css

More Details to know after installing through NPM

Stylus Commands Options:

  •  -i, –interactive        Start interactive REPL
  •  -u, –use <path>         Utilize the stylus plugin at <path>
  •     -U, –inline             Utilize image in-lining via data URL support
  •     -w, –watch              Watch file(s) for changes and re-compile
  •     -o, –out <dir>          Output to <dir> when passing files
  •     -C, –css <src> [dest]   Convert css input to stylus
  •     -I, –include <path>     Add <path> to lookup paths
  •     -c, –compress           Compress css output
  •     -d, –compare            Display input along with output
  •     -f, –firebug            Emits debug info in the generated CSS that can be used by the Fire-stylus Firebug plugin
  •     -l, –line-numbers       Emits comments in the generated CSS indicating the corresponding stylus line
  •     –include-css            Include regular css on @import
  •     -V, –version            Display the version of stylus
  •     -h, –help               Display help information

Below here is the GitHub link where I build a small example. Just go through it.

https://github.com/RishiSelf/csspreprocessor/tree/main/stylus/project01/stylus

I’ll come with more updates and a code packet.