![\"\"](\"https://cdn-images-1.medium.com/max/1024/0*XX5VmxIGli7aQ4tw\")
And got some great\u00a0advice.
\nThis is what I posted on\u00a0Reddit:
\nSo I am a boot camp graduate and have been working to gain confidence before I seriously apply for the dev roles. In short I want to be the best dev out there. My tech stack mainly includes JavaScript, Java, Spring boot and\u00a0React.\n
\nThings I have\u00a0done:\n
1. Make\u00a0projects\n
2. Write blogs on the things I learn along the\u00a0way\n
3. Build an online portfolio in\u00a0React\n
4. Hosted a full stack app online ( React + Spring boot\u00a0API)\n
5. Created a stackoverflow profile and answered a few questions\n
Things I am currently doing:\n
1. Leetcode\n
2. Reading books on Java and Spring\u00a0boot\n
3. Building more\u00a0projects\n
What else do you suggest I do? Or is there anything I should do differently? Again I want to be the best in the game.\u00a0Thanks.\n
Many people were quick to point out that there are no best devs out there and the best I can be was a \u2018better\u2019 dev. Let me clarify something. I know perfection is not something that can be achieved but we can aim for it at least. So if you shoot for the moon and fail you will at least fall among the stars. That is my life\u2019s philosophy.
\nAnyways back to the\u00a0advice\u2026
\nHere I will reproduce some of the responses that I found\u00a0helpful
\nYou seem to be on the right track, just keep in mind that the interviewer will also be looking for other soft skills such as collaborating with others on a large project, communication, handling conflicts/disagreements in the team etc. I\u2019ve seen many highly technically capable candidates faulter at this step in the hiring\u00a0process.
\nYou won\u2019t become the best, before getting a job and working on real-life projects. Nothing can truly prepare you for what it\u2019s like working with real people, and creating software for real\u00a0users.
\nTry a go at developing (parts of) the frameworks you use. That will give you a depth of understanding that a lot of bootcamp devs don\u2019t\u00a0have.
\nIt will be helpful if you understand the difference between the branching strategies as your future employer likely uses one. (Feature branching, release branching, git-flow, trunk based) as this will streamline how fast any code you write or change can be merged into a release. Consider it \u201cworking well with\u00a0others\u201d.
\nA good way to know if worth pursuing a small side project is to say \u201cI made this because\u2026\u201d and it\u2019s in the \u201cbecause\u201d where the value is. You can code up anything but why did you do it and most importantly who is going to use\u00a0it.
\nWhen working with code, ask yourself how you would break it, what inputs would break the flow, or cause security issues, or leak sensitive information.
\nLearn about the various common development approaches like Domain Driven Design and the common patterns you will encounter and need to use to solve problems.
\nIn conclusion I would say that it is a pretty solid list and I would be focusing on it for the next few months until I become the best dev or die trying. Wish me\u00a0luck.
\nAnd got some great\u00a0advice.
\nThis is what I posted on\u00a0Reddit:
\nSo I am a boot camp graduate and have been working to gain confidence before I seriously apply for the dev roles. In short I want to be the best dev out there. My tech stack mainly includes JavaScript, Java, Spring boot and\u00a0React.\n
\nThings I have\u00a0done:\n
1. Make\u00a0projects\n
2. Write blogs on the things I learn along the\u00a0way\n
3. Build an online portfolio in\u00a0React\n
4. Hosted a full stack app online ( React + Spring boot\u00a0API)\n
5. Created a stackoverflow profile and answered a few questions\n
Things I am currently doing:\n
1. Leetcode\n
2. Reading books on Java and Spring\u00a0boot\n
3. Building more\u00a0projects\n
What else do you suggest I do? Or is there anything I should do differently? Again I want to be the best in the game.\u00a0Thanks.\n
Many people were quick to point out that there are no best devs out there and the best I can be was a \u2018better\u2019 dev. Let me clarify something. I know perfection is not something that can be achieved but we can aim for it at least. So if you shoot for the moon and fail you will at least fall among the stars. That is my life\u2019s philosophy.
\nAnyways back to the\u00a0advice\u2026
\nHere I will reproduce some of the responses that I found\u00a0helpful
\nYou seem to be on the right track, just keep in mind that the interviewer will also be looking for other soft skills such as collaborating with others on a large project, communication, handling conflicts/disagreements in the team etc. I\u2019ve seen many highly technically capable candidates faulter at this step in the hiring\u00a0process.
\nYou won\u2019t become the best, before getting a job and working on real-life projects. Nothing can truly prepare you for what it\u2019s like working with real people, and creating software for real\u00a0users.
\nTry a go at developing (parts of) the frameworks you use. That will give you a depth of understanding that a lot of bootcamp devs don\u2019t\u00a0have.
\nIt will be helpful if you understand the difference between the branching strategies as your future employer likely uses one. (Feature branching, release branching, git-flow, trunk based) as this will streamline how fast any code you write or change can be merged into a release. Consider it \u201cworking well with\u00a0others\u201d.
\nA good way to know if worth pursuing a small side project is to say \u201cI made this because\u2026\u201d and it\u2019s in the \u201cbecause\u201d where the value is. You can code up anything but why did you do it and most importantly who is going to use\u00a0it.
\nWhen working with code, ask yourself how you would break it, what inputs would break the flow, or cause security issues, or leak sensitive information.
\nLearn about the various common development approaches like Domain Driven Design and the common patterns you will encounter and need to use to solve problems.
\nIn conclusion I would say that it is a pretty solid list and I would be focusing on it for the next few months until I become the best dev or die trying. Wish me\u00a0luck.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/0*l_fz6vV4272eai08\")
Many people encounter a weird error when trying to access their Spring boot app from a web browser. I call it weird because the error does not appear while testing the app on Postman or through CURL. So what is going on and how to resolve\u00a0it?
\n![\"\"](\"https://cdn-images-1.medium.com/max/864/1*neYYoKjdVk85pt333rHMNw.png\")
Before we look at the ways to tackle the error we first need to understand what exactly is\u00a0CORS.
\nIn simple words Cross-Origin Resource Sharing (CORS) is a mechanism through which browsers check whether an app\u2019s resources can be accessed from an origin that is different from where that app is\u00a0hosted.\n
This means that if your frontend is at localhost:5173 while your Spring boot backend is running at localhost:3306 you will be blocked from accessing your backend if you do not allow\u00a0CORS.
\nThat is why Postman steers clear of CORS error because it is strictly browser mechanism that happens on client\u2019s\u00a0side.
\nWhen we make a fetch request from our frontend (browser) to our Spring boot backend, the browser first sends a \u201cpreflight\u201d request with headers that are the same as the actual request headers just to check if the server will allow the actual request or\u00a0not.
\nIf you go to Chrome dev tools and click on Network tab you can see all the requests that your browser has\u00a0made.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*Y_xuwFwQTTKK_gp0I1D7sQ.png\")
Spring provides different ways to configure CORS in your spring app. If you do not configure it then by default Cross origin requests will be\u00a0blocked.
\nEnable CORS\u00a0globally
\nThis means allow all origins to access your Spring boot app. This could be dangerous as the purpose of CORS is to defend against malicious sites making request on your behalf. For example you could have your banking website open on one tab while another malicious website on another tab. That website can make requests to your bank on your behalf. Pretty\u00a0scary!
\nAnyways if you are just testing and are not bothered about your app\u2019s security the easiest way to get past CORS error is to just enable it globally. Add the following file to your config\u00a0folder.
\nimport org.springframework.context.annotation.Configuration;\n
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer{
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping(\"/**\")
.allowedOrigins(\"*\") //allow all origins
.allowedMethods(\"GET\", \"POST\", \"DELETE\", \"PATCH\")
.allowedHeaders(\"*\");
}
}
That is all you need to do. Even if you are using Spring security this is sufficient to enable CORS globally!
\nEnable CORS for specific paths using @CrossOrigin Annotation
\nYou can use Spring\u2019s @CrossOrigin annotation to enable CORS in your Controller class. You can either use the annotation at class level or at method\u00a0level.
\nTo enable CORS for the whole controller class
\n@CrossOrigin(origins = \"http://domain2.com\", maxAge = 3600)\n
@RestController
@RequestMapping(\"/account\")
public class AccountController {
@GetMapping(\"/{id}\")
public Account retrieve(@PathVariable Long id) {
// ...
}
@DeleteMapping(\"/{id}\")
public void remove(@PathVariable Long id) {
// ...
}
}
To enable CORS for specific methods in controller:
\n@RestController\n
@RequestMapping(\"/account\")
public class AccountController {
@CrossOrigin
@GetMapping(\"/{id}\")
public Account retrieve(@PathVariable Long id) {
// ...
}
@DeleteMapping(\"/{id}\")
public void remove(@PathVariable Long id) {
// ...
}
}
That is all you need to do to tackle the dreaded CORS error in your web\u00a0browser.
\nIf you liked this write-up please give a clap and follow for\u00a0more.
\nI aim to write about complex programming concepts with intimidating jargon in plain understandable language.
\nFurther reading: CORS support in Spring Framework
\nHow to enable CORS in Spring boot was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","content":"\nMany people encounter a weird error when trying to access their Spring boot app from a web browser. I call it weird because the error does not appear while testing the app on Postman or through CURL. So what is going on and how to resolve\u00a0it?
\nBefore we look at the ways to tackle the error we first need to understand what exactly is\u00a0CORS.
\nIn simple words Cross-Origin Resource Sharing (CORS) is a mechanism through which browsers check whether an app\u2019s resources can be accessed from an origin that is different from where that app is\u00a0hosted.\n
This means that if your frontend is at localhost:5173 while your Spring boot backend is running at localhost:3306 you will be blocked from accessing your backend if you do not allow\u00a0CORS.
\nThat is why Postman steers clear of CORS error because it is strictly browser mechanism that happens on client\u2019s\u00a0side.
\nWhen we make a fetch request from our frontend (browser) to our Spring boot backend, the browser first sends a \u201cpreflight\u201d request with headers that are the same as the actual request headers just to check if the server will allow the actual request or\u00a0not.
\nIf you go to Chrome dev tools and click on Network tab you can see all the requests that your browser has\u00a0made.
\nSpring provides different ways to configure CORS in your spring app. If you do not configure it then by default Cross origin requests will be\u00a0blocked.
\nEnable CORS\u00a0globally
\nThis means allow all origins to access your Spring boot app. This could be dangerous as the purpose of CORS is to defend against malicious sites making request on your behalf. For example you could have your banking website open on one tab while another malicious website on another tab. That website can make requests to your bank on your behalf. Pretty\u00a0scary!
\nAnyways if you are just testing and are not bothered about your app\u2019s security the easiest way to get past CORS error is to just enable it globally. Add the following file to your config\u00a0folder.
\nimport org.springframework.context.annotation.Configuration;\n
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer{
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping(\"/**\")
.allowedOrigins(\"*\") //allow all origins
.allowedMethods(\"GET\", \"POST\", \"DELETE\", \"PATCH\")
.allowedHeaders(\"*\");
}
}
That is all you need to do. Even if you are using Spring security this is sufficient to enable CORS globally!
\nEnable CORS for specific paths using @CrossOrigin Annotation
\nYou can use Spring\u2019s @CrossOrigin annotation to enable CORS in your Controller class. You can either use the annotation at class level or at method\u00a0level.
\nTo enable CORS for the whole controller class
\n@CrossOrigin(origins = \"http://domain2.com\", maxAge = 3600)\n
@RestController
@RequestMapping(\"/account\")
public class AccountController {
@GetMapping(\"/{id}\")
public Account retrieve(@PathVariable Long id) {
// ...
}
@DeleteMapping(\"/{id}\")
public void remove(@PathVariable Long id) {
// ...
}
}
To enable CORS for specific methods in controller:
\n@RestController\n
@RequestMapping(\"/account\")
public class AccountController {
@CrossOrigin
@GetMapping(\"/{id}\")
public Account retrieve(@PathVariable Long id) {
// ...
}
@DeleteMapping(\"/{id}\")
public void remove(@PathVariable Long id) {
// ...
}
}
That is all you need to do to tackle the dreaded CORS error in your web\u00a0browser.
\nIf you liked this write-up please give a clap and follow for\u00a0more.
\nI aim to write about complex programming concepts with intimidating jargon in plain understandable language.
\nFurther reading: CORS support in Spring Framework
\nHow to enable CORS in Spring boot was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","enclosure":{},"categories":["error","spring","security","chrome","cors"]},{"title":"How to display latest Medium blogs on your website","pubDate":"2024-01-10 12:01:45","link":"https://towardsdev.com/how-to-use-mediums-api-to-display-live-blogs-on-your-website-0fb2e2535cab?source=rss-c5df4976ed9f------2","guid":"https://medium.com/p/0fb2e2535cab","author":"Mariya Abdul Ghafoor","thumbnail":"","description":"\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*RB1rxSK_TBmcC5D2PN30JA.png\")
Medium has an API that allows users to post content directly through their apps. But if you want to retrieve content to display on your website the API is kinda\u00a0useless\u2026
\nFear not as there is another very easy way through which we can retrieve a particular user\u2019s posts. We can use RSS\u00a0feed.
\nAn RSS (Really Simple Syndication) feed is an online file that contains details about every piece of content a site has published.\n
We can access Medium\u2019s RSS feed through this url: https://medium.com/feed/@<user>
\n[Replace <user> with the username of the person whose blogs you want to retrieve].
\nThe url returns XML formatted data like\u00a0this:
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*oaSi5IdWMPPI7N2sTtgR0A.png\")
Now we need to parse the data to JSON so we can use it in our React app. To do that we will use an online JSON parser https://rss2json.com/. We will provide our RSS feed link and it will generate a new link which we can then use directly in our app. For my blogs the following link would work: https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mariya.aghafoor
\nTo test whether the generated endpoint works head to Postman and make a GET\u00a0request.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*oiWKnCRCX0JvXLUdSi1X3w.png\")
Now the field that we are interested in is \u2018items\u2019 which has all the information about the blog posts. Under items we will access keys of \u2018title\u2019 and \u2018content\u2019 which has the featured image as a value. For some reason the \u2018thumbnail\u2019 key was returning an empty string so I had to figure out a way to access featured image from \u2018content\u2019 key.
\nNow that we have a url to fetch from we will create a service called getBlogs under services folder in our React app. We are using fetch to get data from our\u00a0API.
\nexport const getBlogs = async () => {
const response = await fetch(
\"https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mariya.aghafoor\"
);
const data = await response.json();
console.log(\"got data\");
console.log(data);
return data;
};\nNow we need a component where we can call this service function. We will get the JSON formatted data from which we will access the \u2018items\u2019 key. We need to map the data and create Cards for each of the blog\u00a0post.
\nimport { getBlogs } from \"../../services/getBlogs\";
import { useEffect, useState } from \"react\";
import BlogCard from \"../BlogCard/BlogCard\";
function Blogs() {
const [blogs, setBlogs] = useState([]);
useEffect(() => {
getBlogs().then((data) => {
setBlogs(data.items);
});
}, []);
return (
<>
{blogs && (
<div>
{blogs.map((item, index) => (
<BlogCard key={index} blog={item} />
))}
</div>
)}
</>
);
}
export default Blogs;\nNow we will create a BlogCard component which will be rendered for each blog\u00a0post.
\nfunction BlogCard({ blog }) {
let imageTagStr = blog.description.match(/<img\\s+[^>]*src=\"([^\"]*)\"[^>]*>/i);
let imageUrl = imageTagStr[1];
return (
<>
<div>
<a href={blog.guid} target=\"_blank\" rel=\"noreferrer\">
<img src={imageUrl} alt={blog.title} />
</a>
<h3>{blog.title}</h3>
</div>
</>
);
}
export default BlogCard;\nAs you can see from above that to get featured image I had to parse the data in the \u2018content\u2019 field. First I use a Regex to get all the images\u2019 urls then I save the first image url to a imageUrl variable which is later used as a source for our\u00a0image.
\nThis is how the result looks like after some\u00a0styling:
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*0ylzWV9rEauJaxKxfW4Kfw.png\")
That\u2019s it! Now we have live feed of our favourite user\u2019s Medium blogs on our\u00a0website.
\nIf you want to have a look at the full code here is a link to my portfolio\u2019s repo on\u00a0GitHub.
\nIf you liked this write-up please clap for it and follow me and be\u00a0cool.
\nhttps://medium.com/media/5829cfecc39f4478b22ca05fae3fe5d0/hrefHow to display latest Medium blogs on your website was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","content":"\nMedium has an API that allows users to post content directly through their apps. But if you want to retrieve content to display on your website the API is kinda\u00a0useless\u2026
\nFear not as there is another very easy way through which we can retrieve a particular user\u2019s posts. We can use RSS\u00a0feed.
\nAn RSS (Really Simple Syndication) feed is an online file that contains details about every piece of content a site has published.\n
We can access Medium\u2019s RSS feed through this url: https://medium.com/feed/@<user>
\n[Replace <user> with the username of the person whose blogs you want to retrieve].
\nThe url returns XML formatted data like\u00a0this:
\nNow we need to parse the data to JSON so we can use it in our React app. To do that we will use an online JSON parser https://rss2json.com/. We will provide our RSS feed link and it will generate a new link which we can then use directly in our app. For my blogs the following link would work: https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mariya.aghafoor
\nTo test whether the generated endpoint works head to Postman and make a GET\u00a0request.
\nNow the field that we are interested in is \u2018items\u2019 which has all the information about the blog posts. Under items we will access keys of \u2018title\u2019 and \u2018content\u2019 which has the featured image as a value. For some reason the \u2018thumbnail\u2019 key was returning an empty string so I had to figure out a way to access featured image from \u2018content\u2019 key.
\nNow that we have a url to fetch from we will create a service called getBlogs under services folder in our React app. We are using fetch to get data from our\u00a0API.
\nexport const getBlogs = async () => {
const response = await fetch(
\"https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mariya.aghafoor\"
);
const data = await response.json();
console.log(\"got data\");
console.log(data);
return data;
};\nNow we need a component where we can call this service function. We will get the JSON formatted data from which we will access the \u2018items\u2019 key. We need to map the data and create Cards for each of the blog\u00a0post.
\nimport { getBlogs } from \"../../services/getBlogs\";
import { useEffect, useState } from \"react\";
import BlogCard from \"../BlogCard/BlogCard\";
function Blogs() {
const [blogs, setBlogs] = useState([]);
useEffect(() => {
getBlogs().then((data) => {
setBlogs(data.items);
});
}, []);
return (
<>
{blogs && (
<div>
{blogs.map((item, index) => (
<BlogCard key={index} blog={item} />
))}
</div>
)}
</>
);
}
export default Blogs;\nNow we will create a BlogCard component which will be rendered for each blog\u00a0post.
\nfunction BlogCard({ blog }) {
let imageTagStr = blog.description.match(/<img\\s+[^>]*src=\"([^\"]*)\"[^>]*>/i);
let imageUrl = imageTagStr[1];
return (
<>
<div>
<a href={blog.guid} target=\"_blank\" rel=\"noreferrer\">
<img src={imageUrl} alt={blog.title} />
</a>
<h3>{blog.title}</h3>
</div>
</>
);
}
export default BlogCard;\nAs you can see from above that to get featured image I had to parse the data in the \u2018content\u2019 field. First I use a Regex to get all the images\u2019 urls then I save the first image url to a imageUrl variable which is later used as a source for our\u00a0image.
\nThis is how the result looks like after some\u00a0styling:
\nThat\u2019s it! Now we have live feed of our favourite user\u2019s Medium blogs on our\u00a0website.
\nIf you want to have a look at the full code here is a link to my portfolio\u2019s repo on\u00a0GitHub.
\nIf you liked this write-up please clap for it and follow me and be\u00a0cool.
\nhttps://medium.com/media/5829cfecc39f4478b22ca05fae3fe5d0/hrefHow to display latest Medium blogs on your website was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","enclosure":{},"categories":["api","blog","website","medium","live"]},{"title":"Deploy React+Spring Boot+MySql App for Free! Step-by-Step Guide","pubDate":"2024-01-02 11:12:48","link":"https://towardsdev.com/deploy-react-spring-boot-mysql-app-for-free-step-by-step-guide-e2e73a1f3d92?source=rss-c5df4976ed9f------2","guid":"https://medium.com/p/e2e73a1f3d92","author":"Mariya Abdul Ghafoor","thumbnail":"","description":"\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/0*Gskj2nXLT6oJFWbI\")
After I built my first full stack app I wanted to immediately deploy it. I soon found out that it was not as simple as deploying a static React website. In this tutorial I will share with you the way through which you can deploy your full stack app absolutely free!
\nThere are of course limitations to free services but if you have a personal project that you would like to show off to the world this is the right starting\u00a0point.
\nNow I am assuming that you already have a React frontend app and a Spring boot backend that is performing CRUD operations on a MySql database on your computer.
\nStep 1: Create a database on the\u00a0cloud
\nHead to https://clever-cloud.com/, sign up and open their console. Click on Personal space on the left panel. Then Create an add-on and choose MySql from the list. Choose \u2018dev\u2019 (free version), provide a name and voila you now have a database ready to go. Now click on Export Environment Variables and copy the\u00a0values.
\n![\"\"](\"https://cdn-images-1.medium.com/max/750/1*M7qM7N77QgSTUF-Hcm_VrA.png\")
Step 2: Provide your database address to your Spring boot\u00a0app
\nTill now you must be running Spring boot locally with MySql database in your computer. Now we have a database set up on cloud so we need to tell our Spring boot app to access that database and create tables there. To do that we need to provide the above Environment variable values in our application.properties.
\nspring.datasource.url=jdbc:MYSQL_ADDON_URI\n
spring.datasource.username=MYSQL_ADDON_USER
spring.datasource.password=MYSQL_ADDON_PASSWORD
Before we move on to the next step make sure that you have your CORS configuration set to allow all connections else your browser will block your frontend from accessing backend. Create a file WebConfig.java and paste the following in\u00a0it:
\nimport org.springframework.context.annotation.Configuration;\n
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping(\"/**\")
.allowedOrigins(\"*\") //allow all origins
.allowedMethods(\"GET\", \"POST\", \"DELETE\", \"PATCH\")
.allowedHeaders(\"*\");
}
}
Step 3: Deploy your Spring boot\u00a0app
\nThis is the most tricky step. I followed this tutorial to deploy my Spring boot app on Render. In short Render does not provide native support to Java so we need to create a Docker image\u00a0first.
\nFollow the tutorial above to create a JAR file. Then create a Docker file in your project. Then create an account on Docker Hub and upload your image there. Go to Render and create a web service. Deploy the image from Docker hub and we are good to\u00a0go.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*-Un--R6japR04uCe0GU6nw.png\")
Step 4: Deploy your React\u00a0app
\nIf you have come this far then congratulations you are one step away from greatness.
\nBefore you deploy your React app make sure you change the url to fetch the data to the one provided by Render. It would look something like https://***.onrender.com/YOUR_TABLE_NAME.\n\n
Deploying React app on Netlify is as easy as a breeze. Before you do that just make sure to run this\u00a0locally:
\nnpm run build\n
If your project has built successfully then head to Netlify. Click on Add new site \u2192 Import an Existing Project \u2192 Deploy with Github \u2192 Choose a repository and deploy. No need to change the configuration settings.
\nCongratulations you have deployed your first full stack app on cloud and that too absolutely free!!!
\nTroubleshooting
\nOn your way to greatness you will for sure stumble upon errors and failures. Do not be disheartened and follow the following tips:
\nErrors Deploying Spring boot\u00a0app
\nFirst and foremost turn on debug mode in spring boot. Add this property to your application.properties:
\ndebug: true\n
It is very important to read the logs every time something fails.
\nIf you fail to create a JAR file look at the logs in the folder called \u2018sure-fire reports\u2019 under \u2018target\u2019\u00a0folder.
\nIf you fail to start your app locally then read the logs in the terminal.
\nIf the deployment fails on Render check the logs and see what is the road-block. In my case it many a times failed to connect to the database as the number of connections exceeded the free-tier limit which is 5. One way to solve this is to go to your database and kill all connections, then try\u00a0again.
\nIf that still does not work then you can try https://filess.io/ which is another free database\u00a0service.
\nErrors deploying React\u00a0app
\nUsually the React apps deploy fast on Netlify which has a good native support for\u00a0React.
\nIf you have trouble viewing your images please make sure they are in the public\u00a0folder.
\nThat is all I learned on my journey to deploying a full stack app. If you have any questions you can comment below or email me at mariya.aghafoor@gmail.com.
\nHappy deploying!
\nDeploy React+Spring Boot+MySql App for Free! Step-by-Step Guide was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","content":"\nAfter I built my first full stack app I wanted to immediately deploy it. I soon found out that it was not as simple as deploying a static React website. In this tutorial I will share with you the way through which you can deploy your full stack app absolutely free!
\nThere are of course limitations to free services but if you have a personal project that you would like to show off to the world this is the right starting\u00a0point.
\nNow I am assuming that you already have a React frontend app and a Spring boot backend that is performing CRUD operations on a MySql database on your computer.
\nStep 1: Create a database on the\u00a0cloud
\nHead to https://clever-cloud.com/, sign up and open their console. Click on Personal space on the left panel. Then Create an add-on and choose MySql from the list. Choose \u2018dev\u2019 (free version), provide a name and voila you now have a database ready to go. Now click on Export Environment Variables and copy the\u00a0values.
\nStep 2: Provide your database address to your Spring boot\u00a0app
\nTill now you must be running Spring boot locally with MySql database in your computer. Now we have a database set up on cloud so we need to tell our Spring boot app to access that database and create tables there. To do that we need to provide the above Environment variable values in our application.properties.
\nspring.datasource.url=jdbc:MYSQL_ADDON_URI\n
spring.datasource.username=MYSQL_ADDON_USER
spring.datasource.password=MYSQL_ADDON_PASSWORD
Before we move on to the next step make sure that you have your CORS configuration set to allow all connections else your browser will block your frontend from accessing backend. Create a file WebConfig.java and paste the following in\u00a0it:
\nimport org.springframework.context.annotation.Configuration;\n
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping(\"/**\")
.allowedOrigins(\"*\") //allow all origins
.allowedMethods(\"GET\", \"POST\", \"DELETE\", \"PATCH\")
.allowedHeaders(\"*\");
}
}
Step 3: Deploy your Spring boot\u00a0app
\nThis is the most tricky step. I followed this tutorial to deploy my Spring boot app on Render. In short Render does not provide native support to Java so we need to create a Docker image\u00a0first.
\nFollow the tutorial above to create a JAR file. Then create a Docker file in your project. Then create an account on Docker Hub and upload your image there. Go to Render and create a web service. Deploy the image from Docker hub and we are good to\u00a0go.
\nStep 4: Deploy your React\u00a0app
\nIf you have come this far then congratulations you are one step away from greatness.
\nBefore you deploy your React app make sure you change the url to fetch the data to the one provided by Render. It would look something like https://***.onrender.com/YOUR_TABLE_NAME.\n\n
Deploying React app on Netlify is as easy as a breeze. Before you do that just make sure to run this\u00a0locally:
\nnpm run build\n
If your project has built successfully then head to Netlify. Click on Add new site \u2192 Import an Existing Project \u2192 Deploy with Github \u2192 Choose a repository and deploy. No need to change the configuration settings.
\nCongratulations you have deployed your first full stack app on cloud and that too absolutely free!!!
\nTroubleshooting
\nOn your way to greatness you will for sure stumble upon errors and failures. Do not be disheartened and follow the following tips:
\nErrors Deploying Spring boot\u00a0app
\nFirst and foremost turn on debug mode in spring boot. Add this property to your application.properties:
\ndebug: true\n
It is very important to read the logs every time something fails.
\nIf you fail to create a JAR file look at the logs in the folder called \u2018sure-fire reports\u2019 under \u2018target\u2019\u00a0folder.
\nIf you fail to start your app locally then read the logs in the terminal.
\nIf the deployment fails on Render check the logs and see what is the road-block. In my case it many a times failed to connect to the database as the number of connections exceeded the free-tier limit which is 5. One way to solve this is to go to your database and kill all connections, then try\u00a0again.
\nIf that still does not work then you can try https://filess.io/ which is another free database\u00a0service.
\nErrors deploying React\u00a0app
\nUsually the React apps deploy fast on Netlify which has a good native support for\u00a0React.
\nIf you have trouble viewing your images please make sure they are in the public\u00a0folder.
\nThat is all I learned on my journey to deploying a full stack app. If you have any questions you can comment below or email me at mariya.aghafoor@gmail.com.
\nHappy deploying!
\nDeploy React+Spring Boot+MySql App for Free! Step-by-Step Guide was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","enclosure":{},"categories":["spring-boot","mysql","deploy","react","free"]},{"title":"Java recursion and variable passing: A step-by-step guide","pubDate":"2023-12-30 13:17:41","link":"https://towardsdev.com/how-recursive-methods-in-java-pass-variables-cb3c0cc63531?source=rss-c5df4976ed9f------2","guid":"https://medium.com/p/cb3c0cc63531","author":"Mariya Abdul Ghafoor","thumbnail":"","description":"\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/0*Fd83upwl9F8qQiNo\")
Recursion is a useful concept where a method calls itself until the base case is achieved. Base case is simply the condition where the method will terminate itself. Consider the following example:
\npublic class MainClass {
2 public static void main(String[] args) {
3
4 int count = 0;
5 testRecursion(count);
8 }
9
10 public static void testRecursion(int count){
11
12 System.out.println(\"Count = \"+count);
13
14 if(count==3){
15 return;
16 }
19 count++;
20 testRecursion(count);
21 System.out.println(\"Count after recursion = \"+count);
22 }
23 }\nIn the above example the method testRecursion is calling itself. On each call the value of count increases by 1 (line 19). The method will keep calling until the base case is reached which is count = 3 (line\u00a014).
\nIf we do not have a base case then the method will go into an infinite loop until the program runs out of memory with a StackOverflowError.
\nNow let\u2019s visualise the above\u00a0program:
\n![\"\"](\"https://cdn-images-1.medium.com/max/882/1*gvHMh4bcny2z3Z5hZUrj6w.gif\")
What is happening here? Why is count going back to its initial\u00a0value?
\nThis is because primitive variables passed by methods in Java are stored in stack\u00a0memory.
\nStack memory is a type of memory in Java which is allocated when a method runs and is freed as soon as the method finishes.\n
This means that every time testRecursion method is called the value of count is stored in the stack. When the method finishes the stack is freed and hence the stored values are\u00a0lost.
\nSo what can we do if we want the program to retain the value of count? We use a non-primitive data type like an\u00a0array.
\nConsider the following example where count is replaced by an array called count with size\u00a01.
\npublic class MainClass {
public static void main(String[] args) {
int[] count = new int[1];
count[0] = 0;
testRecursion(count);
}
public static void testRecursion(int[] count){
System.out.println(\"Count = \"+count[0]);
if(count[0]==3){
return;
}
count[0]++;
testRecursion(count);
System.out.println(\"Count after recursion = \"+count[0]);
}
}\nFor non-primitive data types methods pass references and not actual values. This means that instead of the actual value of the object a reference to that object is stored in stack. When changes are made to the value of object the actual value is changed. That\u2019s why when the stack is freed the value of object is not lost as it is stored permanently in a different part of memory called\u00a0heap.
\nThere is a technical point to note here: Java is always pass by value and never pass by reference. Even the non-primitive data types like arrays are passed as values but the difference is that the value contain reference to the object and not the actual value of the\u00a0object.\n
![\"\"](\"https://cdn-images-1.medium.com/max/890/1*b77p65hJXLEV5-cFUySU6A.gif\")
As you can see from the above that the stack contains reference to the count array and whenever the value of count changes it is changed in the permanent part of the\u00a0memory.
\nThe last thing to note here is that while String is a non-primitive data type in Java it still behaves as a primitive data type when passed in a recursive method. This means that the String will lose its value as soon as the method finishes.
\nThat\u2019s all about Recursion and passing variables. If you liked this please consider following me. Also check out my other\u00a0blogs.
\nJava recursion and variable passing: A step-by-step guide was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","content":"\nRecursion is a useful concept where a method calls itself until the base case is achieved. Base case is simply the condition where the method will terminate itself. Consider the following example:
\npublic class MainClass {
2 public static void main(String[] args) {
3
4 int count = 0;
5 testRecursion(count);
8 }
9
10 public static void testRecursion(int count){
11
12 System.out.println(\"Count = \"+count);
13
14 if(count==3){
15 return;
16 }
19 count++;
20 testRecursion(count);
21 System.out.println(\"Count after recursion = \"+count);
22 }
23 }\nIn the above example the method testRecursion is calling itself. On each call the value of count increases by 1 (line 19). The method will keep calling until the base case is reached which is count = 3 (line\u00a014).
\nIf we do not have a base case then the method will go into an infinite loop until the program runs out of memory with a StackOverflowError.
\nNow let\u2019s visualise the above\u00a0program:
\nWhat is happening here? Why is count going back to its initial\u00a0value?
\nThis is because primitive variables passed by methods in Java are stored in stack\u00a0memory.
\nStack memory is a type of memory in Java which is allocated when a method runs and is freed as soon as the method finishes.\n
This means that every time testRecursion method is called the value of count is stored in the stack. When the method finishes the stack is freed and hence the stored values are\u00a0lost.
\nSo what can we do if we want the program to retain the value of count? We use a non-primitive data type like an\u00a0array.
\nConsider the following example where count is replaced by an array called count with size\u00a01.
\npublic class MainClass {
public static void main(String[] args) {
int[] count = new int[1];
count[0] = 0;
testRecursion(count);
}
public static void testRecursion(int[] count){
System.out.println(\"Count = \"+count[0]);
if(count[0]==3){
return;
}
count[0]++;
testRecursion(count);
System.out.println(\"Count after recursion = \"+count[0]);
}
}\nFor non-primitive data types methods pass references and not actual values. This means that instead of the actual value of the object a reference to that object is stored in stack. When changes are made to the value of object the actual value is changed. That\u2019s why when the stack is freed the value of object is not lost as it is stored permanently in a different part of memory called\u00a0heap.
\nThere is a technical point to note here: Java is always pass by value and never pass by reference. Even the non-primitive data types like arrays are passed as values but the difference is that the value contain reference to the object and not the actual value of the\u00a0object.\n
As you can see from the above that the stack contains reference to the count array and whenever the value of count changes it is changed in the permanent part of the\u00a0memory.
\nThe last thing to note here is that while String is a non-primitive data type in Java it still behaves as a primitive data type when passed in a recursive method. This means that the String will lose its value as soon as the method finishes.
\nThat\u2019s all about Recursion and passing variables. If you liked this please consider following me. Also check out my other\u00a0blogs.
\nJava recursion and variable passing: A step-by-step guide was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","enclosure":{},"categories":["primitive-data-types","recursion","java","arrays","methods"]},{"title":"Create and initialize database automatically in Spring Boot","pubDate":"2023-12-21 13:59:02","link":"https://towardsdev.com/create-and-initialise-database-automatically-in-spring-boot-96d06fa99cc9?source=rss-c5df4976ed9f------2","guid":"https://medium.com/p/96d06fa99cc9","author":"Mariya Abdul Ghafoor","thumbnail":"","description":"\n![\"Data](\"https://cdn-images-1.medium.com/max/1024/1*GZQy1YhGdCMFLv5GoWQrRQ.png\")
If you are working with a database in Spring boot the chances are you will need some initial data in the database for testing purpose. You may not want to manually create database and then send POST requests to enter values in your\u00a0tables.
\nSpring boot makes it very easy to automate the whole process. From creating database, creating tables and filling them with initial data all could be done automatically when you start your spring boot\u00a0app.
\nIn this tutorial I will go through each step of database initialization.
\nPrerequisites: Basic knowledge of Spring boot with the ability to create a basic REST API. I will be working with a MySql database but you can use others. The process will remain the\u00a0same.
\nTo tell Spring to create database as soon as your app runs add the following to your application.properties file:
\nspring.datasource.url=jdbc:mysql://localhost:3306/employees?createDatabaseIfNotExist=true\n
spring.datasource.username=root
spring.jpa.hibernate.ddl-auto=update
Replace \u2018employees\u2019 with the name of your database and \u20183306\u2019 with the port on which server is running. If you want you can specify the port by adding this property:
\nserver.port=3306\n
Now we need to create a file called Data.sql which will contain commands to fill our database. When the app runs Data.sql runs\u00a0first.
\nRemember! Always add Data.sql to your classpath which means it should be where your application.properties is i.e. in the resources folder.\n
![\"\"](\"https://cdn-images-1.medium.com/max/353/1*fxl1j7EKJOPTkB7Si3np1g.png\")
Now the question is how do we create data.sql? To create data.sql which will populate your database head to https://filldb.info/\u00a0.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*AROJvLd5Cdr84zuc6pM8Uw.png\")
First we need to create a schema. Click Database Generator.
\nClick New Table. Provide table name and fields. In my case table name was \u2018employees\u2019 and fields were \u2018firstName\u2019, \u2018lastName\u2019 and \u2018email\u2019. Then click \u2018Save table\u2019. Next click \u2018Generate Data\u2019 and choose your\u00a0table.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*_4sy-Z3Tx5oSmyATwcM5jg.png\")
Next click \u2018Generate data\u2019 and voila you have 100 rows of fake data that you can now export to your Spring boot\u00a0project.
\nClick \u2018Export Employees\u2019 and rename the downloaded file as data.sql. Copy it to your resources folder.
\nNow we need to add the following two properties to our application.properties:
\nspring.sql.init.mode=always\n
spring.jpa.defer-datasource-initialization=true
The first property will tell Spring to look for a sql file to initializa database.
\nThe second property will defer the loading of data.sql until Hibernate creates tables that are defined by our Entity component. We can also provide our own schema through schema.sql but we will not do that in this tutorial. Instead we will leave it to Hibernate to do that for\u00a0us.
\nIn simple terms Hibernate is a tool to map Java objects to relational databases\n
The final application.properties should look like\u00a0this:
\nspring.datasource.url=jdbc:mysql://localhost:3306/postcodes?createDatabaseIfNotExist=true\n
spring.datasource.username=root
spring.jpa.hibernate.ddl-auto=update
spring.jpa.defer-datasource-initialization=true
spring.sql.init.mode=always
Now run your application. Go to MySQL Workbench and check if database called \u2018employees\u2019 exist. Check if there is a table in there (table name will be the one you defined in your Entity component). Open the table and behold it contains the dummy\u00a0data!
\nSHOW DATABASES;\n
USE employees;
SHOW TABLES;
SELECT * FROM employees;
Now you are ready to test your application with a dummy data without worrying about adding data\u00a0first.
\nIf you want to see the complete app it is here on my\u00a0Github.
\nIf you liked this tutorial please give a clap and follow me for\u00a0more.
\nCreate and initialize database automatically in Spring Boot was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","content":"\nIf you are working with a database in Spring boot the chances are you will need some initial data in the database for testing purpose. You may not want to manually create database and then send POST requests to enter values in your\u00a0tables.
\nSpring boot makes it very easy to automate the whole process. From creating database, creating tables and filling them with initial data all could be done automatically when you start your spring boot\u00a0app.
\nIn this tutorial I will go through each step of database initialization.
\nPrerequisites: Basic knowledge of Spring boot with the ability to create a basic REST API. I will be working with a MySql database but you can use others. The process will remain the\u00a0same.
\nTo tell Spring to create database as soon as your app runs add the following to your application.properties file:
\nspring.datasource.url=jdbc:mysql://localhost:3306/employees?createDatabaseIfNotExist=true\n
spring.datasource.username=root
spring.jpa.hibernate.ddl-auto=update
Replace \u2018employees\u2019 with the name of your database and \u20183306\u2019 with the port on which server is running. If you want you can specify the port by adding this property:
\nserver.port=3306\n
Now we need to create a file called Data.sql which will contain commands to fill our database. When the app runs Data.sql runs\u00a0first.
\nRemember! Always add Data.sql to your classpath which means it should be where your application.properties is i.e. in the resources folder.\n
Now the question is how do we create data.sql? To create data.sql which will populate your database head to https://filldb.info/\u00a0.
\nFirst we need to create a schema. Click Database Generator.
\nClick New Table. Provide table name and fields. In my case table name was \u2018employees\u2019 and fields were \u2018firstName\u2019, \u2018lastName\u2019 and \u2018email\u2019. Then click \u2018Save table\u2019. Next click \u2018Generate Data\u2019 and choose your\u00a0table.
\nNext click \u2018Generate data\u2019 and voila you have 100 rows of fake data that you can now export to your Spring boot\u00a0project.
\nClick \u2018Export Employees\u2019 and rename the downloaded file as data.sql. Copy it to your resources folder.
\nNow we need to add the following two properties to our application.properties:
\nspring.sql.init.mode=always\n
spring.jpa.defer-datasource-initialization=true
The first property will tell Spring to look for a sql file to initializa database.
\nThe second property will defer the loading of data.sql until Hibernate creates tables that are defined by our Entity component. We can also provide our own schema through schema.sql but we will not do that in this tutorial. Instead we will leave it to Hibernate to do that for\u00a0us.
\nIn simple terms Hibernate is a tool to map Java objects to relational databases\n
The final application.properties should look like\u00a0this:
\nspring.datasource.url=jdbc:mysql://localhost:3306/postcodes?createDatabaseIfNotExist=true\n
spring.datasource.username=root
spring.jpa.hibernate.ddl-auto=update
spring.jpa.defer-datasource-initialization=true
spring.sql.init.mode=always
Now run your application. Go to MySQL Workbench and check if database called \u2018employees\u2019 exist. Check if there is a table in there (table name will be the one you defined in your Entity component). Open the table and behold it contains the dummy\u00a0data!
\nSHOW DATABASES;\n
USE employees;
SHOW TABLES;
SELECT * FROM employees;
Now you are ready to test your application with a dummy data without worrying about adding data\u00a0first.
\nIf you want to see the complete app it is here on my\u00a0Github.
\nIf you liked this tutorial please give a clap and follow me for\u00a0more.
\nCreate and initialize database automatically in Spring Boot was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n","enclosure":{},"categories":["spring-boot","database","mysql","java","hibernate"]},{"title":"Why is my React component not receiving updated props?","pubDate":"2023-12-18 01:49:10","link":"https://medium.com/@mariya.aghafoor/why-is-my-react-component-not-receiving-updated-props-370f726d3791?source=rss-c5df4976ed9f------2","guid":"https://medium.com/p/370f726d3791","author":"Mariya Abdul Ghafoor","thumbnail":"","description":"\n![\"\"](\"https://cdn-images-1.medium.com/max/400/1*PWe4DmAE78BLD4SHpXizMw.png\")
React is a popular Javascript library that is famous for fast and efficient rendering. Its idiosyncrasies often leave developers scratching their\u00a0head.
\nOne of the more common problems that the developers face is that the props in child component do not change even when they have updated in parent component. Take the following example where we are fetching data in the parent component and passing it to the child which then performs some processing on the\u00a0data.
\nParent component
\nconst Parent = () => {
const [data, setData] = useState([]);
const getUsers = () => {
// some logic to get users from server
setData(users); //after receieving users from the server set data state
}
useEffect(()=>{
getUsers();
},[])
return(
<Child data={data}/> // pass the data props to the child
}
export default Parent;\nChild component
\nconst Child = (props) => {
useEffect(()=>{
console.log(props) //this will show old props even after they have changed
//do something with props
},[])
}\nWhy is React not updating the props in\u00a0child?
\nFrom React official\u00a0docs:
\nProps are immutable\u200a\u2014\u200aa term from computer science meaning \u201cunchangeable\u201d. When a component needs to change its props (for example, in response to a user interaction or new data), it will have to \u201cask\u201d its parent component to pass it different props\u200a\u2014\u200aa new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by\u00a0them.\n
So how does the child \u2018ask\u2019 the parent for new\u00a0props?
\nSimply by adding props in the dependency array of useEffect hook like\u00a0this:
\nconst Child = (props) => {
useEffect(()=>{
console.log(props) //this will show old props even after they have changed
//do something with props
},[props])
}\nNow every time the props change the useEffect will force a re-render which will force the parent to pass down the new\u00a0props.
\nReact is a popular Javascript library that is famous for fast and efficient rendering. Its idiosyncrasies often leave developers scratching their\u00a0head.
\nOne of the more common problems that the developers face is that the props in child component do not change even when they have updated in parent component. Take the following example where we are fetching data in the parent component and passing it to the child which then performs some processing on the\u00a0data.
\nParent component
\nconst Parent = () => {
const [data, setData] = useState([]);
const getUsers = () => {
// some logic to get users from server
setData(users); //after receieving users from the server set data state
}
useEffect(()=>{
getUsers();
},[])
return(
<Child data={data}/> // pass the data props to the child
}
export default Parent;\nChild component
\nconst Child = (props) => {
useEffect(()=>{
console.log(props) //this will show old props even after they have changed
//do something with props
},[])
}\nWhy is React not updating the props in\u00a0child?
\nFrom React official\u00a0docs:
\nProps are immutable\u200a\u2014\u200aa term from computer science meaning \u201cunchangeable\u201d. When a component needs to change its props (for example, in response to a user interaction or new data), it will have to \u201cask\u201d its parent component to pass it different props\u200a\u2014\u200aa new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by\u00a0them.\n
So how does the child \u2018ask\u2019 the parent for new\u00a0props?
\nSimply by adding props in the dependency array of useEffect hook like\u00a0this:
\nconst Child = (props) => {
useEffect(()=>{
console.log(props) //this will show old props even after they have changed
//do something with props
},[props])
}\nNow every time the props change the useEffect will force a re-render which will force the parent to pass down the new\u00a0props.
\nIf you are like me you would have been having much trouble understanding what exactly is a REST API? Fear not as I am here to rescue you from the monster called\u00a0REST.
\nAPI\u200a\u2014\u200aAPPLICATION PROGRAMMING INTERFACE
\nBefore understanding what REST is we should be clear on what an API is. An Application Programming Interface is a way for two applications to interact with each\u00a0other.
\nLet\u2019s take an example. You are designing a tracking system that tracks a user and displays their location on maps. Now instead of reinventing the wheel you would want to use Google maps to display user location. Here comes the Google Maps API. You will request the API to send you back the tracking information and in your request you would provide the user location.
\nNow if you were Google you would want to design your API in a way that is fast, efficient, easily scalable and reliable. Here comes\u00a0REST.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*S9YXC5uJcz37_EGfh9HP1A.png\")
REST\u200a\u2014\u200aREPRESENTATIONAL STATE\u00a0TRANSFER
\nREST is not a design pattern, it is a software architecture. It conditions how an API should work so that it can provide an efficient reliable way of communication.
\nThe information that an API following REST aechitecture serves is called a \u2018representation\u2019. A REST API should fulfill the following design constraints:
\nA client makes a request to a server for some information. In our above example our website would the client while Google Maps would be the server. When the information comes back it should be in a standard format. This format could be different from how the server actually stores information on its\u00a0end.
\n2. Statelessness
\nEvery request that a client makes is stateless or independent of the other requests. This statelessness requires a REST API to send all the information every time a new request is\u00a0made.
\n3. Cachebility
\nSending all the information every time a call is made means a lot of data transfer which can make an API slow. This is avoided in REST by allowing cacheing of information on client side. Each API response define itself as cacheable or noncacheable.
\n4. Code on\u00a0demand
\nA REST API can send code as part of the response to extend functionality on the client side. For example when you fill a form you get a response which says the password should be of a certain length\u00a0etc.
\n5. Layers
\nA REST API can have many layers. It can be run on different servers handling secuirty or providing business logic for example. This provides greater flexibility and scalibilty as each layer can be modified separately.
\nDISADVANTAGES OF REST\u00a0APIs
\nOne disadvantage of REST is that you cannot maintain state which means you need to send complete information within different sessions.
\nConclusion
\nSo that is what the REST is. Not a ghost but just a way to design APIs. It makes our APIs modular, flexible and more efficient.
\nIf you are like me you would have been having much trouble understanding what exactly is a REST API? Fear not as I am here to rescue you from the monster called\u00a0REST.
\nAPI\u200a\u2014\u200aAPPLICATION PROGRAMMING INTERFACE
\nBefore understanding what REST is we should be clear on what an API is. An Application Programming Interface is a way for two applications to interact with each\u00a0other.
\nLet\u2019s take an example. You are designing a tracking system that tracks a user and displays their location on maps. Now instead of reinventing the wheel you would want to use Google maps to display user location. Here comes the Google Maps API. You will request the API to send you back the tracking information and in your request you would provide the user location.
\nNow if you were Google you would want to design your API in a way that is fast, efficient, easily scalable and reliable. Here comes\u00a0REST.
\nREST\u200a\u2014\u200aREPRESENTATIONAL STATE\u00a0TRANSFER
\nREST is not a design pattern, it is a software architecture. It conditions how an API should work so that it can provide an efficient reliable way of communication.
\nThe information that an API following REST aechitecture serves is called a \u2018representation\u2019. A REST API should fulfill the following design constraints:
\nA client makes a request to a server for some information. In our above example our website would the client while Google Maps would be the server. When the information comes back it should be in a standard format. This format could be different from how the server actually stores information on its\u00a0end.
\n2. Statelessness
\nEvery request that a client makes is stateless or independent of the other requests. This statelessness requires a REST API to send all the information every time a new request is\u00a0made.
\n3. Cachebility
\nSending all the information every time a call is made means a lot of data transfer which can make an API slow. This is avoided in REST by allowing cacheing of information on client side. Each API response define itself as cacheable or noncacheable.
\n4. Code on\u00a0demand
\nA REST API can send code as part of the response to extend functionality on the client side. For example when you fill a form you get a response which says the password should be of a certain length\u00a0etc.
\n5. Layers
\nA REST API can have many layers. It can be run on different servers handling secuirty or providing business logic for example. This provides greater flexibility and scalibilty as each layer can be modified separately.
\nDISADVANTAGES OF REST\u00a0APIs
\nOne disadvantage of REST is that you cannot maintain state which means you need to send complete information within different sessions.
\nConclusion
\nSo that is what the REST is. Not a ghost but just a way to design APIs. It makes our APIs modular, flexible and more efficient.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*t4s3YQIpAcFC48nttPZTkA.png\")
In the realm of computer programming, multithreading and multiprocessing are two essential concepts, each with its unique purpose and characteristics. Understanding their distinctions is crucial for developers seeking to optimize their applications\u2019 performance and responsiveness. To shed light on this topic, let\u2019s explore the dissimilarities between multithreading and multiprocessing through real-life examples.
\nMultithreading:
\nMultithreading involves the execution of multiple threads within a single\u00a0process.\n
Picture a bustling kitchen where a chef prepares multiple dishes simultaneously. Each dish represents a thread, and the chef represents the main process. While cooking pasta, the chef can simultaneously prepare a sauce, ensuring efficient resource utilization. However, if one dish encounters a problem, such as a burnt pan, it can affect the entire process, causing delays or\u00a0errors.
\nMultiprocessing:
\nMultiprocessing refers to the execution of multiple processes simultaneously, each running its own independent task.\n
Imagine a factory with multiple assembly lines. Each assembly line operates autonomously, assembling different products concurrently. This approach allows for increased throughput and fault isolation. If a problem occurs on one assembly line, the others remain unaffected, maintaining overall productivity.
\nKey Differences:
\n1. Communication and Resource\u00a0Sharing:
\nIn multithreading, threads share the same memory space, allowing for quick communication but requiring careful synchronization. In multiprocessing, processes have separate memory spaces and communicate through inter-process communication mechanisms, such as pipes or message\u00a0queues.
\n2. Fault Isolation:
\nMultithreading can be prone to errors since one problematic thread can potentially crash the entire process. On the other hand, multiprocessing offers better fault isolation, as issues in one process usually don\u2019t impact\u00a0others.
\n3. Utilization of Resources:
\nMultithreading is efficient when tasks are IO-bound or require extensive coordination, as it avoids the overhead of creating and managing multiple processes. Multiprocessing is beneficial for CPU-bound tasks, where distributing the workload across multiple processors can lead to improved performance.
\nConclusion:
Multithreading and multiprocessing present distinctive approaches to achieving concurrency in software applications.
Multithreading enables efficient utilization of resources but demands careful synchronization and can suffer from a lack of fault isolation. Multiprocessing, with its independent processes and fault isolation, excels in scenarios requiring enhanced reliability and performance, particularly for CPU-bound tasks.\n
As a developer, understanding the nuances of multithreading and multiprocessing empowers you to make informed decisions in designing concurrent applications for optimal efficiency and responsiveness.
\nIn the realm of computer programming, multithreading and multiprocessing are two essential concepts, each with its unique purpose and characteristics. Understanding their distinctions is crucial for developers seeking to optimize their applications\u2019 performance and responsiveness. To shed light on this topic, let\u2019s explore the dissimilarities between multithreading and multiprocessing through real-life examples.
\nMultithreading:
\nMultithreading involves the execution of multiple threads within a single\u00a0process.\n
Picture a bustling kitchen where a chef prepares multiple dishes simultaneously. Each dish represents a thread, and the chef represents the main process. While cooking pasta, the chef can simultaneously prepare a sauce, ensuring efficient resource utilization. However, if one dish encounters a problem, such as a burnt pan, it can affect the entire process, causing delays or\u00a0errors.
\nMultiprocessing:
\nMultiprocessing refers to the execution of multiple processes simultaneously, each running its own independent task.\n
Imagine a factory with multiple assembly lines. Each assembly line operates autonomously, assembling different products concurrently. This approach allows for increased throughput and fault isolation. If a problem occurs on one assembly line, the others remain unaffected, maintaining overall productivity.
\nKey Differences:
\n1. Communication and Resource\u00a0Sharing:
\nIn multithreading, threads share the same memory space, allowing for quick communication but requiring careful synchronization. In multiprocessing, processes have separate memory spaces and communicate through inter-process communication mechanisms, such as pipes or message\u00a0queues.
\n2. Fault Isolation:
\nMultithreading can be prone to errors since one problematic thread can potentially crash the entire process. On the other hand, multiprocessing offers better fault isolation, as issues in one process usually don\u2019t impact\u00a0others.
\n3. Utilization of Resources:
\nMultithreading is efficient when tasks are IO-bound or require extensive coordination, as it avoids the overhead of creating and managing multiple processes. Multiprocessing is beneficial for CPU-bound tasks, where distributing the workload across multiple processors can lead to improved performance.
\nConclusion:
Multithreading and multiprocessing present distinctive approaches to achieving concurrency in software applications.
Multithreading enables efficient utilization of resources but demands careful synchronization and can suffer from a lack of fault isolation. Multiprocessing, with its independent processes and fault isolation, excels in scenarios requiring enhanced reliability and performance, particularly for CPU-bound tasks.\n
As a developer, understanding the nuances of multithreading and multiprocessing empowers you to make informed decisions in designing concurrent applications for optimal efficiency and responsiveness.
\n![\"\"](\"https://cdn-images-1.medium.com/max/1024/1*dbT0T6bLexF5nYgAViRvcQ.png\")
Python\u2019s execution model harmoniously combines the strengths of both compilation and interpretation, resulting in a versatile and efficient programming language. This synergistic approach enhances development productivity and runtime performance. Let\u2019s delve into the intricacies of Python\u2019s blend, exemplified by a Python code snippet and its corresponding bytecode representation.
\nExample: Consider the following Python\u00a0code:
\ndef calculate_sum(a, b):\n
result = a + b
print(\"The sum is:\", result)
calculate_sum(3, 5)
The bytecode generated for this code would resemble:
\n2 0 LOAD_FAST 0 (a)\n
2 LOAD_FAST 1 (b)
4 BINARY_ADD
6 STORE_FAST 2 (result)
3 8 LOAD_GLOBAL 0 (print)
10 LOAD_CONST 1 ('The sum is:')
12 LOAD_FAST 2 (result)
14 CALL_FUNCTION 2
16 POP_TOP
18 LOAD_CONST 0 (None)
20 RETURN_VALUE
Python\u2019s Compilation and Interpretation Dance:
\nPython first undergoes a compilation phase where the source code is transformed into bytecode, resembling an architectural blueprint for the subsequent execution. This bytecode is then interpreted by the Python interpreter, line by line, executing the corresponding operations in a dynamic and efficient manner.
\nThe compilation step optimizes the code structure and provides platform independence, while the interpretation step allows for interactive development and runtime adaptability. Python\u2019s Just-In-Time (JIT) compilation further enhances performance by dynamically optimizing critical code sections during execution.
\nHow this helps Python in Web Development:
\nOne example where Python\u2019s use of both compilation and interpretation proves beneficial is in the domain of web development. Let\u2019s consider a scenario where a web application is built using Python, utilizing frameworks like Django or\u00a0Flask.
\nDuring development, Python\u2019s interpretive nature comes into play. Developers can make changes to the code, such as adding new features or modifying existing functionality, and immediately see the results without the need for a separate compilation step. This interactive development process allows for quick iterations, making it easier to test and refine the application.
\nOn the other hand, when it comes to deploying the web application in a production environment, Python\u2019s compilation aspect shines. The source code is compiled into bytecode, optimizing the performance and reducing startup time. The compiled bytecode can be cached, allowing subsequent requests to be processed more efficiently. This compilation step ensures that the web application performs optimally, even under high traffic conditions.
\nConclusion:
\nBy combining compilation and interpretation, Python provides the best of both worlds in web development. Developers can enjoy the agility of interpretation during the development phase, while users benefit from the optimized execution offered by the compiled bytecode in the production environment. This dual approach enhances productivity, responsiveness, and scalability, making Python an excellent choice for building dynamic and efficient web applications.
\nPython\u2019s execution model harmoniously combines the strengths of both compilation and interpretation, resulting in a versatile and efficient programming language. This synergistic approach enhances development productivity and runtime performance. Let\u2019s delve into the intricacies of Python\u2019s blend, exemplified by a Python code snippet and its corresponding bytecode representation.
\nExample: Consider the following Python\u00a0code:
\ndef calculate_sum(a, b):\n
result = a + b
print(\"The sum is:\", result)
calculate_sum(3, 5)
The bytecode generated for this code would resemble:
\n2 0 LOAD_FAST 0 (a)\n
2 LOAD_FAST 1 (b)
4 BINARY_ADD
6 STORE_FAST 2 (result)
3 8 LOAD_GLOBAL 0 (print)
10 LOAD_CONST 1 ('The sum is:')
12 LOAD_FAST 2 (result)
14 CALL_FUNCTION 2
16 POP_TOP
18 LOAD_CONST 0 (None)
20 RETURN_VALUE
Python\u2019s Compilation and Interpretation Dance:
\nPython first undergoes a compilation phase where the source code is transformed into bytecode, resembling an architectural blueprint for the subsequent execution. This bytecode is then interpreted by the Python interpreter, line by line, executing the corresponding operations in a dynamic and efficient manner.
\nThe compilation step optimizes the code structure and provides platform independence, while the interpretation step allows for interactive development and runtime adaptability. Python\u2019s Just-In-Time (JIT) compilation further enhances performance by dynamically optimizing critical code sections during execution.
\nHow this helps Python in Web Development:
\nOne example where Python\u2019s use of both compilation and interpretation proves beneficial is in the domain of web development. Let\u2019s consider a scenario where a web application is built using Python, utilizing frameworks like Django or\u00a0Flask.
\nDuring development, Python\u2019s interpretive nature comes into play. Developers can make changes to the code, such as adding new features or modifying existing functionality, and immediately see the results without the need for a separate compilation step. This interactive development process allows for quick iterations, making it easier to test and refine the application.
\nOn the other hand, when it comes to deploying the web application in a production environment, Python\u2019s compilation aspect shines. The source code is compiled into bytecode, optimizing the performance and reducing startup time. The compiled bytecode can be cached, allowing subsequent requests to be processed more efficiently. This compilation step ensures that the web application performs optimally, even under high traffic conditions.
\nConclusion:
\nBy combining compilation and interpretation, Python provides the best of both worlds in web development. Developers can enjoy the agility of interpretation during the development phase, while users benefit from the optimized execution offered by the compiled bytecode in the production environment. This dual approach enhances productivity, responsiveness, and scalability, making Python an excellent choice for building dynamic and efficient web applications.
\n