diff --git a/1server.js b/1server.js
deleted file mode 100644
index 5f3f439..0000000
--- a/1server.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const express = require('express');
-const favicon = require('serve-favicon');
-const path = require('path');
-const methodOverride = require('method-override');
-
-const articleRoute = require('./backend/routes/articles');
-const { readController } = require('./backend/controllers/articles');
-
-const app = express();
-
-app.use(favicon(path.join(__dirname, 'backend', 'favicon.ico')));
-app.set('views', path.join(__dirname, 'frontend/views'));
-app.set('view engine','ejs');
-
-app.use(express.urlencoded({ extended: "false" })); // parse data sent thru html form
-app.use(express.json({ limit: "1mb" })); // parse json data coming from frontend
-app.use(methodOverride('_method'));
-
-app.get(/^\/(home)*$/, (_, res) => readController(res,null,'index'));
-
-app.use('/articles',articleRoute);
-
-app.use(express.static('frontend/assets')); // for creating link for external style and script files to link in ejs files
-
-app.all('*', (_,res) => res.send('
404! Page not found...
'));
-
-const { HOST:host='localhost', PORT:port=5000 } = process.env;
-app.listen(port, () => console.log(`Connection is established at \nhttp://${host}:${port} OR \nhttps://devtrek.herokuapp.com\n`));
-
diff --git a/3server.js b/3server.js
deleted file mode 100644
index 3a3aae2..0000000
--- a/3server.js
+++ /dev/null
@@ -1,61 +0,0 @@
-const express = require('express');
-const mongoose = require('mongoose');
-require('dotenv').config();
-
-const favicon = require('serve-favicon');
-const path = require('path');
-const methodOverride = require('method-override');
-
-const articleRoute = require('./backend/routes/articles');
-// const { readController } = require('./backend/controllers/articles');
-
-const app = express();
-
-// frontend
-app.set('view engine','ejs');
-app.set('views', path.join(__dirname, 'frontend/views')); // set default views directory
-// app.use(express.static('frontend/assets')); // for creating link for external style and script files to link in ejs files
-// app.use(methodOverride('_method')); // for calling request methods other than get and post thru form
-
-// app.use(express.json({ limit: "1mb" })); // parse json data coming from frontend
-app.use(express.urlencoded({ extended: "false" })); // parse data sent thru html form
-
-app.use(favicon(path.join(__dirname, 'backend', 'favicon.ico'))); // serve req: '/favicon.ico' & set favicon for all pgs
-
-app.use(express.static('frontend/assets')); // for creating link for external style and script files to link in ejs files
-app.use(methodOverride('_method')); // for calling request methods other than get and post thru form
-
-// app.get(/^\/(home)*$/, (_, res) => readController(res,null,'index'));
-
-// app.use('/articles',articleRoute);
-app.use('/',articleRoute);
-
-// app.all('*', (_,res) => res.send('
404! Page not found...
'));
-
-// app.use((err, req, res, next) => { // express err handler, global err format for printing user defined errs
-// const errFormat = {
-// statusCode: err.statusCode || 500,
-// message: err.message,
-// stack: err.stack
-// };
-// });
-
-// const { HOST:host='localhost', PORT:port=5000 } = process.env;
-const { HOST:host, PORT:port=5000, DB_CON:dbUrl } = process.env;
-
-// app.listen(port, () => console.log(`Connection is established at \nhttp://${host}:${port} OR \nhttps://devtrek.herokuapp.com\n`));
-// console.log(host,port,dbUrl);
-mongoose.connect(
- dbUrl,
- {
- useNewUrlParser: true,
- useUnifiedTopology: true,
- useCreateIndex: true
- }
-).then(() => {
- app.listen(port);
- console.log(`Connection is established at \nhttp://${host}:${port} OR \nhttps://devtrek.herokuapp.com\n`);
-}).catch(err => console.error(err.message));
-
-// mongoose.set('useFindAndModify',false);
-
diff --git a/4server.js b/4server.js
deleted file mode 100644
index 30fcd59..0000000
--- a/4server.js
+++ /dev/null
@@ -1,40 +0,0 @@
-const express = require('express');
-const mongoose = require('mongoose');
-require('dotenv').config();
-// const favicon = require('serve-favicon');
-const path = require('path');
-// const methodOverride = require('method-override');
-
-const articleRoute = require('./backend/routes/articles');
-
-const app = express();
-
-// app.use(favicon(path.join(__dirname, 'backend', 'favicon.ico')));
-app.set('view engine','ejs');
-app.set('views', path.join(__dirname, 'frontend/views'));
-// app.set('views', 'frontend/views');
-app.use(express.static('frontend/assets')); // for creating link for external style and script files to link in ejs files
-
-// app.use(express.urlencoded({ extended: "false" })); // parse data sent thru html form
-// app.use(express.json({ limit: "1mb" })); // parse json data coming from frontend
-// app.use(methodOverride('_method'));
-
-app.use('/',articleRoute);
-
-// app.use(express.static('frontend/assets')); // for creating link for external style and script files to link in ejs files
-
-const { HOST:host, PORT:port=5000, DB_CON:dbUrl } = process.env;
-
-mongoose.connect(
- dbUrl,
- {
- useNewUrlParser: true,
- useUnifiedTopology: true,
- useCreateIndex: true
- }
-).then(() => {
- app.listen(port);
- console.log(`Connection is established at \nhttp://${host}:${port} OR \nhttps://devtrek.herokuapp.com\n`);
-}).catch(err => console.error(err.message));
-
-
diff --git a/5server.js b/5server.js
deleted file mode 100644
index f22af93..0000000
--- a/5server.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const express = require('express');
-// const favicon = require('serve-favicon');
-const path = require('path');
-// const methodOverride = require('method-override');
-// require('dotenv').config();
-
-const articleRoute = require('./backend/routes/articles');
-// const { readController } = require('./backend/controllers/articles');
-
-const app = express();
-// export const app = express();
-
-// app.use(favicon(path.join(__dirname, 'backend', 'favicon.ico')));
-// app.use(express.static(path.join(__dirname, 'frontend/assets')));
-app.use(express.static('frontend/assets')); // for creating link for external style and script files to link in ejs files
-// app.set('views', path.join(__dirname, 'frontend/views'));
-app.set('views', 'frontend/views');
-app.set('view engine','ejs');
-// app.engine('html', require('ejs').renderFile);
-// app.set('view engine', 'html');
-// console.log(app,app.settings.views,'\n',__dirname);
-// app.settings.views = __dirname + "\\frontend\\views";
-// console.log(app.settings.views,app,app.set);
-// app.use(express.urlencoded({ extended: "false" })); // parse data sent thru html form
-// app.use(express.json({ limit: "1mb" })); // parse json data coming from frontend
-// app.use(methodOverride('_method'));
-
-// app.get(/^\/(home)*$/, (_, res) => readController(res,null,'index'));
-
-// module.exports = app;
-app.use('/',articleRoute);
-
-// app.use(express.static('frontend/assets')); // for creating link for external style and script files to link in ejs files
-
-// app.all('*', (_,res) => res.send('
404! Page not found...
'));
-
-const { HOST:host='localhost', PORT:port=5000 } = process.env;
-app.listen(port, () => console.log(`Connection is established at \nhttp://${host}:${port} OR \nhttps://devtrek.herokuapp.com\n`));
-
-// exports.module = app;
-// module.exports = app;
-// console.log(app);
-
diff --git a/README.md b/README.md
index e3fdc86..80e82a2 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,5 @@
-
-
-
-
-
# [devTrek](http://devtrek.herokuapp.com)
-
A Blogging App
diff --git a/backend/1db.json b/backend/1db.json
deleted file mode 100644
index 1ccd9cb..0000000
--- a/backend/1db.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"name":"DOnt HaCk mE","title":"Public API's","originalDesc":"You can develop some great applications with the use of the following APIs.\n\n1. API Football\nIf you are a fan of a sport like a football, then it will be more fun and exciting to work on a project that deals with football data. API football provides tons of data including teams, fixtures, live scores, predictions, etc.\n\n2. Frankfurter\nFrankfurter provides current and historic foreign exchange rates. Rates are based on data published by the European Central Bank. It's totally free and does not require a key to fetch data.\n\n3. Poke API\nAll Pokémon data at one place with poke API. We all know about Pokémon, we used to watch the show in our childhood and many even today. This API shows data of individual Pokémon.","markdown":"# Now, Create frontend using online Api's","modifiedDesc":"You can develop some great applications with the use of the following APIs.
1. API Football If you are a fan of a sport like a football, then it will be more fun and exciting to work on a project that deals with football data. API football provides tons of data including teams, fixtures, live scores, predictions, etc.
2. Frankfurter Frankfurter provides current and historic foreign exchange rates. Rates are based on data published by the European Central Bank. It's totally free and does not require a key to fetch data.
3. Poke API All Pokémon data at one place with poke API. We all know about Pokémon, we used to watch the show in our childhood and many even today. This API shows data of individual Pokémon.","updatedAt":"2021-08-20T20:54:07.126Z","slug":"public-apis","sanitizedHtml":"
Now, Create frontend using online Api's
\n","id":"3","createdAt":"2021-08-20T20:54:07.126Z","displayDate":"20/8/2021","likes":1},{"name":"ZoX","title":"CSS in JS","originalDesc":"Building web apps with React is not just about composing components together and making sure that the logic works correctly. That arguably is the most important part, where at least it's the biggest reason for using React. But building react apps is also about styling those apps.\n\nWe want to make sure that our web applications look good and styling is also an important part of building components.\n\nStyled-components is a CSS-in-JS styling library that uses tagged template literals in JavaScript and CSS rules to provide pre-styled components where the styling is scoped to that react component only.\n\nThe button as a JavaScript variable and the styles defined in backticks are plain old CSS styles. We can also see the nested style property with plain CSS styles.\n\nThis is how styled-components renders CSS in JavaScript.\n\nStyling React components\nThere are primarly two ways to style a React component.\n\n1. Inline Styling:\nconst style = {\ncolor: 'blue',\n};\n\nInline styling has one of the highest specificity value which will override any other CSS rule. This method is highly discouraged, as it is neither sustainable nor scalable.\n\n2. External Styling:\nThere’s this more traditional way of using CSS in external CSS files, which is then passed as a string to the className prop\n\nAs the component tree grows, CSS files begin to get bulky, clumsy, and complex. One great alternative solution to this is the usage of SASS. Although SASS helps, you’ll eventually deal with the same issue due to the sheer number of SCSS files a project can have.\n\nFinally, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed by the browser, CSS is generated as a style element and attached inside of the HTML document.","markdown":"# Efficiently write CSS in JS","modifiedDesc":"Building web apps with React is not just about composing components together and making sure that the logic works correctly. That arguably is the most important part, where at least it's the biggest reason for using React. But building react apps is also about styling those apps.
We want to make sure that our web applications look good and styling is also an important part of building components.
Styled-components is a CSS-in-JS styling library that uses tagged template literals in JavaScript and CSS rules to provide pre-styled components where the styling is scoped to that react component only.
The button as a JavaScript variable and the styles defined in backticks are plain old CSS styles. We can also see the nested style property with plain CSS styles.
This is how styled-components renders CSS in JavaScript.
Styling React components There are primarly two ways to style a React component.
Inline styling has one of the highest specificity value which will override any other CSS rule. This method is highly discouraged, as it is neither sustainable nor scalable.
2. External Styling: There’s this more traditional way of using CSS in external CSS files, which is then passed as a string to the className prop
As the component tree grows, CSS files begin to get bulky, clumsy, and complex. One great alternative solution to this is the usage of SASS. Although SASS helps, you’ll eventually deal with the same issue due to the sheer number of SCSS files a project can have.
Finally, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed by the browser, CSS is generated as a style element and attached inside of the HTML document.","updatedAt":"2021-08-20T20:53:53.191Z","slug":"css-in-js","sanitizedHtml":"
Efficiently write CSS in JS
\n","id":"4","createdAt":"2021-08-20T20:53:53.191Z","displayDate":"20/8/2021","likes":3},{"name":"Bot","title":"Machine Learning","originalDesc":"Pre-requisites:\n\nFirst things first, what are the pre-requisites of learning Machine Learning? Just knowing the programming languages are not enough; you must know the mathematics behind each algorithm too. The important topics one must familiarize themselves with are:\n\n1. For Linear Algebra\n2. For Statistics\n3. For Calculus\n\nCoding fundamentals:\nMany languages are used for writing Machine Learning programs, like Python, R, Java and so on. However, python is the most recommended because of its several libraries and frameworks that have simplified the task of writing complex code. Another reason I would recommend Python is because there are far more Machine Learning tutorials written in python than there are in R. Thus, it is easier for a python programmer to get help from the data science community than an R programmer. However, R is also known for its various data visualization libraries. Thus, there is no harm in learning both languages and utilizing their best features. You can always learn one and move to the next. For a beginner, I would recommend python.","markdown":"# RoadMap for Machine Learning","modifiedDesc":"Pre-requisites:
First things first, what are the pre-requisites of learning Machine Learning? Just knowing the programming languages are not enough; you must know the mathematics behind each algorithm too. The important topics one must familiarize themselves with are:
1. For Linear Algebra 2. For Statistics 3. For Calculus
Coding fundamentals: Many languages are used for writing Machine Learning programs, like Python, R, Java and so on. However, python is the most recommended because of its several libraries and frameworks that have simplified the task of writing complex code. Another reason I would recommend Python is because there are far more Machine Learning tutorials written in python than there are in R. Thus, it is easier for a python programmer to get help from the data science community than an R programmer. However, R is also known for its various data visualization libraries. Thus, there is no harm in learning both languages and utilizing their best features. You can always learn one and move to the next. For a beginner, I would recommend python.","updatedAt":"2021-08-21T20:53:44.978Z","slug":"machine-learning","sanitizedHtml":"
RoadMap for Machine Learning
\n","id":"5","createdAt":"2021-08-21T20:53:44.978Z","displayDate":"21/8/2021","likes":1},{"name":"Sandeep","title":"Optimizing React Apps","originalDesc":"You've heard of minifying. You've heard of lazy-loading. You've heard of tree shaking. You've done it all. Or did you? Here are some optimizations you may have never heard of before. Until now!\n\n1. Enable \"loose\" transformations in @babel/preset-env:\nEnabling \"loose\" transformations may make your application considerably smaller. I shaved off roughly 230.9 KB, or 16.2% from my bundle!\n\nThis, however, comes at a price: your application may break, both when enabling, and disabling these transformations.\n\nIn my case, the only fix I needed to do was related to iterating over HTMLFormControlsCollection (form.elements). I was no longer able to do e.g. [...form.elements], I had to swap it out for Array.from(form.elements).\n\nStill tempted by the large savings? Give it a go by enabling loose flag in Babel config:\n\nbabel.config.json-\n\"presets\": [\n-\"@babel/preset-env\"\n+[\"@babel/preset-env\", {\n+\"loose\": true\n+}]\n]\n\n2. Remove prop-types from your production bundle:\nPropTypes are incredibly helpful during development, but they are of no use for your users. You can use babel-plugin-transform-react-remove-prop-types to remove PropTypes from your bundle.\n\nTo install, run:\nnpm install --save-dev babel-plugin-transform-react-remove-prop-types\nor\nyarn add -D babel-plugin-transform-react-remove-prop-types\nand add it to your Babel config like so:\n\nbabel.config.json-\n\"env\": {\n\"production\": {\n\"plugins\": [\n+\"transform-react-remove-prop-types\"\n]\n}\n}\n\nSavings will vary depending on the size of your app. In my case, I shaved off 16.5 KB or about 1.2% from my bundle.\n\n3. Consider unsafe-wrap mode:\nunsafe-wrap mode is, as the name states, a bit unsafe for the reasons well explained in plugin's docs.\n\nHowever, in my case, PropTypes were not accessed from anywhere and the application worked flawlessly.\n\nTo enable this mode, you need to change your Babel config like so:\n\nbabel.config.json-\n\"env\": {\n\"production\": {\n\"plugins\": [\n-\"transform-react-remove-prop-types\"\n+[\"transform-react-remove-prop-types\", {\n+\"mode\": \"unsafe-wrap\"\n+}]\n]\n}\n}\n\nThis way, I shaved off a total of 35.9 KB or about 2.5% from my bundle.\n\n4. Enable new JSX transform:\nEnabling new JSX transform will change the way Babel React preset transpiles JSX to pure JavaScript.\n\nI explained the benefits of enabling it in my other article: How to enable new JSX transform in React 17?.\n\nI highly recommend you to have a read. If that's TL;DR though, all you need to do for quick results is make sure that @babel/core and @babel/preset-env in your project are both on version 7.9.0 or newer, and change your Babel config like so:\n\nbabel.config.json\n\"presets\": [\n-\"@babel/preset-react\"\n+[\"@babel/preset-react\", {\n+\"runtime\": \"automatic\"\n+}]\n]\n\nAnd poof! Roughly 10.5 KB, or 0.7% of my bundle was gone.","markdown":"# Optimizing React apps: Hardcore edition","modifiedDesc":"You've heard of minifying. You've heard of lazy-loading. You've heard of tree shaking. You've done it all. Or did you? Here are some optimizations you may have never heard of before. Until now!
1. Enable \"loose\" transformations in @babel/preset-env: Enabling \"loose\" transformations may make your application considerably smaller. I shaved off roughly 230.9 KB, or 16.2% from my bundle!
This, however, comes at a price: your application may break, both when enabling, and disabling these transformations.
In my case, the only fix I needed to do was related to iterating over HTMLFormControlsCollection (form.elements). I was no longer able to do e.g. [...form.elements], I had to swap it out for Array.from(form.elements).
Still tempted by the large savings? Give it a go by enabling loose flag in Babel config:
2. Remove prop-types from your production bundle: PropTypes are incredibly helpful during development, but they are of no use for your users. You can use babel-plugin-transform-react-remove-prop-types to remove PropTypes from your bundle.
To install, run: npm install --save-dev babel-plugin-transform-react-remove-prop-types or yarn add -D babel-plugin-transform-react-remove-prop-types and add it to your Babel config like so:
This way, I shaved off a total of 35.9 KB or about 2.5% from my bundle.
4. Enable new JSX transform: Enabling new JSX transform will change the way Babel React preset transpiles JSX to pure JavaScript.
I explained the benefits of enabling it in my other article: How to enable new JSX transform in React 17?.
I highly recommend you to have a read. If that's TL;DR though, all you need to do for quick results is make sure that @babel/core and @babel/preset-env in your project are both on version 7.9.0 or newer, and change your Babel config like so:
And poof! Roughly 10.5 KB, or 0.7% of my bundle was gone.","updatedAt":"2021-08-22T20:53:08.789Z","slug":"optimizing-react-apps","sanitizedHtml":"
Optimizing React apps: Hardcore edition
\n","id":"6","createdAt":"2021-08-22T20:53:08.789Z","displayDate":"22/8/2021","likes":1},{"name":"Tushar","title":"PHP Laravel","originalDesc":"Kubernetes is an excellent open-source container orchestration platform that brings automatic scaling, automatic recovery, observability, and many more features. Since it differs from traditional operations, it has changed the development and deployment workflows as well. Debugging an application on Kubernetes can be a challenge.\n\nDevSpace is a tool that helps you develop, deploy, troubleshoot simple or complex applications. We will use a Laravel project to demonstrate its features. \n\nLaravel is a popular framework used by the PHP community with great features like extensibility, inheritance, and reusability with high customization options.\n\nArchitecture:\nWe will look at ways to deploy a Laravel based application into a Kubernetes cluster for development and production environments. We will develop our application while the application is running in Kubernetes as if we are developing locally. And we will be able to troubleshoot our application in real-time with ease.\n\nThe desired setup uses four containers, in three pods:\n1. PHP-FPM container, which processes all the PHP assets.\n2. Nginx container, which serves static files and acts as a reverse proxy for the PHP assets.\n3. MySQL container, as the database.\n4. Redis container, as session and cache.","markdown":"# PHP Laravel Development with Kubernetes using DevSpace","modifiedDesc":"Kubernetes is an excellent open-source container orchestration platform that brings automatic scaling, automatic recovery, observability, and many more features. Since it differs from traditional operations, it has changed the development and deployment workflows as well. Debugging an application on Kubernetes can be a challenge.
DevSpace is a tool that helps you develop, deploy, troubleshoot simple or complex applications. We will use a Laravel project to demonstrate its features.
Laravel is a popular framework used by the PHP community with great features like extensibility, inheritance, and reusability with high customization options.
Architecture: We will look at ways to deploy a Laravel based application into a Kubernetes cluster for development and production environments. We will develop our application while the application is running in Kubernetes as if we are developing locally. And we will be able to troubleshoot our application in real-time with ease.
The desired setup uses four containers, in three pods: 1. PHP-FPM container, which processes all the PHP assets. 2. Nginx container, which serves static files and acts as a reverse proxy for the PHP assets. 3. MySQL container, as the database. 4. Redis container, as session and cache.","updatedAt":"2021-08-22T20:52:19.267Z","slug":"php-laravel","sanitizedHtml":"
PHP Laravel Development with Kubernetes using DevSpace
\n","id":"7","createdAt":"2021-08-22T20:52:19.267Z","displayDate":"22/8/2021","likes":1}]
\ No newline at end of file
diff --git a/backend/2db.json b/backend/2db.json
deleted file mode 100644
index 4ec34ab..0000000
--- a/backend/2db.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"name":"DOnt HaCk mE","title":"Public API's","originalDesc":"You can develop some great applications with the use of the following APIs.\n\n1. API Football\nIf you are a fan of a sport like a football, then it will be more fun and exciting to work on a project that deals with football data. API football provides tons of data including teams, fixtures, live scores, predictions, etc.\n\n2. Frankfurter\nFrankfurter provides current and historic foreign exchange rates. Rates are based on data published by the European Central Bank. It's totally free and does not require a key to fetch data.\n\n3. Poke API\nAll Pokémon data at one place with poke API. We all know about Pokémon, we used to watch the show in our childhood and many even today. This API shows data of individual Pokémon.","markdown":"# Now, Create frontend using online Api's","modifiedDesc":"You can develop some great applications with the use of the following APIs.
1. API Football If you are a fan of a sport like a football, then it will be more fun and exciting to work on a project that deals with football data. API football provides tons of data including teams, fixtures, live scores, predictions, etc.
2. Frankfurter Frankfurter provides current and historic foreign exchange rates. Rates are based on data published by the European Central Bank. It's totally free and does not require a key to fetch data.
3. Poke API All Pokémon data at one place with poke API. We all know about Pokémon, we used to watch the show in our childhood and many even today. This API shows data of individual Pokémon.","updatedAt":"2021-08-20T20:54:07.126Z","slug":"public-apis","sanitizedHtml":"
Now, Create frontend using online Api's
\n","id":"3","createdAt":"2021-08-20T20:54:07.126Z","displayDate":"20/8/2021","likes":1},{"name":"ZoX","title":"CSS in JS","originalDesc":"Building web apps with React is not just about composing components together and making sure that the logic works correctly. That arguably is the most important part, where at least it's the biggest reason for using React. But building react apps is also about styling those apps.\n\nWe want to make sure that our web applications look good and styling is also an important part of building components.\n\nStyled-components is a CSS-in-JS styling library that uses tagged template literals in JavaScript and CSS rules to provide pre-styled components where the styling is scoped to that react component only.\n\nThe button as a JavaScript variable and the styles defined in backticks are plain old CSS styles. We can also see the nested style property with plain CSS styles.\n\nThis is how styled-components renders CSS in JavaScript.\n\nStyling React components\nThere are primarly two ways to style a React component.\n\n1. Inline Styling:\nconst style = {\ncolor: 'blue',\n};\n\nInline styling has one of the highest specificity value which will override any other CSS rule. This method is highly discouraged, as it is neither sustainable nor scalable.\n\n2. External Styling:\nThere’s this more traditional way of using CSS in external CSS files, which is then passed as a string to the className prop\n\nAs the component tree grows, CSS files begin to get bulky, clumsy, and complex. One great alternative solution to this is the usage of SASS. Although SASS helps, you’ll eventually deal with the same issue due to the sheer number of SCSS files a project can have.\n\nFinally, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed by the browser, CSS is generated as a style element and attached inside of the HTML document.","markdown":"# Efficiently write CSS in JS","modifiedDesc":"Building web apps with React is not just about composing components together and making sure that the logic works correctly. That arguably is the most important part, where at least it's the biggest reason for using React. But building react apps is also about styling those apps.
We want to make sure that our web applications look good and styling is also an important part of building components.
Styled-components is a CSS-in-JS styling library that uses tagged template literals in JavaScript and CSS rules to provide pre-styled components where the styling is scoped to that react component only.
The button as a JavaScript variable and the styles defined in backticks are plain old CSS styles. We can also see the nested style property with plain CSS styles.
This is how styled-components renders CSS in JavaScript.
Styling React components There are primarly two ways to style a React component.
Inline styling has one of the highest specificity value which will override any other CSS rule. This method is highly discouraged, as it is neither sustainable nor scalable.
2. External Styling: There’s this more traditional way of using CSS in external CSS files, which is then passed as a string to the className prop
As the component tree grows, CSS files begin to get bulky, clumsy, and complex. One great alternative solution to this is the usage of SASS. Although SASS helps, you’ll eventually deal with the same issue due to the sheer number of SCSS files a project can have.
Finally, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed by the browser, CSS is generated as a style element and attached inside of the HTML document.","updatedAt":"2021-08-20T20:53:53.191Z","slug":"css-in-js","sanitizedHtml":"
Efficiently write CSS in JS
\n","id":"4","createdAt":"2021-08-20T20:53:53.191Z","displayDate":"20/8/2021","likes":3},{"name":"Bot","title":"Machine Learning","originalDesc":"Pre-requisites:\n\nFirst things first, what are the pre-requisites of learning Machine Learning? Just knowing the programming languages are not enough; you must know the mathematics behind each algorithm too. The important topics one must familiarize themselves with are:\n\n1. For Linear Algebra\n2. For Statistics\n3. For Calculus\n\nCoding fundamentals:\nMany languages are used for writing Machine Learning programs, like Python, R, Java and so on. However, python is the most recommended because of its several libraries and frameworks that have simplified the task of writing complex code. Another reason I would recommend Python is because there are far more Machine Learning tutorials written in python than there are in R. Thus, it is easier for a python programmer to get help from the data science community than an R programmer. However, R is also known for its various data visualization libraries. Thus, there is no harm in learning both languages and utilizing their best features. You can always learn one and move to the next. For a beginner, I would recommend python.","markdown":"# RoadMap for Machine Learning","modifiedDesc":"Pre-requisites:
First things first, what are the pre-requisites of learning Machine Learning? Just knowing the programming languages are not enough; you must know the mathematics behind each algorithm too. The important topics one must familiarize themselves with are:
1. For Linear Algebra 2. For Statistics 3. For Calculus
Coding fundamentals: Many languages are used for writing Machine Learning programs, like Python, R, Java and so on. However, python is the most recommended because of its several libraries and frameworks that have simplified the task of writing complex code. Another reason I would recommend Python is because there are far more Machine Learning tutorials written in python than there are in R. Thus, it is easier for a python programmer to get help from the data science community than an R programmer. However, R is also known for its various data visualization libraries. Thus, there is no harm in learning both languages and utilizing their best features. You can always learn one and move to the next. For a beginner, I would recommend python.","updatedAt":"2021-08-21T20:53:44.978Z","slug":"machine-learning","sanitizedHtml":"
RoadMap for Machine Learning
\n","id":"5","createdAt":"2021-08-21T20:53:44.978Z","displayDate":"21/8/2021","likes":1},{"name":"Sandeep","title":"Optimizing React Apps","originalDesc":"You've heard of minifying. You've heard of lazy-loading. You've heard of tree shaking. You've done it all. Or did you? Here are some optimizations you may have never heard of before. Until now!\n\n1. Enable \"loose\" transformations in @babel/preset-env:\nEnabling \"loose\" transformations may make your application considerably smaller. I shaved off roughly 230.9 KB, or 16.2% from my bundle!\n\nThis, however, comes at a price: your application may break, both when enabling, and disabling these transformations.\n\nIn my case, the only fix I needed to do was related to iterating over HTMLFormControlsCollection (form.elements). I was no longer able to do e.g. [...form.elements], I had to swap it out for Array.from(form.elements).\n\nStill tempted by the large savings? Give it a go by enabling loose flag in Babel config:\n\nbabel.config.json-\n\"presets\": [\n-\"@babel/preset-env\"\n+[\"@babel/preset-env\", {\n+\"loose\": true\n+}]\n]\n\n2. Remove prop-types from your production bundle:\nPropTypes are incredibly helpful during development, but they are of no use for your users. You can use babel-plugin-transform-react-remove-prop-types to remove PropTypes from your bundle.\n\nTo install, run:\nnpm install --save-dev babel-plugin-transform-react-remove-prop-types\nor\nyarn add -D babel-plugin-transform-react-remove-prop-types\nand add it to your Babel config like so:\n\nbabel.config.json-\n\"env\": {\n\"production\": {\n\"plugins\": [\n+\"transform-react-remove-prop-types\"\n]\n}\n}\n\nSavings will vary depending on the size of your app. In my case, I shaved off 16.5 KB or about 1.2% from my bundle.\n\n3. Consider unsafe-wrap mode:\nunsafe-wrap mode is, as the name states, a bit unsafe for the reasons well explained in plugin's docs.\n\nHowever, in my case, PropTypes were not accessed from anywhere and the application worked flawlessly.\n\nTo enable this mode, you need to change your Babel config like so:\n\nbabel.config.json-\n\"env\": {\n\"production\": {\n\"plugins\": [\n-\"transform-react-remove-prop-types\"\n+[\"transform-react-remove-prop-types\", {\n+\"mode\": \"unsafe-wrap\"\n+}]\n]\n}\n}\n\nThis way, I shaved off a total of 35.9 KB or about 2.5% from my bundle.\n\n4. Enable new JSX transform:\nEnabling new JSX transform will change the way Babel React preset transpiles JSX to pure JavaScript.\n\nI explained the benefits of enabling it in my other article: How to enable new JSX transform in React 17?.\n\nI highly recommend you to have a read. If that's TL;DR though, all you need to do for quick results is make sure that @babel/core and @babel/preset-env in your project are both on version 7.9.0 or newer, and change your Babel config like so:\n\nbabel.config.json\n\"presets\": [\n-\"@babel/preset-react\"\n+[\"@babel/preset-react\", {\n+\"runtime\": \"automatic\"\n+}]\n]\n\nAnd poof! Roughly 10.5 KB, or 0.7% of my bundle was gone.","markdown":"# Optimizing React apps: Hardcore edition","modifiedDesc":"You've heard of minifying. You've heard of lazy-loading. You've heard of tree shaking. You've done it all. Or did you? Here are some optimizations you may have never heard of before. Until now!
1. Enable \"loose\" transformations in @babel/preset-env: Enabling \"loose\" transformations may make your application considerably smaller. I shaved off roughly 230.9 KB, or 16.2% from my bundle!
This, however, comes at a price: your application may break, both when enabling, and disabling these transformations.
In my case, the only fix I needed to do was related to iterating over HTMLFormControlsCollection (form.elements). I was no longer able to do e.g. [...form.elements], I had to swap it out for Array.from(form.elements).
Still tempted by the large savings? Give it a go by enabling loose flag in Babel config:
2. Remove prop-types from your production bundle: PropTypes are incredibly helpful during development, but they are of no use for your users. You can use babel-plugin-transform-react-remove-prop-types to remove PropTypes from your bundle.
To install, run: npm install --save-dev babel-plugin-transform-react-remove-prop-types or yarn add -D babel-plugin-transform-react-remove-prop-types and add it to your Babel config like so:
This way, I shaved off a total of 35.9 KB or about 2.5% from my bundle.
4. Enable new JSX transform: Enabling new JSX transform will change the way Babel React preset transpiles JSX to pure JavaScript.
I explained the benefits of enabling it in my other article: How to enable new JSX transform in React 17?.
I highly recommend you to have a read. If that's TL;DR though, all you need to do for quick results is make sure that @babel/core and @babel/preset-env in your project are both on version 7.9.0 or newer, and change your Babel config like so:
And poof! Roughly 10.5 KB, or 0.7% of my bundle was gone.","updatedAt":"2021-08-22T20:53:08.789Z","slug":"optimizing-react-apps","sanitizedHtml":"
Optimizing React apps: Hardcore edition
\n","id":"6","createdAt":"2021-08-22T20:53:08.789Z","displayDate":"22/8/2021","likes":1},{"name":"Tushar","title":"PHP Laravel","originalDesc":"Kubernetes is an excellent open-source container orchestration platform that brings automatic scaling, automatic recovery, observability, and many more features. Since it differs from traditional operations, it has changed the development and deployment workflows as well. Debugging an application on Kubernetes can be a challenge.\n\nDevSpace is a tool that helps you develop, deploy, troubleshoot simple or complex applications. We will use a Laravel project to demonstrate its features. \n\nLaravel is a popular framework used by the PHP community with great features like extensibility, inheritance, and reusability with high customization options.\n\nArchitecture:\nWe will look at ways to deploy a Laravel based application into a Kubernetes cluster for development and production environments. We will develop our application while the application is running in Kubernetes as if we are developing locally. And we will be able to troubleshoot our application in real-time with ease.\n\nThe desired setup uses four containers, in three pods:\n1. PHP-FPM container, which processes all the PHP assets.\n2. Nginx container, which serves static files and acts as a reverse proxy for the PHP assets.\n3. MySQL container, as the database.\n4. Redis container, as session and cache.","markdown":"# PHP Laravel Development with Kubernetes using DevSpace","modifiedDesc":"Kubernetes is an excellent open-source container orchestration platform that brings automatic scaling, automatic recovery, observability, and many more features. Since it differs from traditional operations, it has changed the development and deployment workflows as well. Debugging an application on Kubernetes can be a challenge.
DevSpace is a tool that helps you develop, deploy, troubleshoot simple or complex applications. We will use a Laravel project to demonstrate its features.
Laravel is a popular framework used by the PHP community with great features like extensibility, inheritance, and reusability with high customization options.
Architecture: We will look at ways to deploy a Laravel based application into a Kubernetes cluster for development and production environments. We will develop our application while the application is running in Kubernetes as if we are developing locally. And we will be able to troubleshoot our application in real-time with ease.
The desired setup uses four containers, in three pods: 1. PHP-FPM container, which processes all the PHP assets. 2. Nginx container, which serves static files and acts as a reverse proxy for the PHP assets. 3. MySQL container, as the database. 4. Redis container, as session and cache.","updatedAt":"2021-08-22T20:52:19.267Z","slug":"php-laravel","sanitizedHtml":"
PHP Laravel Development with Kubernetes using DevSpace
\n this is br \nthis is bold\n# asdwewa\n# sdsfefkm","modifiedDesc":"<div>this is div</div> <h1>this is h1</h1> <br>this is br<br> <b>this is bold</b>","updatedAt":"2021-08-27T14:33:21.125Z","slug":"kjdsksjdf","sanitizedHtml":"
<div>this is div</div>\n<h1>this is h1</h1>\n<br>this is br<br>\n<b>this is bold</b>
-
A Blogging App