├── .editorconfig ├── .github ├── dependabot.yml └── semantic.yml ├── .gitignore ├── FUNDING.yml ├── LICENSE ├── README.md ├── components ├── Features.vue ├── Footer.vue ├── Header.vue ├── Intro.vue └── Modules.vue ├── content ├── backend.md ├── basics.md ├── cloud.md ├── cms.md ├── databases.md ├── devops.md ├── frontend.md └── mobile.md ├── jsconfig.json ├── layouts └── default.vue ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── 404.vue ├── _slug.vue └── index.vue ├── static ├── icon.png ├── logo.svg ├── meta.jpg └── powered-by-vercel.svg └── vercel.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | # Fetch and update latest `npm` packages 4 | - package-ecosystem: npm 5 | directory: '/' 6 | schedule: 7 | interval: daily 8 | time: '00:00' 9 | open-pull-requests-limit: 10 10 | reviewers: 11 | - amr2812 12 | assignees: 13 | - amr2812 14 | commit-message: 15 | prefix: fix 16 | prefix-development: chore 17 | include: scope 18 | -------------------------------------------------------------------------------- /.github/semantic.yml: -------------------------------------------------------------------------------- 1 | # Always validate the PR title AND all the commits 2 | titleAndCommits: true 3 | # Allows use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns") 4 | # this is only relevant when using commitsOnly: true (or titleAndCommits: true) 5 | allowMergeCommits: true 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | patreon: amr2812 4 | custom: http://paypal.me/amrelmohamady 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Amr Elmohamady 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

Software Environment Concepts

5 | Understand Software Concepts 6 |

7 | 8 | 9 | powered by vercel 10 | 11 | 12 | --- 13 | 14 | ## About 15 | 16 | If you are new to software engineering or you are working in a software company (Manager, HR, Product Manager, etc..) and you want to understand what the engineers are talking about and lead them or you are Busines man/woman and you want to build a software product but you don't have experience in the field of software engineering then you should read this book. This eBook is like a glossary for software expressions or concepts where you can carry everywhere offline and online. 17 | 18 | Software Environment Concepts App was built using: 19 | 20 | - Vue.js 21 | - Nuxt.js 22 | - TailwindCSS 23 | 24 | ## Contributions 25 | 26 | Software Environment Concepts is open to contributions, but first go to the [discusions](https://github.com/Amr2812/software-environment-concepts/discussions) and let me know what you are working on first that way we don't overwrite each other. 27 | 28 | #### What can you do to help: 29 | 30 | - Reporting an issue or a misleading concept 31 | 32 | - Fix an issue or a misleading concept 33 | 34 | - Add New Concepts and Modules 35 | 36 | - Suggest Changes and Feature request 37 | 38 | - etc... 39 | 40 | > #### Note: 41 | > 42 | > You can fork and write in each module file without setting the environment using Markdown 43 | 44 | ## Our Development Process 45 | 46 | All changes happen through pull requests. Pull requests are the best way to propose changes. We actively welcome your pull requests and invite you to submit pull requests directly [here](https://github.com/Amr2812/software-environment-concepts/pulls), and after review, these can be merged into the project. 47 | 48 | ## Using the Project's Standard Commit Messages 49 | 50 | This project is using the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) standard. Please follow these steps to ensure your 51 | commit messages are standardized: 52 | 53 | ## Modules 54 | 55 | | Module | Status | 56 | | :------------------------------- | :---------: | 57 | | [Basics](content/basics.md) | ✔ | 58 | | [Frontend](content/frontend.md) | ✔ | 59 | | [Backend](content/backend.md) | ✔ | 60 | | [Databases](content/databses.md) | ✔ | 61 | | [CMS](content/cms.md) | ✔ | 62 | | [Mobile](content/mobile.md) | ✔ | 63 | | [Cloud](content/cloud.md) | ✔ | 64 | 65 | ## How to run locally 66 | 67 | Fork the repo then install localy then Run: 68 | 69 | ```bash 70 | # install dependencies 71 | $ npm install 72 | 73 | # serve with hot reload at localhost:3000 74 | $ npm run dev 75 | 76 | # build for production, generate static project and launch server 77 | $ npm run generate 78 | $ npm run start 79 | ``` 80 | 81 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org). 82 | 83 | --- 84 | 85 |

🤝🏻 Connect with the author

86 | 87 |

88 |

105 |

106 | 107 | > Don't forget to star the project 108 | -------------------------------------------------------------------------------- /components/Features.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 62 | -------------------------------------------------------------------------------- /components/Footer.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 28 | -------------------------------------------------------------------------------- /components/Header.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 71 | -------------------------------------------------------------------------------- /components/Intro.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 76 | -------------------------------------------------------------------------------- /components/Modules.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /content/backend.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Backend Web (server-side) Development 3 | sort: 3 4 | --- 5 | 6 | ### Back End Development 7 | 8 | Back End Development is about dealing with [databases](/databases) and building APIs so [Frontend Developers](/frontend) can use the [API](/basics#Application-Programming-Interface-API) to deal with data. 9 | 10 | The Code that the Backend developer writes runs on the [server](/servers) or on the [cloud](/cloud). 11 | 12 | ### Rest API 13 | 14 | Representational state transfer is a software architectural style which uses a subset of [HTTP](/basics#http-and-https). It is commonly used to create interactive applications that use Web services. A Web service that follows these guidelines is called RESTful. Rest is the most popular protocol. 15 | 16 | We Get Data from Restful Web Services by endpoints for example an endpoint which returns posts and another which returns users. 17 | 18 | ### GraphQL 19 | 20 | GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. 21 | 22 | GraphQL APIs are organized in terms of types and fields, not endpoints. Access the full capabilities of your data from a single endpoint. GraphQL uses types to ensure Apps only ask for what’s possible and provide clear and helpful errors. Apps can use types to avoid writing manual parsing code. 23 | 24 | ### Soap 25 | 26 | SOAP is a messaging protocol specification for exchanging structured information in the implementation of web services in computer networks. Its purpose is to provide extensibility, neutrality, verbosity and independence. 27 | 28 | ### Message Brokers 29 | 30 | A message broker is software that enables applications, systems, and services to communicate with each other and exchange information. The message broker does this by translating messages between formal messaging protocols. This allows interdependent services to “talk” with one another directly, even if they were written in different languages or implemented on different platforms. 31 | 32 | ### WebSockets 33 | 34 | The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can build realtime apps like chat apps. 35 | 36 | ### reverse proxy server 37 | 38 | A proxy server is a go‑between or intermediary server that forwards requests for content from multiple clients to different servers across the Internet. A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server. A reverse proxy provides an additional level of abstraction and control to ensure the smooth flow of network traffic between clients and servers. 39 | 40 | Examples of Web Servers are Nginx and Apache. 41 | 42 | Common uses for a reverse proxy server include: 43 | 44 | * __Load balancing__ – A reverse proxy server can act as a “traffic cop,” sitting in front of your backend servers and distributing client requests across a group of servers in a manner that maximizes speed and capacity utilization while ensuring no one server is overloaded, which can degrade performance. If a server goes down, the load balancer redirects traffic to the remaining online servers. 45 | 46 | * __Web acceleration__ – Reverse proxies can compress inbound and outbound data, as well as cache commonly requested content, both of which speed up the flow of traffic between clients and servers. They can also perform additional tasks such as SSL encryption to take load off of your web servers, thereby boosting their performance. 47 | 48 | * __Security and anonymity__ – By intercepting requests headed for your backend servers, a reverse proxy server protects their identities and acts as an additional defense against security attacks. It also ensures that multiple servers can be accessed from a single record locator or URL regardless of the structure of your local area network. 49 | 50 | ### Cookies 51 | 52 | Cookies are small files which are stored on a user's computer. They are designed to hold a modest amount of data specific to a particular client and website, and can be accessed either by the web server or the client computer. This allows the server to deliver a page tailored to a particular user, or the page itself can contain some script which is aware of the data in the cookie and so is able to carry information from one visit to the website. 53 | 54 | ### Authentication Types 55 | 56 | There are multiple Authentication Types and the most popular are: 57 | 58 | * __Session-based__ - is one in which the user state is stored on the server's memory. When using a session based auth system, the server creates and stores the session data in the server memory when the user logs in and then stores the session Id in a cookie on the user browser. 59 | 60 | * __Token-based__ - is one in which the user state is stored on the client. In the token based authentication, the user data is encrypted into a JWT (JSON Web Token) with a secret and then sent back to the client. The JWT is then stored on the client side and sent as a header for every subsequent [http request](/basics#HTTP-Request--Response). The server receives and validates the JWT before proceeding to send a response to the client. 61 | 62 | * __OAuth 2.0__ - authorization framework is a protocol that allows a user to grant a third-party web site or application (like facebook or google) access to the user's protected resources, without necessarily revealing their long-term credentials or even their identity. It is the way you can login with google or facebook with. 63 | -------------------------------------------------------------------------------- /content/basics.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Software Basics 3 | sort: 1 4 | --- 5 | 6 | ### Programming Language 7 | 8 | A programming language is a set of commands, instructions, and other syntax use to create a software program. Programmers use "high-level languages" to write programs. This code can be compiled into a "low-level language," which is understood by the computer hardware. Example of high-level languages include C++, C#, JavaScript, Python, etc... 9 | 10 | ### Algorithms 11 | 12 | An algorithm is a set of detailed step-by-step instructions to complete a task 13 | 14 | ### Data Structure 15 | 16 | Data Structure can be defined as the group of data elements which provides an efficient way of storing and organising data in the software so that it can be used efficiently. Some examples of Data Structures are arrays, Linked List, Stack, Queue, etc 17 | 18 | ### Http and Https 19 | 20 | HTTP is a protocol which allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. 21 | 22 | HTTP is unsecured while HTTPS is secured. HTTP sends data over port 80 while HTTPS uses port 443. HTTP operates at application layer, while HTTPS operates at transport layer. No SSL certificates are required for HTTP, with HTTPS it is required that you have an SSL certificate and it is signed by a CA. 23 | 24 | ### Application Programming Interface (API) 25 | 26 | An API is the bridge between the [client-side](/frontend) and the [server-side](/backend). 27 | 28 | There are different Types of APIs and the most popular are [Rest](/backend#Rest-API) and [GrapghQL](/backend#GrapghQL). 29 | 30 | The Backend Developer Program the API and The Frontend Developer uses it by sending [http requests (XHR)](#xhr) or opening [websockets](/backend#websockets). 31 | 32 | ### XHR 33 | 34 | XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. 35 | 36 | Data can be in different types like [Json](#json) or [XML](#xml). 37 | 38 | ### HTTP Request / Response 39 | 40 | Communication between clients and servers is done by requests and responses: 41 | 42 | 1. A client (a browser) sends an HTTP request to the web 43 | 1. A web server receives the request 44 | 1. The server runs an application to process the request 45 | 1. The server returns an HTTP response (output) to the browser 46 | 1. The client (the browser) receives the response 47 | 48 | ### Json 49 | 50 | JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. 51 | 52 | It is used mostly on the web and data transfer. 53 | 54 | ### XML 55 | 56 | Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. 57 | 58 | XML is used mostly for [Android Development](/mobile#android) and web services like RSS feed and [SOAP](/backend#soap). 59 | 60 | ### Domain Name 61 | 62 | Domain name is the address of your website that people type in the browser’s URL bar to visit your website. 63 | 64 | In other words, if your website was a house, then your domain name will be its address. 65 | 66 | ### Hosting 67 | 68 | Web hosting is the place where all the files of your website are stored. It is like the home of your website where it actually lives. 69 | 70 | A good way to think about this is if the domain name was the address of your house, then web hosting is the actual house that address points to. All websites on the internet, need web hosting. 71 | 72 | When someone enters your domain name in a browser, the domain name is translated into the IP address of your web hosting company’s computer (server) or yours. This computer contains your website’s files, and it sends those files back to the users’ browsers. 73 | 74 | ### version control system 75 | 76 | A version control system is a kind of software that helps the developer team to efficiently communicate and manage(track) all the changes that have been made to the source code along with the information like who made and what change has been made. 77 | 78 | The Most popular Version Control System Is [Git](#git--github). 79 | 80 | ### Git / GitHub 81 | 82 | Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. 83 | 84 | There are Multiple repo (folder) hosting services like GitHub (The Most Popular), GitLab and BitBucket. 85 | 86 | ### Package Managers 87 | 88 | A package manager is a tool to create project environments and easily import external dependencies (packages) 89 | 90 | Examples of package managers are NPM, Yarn, Composer and Chocolatey. 91 | 92 | ### Authentication 93 | 94 | It is the process of identifying users and validating who they claim to be. One of the most common and obvious factors to authenticate identity is a password. If the user name matches the password credential, it means the identity is valid, and the system grants access to the user. 95 | 96 | You can learn more about [Authentication Types in this section](/backend#authentication-types) 97 | 98 | ### Authorization 99 | 100 | Authorization happens after a user’s identity has been successfully authenticated. It is about offering full or partial access rights to resources like database, funds, and other critical information to get the job done. 101 | 102 | In an organization, for example, after an employee is verified and confirmed via ID and password authentication, the next step would be defining what resources the employee would have access to. 103 | -------------------------------------------------------------------------------- /content/cloud.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cloud Computing 3 | sort: 7 4 | --- 5 | 6 | ### Cloud 7 | 8 | "The cloud" refers to servers that are accessed over the Internet, and the software and databases that run on those servers. Cloud servers are located in data centers all over the world. By using cloud computing, users and companies don't have to manage physical servers themselves or run software applications on their own machines. 9 | 10 | The cloud enables users to access the same files and applications from almost any device, because the computing and storage takes place on servers in a data center, instead of locally on the user device. This is why a user can log into their Instagram account on a new phone after their old phone breaks and still find their old account in place, with all their photos, videos, and conversation history. 11 | 12 | ### Cloud computing 13 | 14 | Cloud computing is possible because of a technology called virtualization. Virtualization allows for the creation of a simulated, digital-only "virtual" computer that behaves as if it were a physical computer with its own hardware. The technical term for such a computer is virtual machine. When properly implemented, virtual machines on the same host machine are sandboxed from one another, so they don't interact with each other at all, and the files and applications from one virtual machine aren't visible to the other virtual machines even though they're on the same physical machine. 15 | 16 | Virtual machines also make more efficient use of the hardware hosting them. By running many virtual machines at once, one server becomes many servers, and a data center becomes a whole host of data centers, able to serve many organizations. Thus, cloud providers can offer the use of their servers to far more customers at once than they would be able to otherwise, and they can do so at a low cost. 17 | 18 | Even if individual servers go down, cloud servers in general should be always online and always available. Cloud vendors generally back up their services on multiple machines and across multiple regions. 19 | 20 | Users access cloud services either through a browser or through an app, connecting to the cloud over the Internet – that is, through many interconnected networks – regardless of what device they're using. 21 | 22 | ### main service models of cloud computing 23 | 24 | **Software-as-a-Service (SaaS)**: Instead of users installing an application on their device, SaaS applications are hosted on cloud servers, and users access them over the Internet. SaaS is like renting a house: the landlord maintains the house, but the tenant mostly gets to use it as if they owned it. Examples of SaaS applications include Salesforce, MailChimp, and Slack. 25 | 26 | **Platform-as-a-Service (PaaS):** In this model, companies don't pay for hosted applications; instead they pay for the things they need to build their own applications. PaaS vendors offer everything necessary for building an application, including development tools, infrastructure, and operating systems, over the Internet. PaaS can be compared to renting all the tools and equipment necessary for building a house, instead of renting the house itself. PaaS examples include Heroku and Microsoft Azure. 27 | 28 | **Infrastructure-as-a-Service (IaaS)**: In this model, a company rents the servers and storage they need from a cloud provider. They then use that cloud infrastructure to build their applications. IaaS is like a company leasing a plot of land on which they can build whatever they want – but they need to provide their own building equipment and materials. IaaS providers include DigitalOcean, Google Compute Engine, and OpenStack. 29 | 30 | Formerly, SaaS, PaaS, and IaaS were the three main models of cloud computing, and essentially all cloud services fit into one of these categories. However, in recent years a fourth model has emerged: 31 | 32 | **Function-as-a-Service (FaaS)**: FaaS, also known as serverless computing, breaks cloud applications down into even smaller components that only run when they're needed. Imagine if it were possible to rent a house one little bit at a time: for instance, the tenant only pays for the dining room at dinner time, the bedroom while they're sleeping, the living room while they're watching TV, and when they aren't using those rooms, they don't have to pay rent on them. 33 | 34 | FaaS or serverless applications still run on servers, as do all these models of cloud computing. But they're called "serverless" because they don't run on dedicated machines, and because the companies building the applications don't have to manage any servers. 35 | 36 | Also, serverless functions scale up, or duplicate, as more people use the application – imagine if the tenant's dining room could expand on demand when more people come over for dinner! 37 | 38 | -------------------------------------------------------------------------------- /content/cms.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Content Management Systems (CMS) 3 | sort: 5 4 | --- 5 | 6 | ### content managemnet system (CMS) 7 | 8 | A content management system (CMS) is an application that is used to manage web content without the need for specialized technical knowledge, allowing multiple contributors to create, edit and publish. Content in a CMS is typically stored in a [database](/databses) and displayed in a presentation layer based on a set of templates. 9 | 10 | **There is a type of CMSs is called Headless CMS:** 11 | 12 | ### Traditional CMS 13 | 14 | Over the last decade, the focus of websites has been a marriage of the CMS and your site’s design. Having the CMS part and parcel with the site design has made it easy to update content without the overhead we used to see like having to manually update pages via HTML development, moving content and files with FTP (file transfer protocol), etc… 15 | 16 | A traditional CMS, like WordPress or Drupal, is a monolith that connects the front-end and the back-end of a website in a neat and easy application code base. They contain everything from the database for content all the way up through the presentation layer. 17 | 18 | **Pros** 19 | 20 | - Entire site is served from a single system 21 | 22 | - Easy to manage all content 23 | 24 | - Control front-end design through themes and templates 25 | 26 | - Large communities for support 27 | 28 | - Lower technical barrier to entry 29 | 30 | **Cons** 31 | 32 | - Create only website content (the same content can’t be easily served up on other devices) 33 | 34 | - Do not always scale well 35 | 36 | - Requires developers who are CMS specific 37 | 38 | - Limited flexibility 39 | 40 | - More time and money required for maintenance and enhancements 41 | 42 | **When to Use a Traditional CMS** 43 | 44 | Traditional CMS’s are still fantastic systems that work for a variety of deployment types. If you’re strictly building a website for yourself, a small business or even an enterprise solution that doesn’t need to share content with other digital properties, you may be best served by using a traditional CMS. You can get up and running fast and you’ll be able to manage your site from a single source. It’s also important to note that while a traditional CMS is typically a single site solution, many of them have plugins to enable multi-site and/or [API](/basics#application-programming-interface-api) access to share digital resources with external applications. Those plugins come with their own challenges and benefits. 45 | 46 | ### Headless CMS 47 | 48 | A headless CMS like contentfull or strapi differentiates itself by not connecting directly with a front-end at all. While traditional CMS’ aim to be a single solution to managing both the content and the front-end, a headless CMS deals strictly with the content. Once created and edited, content is published via an [Application Programming Interface (API)](/basics#application-programming-interface-api) and that’s it. The headless CMS has no impact or input on the front-end. This provides the flexibility to get your content out in as many ways as possible regardless of how it’s presented. 49 | 50 | If it helps, think of the headless CMS like an author writing a book. The author, headless CMS, is providing the content while the publisher, website, formats and delivers the content to the public via hardback book, e-book, etc… The consumption methods change but the content is consistent. 51 | 52 | **Pros** 53 | 54 | - Content is ready to be served on any device 55 | 56 | - With the headless API developers can worry less about content and more about presentation 57 | 58 | - Front-end agnostic (A headless CMS doesn’t care about where the content is going or how it’s going to be displayed. It simply serves it up allowing developers the freedom to use their preferred frameworks and tools.) 59 | 60 | - Simply create content without worrying about being in a single system that contains everything 61 | 62 | **Cons** 63 | 64 | - No content preview (Some systems allow you to build a preview integration but this does add additional upfront overhead.) 65 | 66 | - More upfront integration/configuration effort 67 | 68 | - Developing a head/client(By “head/client”, we mean the output and displaying of the content that you have created (website, mobile application, etc).) 69 | 70 | **When to Use a Headless CMS** 71 | 72 | A headless CMS isn’t always the best choice, so you have to consider your circumstances carefully. We recommend using a headless CMS in the following cases: 73 | 74 | - Websites/web apps that are [Single-Page Apps](/frontend#single-page-applications-spa) built using [Js Frameworks](/frontend#javascript-framework) or [Libraries](frontend#javascript-library) such as Vue and React 75 | 76 | - Native mobile apps 77 | 78 | - Any environment in which you need to publish content across multiple platforms all at once 79 | 80 | - When using a [static site generator](/frontend#static-site-generators-ssg) 81 | -------------------------------------------------------------------------------- /content/databases.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Databases 3 | sort: 4 4 | --- 5 | 6 | ### Databases 7 | 8 | A database is an organized collection of structured information, or data, typically stored electronically in a computer system. A database is usually controlled by a [database management system (DBMS)](#database-management-system-DBMS). Together, the data and the DBMS, along with the applications that are associated with them, are referred to as a database system, often shortened to just database. 9 | 10 | ### database management system (DBMS) 11 | 12 | A database typically requires a comprehensive database software program known as a database management system (DBMS). A DBMS serves as an interface between the database and its end users or programs, allowing users to retrieve, update, and manage how the information is organized and optimized. A DBMS also facilitates oversight and control of databases, enabling a variety of administrative operations such as performance monitoring, tuning, and backup and recovery. 13 | 14 | Some examples of popular database software or DBMSs include MySQL, Microsoft SQL Server, and MongoDB. 15 | 16 | ### Structured Query Language (SQL) 17 | 18 | SQL is a programming language used by nearly all [relational databases](#relational-databases) to query, manipulate, and define data, and to provide access control. 19 | 20 | ### Relational databases 21 | 22 | Relational databases became dominant in the 1980s. Items in a relational database are organized as a set of tables with columns and rows. Relational database technology provides the most efficient and flexible way to access structured information. 23 | 24 | ### NoSQL databases 25 | 26 | A NoSQL, or nonrelational database, allows unstructured and semistructured data to be stored and manipulated (in contrast to a relational database, which defines how all data inserted into the database must be composed). NoSQL databases grew popular as web applications became more common and more complex. 27 | 28 | There are four big NoSQL types: key-value store, document store, column-oriented database, and graph database. 29 | 30 | ### Key–value database 31 | 32 | A key-value database (sometimes called a key-value store) uses a simple key-value method to store data. These databases contain a simple string (the key) that is always unique and an arbitrary large data field (the value). They are easy to design and implement. They are extremely fast. 33 | 34 | An Example is Redis. 35 | 36 | **When to use a key-value database** 37 | 38 | - When your application needs to handle lots of small continuous reads and writes, that may be volatile. Key-value databases offer fast in-memory access. 39 | 40 | - When storing basic information, such as customer details; storing webpages with the URL as the key and the webpage as the value; storing shopping-cart contents, product categories, e-commerce product details 41 | 42 | - For applications that don’t require frequent updates or need to support complex queries. 43 | 44 | **Use cases for key-value databases** 45 | 46 | - Session management on a large scale. 47 | 48 | - Using cache to accelerate application responses. 49 | 50 | - Storing personal data on specific users. 51 | 52 | - Product recommendations, storing personalized lists of items for individual customers. 53 | 54 | - Managing each player’s session in massive multiplayer online games. 55 | 56 | ### wide-column databses 57 | 58 | Wide-column stores use the typical tables, columns, and rows, but unlike relational databases (RDBs), columnal formatting and names can vary from row to row inside the same table. And each column is stored separately on disk. 59 | 60 | An Example is HBASE. 61 | 62 | ### Document database 63 | 64 | Designed for storing, retrieving, and managing document-oriented information, document databases are a modern way to store data in JSON format rather than rows and columns. 65 | 66 | Some examples are MongoDB and Firebase Firestore. 67 | 68 | **Use Cases of Document database** 69 | 70 | - User Profiles 71 | 72 | Because document databases have a flexible schema, they can store documents that have different attributes and data values. Document databases are a practical solution to online profiles in which different users provide different types of information. Using a document database, you can store each user's profile efficiently by storing only the attributes that are specific to each user. 73 | 74 | Suppose that a user elects to add or remove information from their profile. In this case, their document could be easily replaced with an updated version that contains any recently added attributes and data or omits any newly omitted attributes and data. Document databases easily manage this level of individuality and fluidity. 75 | 76 | * Real-Time Big Data 77 | 78 | Historically, the ability to extract information from operational data was hampered by the fact that operational databases and analytical databases were maintained in different environments—operational and business/reporting respectively. Being able to extract operational information in real time is critical in a highly competitive business environment. By using document databases, a business can store and manage operational data from any source and concurrently feed the data to the BI engine of choice for analysis. There is no requirement to have two environments. 79 | 80 | * Content Management 81 | 82 | To effectively manage content, you must be able to collect and aggregate content from a variety of sources, and then deliver it to the customer. Due to their flexible schema, document databases are perfect for collecting and storing any type of data. You can use them to create and incorporate new types of content, including user-generated content, such as images, comments, and videos. 83 | 84 | ### Graph Databases 85 | 86 | A graph database is a database designed to treat the relationships between data as equally important to the data itself. It is intended to hold data without constricting it to a pre-defined model. Instead, the data is stored like we first draw it out - showing how each individual entity connects with or is related to others. 87 | 88 | An Example is neo4j. 89 | 90 | - Why Graph Databases? 91 | 92 | We live in a connected world! There are no isolated pieces of information, but rich, connected domains all around us. Only a database that natively embraces relationships is able to store, process, and query connections efficiently. While other databases compute relationships at query time through expensive JOIN operations, a graph database stores connections alongside the data in the model. 93 | 94 | ### Milti-model Databses 95 | 96 | A multimodel database is a data processing platform that supports multiple data models, which define the parameters for how the information in a database is organized and arranged. Being able to incorporate multiple models into a single database lets information technology (IT) teams and other users meet various application requirements without needing to deploy different database systems. 97 | 98 | Examples are FunaDB and ArangoDB. 99 | 100 | > Note: There are dozens of database types but those was from the most popular 101 | -------------------------------------------------------------------------------- /content/devops.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Devops (CI/CD) 3 | sort: 9 4 | --- 5 | 6 | ### Devops 7 | DevOps is a methodology that aims to improve the collaboration and communication between the development and operations teams in a software company. It is a set of practices that emphasize automation and monitoring at all stages of the software delivery process, from code development to deployment and infrastructure management. By implementing DevOps practices, software companies can achieve faster time-to-market, higher quality releases, and better alignment between IT and business objectives. 8 | 9 | ### Continuous Integration (CI) 10 | Continuous Integration (CI) is the practice of merging code changes from multiple developers into a shared code repository several times a day. Each merge triggers an automated build and testing process to ensure that the new changes are compatible with the existing codebase. If any issues are found during this process, the developers are notified immediately so that they can make the necessary changes. 11 | 12 | ### Continuous Delivery (CD) 13 | Continuous Delivery (CD) is the practice of automating the process of deploying software changes to production environments. Once the code changes pass the automated testing in the CI stage, the software is automatically built, tested, and packaged into a deployable artifact. This artifact can then be deployed to any environment, from development to production, with the click of a button. This enables organizations to release software changes to production frequently, safely, and with minimal manual intervention. 14 | 15 | ### Continuous Deployment (CD) 16 | Continuous Deployment (CD) takes the automation of CD one step further. With continuous deployment, every change that passes the automated tests is automatically deployed to production without any manual intervention. This means that code changes are released to production as soon as they are ready, providing fast feedback loops and enabling companies to rapidly iterate on their software. 17 | 18 | Overall, CI/CD practices enable organizations to deliver high-quality software changes to production faster and more reliably, reducing the risk of errors and downtime. By automating the build, testing, and deployment process, teams can focus on writing code and developing features, while the CI/CD pipeline handles the rest. -------------------------------------------------------------------------------- /content/frontend.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Frontend Web (client-side) Development 3 | sort: 2 4 | --- 5 | 6 | ### Front End Development 7 | 8 | Front End Development is about developing The Software's (web, mobile, etc...) User Interface, getting and displaying data, handles users' UI [authorization](/basics#authorization), etc.. 9 | 10 | The Code that the Frontend developer write runs on the device's Operating System or Browser. 11 | 12 | ### HTML 13 | 14 | Hyper Text Markup Language (HTML) is the standard markup language for Web pages. 15 | 16 | ### CSS 17 | 18 | Cascading Style Sheets (CSS) is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. 19 | 20 | ### JavaScript 21 | 22 | JavaScript (JS) is the most used programming language in the world. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions. 23 | 24 | It is used for: 25 | 26 | - Adding interactivity and Building web pages 27 | 28 | - Building [Single-Page Applications (SPA)](#single-page-applications-spa) 29 | 30 | - Server Side Development 31 | 32 | - Building Mobile Apps 33 | 34 | - other... 35 | 36 | ### CSS Framework 37 | 38 | A CSS Framework is a set of css classes or components that work together to make a User Interface and example of css frameworks are Bootstrap, TailwindCSS and Bulma. 39 | 40 | ### Single-Page Applications (SPA) 41 | 42 | A single-page application may retrieve all of the application’s HTML, JavaScript, and CSS code on the initial load or may load resources dynamically to update in response to user interaction or other events. Other web apps, in contrast, present the user with an intial page that is linked to parts of the application on separate HTML pages, which means that the user has to wait for a new page to load every time they make a new request. 43 | 44 | SPAs use HTML5 and Ajax (Asynchronous JavaScript and XML) to enable smooth and dynamic responses to user requests, allowing content to update immediately when a user performs an action. Once the page is loaded, interactions with the server are through Ajax calls and data is returned, typically in JSON (JavaScript Object Notation) format, to update the page without requiring reloads. 45 | 46 | SPAs can be done by Frameworks and Libraries like Vue, Angular and React 47 | 48 | Finally, SPA is one Html File while others are multiple Html Files. 49 | 50 | ### Javascript Framework 51 | 52 | Frameworks provide a structure (like a skeleton, or a scaffolding…or a framework) to base your entire project around. This structure is created through page templates (provided by the framework) with specific areas set aside for inserting framework code. 53 | 54 | Examples are Vue and Angular. 55 | 56 | ### Javascript Library 57 | 58 | JavaScript libraries are collections of prewritten code snippets that can be used (and reused) to perform common JavaScript functions. JavaScript library code can be plugged into the rest of your project’s code easily. 59 | 60 | Examples are JQuery and React. 61 | 62 | ### CSS Preprocessors 63 | 64 | CSS Preprocessors add logic to css where you can define variables, loops, If conditions, etc... 65 | 66 | ### Task Runners 67 | 68 | Task Runners are toolkits that help to automate painful or time-consuming tasks in development workflow. 69 | 70 | Examples are Gulp and NPM Scripts. 71 | 72 | ### Module Bundlers 73 | 74 | A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. Examples are Parcel, Webpack and Rollup . 75 | 76 | ### Server-Side Rendering (SSR) 77 | 78 | Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser (client-side), instead of rendering them in the browser. SSR sends a fully rendered page to the client; the client's JavaScript bundle takes over and enables the SPA framework to operate 79 | 80 | Compared to a traditional SPA (Single-Page Application), the advantage of SSR primarily lies in: 81 | 82 | - Better SEO, as the search engine crawlers will directly see the fully rendered page. 83 | 84 | - Note that as of now, Google and Bing can index synchronous JavaScript applications just fine. Synchronous being the key word there. If your app starts with a loading spinner, then fetches content via Ajax, the crawler will not wait for you to finish. This means if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary. 85 | 86 | - Faster time-to-content, especially on slow internet or slow devices. Server-rendered markup doesn't need to wait until all JavaScript has been downloaded and executed to be displayed, so your user will see a fully-rendered page sooner. This generally results in better user experience, and can be critical for applications where time-to-content is directly associated with conversion rate. 87 | 88 | Example are Next.js for React, Nuxt.js for Vue and Universal Angular. 89 | 90 | ### Static Site Generators (SSG) 91 | 92 | A static site generator is a software application that creates HTML pages from templates or components and a given content source. Most static site generators, including Gatsby and Nuxt, accept Markdown-formatted text files as a source, although They are not limited to Markdown. 93 | 94 | Static site generators are an alternative to database-driven [content management systems](/cms), such as WordPress and Drupal. In such systems, content is managed and stored in a database. When the server receives a request for a particular URL, a software layer retrieves data from the database, merges it with template files, and generates an HTML page as its response. 95 | 96 | Static site generators, on the other hand, generate HTML pages during a build process. 97 | 98 | Static site generators reduce site complexity. That, in turn, improves speed and reliability, and smooths the developer experience. 99 | 100 | - You don’t have to worry about database-toppling traffic spikes. 101 | 102 | - There’s no need to manage database server software or backups. 103 | 104 | - You can use version control software to manage and track changes to your content. 105 | 106 | - Because your site is static, you can even forgo web servers and load balancers altogether. Instead, you can host your site with a content delivery network that scales with your site’s traffic. 107 | 108 | - Better SEO, as the search engine crawlers will directly see the static page. 109 | 110 | ### Progressive Web Apps (PWA) 111 | 112 | PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and [native](/mobile#native) app features like Push Notifications, Self-updates and Works on both Android and iOS. For example, web apps are more discoverable than native apps; it's a lot easier and faster to visit a website than to install an application, and you can also share web apps by simply sending a link. 113 | 114 | ### Web Assembley (WASM) 115 | 116 | Web Assembly is the binary instructions generated from high level languages such as C, C++ or Rust. It is much faster than JavaScript and WASM 1.0 has already shipped to major browsers. 117 | 118 | It can be used for: 119 | 120 | - Inside the Browser 121 | 122 | - Image / video editing 123 | 124 | - Browser Games 125 | 126 | - Scientific visualization and simulation 127 | 128 | - Developer tooling (editors, compilers, debuggers, …) 129 | 130 | - Live video augmentation (e.g. putting hats on people’s heads) 131 | 132 | - etc... 133 | 134 | - Outside the Browser 135 | 136 | - Server-side compute of untrusted code. 137 | 138 | - Server-side application. 139 | 140 | - Hybrid native apps on mobile devices. 141 | 142 | - etc... 143 | -------------------------------------------------------------------------------- /content/mobile.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mobile App Development 3 | sort: 6 4 | --- 5 | 6 | ### Android Development 7 | 8 | Android software development is the process by which applications are created for devices running the Android operating system. Google states that "Android apps can be written using Kotlin, Java, and C++ languages" using the Android software development kit, while using other languages is also possible 9 | 10 | ### IOS Development 11 | IOS software development is the process by which applications are created for devices running the IOS operating system. Apple provides tools and resources for creating iOS apps and accessories for these devices. As an iOS developer, you can program in native languages such as Swift or Objective-C 12 | 13 | ### Native Apps 14 | 15 | Going native is the way most product owners dream of, but not all can afford. It involves the creation of a mobile app that fits one platform only. In this case, engineers leverage a native-to-the-operating-system programming language. It can be Java or since recently Kotlin for Android, and Swift/Objective-C for iOS. Users love native apps for high performance and tailored-to-the-platform UX. This approach, though, scares off startupers for being cost-consuming. And the cost is the key distinction of native vs. hybrid app development. 16 | 17 | For development, engineers get access to the device’s full feature set. This allows them to leverage advanced functionalities (memory management, complex networking, etc.). But, the biggest challenge is to run the app on two platforms. To do this, you need to make separate codebases. Yet, some native extensions enable code sharing. For example, you can share the C++ libraries between iOS and Android apps using Java Native Interface. Even so, product owners are desperate to increase development costs almost twofold. 18 | 19 | **Tools to use:** 20 | 21 | * Android and Kotlin for Android 22 | 23 | * Swift and Objective-C for IOS 24 | 25 | ### Hybrid Apps 26 | 27 | Native is not a must for the mobile experience. Besides, your project might need another vector of priority like a fast time to market. To this effect, a hybrid app is not just a cheaper alternative. It requires less time for development and allows for code sharing. The reverse side of the coin is sluggish performance and suboptimal user experience. Theoretically, it is possible to achieve a great UX and navigation patterns from a visual standpoint. This is, however, a challenge to put into practice. 28 | 29 | Hybrid apps blend web elements with mobile ones. So, you create a codebase using standard web technologies (HTML, CSS, JavaScript). Then, you wrap it inside a native container – the WebView. The content within WebView is rendered as a plain old website. It is responsible for UX and access to the hardware functionality (camera, GPS, etc.). The latter, however, is quite limited in contexts of hybrid application development vs. native application development. Eventually, a user can get a standalone application in the app store. 30 | 31 | **Tools to use:** 32 | 33 | Ionic, Apache Cordova and etc... 34 | 35 | ### Cross-Platform Apps 36 | 37 | It is important to remember that hybrid and cross-platform apps are not the same. Perhaps, the only common feature between them is code shareability. Due to that, they both allow you to speed up the pipeline. All the rest discloses many differences between cross-platform vs. hybrid app development. 38 | 39 | Cross-platform dev approach uses a native rendering engine. The codebase written in JS connects to native components via the so-called bridges. This provides the close-to-native UX. Cross-platform apps are free of platform hook. They offer seamless functionality, easy implementation, and cost-effective production. Yet, do not expect outstanding performance. Customization is also a pain since it is limited to the framework you use. 40 | 41 | **Tools to use:** 42 | 43 | React Native, Flutter, Xamrin and etc... 44 | 45 | > Note: There are Native and Cross-Platform for Desktop Development also but with different technologies 46 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "~/*": ["./*"], 6 | "@/*": ["./*"], 7 | "~~/*": ["./*"], 8 | "@@/*": ["./*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", ".nuxt", "dist"] 12 | } 13 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | 29 | 44 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Target: https://go.nuxtjs.dev/config-target 3 | target: "static", 4 | 5 | generate: { 6 | fallback: "404.html" 7 | }, 8 | 9 | // Global page headers: https://go.nuxtjs.dev/config-head 10 | head: { 11 | title: "Software Environment Concepts", 12 | meta: [ 13 | { charset: "utf-8" }, 14 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 15 | { 16 | hid: "description", 17 | name: "description", 18 | content: process.env.npm_package_description 19 | }, 20 | { 21 | hid: "twitter:card", 22 | name: "twitter:card", 23 | content: "summary_large_image" 24 | }, 25 | { 26 | hid: "twitter:title", 27 | name: "twitter:title", 28 | content: "Software Environment Concepts" 29 | }, 30 | { 31 | hid: "twitter:description", 32 | name: "twitter:description", 33 | content: process.env.npm_package_description 34 | }, 35 | { 36 | hid: "twitter:image", 37 | name: "twitter:image", 38 | content: "/meta.jpg" 39 | }, 40 | { 41 | hid: "og:title", 42 | property: "og:title", 43 | content: "Software Env Concepts" 44 | }, 45 | { 46 | hid: "og:description", 47 | property: "og:description", 48 | content: process.env.npm_package_description 49 | }, 50 | { 51 | hid: "og:image", 52 | name: "og:image", 53 | content: "/meta.jpg" 54 | }, 55 | { 56 | name: "theme-color", 57 | content: "#1A202C" 58 | }, 59 | { 60 | name: "msapplication-navbutton-color", 61 | content: "#1A202C" 62 | } 63 | ], 64 | link: [{ rel: "icon", type: "image/x-icon", href: "/logo.png" }] 65 | }, 66 | 67 | // Global CSS: https://go.nuxtjs.dev/config-css 68 | css: [], 69 | 70 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 71 | plugins: [], 72 | 73 | // Auto import components: https://go.nuxtjs.dev/config-components 74 | components: true, 75 | 76 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 77 | buildModules: [ 78 | // https://go.nuxtjs.dev/tailwindcss 79 | "@nuxtjs/tailwindcss", 80 | "@nuxtjs/color-mode" 81 | ], 82 | 83 | tailwindcss: { 84 | config: { 85 | theme: { 86 | darkSelector: ".dark-mode", 87 | extend: { 88 | colors: { 89 | primary: { 90 | default: "#F59724", 91 | dark: "#EC6611" 92 | }, 93 | secondary: "#4C8EC7", 94 | dark: { 95 | default: "#0F0F17", 96 | light: "#1A202C" 97 | } 98 | } 99 | } 100 | }, 101 | variants: { 102 | backgroundColor: [ 103 | "dark", 104 | "dark-hover", 105 | "dark-group-hover", 106 | "dark-even", 107 | "dark-odd", 108 | "hover", 109 | "responsive" 110 | ], 111 | borderColor: [ 112 | "dark", 113 | "dark-focus", 114 | "dark-focus-within", 115 | "hover", 116 | "responsive" 117 | ], 118 | textColor: ["dark", "dark-hover", "dark-active", "hover", "responsive"] 119 | }, 120 | plugins: [ 121 | require("tailwindcss-dark-mode")(), 122 | require("@tailwindcss/typography") 123 | ], 124 | purgeCSS: { 125 | whitelist: ["dark-mode"] 126 | } 127 | } 128 | }, 129 | 130 | colorMode: { 131 | preference: "dark" 132 | }, 133 | 134 | // Modules: https://go.nuxtjs.dev/config-modules 135 | modules: [ 136 | // https://go.nuxtjs.dev/pwa 137 | "@nuxtjs/pwa", 138 | // '@nuxtjs/sitemap' 139 | "@nuxt/content", 140 | "@nuxtjs/sitemap" 141 | ], 142 | 143 | sitemap: { 144 | hostname: "https://softwareconcepts.vercel.app/", 145 | gzip: true, 146 | routes: async () => { 147 | let routes = []; 148 | const { $content } = require("@nuxt/content"); 149 | const modules = await $content().fetch(); 150 | for (const module of modules) { 151 | routes.push(`/${module.slug}`); 152 | } 153 | return routes; 154 | } 155 | }, 156 | 157 | // PWA module configuration: https://go.nuxtjs.dev/pwa 158 | pwa: { 159 | meta: { 160 | mobileAppIOS: true, 161 | appleStatusBarStyle: "black", 162 | favicon: "/icon.png", 163 | name: "Software Environment Concepts", 164 | author: "Amr Elmohamady", 165 | theme_color: "#F59724", 166 | twitterCard: "summary_large_image", 167 | twitterSite: "@AmrElmohamady2" 168 | }, 169 | manifest: { 170 | name: "Software Environment Concepts", 171 | short_name: "Software Concepts", 172 | lang: "en", 173 | background_color: "#1A202C" 174 | } 175 | }, 176 | 177 | // Content module configuration: https://go.nuxtjs.dev/config-content 178 | content: {}, 179 | 180 | // Build Configuration: https://go.nuxtjs.dev/config-build 181 | build: {} 182 | }; 183 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "software-environment-concepts", 3 | "version": "1.0.0", 4 | "description": "Glossary eBook for software expressions where you can carry everywhere offline and online", 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@nuxt/content": "^1.14.0", 13 | "@nuxtjs/pwa": "^3.3.5", 14 | "@nuxtjs/sitemap": "^2.4.0", 15 | "@tailwindcss/typography": "^0.4.1", 16 | "core-js": "^3.16.4", 17 | "nuxt": "^2.15.6" 18 | }, 19 | "devDependencies": { 20 | "@nuxtjs/color-mode": "^2.0.5", 21 | "@nuxtjs/tailwindcss": "^4.1.2", 22 | "postcss": "^8.3.0", 23 | "tailwindcss-dark-mode": "^1.1.7" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /pages/404.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /pages/_slug.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 91 | 92 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amrdb/software-environment-concepts/33393480d2505518301993239bb7f06f12d663df/static/icon.png -------------------------------------------------------------------------------- /static/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | -------------------------------------------------------------------------------- /static/meta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/amrdb/software-environment-concepts/33393480d2505518301993239bb7f06f12d663df/static/meta.jpg -------------------------------------------------------------------------------- /static/powered-by-vercel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "silent": true 4 | } 5 | } 6 | --------------------------------------------------------------------------------