<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Agnes</title>
    <description>The latest articles on DEV Community by Agnes (@aggie).</description>
    <link>https://dev.to/aggie</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1279990%2Fe096b709-759b-48e8-b351-ed51425e7281.jpg</url>
      <title>DEV Community: Agnes</title>
      <link>https://dev.to/aggie</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aggie"/>
    <language>en</language>
    <item>
      <title>SEO best practices for developers.</title>
      <dc:creator>Agnes</dc:creator>
      <pubDate>Wed, 14 Feb 2024 22:20:42 +0000</pubDate>
      <link>https://dev.to/aggie/seo-best-practices-for-developers-1n5j</link>
      <guid>https://dev.to/aggie/seo-best-practices-for-developers-1n5j</guid>
      <description>&lt;p&gt;In the previous articles,we have looked at some of the less technical ways to optimize your website. Here, we will look at some more technical ways that you can use on your web pages for maximum optimization.&lt;/p&gt;

&lt;p&gt;Some of the advanced SEO techniques include ;&lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;1. Using XML Sitemaps.&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;XML sitemaps is simply a file that tells search engines what pages are essential and supposed to be displayed.XML sitemaps make sure the search engines don’t display half the information ,and that they crawl through and display the relevant pages.&lt;/p&gt;

&lt;p&gt;Below is a simple XML sitemap instance;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;?xml version="1.0" encoding="UTF-8"?&amp;gt;  
&amp;lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&amp;gt;  
&amp;lt;url&amp;gt;  
&amp;lt;loc&amp;gt;https://www.yoast.com/wordpress-seo/&amp;lt;/loc&amp;gt;  
&amp;lt;lastmod&amp;gt;2022-01-01&amp;lt;/lastmod&amp;gt;  
&amp;lt;/url&amp;gt;  
&amp;lt;/urlset&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The XML snippet is divided into a couple of parts;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;&lt;em&gt;XML tag&lt;/em&gt;&lt;/strong&gt; declares the version and type of file the search engines crawlers will be reading and displaying.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;&lt;em&gt;URL Set tag&lt;/em&gt;&lt;/strong&gt; declares the protocol to the search engines.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;&lt;em&gt;URL tag&lt;/em&gt;&lt;/strong&gt; lists the URL of all the relevant pages to the search engine crawlers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The &lt;strong&gt;&lt;em&gt;Lastmod tag&lt;/em&gt;&lt;/strong&gt; contains date information that is used to tell the search engine crawlers when the page was last modified.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  2. Using HTML sitemaps.
&lt;/h4&gt;

&lt;p&gt;An HTML sitemap refers to an HTML page where all the other HTML pages and subpages are listed, and it’s mostly found linked on the footer.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy38wlkpjf37ceabuz094.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy38wlkpjf37ceabuz094.png" width="450" height="340"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the above page, the footer contains a list of the pages found in the entire web page. Since footers are visible to everyone, so are the HTML sitemaps.&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Making your web page mobile friendly.
&lt;/h4&gt;

&lt;p&gt;When it comes to displaying search results, most search engines prioritize and show the ones that are more mobile friendly first. So in short, making your web page responsive is a technique of search engine optimization its own.&lt;/p&gt;

&lt;h4&gt;
  
  
  4. Using Canonical links.
&lt;/h4&gt;

&lt;p&gt;Sometimes you want to post the same content on different sites, for either more exposure or any other reason. But will search engines crawl through each and every one of them and display them all? Well in most cases, search engines treat this as duplicate content and not display it, which in turn hurts your sites’ relevance. Using canonical links, you can give your most relevant site the chance to be identified by search engines and displayed. One of the ways in which you can implement a canonical tag to your page is by adding it straight to your HTML head tag.&lt;/p&gt;

&lt;p&gt;For an instance, you can have the following in the HTML head tag of the site that you want displayed by search engines&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6o4q8tgb60t9n8476mwf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6o4q8tgb60t9n8476mwf.png" width="800" height="71"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Using these SEO techniques and practices combined with the one we looked at at the previous articles, you will have increased the relevance of your page and given it a higher chance to be easily identified by search engine crawlers.&lt;/p&gt;

&lt;p&gt;Good luck !&lt;/p&gt;

</description>
      <category>seo</category>
      <category>programming</category>
    </item>
    <item>
      <title>Keyword research as an SEO technique.</title>
      <dc:creator>Agnes</dc:creator>
      <pubDate>Wed, 14 Feb 2024 22:15:37 +0000</pubDate>
      <link>https://dev.to/aggie/keyword-research-as-an-seo-technique-2p1c</link>
      <guid>https://dev.to/aggie/keyword-research-as-an-seo-technique-2p1c</guid>
      <description>&lt;p&gt;In the  &lt;a href="https://medium.com/@AgnesMbiti/seo-intoduction-for-complete-beginners-952d4875ada4" rel="noopener noreferrer"&gt;previous&lt;/a&gt;  article, we got an introduction on what search engine optimization , alias SEO is.&lt;/p&gt;

&lt;p&gt;We also looked at some of the most common SEO techniques used, keyword research being at the top of the list.We are going to dive a little deeper into keyword research and implementation as an SEO technique.&lt;/p&gt;

&lt;p&gt;After identifying our keywords for the content, here is a few convenient places you can place them for better results.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;&lt;em&gt;Place identified keywords in your URL.&lt;/em&gt;&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsw0o6aw30cum5ypsih5b.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsw0o6aw30cum5ypsih5b.jpeg" alt="URL domain" width="584" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Most search engines like Google use your web page URL to get a clue about your page content. This is why it is important to make sure you optimize your URL for faster results. Keywords are mostly placed in the URL slug. Do not make the description extra long , rather, keep the description short and to the point.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;2. Place identified keywords in between H1 tags.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgx69ti7mcada9t6yw8g8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgx69ti7mcada9t6yw8g8.png" width="641" height="364"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;H1 tags basically mean your title. Be sure to place some keywords in your page titles for faster results. This makes it easier for the search engines to crawl into your page content and identify them, hence displaying your page faster ,after specific search queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;3. Place identified keywords in your metadata.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsrtrefvkhmdtv7f6mpjz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsrtrefvkhmdtv7f6mpjz.png" width="580" height="271"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;By placing your keywords in the metadata , you give your page a higher chance of being among the top results when certain search queries are run. Just like in the URL , keywords in the metadata do not need to be overdone. Short and descriptive phrases get the work done too.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;4. Place keywords in your content.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Last but not the least, place keywords in your content. Use phrases that are mostly likely to relate to what you want to convey.&lt;/p&gt;

&lt;p&gt;By following all of these keyword techniques, you will have given search engines multiple opportunities to fish out keywords and get a clue what your content is about.&lt;/p&gt;

</description>
      <category>seo</category>
    </item>
    <item>
      <title>SEO intoduction for complete beginners.</title>
      <dc:creator>Agnes</dc:creator>
      <pubDate>Wed, 14 Feb 2024 22:09:21 +0000</pubDate>
      <link>https://dev.to/aggie/seo-intoduction-for-complete-beginners-29o5</link>
      <guid>https://dev.to/aggie/seo-intoduction-for-complete-beginners-29o5</guid>
      <description>&lt;p&gt;You have come across the word Search Engine Optimization , or in short, SEO, at some point in your life. Well what is it exactly? In this article, we will explain it in layman’s language.&lt;/p&gt;

&lt;p&gt;SEO refers to the practice of optimizing web pages, so as to increase their visibility on search engines, for example, Google. Usually, when someone inputs anything on Google, there is tons of background activities, or algorithm , that runs through thousands of pages to ensure it displays pages related to what you just input.&lt;/p&gt;

&lt;p&gt;Since Google was created in 1998, it’s safe to acknowledge that billions of data has been fed to it over the years. And most of this data is on similar topics. That is where SEO comes in. When you have a web page, you’ll want your page to pop up among the first results in your data category. With SEO techniques, you can optimize your web page to do exactly that. For you to properly optimize your page, you have to know exactly what the users are looking for, then create content that is going to be useful to the user when it is displayed.&lt;/p&gt;

&lt;p&gt;Some of the most commonly used SEO techniques include ;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;1.Keyword Research&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Before you write down content, you already know exactly what message you want to convey. It is then important to research and identify specific keywords that are going to create traffic to your page. For example, if you are writing content on cryptocurrency, you will have to go online and research mostly used phrases and keywords that are mostly used on the same. This in turn improves your pages’ relevance to the cryptocurrency topic and the search query.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;2. Update old content&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;With the current world of trends that we live in , web page content needs to be occasionally updated so as to keep up. Content, mostly if it is time-sensitive, needs to be updated from time to time. Some of the keywords that were previously used to display its results when searched , might change, so the need to edit and use newer keywords.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;3. Have a neat page structure.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sounds simple, right? Because it is. Having a well structured page,from the content, to the HTML code ,makes it easier for the search engines to navigate and find the keywords needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;4. Social media optimization.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There is power in large numbers, right ? Social media optimization is done by actively publicizing your web page on social media apps, ie,  &lt;em&gt;Twitter, Facebook&lt;/em&gt;, or whichever social media account you are on.&lt;/p&gt;

&lt;p&gt;Point to note, SEO is a technique by itself that requires close monitoring and analysis for it to be deemed a success.&lt;/p&gt;

</description>
      <category>seo</category>
    </item>
    <item>
      <title>How to create a python virtual environment on Ubuntu 22.04.</title>
      <dc:creator>Agnes</dc:creator>
      <pubDate>Wed, 14 Feb 2024 22:05:27 +0000</pubDate>
      <link>https://dev.to/aggie/how-to-create-a-python-virtual-environment-on-ubuntu-2204-36hd</link>
      <guid>https://dev.to/aggie/how-to-create-a-python-virtual-environment-on-ubuntu-2204-36hd</guid>
      <description>&lt;p&gt;Most of the time when we are working on python projects, we are bound to install different dependencies that help us achieve different project goals. It is important that we create virtual environments for each and every python project so as to keep the specific project dependencies isolated from the rest.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;&lt;em&gt;Prerequisites.&lt;/em&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Ubuntu 22.04&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;1. System update.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;First and foremost, to ensure that your system is up to date, run the command below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt update
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, run the following apt command&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt upgrade
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2. Pip install.
&lt;/h2&gt;

&lt;p&gt;After making sure your system is up to date with the latest packages using the above commands,  install pip by running the command below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt-get install python3-pip
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3. Virtualenv install.
&lt;/h2&gt;

&lt;p&gt;Virtualenv is used to isolate virtual environments for python projects.We install it using pip3 by running the command below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo pip3 install virtualenv 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  4. Creating a virtual environment.
&lt;/h2&gt;

&lt;p&gt;Next, we create the virtual environment, which is done by running the command below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;virtualenv venv 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Point to note: You can use your preferred name in place of “venv”.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;After running the command above, a directory named venv appears at the root of your project. The said directory contains python executable files.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Activating virtual environment.
&lt;/h2&gt;

&lt;p&gt;All we have left to do now is activate our virtual environment. Let’s run the final command to activate our environment .&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;source venv/bin/activate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Voila! Our python virtual environment is now set up and activated.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Deactivating the virtual environment.
&lt;/h2&gt;

&lt;p&gt;For one reason or the other, we might need to deactivate our environment. To do this, we run the command below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;deactivate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you have a step by step guide on how to create, activate, and deactivate a python environment.&lt;/p&gt;

</description>
      <category>ubuntu</category>
      <category>virtualenvironment</category>
      <category>python</category>
      <category>programming</category>
    </item>
    <item>
      <title>How to deploy Machine Learning Models on Django</title>
      <dc:creator>Agnes</dc:creator>
      <pubDate>Wed, 14 Feb 2024 21:42:00 +0000</pubDate>
      <link>https://dev.to/aggie/how-to-deploy-machine-learning-models-on-django-5fa8</link>
      <guid>https://dev.to/aggie/how-to-deploy-machine-learning-models-on-django-5fa8</guid>
      <description>&lt;p&gt;If you have encountered machine learning models, you must have wondered how to share your fun project with a larger audience. Since most of these models are trained in Jupyter Notebook, Django is one of Pythons’ frameworks that comes in handy when we want to deploy them on the web. In this article, we are going to follow a series of simple steps and set up our model in a Django application.&lt;/p&gt;

&lt;h1&gt;
  
  
  Prerequisites.
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Django 3.2.3&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;scikit-learn 1.0.2&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;pandas 1.3.5&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Django project.
&lt;/h2&gt;

&lt;p&gt;First, we have to set up a Django application. Run the command below in the terminal to create our Django project in the directory you want your project in.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;django-admin startproject practice
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above command creates a new folder in the root directory. The structure of the new folder should look like the block below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;practice/  
    manage.py  
    practice/  
        __init__.py  
        settings.py  
        urls.py  
        wsgi.py  
        asgi.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;While inside the practice directory ,you can start your development server by running the command below in the terminal&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ python manage.py runserver
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your development server, at this point, should look similar to the picture below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo4l8zcru94aoqm26dnn0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo4l8zcru94aoqm26dnn0.png" width="700" height="377"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let’s create the Django app by running the command below in the terminal&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ python manage.py startapp practiceApp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A new folder should appear in our root directory. The contents inside this new folder should match the block below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;practiceApp/  
 migrations/  
        __init__.py  
    __init__.py  
    admin.py  
    apps.py  
    models.py  
    tests.py  
    views.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We are going to add a  &lt;code&gt;urls.py&lt;/code&gt;file in the  &lt;em&gt;practiceApp&lt;/em&gt;  directory. The file structure in the two created directories is not the same.&lt;/p&gt;

&lt;p&gt;In the  &lt;code&gt;settings.py&lt;/code&gt;  file inside the practice directory, add your  &lt;code&gt;practiceApp&lt;/code&gt;  app in the  &lt;code&gt;INSTALLED_APPS&lt;/code&gt;  segment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;practice/settings.py&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqui6p8vq62c87ntiq75y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqui6p8vq62c87ntiq75y.png" width="700" height="153"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It is one of the ways we use to link our Django project and app.&lt;/p&gt;

&lt;p&gt;Next,let's create a templates directory in our projects’ root folder. Once that is done, we will then create a  &lt;code&gt;index.html&lt;/code&gt;  file inside it. We will use this file to define a simple front-end for our application.&lt;/p&gt;

&lt;h2&gt;
  
  
  The model
&lt;/h2&gt;

&lt;p&gt;Still, in our root folder, let’s create a model folder. Let’s create a  &lt;code&gt;model.ipynb&lt;/code&gt;  file inside this folder. This file will differ from our  &lt;code&gt;.py&lt;/code&gt; files since it’s in jupyter notebook format.Jupyter notebook is used to analyze data/code .Load the iris dataset by adding the code below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from sklearn.datasets import load_iris  
import pandas as pd  

data = load_iris()  
X_data = pd.DataFrame(data.data, columns = data.feature_names)  
y_data = pd.Series(data = data.target, name = 'Targets')  
X_data.head()
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see from the block above, we can load and get the first five rows of the dataset as shown below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdinqro1su7nshgfphyfr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdinqro1su7nshgfphyfr.png" width="544" height="151"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, we use the  &lt;code&gt;train_test_split&lt;/code&gt;  method to divide the data into training and testing data. Once that is done, we import the  &lt;code&gt;RandomForestClassifier&lt;/code&gt;  model to train our data. Here, we use our training data,  &lt;code&gt;X_train&lt;/code&gt;  and  &lt;code&gt;Y_train&lt;/code&gt;, and fit it into our model. Fitting models highly increases the chances of better results/predictions. All this is shown in the code block below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from sklearn.model_selection import train_test_split  

X_train, X_test, y_train, y_test = train_test_split(X_data, y_data, test_size = 0.2)  
from sklearn.ensemble import RandomForestClassifier  
model = RandomForestClassifier()  
model.fit(X_train, y_train)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After that, we measure our models’ accuracy score, and if we are satisfied with the result, we proceed to the next task. In this case, our model got a 96% accuracy score, as shown.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;y_pred = model.predict(X_test)  
from sklearn.metrics import accuracy_score  
accuracy_score(y_test, y_pred)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once you run the above cell, the output displays a 0.9666666666666667 accuracy score, telling us that our model is 96% more likely to give us better predictions.&lt;/p&gt;

&lt;p&gt;Lastly, we need to save our model as a  &lt;code&gt;joblib&lt;/code&gt;  file to import it into our project views file later and use it to make simple predictions.To do this, we create a new empty directory at our project root. We can give it the name  &lt;code&gt;modelSaved&lt;/code&gt;. We then return to our  &lt;code&gt;main.ipynb&lt;/code&gt;  file and run the code block below in the last code cell.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from joblib import dump  
dump(model, './savedModel/model.joblib')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Remember to change the relative path to match that of your  &lt;code&gt;savedModel&lt;/code&gt;  directory. When you look at your  &lt;code&gt;savedModel&lt;/code&gt;  directory, there is a new model.joblib file. Our model is now saved and ready to be integrated into our application.&lt;/p&gt;

&lt;p&gt;Another mandatory step to connect our app and project directories is to link our URLs. We do this by including the  &lt;em&gt;practiceApp URLs&lt;/em&gt;  in our project  &lt;em&gt;URLs&lt;/em&gt;, in this case, the  &lt;em&gt;practice URL&lt;/em&gt;. Below is how we can make this happen.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;practice/urls.py&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from django.urls import path, include  

urlpatterns = [  
  path('', include('practiceApp.urls')),  
]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In our  &lt;em&gt;practiceApp URLs&lt;/em&gt;, we add URL patterns that show our app views. It is where we call the functions defined in our view file. It is shown in the code block below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;**_practiceApp/urls.py_**

from django.urls import path  
from . import views  

urlpatterns = [  
    path('', views.predictor, name = 'predictor'),  
]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let’s see what the predictor function looks like in our  &lt;code&gt;views.py&lt;/code&gt;file.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;practiceApp/views.py&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from django.shortcuts import render  

from joblib import load  
model = load('./savedModel/model.joblib')  

def predictor(request):  
    if request.method == 'POST':  
        sepal_length = request.POST['sepal_length']  
        sepal_width = request.POST['sepal_width']  
        petal_length = request.POST['petal_length']  
        petal_width = request.POST['petal_width']  
        y_pred = model.predict([[sepal_length, sepal_width, petal_length, petal_width]])  
        if y_pred[0] == 0:  
            y_pred = 'Setosa'  
        elif y_pred[0] == 1:  
            y_pred = 'Verscicolor'  
        else:  
            y_pred = 'Virginica'  
        return render(request, 'index.html', {'result' : y_pred})  
    return render(request, 'index.html')

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In our view file, we started by loading our already saved model. We then defined a predictor function that makes use of the POST method. In our prediction method, we wrote a short loop for our y_pred, which is also the user input to determine the prediction. All the output is based on the trained model prediction. Then, finally, our result, which will be later referenced in our index.html file, is given as the value of y_pred, in short, the user input.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from joblib import load  
model = load('./savedModel/model.joblib')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In our view file, we started off by loading our already saved model. We then defined a predictor function that makes use of the POST method. In our prediction method, we wrote a short loop for our  &lt;em&gt;y_pred&lt;/em&gt;, also the user input, to determine exactly what the prediction would be. All the output is based on the trained model prediction. Then finally, our result ,that will be later referenced in our  &lt;code&gt;index.html&lt;/code&gt;  file , is given as the value of  &lt;em&gt;y_pred&lt;/em&gt;  , in short, the user input.&lt;/p&gt;

&lt;h2&gt;
  
  
  Front-end
&lt;/h2&gt;

&lt;p&gt;In our  &lt;code&gt;index.html&lt;/code&gt; file, paste the following HTML code&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;templates/index.html&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;  
&amp;lt;html lang="en"&amp;gt;  
&amp;lt;head&amp;gt;  
    &amp;lt;meta charset="UTF-8"&amp;gt;  
    &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&amp;gt;  
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;  
    &amp;lt;title&amp;gt; Django &amp;lt;/title&amp;gt;  
&amp;lt;/head&amp;gt;  
&amp;lt;body&amp;gt;  
    &amp;lt;h1&amp;gt;Iris Application&amp;lt;/h1&amp;gt;  
    &amp;lt;hr&amp;gt;  
    {% if result %}  
        &amp;lt;h1&amp;gt;Flower is {{result}}&amp;lt;/h1&amp;gt;  
    {% endif %}  

    &amp;lt;form action="" method="POST"&amp;gt;  
        {% csrf_token %}  
        Sepal Length : &amp;lt;input type="number" name="sepal_length" required&amp;gt;&amp;lt;br&amp;gt;  
        Sepal Width : &amp;lt;input type="number" name="sepal_width" required&amp;gt;&amp;lt;br&amp;gt;  
        Petal Length : &amp;lt;input type="number" name="petal_length" required&amp;gt;&amp;lt;br&amp;gt;  
        Petal Width : &amp;lt;input type="number" name="petal_width" required&amp;gt;&amp;lt;br&amp;gt;  
        &amp;lt;input type="submit"&amp;gt;  
    &amp;lt;/form&amp;gt;  
&amp;lt;/body&amp;gt;  
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above html code creates a simple form that is going to enable a user test our model. Once you run your development server, you should be able to get different output based on your form input.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;So far, you have successfully deployed a machine-learning model in your Django application. Building the front-end aspects of your model makes it easier for it to reach a bigger and wider audience.&lt;/p&gt;

</description>
      <category>machinelearning</category>
      <category>django</category>
      <category>webdev</category>
      <category>deployment</category>
    </item>
    <item>
      <title>Best practices for Container Security</title>
      <dc:creator>Agnes</dc:creator>
      <pubDate>Wed, 14 Feb 2024 21:21:05 +0000</pubDate>
      <link>https://dev.to/aggie/best-practices-for-container-security-4b35</link>
      <guid>https://dev.to/aggie/best-practices-for-container-security-4b35</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Containerization has become a key feature in modern software development and deployment. The methodology of building, deploying and running our applications has greatly changed because of containerization. Cloud infrastructure platforms like  &lt;a href="https://www.civo.com/" rel="noopener noreferrer"&gt;Civo&lt;/a&gt; ,  &lt;a href="https://aws.amazon.com/free/?trk=2d3e6bee-b4a1-42e0-8600-6f2bb4fcb10c&amp;amp;sc_channel=ps&amp;amp;ef_id=Cj0KCQjw4bipBhCyARIsAFsieCzo9l3XM8cIN6LYi0rc-ypDaA9kYMZezblBOfi_mN3qqOSH-Gi3v9QaAiCIEALw_wcB%3AG%3As&amp;amp;s_kwcid=AL%214422%213%21645125273261%21e%21%21g%21%21aws%2119574556887%21145779846712&amp;amp;all-free-tier.sort-by=item.additionalFields.SortRank&amp;amp;all-free-tier.sort-order=asc&amp;amp;awsf.Free+Tier+Types=*all&amp;amp;awsf.Free+Tier+Categories=*all" rel="noopener noreferrer"&gt;Amazon web services&lt;/a&gt;,  &lt;a href="https://www.digitalocean.com/try/developer-brand?utm_campaign=emea_brand_kw_en_cpc&amp;amp;utm_adgroup=digitalocean_exact_exact&amp;amp;_keyword=digitalocean&amp;amp;_device=c&amp;amp;_adposition=&amp;amp;utm_content=conversion&amp;amp;utm_medium=cpc&amp;amp;utm_source=google&amp;amp;gad=1&amp;amp;gclid=Cj0KCQjw4bipBhCyARIsAFsieCwNQVvjn94YU_75CWahusgrfb7TuMuoh6U4shujvXavkTuUwDQSRVoaAmh0EALw_wcB" rel="noopener noreferrer"&gt;Digital Ocean&lt;/a&gt;, among others, greatly help with simplifying the process of containerizing our applications. In this article, we are going to explore some comprehensive guides to follow to ensure the security of your containers.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Kubernetes cluster&lt;/li&gt;
&lt;li&gt;Basic Kubernetes knowledge&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  1. Using Role-based Access control (RBAC) to enhance container security
&lt;/h2&gt;

&lt;p&gt;RBAC is a powerful tool used to enhance security in Kubernetes clusters by using the roles and roles binding system. Roles are used to define the specific permissions that different users have, while roles binding refers to the assignment of different roles to different individuals or groups. Role bindings bind Kubernetes cluster users to different roles.&lt;br&gt;&lt;br&gt;
For instance, a role called  &lt;code&gt;developer&lt;/code&gt;, which allows users to deploy their different applications but restricts them from accessing other applications and resources, can be created. Role binding can then be used to assign the developer role to a group called  &lt;code&gt;developers&lt;/code&gt;  All the users in the  &lt;code&gt;developers&lt;/code&gt;  group would have the same access and permissions granted to the  &lt;code&gt;developer&lt;/code&gt;  role.We create YAML files, where we define our RBAC rules. For example, we can have a YAML file called  &lt;code&gt;rbac-config.yaml&lt;/code&gt;  with the following definitions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apiVersion: rbac.authorization.k8s.io/v1  
kind: Role  
metadata:  
  name: my-role  
  namespace: my-namespace  
rules:  
apiGroups: [""]  
  resources: ["pods"]  
  verbs: ["get", "list", "create", "delete"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the above YAML file, a Kubernetes Role named  &lt;code&gt;my-role&lt;/code&gt;is defined within the namespace. It means that accounts within the role have been granted the permission to  &lt;code&gt;get&lt;/code&gt;  &lt;code&gt;list&lt;/code&gt;  &lt;code&gt;create&lt;/code&gt;  and  &lt;code&gt;delete&lt;/code&gt;pods in the named namespace.&lt;/p&gt;

&lt;p&gt;Some of the ways Cloud service providers enhance container security through RBAC include:  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;a.  Auditing user activity _&lt;/strong&gt; &lt;br&gt;
Cloud service providers Kubernetes RBAC can audit user activities within the Kubernetes. This information can be used to investigate and identify any suspicious behavior within the containerized application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;b. Preventing unauthorized changes&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Cloud service providers Kubernetes RBAC prevents unauthorized access to different resources by allowing the creation of roles that can sometimes be set to read-only mode. Since the users are able to view the said resources and not edit, there are minimum chances of human error, hence preventing any security threats to the containerized application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;c. Limiting user access to different resources&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Cloud service providers Kubernetes RBAC allows the creation and definition of custom roles that define different permissions for users. It ensures that some of the resources have limited access since users are only granted permissions to the resources they need to complete their tasks effectively. It, in turn, helps avert unnecessary security threats.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;d. Least privilege principle&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
It is one of the most reliable methods of container security. Here, users are only granted permissions they need to complete their assigned tasks effectively, and not more. It goes a long way in minimizing any possible security threats due to unauthorized access.&lt;/p&gt;
&lt;h2&gt;
  
  
  2. Monitoring and Logging
&lt;/h2&gt;

&lt;p&gt;Both monitoring and logging are key aspects in ensuring containers are protected against cyber threats. Monitoring refers to the ability to collect and analyze crucial container information, such as memory usage, network traffic and CPU usage. Monitoring of this crucial container information makes it easier to be able to identify and avoid any possible security threats. Logging, on the other hand, refers to the collection and storage of your container information. The combination of both monitoring and logging makes it easier for one to identify and curb any potential security threats more easily and efficiently. Some of the third party tools that help with logging and monitoring include  &lt;a href="https://prometheus.io/docs/prometheus/latest/configuration/configuration/" rel="noopener noreferrer"&gt;Prometheus&lt;/a&gt;  for logging ,  &lt;a href="https://grafana.com/docs/" rel="noopener noreferrer"&gt;Grafana&lt;/a&gt; for monitoring ,  &lt;a href="https://www.fluentd.org/" rel="noopener noreferrer"&gt;Fluentd&lt;/a&gt; and  &lt;a href="https://www.elastic.co/guide/index.html" rel="noopener noreferrer"&gt;Elasticsearch&lt;/a&gt;  for logging.&lt;br&gt;&lt;br&gt;
To enhance your security, you can also configure alerts in Prometheus and Grafana to notify you of any security breach and suspicious activity within your cluster.&lt;/p&gt;

&lt;p&gt;Below are some of the ways Cloud service providers ensure container monitoring and logging is efficient :&lt;br&gt;&lt;br&gt;
&lt;strong&gt;&lt;em&gt;a. Container metrics&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
When you containerize your applications , a number of container metrics such as CPU usage, network traffic and memory usage are collected. Users can examine these metrics to try and identify any suspicious activities, hence curbing or identifying any potential security threat.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;b. Container logs&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
Cloud service providers are able to store logs from your containerized applications using third-party tools like Elasticsearch and Kibana, which makes it easy and efficient for users to pinpoint the exact cause of different problems encountered and also know how to fix them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;c. Container alerts&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
By creating alerts using third-party tools like Grafana and Prometheus, users can get notified on time in case of any suspicious behaviour, hence curbing and rectifying any possible security threats.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Benefits of proactive alerts&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reduced downtime
By quickly responding and addressing the alerts sent, you are able to reduce or entirely prevent any possible downtime that might have affected your containerized application otherwise.
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Early security threats&lt;br&gt;&lt;br&gt;
Because users get notified almost immediately after suspicious activities in their containerized containers, they are able to quickly respond to possible security threats, hence averting any crisis.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Efficient incident response&lt;br&gt;
Alerts enable a more improved and efficient incident response. Because most of these alerts are based on container logs, experts are able to troubleshoot and fix specific issues based on the notifications.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  3. secret management
&lt;/h2&gt;

&lt;p&gt;Secrets refer to sensitive data such as API keys and tokens, among others, which are used to authorize and gain access to resources, as well as containerized applications. If your container secrets are compromised, sensitive data and information from your containerized application could be accessed, which could cause a lot of damage.&lt;/p&gt;

&lt;p&gt;Most Cloud service providers offer a couple of ways in which the unauthorized access of these secrets could be curbed.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;a. Secrets’ encryption&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Most cloud service providers allow the encryption of secrets both at rest and in transit, which prompts users to enter an encryption key whenever they want to access them. Users without the encryption key are denied access, hence securing the secrets against unauthorized access.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;b. Auditing&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Cloud service providers secure secret management solutions audit all secrets’ access and use the information collected to investigate any suspicious access. It helps experts quickly troubleshoot any arising issues.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;c. Secrets’ access control&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Because Cloud service providers allow the creation of different user roles, you can give access to your secrets to just a few roles. It helps in preventing just anyone from accessing these secrets, which could later on lead to security threats.&lt;/p&gt;

&lt;p&gt;We are going to have a sample YAML file to define our secrets. Create a  &lt;code&gt;secrets.yaml&lt;/code&gt;  file and have the sample configuration below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apiVersion: v1  
kind: Secret  
metadata:  
  name: my-secrets  
  namespace: my-namespace  
type: Opaque  
data:  
  username: &amp;lt;base64-encoded-username&amp;gt;  
  password: &amp;lt;base64-encoded-password&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;PS: Note that  &lt;code&gt;base64-encoded-username&lt;/code&gt;  and  &lt;code&gt;base64-encoded-password&lt;/code&gt;  should be replaced with your actual username and password values encoded in base64 format.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;C. Application deployment _&lt;/strong&gt;&lt;br&gt;
During the deployment of your application to your Kubernetes cluster, you need to reference your secrets configuration in the YAML shown below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apiVersion: apps/v1  
kind: Deployment  
metadata:  
  name: my-app  
  namespace: my-namespace  
spec:  
  replicas: 1  
  template:  
    spec:  
      containers:  
        - name: my-app-container  
          image: my-app-image  
          env:  
            - name: USERNAME  
              valueFrom:  
                secretKeyRef:  
                  name: my-secrets  
                  key: username  
            - name: PASSWORD  
              valueFrom:  
                secretKeyRef:  
                  name: my-secrets  
                  key: password
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that you should replace&lt;code&gt;my-app-image&lt;/code&gt;with your actual container image and also configure your environment variables as needed.&lt;br&gt;&lt;br&gt;
In your application code, you are going to be able to securely access your secrets from the &lt;code&gt;/etc/secrets&lt;/code&gt; directory in your container.&lt;br&gt;&lt;br&gt;
By making use of RBAC rules, you can ensure that only authorized people can access the secrets.&lt;/p&gt;

&lt;p&gt;We can conclude that Cloud service providers secure secret management solutions help curb security threats by:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reducing the risk of a data breach through encryption.
&lt;/li&gt;
&lt;li&gt;Preventing unauthorized access through secrets’ access control.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  4. Container firewall for network security
&lt;/h2&gt;

&lt;p&gt;Container firewall is an extremely important tool for container security. Container firewall enables you to control traffic going in and out of your containerized application. Container firewall can be easily integrated into your Kubernetes cluster. It, in turn, helps protect your application from unauthorized access.&lt;/p&gt;

&lt;p&gt;Some of the features provided by Cloud service providers to enhance container firewall security include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Denial-of-Service(DoS) protection_**
By limiting the amount of traffic that can be sent to your containerized application, Container firewall is able to reduce the chances of a DoS attack. It ensures that there is a reduced chance of your application being unavailable.
&lt;/li&gt;
&lt;li&gt;Log management
Container firewall logs all incoming and outgoing traffic from your containerized application. It makes it easier to identify and manage any suspicious activities.
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Intrusion detection and prevention(IDS/IDP)&lt;br&gt;
By monitoring traffic from already identified or known cyber attack signatures, Container firewall can help manage and reduce the threat of malicious access to your containerized application by blocking this traffic.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Rule-based filtering&lt;br&gt;
By enabling the creation of rules that manage both outgoing and incoming traffic, Cloud service provider container firewall gets the upper hand in detecting any malicious access to your containerized application. Some of the criteria used to define these rules include protocol , and IP address, among others.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In order to secure your network through container firewall for network security, you need to define what network traffic is allowed and which one is blocked. You can create a YAML file and have the sample configurations below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apiVersion: civo.com/v1  
kind: Firewall  
metadata:  
  name: my-firewall-rules  
  clusterName: my-cluster-name  
spec:  
  rules:  
  - name: Allow HTTP  
    protocol: tcp  
    port: 80  
  - name: Allow HTTPS  
    protocol: tcp  
    port: 443  
  - name: Block All Other Incoming Traffic  
    protocol: all  
    action: drop
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above configurations allow incoming HTTP and HTTPS traffic and then block out all the other incoming traffic.&lt;br&gt;&lt;br&gt;
Once done, apply the firewall configuration to your cluster .&lt;/p&gt;

&lt;p&gt;We can then conclude that container firewall can help secure your container network security by:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Protecting against DoS attacks since traffic is controlled.
&lt;/li&gt;
&lt;li&gt;Protecting against malicious attacks by monitoring and blocking signatures from known or identified threats.
&lt;/li&gt;
&lt;li&gt;Protecting against unauthorized access by filtering incoming traffic.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  5. Regular image updates
&lt;/h2&gt;

&lt;p&gt;Users can rely on most cloud service providers to provide them with the ability to update their images using their API or CLI frequently. They also enable the scheduling of specific image updates, which it then does automatically, depending on the specified frequency. This regular image update goes a long way in ensuring that the images are up to date with the latest security patches, hence reducing the containerized applications’ vulnerabilities.By checking your container registry, you can identify which containers might use base images that have available new security updates. For every image that needs a security update, Update the image tag in your YAML file, depending on which image needs a security update, with the latest security fixes.&lt;br&gt;&lt;br&gt;
For instance, a YAML file named  &lt;code&gt;deployment.yaml&lt;/code&gt;  has the following configuration :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;spec:  
  containers:  
  - name: my-container  
    image: registry.example.com/my-image:latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The image field should be updated with the name of the new image tag.&lt;/p&gt;

&lt;p&gt;The above changes should then be applied to your cluster .&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Enhancing container images with multi-stage build
&lt;/h2&gt;

&lt;p&gt;Image multi-stage build is extremely powerful when it comes to enhancing container security. Multi-stage build works by breaking down the container build process into multiple stages. It helps break the container images into smaller sizes by removing unnecessary dependencies. When the container images are in smaller sizes, they become less vulnerable to cyber attacks since the attack surface is reduced.&lt;br&gt;&lt;br&gt;
You can create multi-stage builds to enhance container security by following the steps below:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;A.Docker installation&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
First, ensure that you have Docker installed by following the steps highlighted in its documentation  &lt;a href="https://docs.docker.com/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;B.Dockerfile creation&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
After successfully installing Docker, create a Dockerfile for your application, where you will define the multi-stage build process for your container.&lt;/p&gt;

&lt;p&gt;Below is an example of a Python Dockerfile :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FROM python:latest AS build  
RUN pip install --upgrade pip  
COPY requirements.txt .  
RUN pip install -r requirements.txt  
FROM python:latest  
COPY --from=build /dist .  
CMD ["python", "app.py"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above Dockerfile defines two stages:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Python dependencies for the application are defined in the first stage.
&lt;/li&gt;
&lt;li&gt;The application files are copied from the first stage to the second stage, and the commands to run the applications are set.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The  &lt;code&gt;FROM&lt;/code&gt;  keyword above specifies the latest image, which is used in the second stage. It helps to reduce the attack surface of the final image. A non-root user is also used in the second stage, which helps curb the application vulnerability by reducing the access privileges.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;C.Building the Docker image&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Next, run the command below to build the Docker image using a multi-stage build:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker build -t my-app .
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that  &lt;code&gt;my-app&lt;/code&gt;should be replaced with your actual image name.&lt;/p&gt;

&lt;p&gt;Once the image build is finished, you can now deploy it to your Kubernetes cluster .&lt;br&gt;&lt;br&gt;
By using a multi-stage build for your images, you enhance security by:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reducing your container attack surface since the final image contains only the necessary files required to run the application.
&lt;/li&gt;
&lt;li&gt;Reducing any chances of vulnerability attacks since the final image does not contain the source code.
&lt;/li&gt;
&lt;li&gt;Discarding the build environment after the build is complete, hence reducing the attack surface.
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;D. Container isolation&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Container isolation plays a major role in enhancing security within your Kubernetes clusters. It is a fundamental security practice that ensures each container runs in its’ own separate environment, separated from other containers and its host system. The container isolation practice aids in preventing performance issues and malicious attacks.&lt;/p&gt;

&lt;p&gt;Below are some of the techniques Cloud service providers employ for container isolation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Resource limiting &lt;br&gt;
Resource limiting gives users the ability to control the resource specifications, for example, memory, disk space and CPU, per container. Because each container has its own specified resource specification, it needs help to hog the other containers’ resources or even impact their performance on the host system.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Namespaces&lt;br&gt;
Containers in different namespaces are prohibited from interacting with each other.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SecurityContext&lt;br&gt;
The SecurityContext technique allows users to have the ability to add an extra layer of security to their containers. Some of the additional security measures users can implement include group IDs or user IDs that the container will run as.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Additionally, Cloud service providers also provides additional features to enhance container isolation. Some of these features include :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Pod Security Policies (PSPs) &lt;br&gt;
PSPSs can be used to enhance techniques like resource limits and even SecurityContext by giving users the ability to define security policies for pods.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;NetworkPolicy&lt;br&gt;
NetworkPolicy helps separate your applications from each other and also controls network traffic that flows to and from pods.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Audit Logging&lt;br&gt;
By studying this information and tracking the changes inside the Kubernetes clusters, experts can easily identify any suspicious activities.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using the above information, users can use container isolation to secure their container applications by :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Using namespaces to isolate the different environments, that is, the development, staging and production environment. It will reduce the chances of human error in your container. For instance, accidental changes to the production environment will be curbed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using resource limiting to avoid affecting the performance of the rest of the containers and hindering their performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using SecurityContext to prevent unauthorized access to your containers by setting up both user and group IDs. You can define the  &lt;code&gt;SecurityContext&lt;/code&gt;for your container inside a deployment manifest. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Below is an instance of a deployment manifest:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apiVersion: v1  
kind: Pod  
metadata:  
  name: my-pod  
spec:  
  containers:  
  - name: my-container  
    image: your-image:tag  
    securityContext:  
      runAsUser: 1000   # Set the desired user ID here  
      runAsGroup: 1000  # Set the desired group ID here
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace the  &lt;code&gt;image&lt;/code&gt;tag with the name of the actual image you want to run.&lt;br&gt;&lt;br&gt;
Ensure that you set both user and group IDs in the  &lt;code&gt;runAsGroup&lt;/code&gt;and  &lt;code&gt;runAsUser&lt;/code&gt;  fields accordingly. These user IDs properly correspond to the users/groups that are supposed to run in your container.&lt;br&gt;&lt;br&gt;
Once done, apply the manifest to your Kubernetes cluster.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Training the team involved on best practices to adhere to for best container security.
&lt;/h2&gt;

&lt;p&gt;Last but not least, you can train your team on ways the best practices to secure your containerized applications. Below are some tips on how to go about this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Prepare the delivery in an engaging and captivating way. You could use presentations for the training.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Research and identify key security threats to your containers, for example, image vulnerabilities, unauthorized container access, and DoS attacks, among others.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prepare training material that provides best practices and solutions to the identified security threats. Some of the best practices available are listed in this article.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Have regular security training for your team, that is, the developers, DevOps engineers, and system administrators. It is because the best practices for container security are constantly evolving.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In addition to the container security training for your team, it is also important to use security tools in your container, implement security policies and create an awareness culture within your team.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Securing your containers is an important practice to protect against cyber threats and attacks. You can ensure a robust structure for your containerized applications by following the above best security practices. It, in turn, ensures your application data confidentiality. Ensuring container security is a never-ending process, so it is important to remain watchful so that we can avert any imminent cyber attack.&lt;br&gt;&lt;br&gt;
By exploring third-party tools like  &lt;a href="https://docs.docker.com/get-docker/" rel="noopener noreferrer"&gt;Docker&lt;/a&gt;, you can get a lot of insights into general container security.&lt;/p&gt;

</description>
      <category>kubernetes</category>
      <category>docker</category>
      <category>cloudcomputing</category>
      <category>machinelearning</category>
    </item>
    <item>
      <title>How to build an online python code editor using Ace</title>
      <dc:creator>Agnes</dc:creator>
      <pubDate>Wed, 14 Feb 2024 19:14:47 +0000</pubDate>
      <link>https://dev.to/aggie/paragraph-kig</link>
      <guid>https://dev.to/aggie/paragraph-kig</guid>
      <description>&lt;p&gt;In this article, you will learn how to employ the Ace library and Django framework to develop a sample Python code editor. We will cover the following :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Creating and configuring a Django application.&lt;/li&gt;
&lt;li&gt;  Linking the Ace library to your Django app.&lt;/li&gt;
&lt;li&gt;  Your code editor front-end.&lt;/li&gt;
&lt;li&gt;  Your code editor server-side.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Prerequisites
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;  A text editor (e.g., Visual Studio Code)&lt;/li&gt;
&lt;li&gt;  Some basic Django framework and JavaScript knowledge.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Creating and configuring the Django project
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Step 1:&lt;/strong&gt; Open the terminal and in your root folder execute the following command.&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;django-admin startproject codeEditor&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note : Replace&lt;/em&gt; &lt;code&gt;_codeEditor_&lt;/code&gt; &lt;em&gt;with the actual name of your app.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2:&lt;/strong&gt; Next, still in your terminal, navigate to your new project then run the command below to create a new Django app .&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;python manage.py startapp codeEditorApp&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note : Replace&lt;/em&gt; &lt;code&gt;_codeEditorApp_&lt;/code&gt; &lt;em&gt;with the actual name of your app.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 3:&lt;/strong&gt; Next, In the project settings, register your new app in  &lt;code&gt;INSTALLED_APPS&lt;/code&gt;, as shown below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fheydy1i7meiy12vd1phm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fheydy1i7meiy12vd1phm.png" width="350" height="351"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 4:&lt;/strong&gt; Navigate to your app and create a new  &lt;code&gt;urls.py&lt;/code&gt;  file.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 5:&lt;/strong&gt;  Back in your project, register your apps’  &lt;code&gt;urls.py&lt;/code&gt;in your projects’  &lt;code&gt;urls.py&lt;/code&gt;as shown below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flwm9jjsrj7ztvk6ifziz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flwm9jjsrj7ztvk6ifziz.png" width="700" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 6:&lt;/strong&gt;  In the app folder, create a new folder names  &lt;code&gt;templates&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Your new project structure should look like the one shown below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;codeEditor/  
     __init__.py  
     settings.py  
     urls.py  
     wsgi.py  
     asgi.  
codeEditorApp/  
    __init__.py  
    templates  
    admin.py  
    apps.py  
    models.py  
    tests.py  
    urls.py  
    views.py  
manage.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 7:&lt;/strong&gt;  Back in your project,Follow the steps highlighted  &lt;a href="https://medium.com/@AgnesMbiti/creating-a-python-virtual-environment-on-ubuntu-22-04-5efc173ce655" rel="noopener noreferrer"&gt;here&lt;/a&gt;  to create a virtual environment below.&lt;/p&gt;

&lt;h1&gt;
  
  
  Creating the code editor front-end
&lt;/h1&gt;

&lt;p&gt;In the templates folder, create a new file named  &lt;code&gt;main.html&lt;/code&gt;and add the code below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;  
&amp;lt;html lang="en"&amp;gt;  
&amp;lt;head&amp;gt;  
    &amp;lt;meta charset="UTF-8"&amp;gt;  
    &amp;lt;title&amp;gt;Python Code Editor&amp;lt;/title&amp;gt;  

    &amp;lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src/ace.css" type="text/css" media="screen" charset="utf-8"&amp;gt;  
    &amp;lt;script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src/ace.js"&amp;gt;&amp;lt;/script&amp;gt;  
    &amp;lt;script src="https://code.jquery.com/jquery-3.6.4.min.js"&amp;gt;&amp;lt;/script&amp;gt;  
    &amp;lt;script type="text/javascript"&amp;gt; var csrftoken = getCookie('csrftoken');  

        function getCookie(name) {  
            var cookieValue = null;  
            if (document.cookie &amp;amp;&amp;amp; document.cookie !== '') {  
                var cookies = document.cookie.split(';');  
                for (var i = 0; i &amp;lt; cookies.length; i++) {  
                    var cookie = cookies[i].trim();  
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {  
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
                        break;  
                    }  
                }  
            }  
            return cookieValue;  
        }  

        // Function to get the current time of day  
        function getTimeOfDay() {  
            var now = new Date();  
            var hours = now.getHours();  

            if (hours &amp;gt;= 5 &amp;amp;&amp;amp; hours &amp;lt; 12) {  
                return "Good morning, ready for some Python?";  
            } else if (hours &amp;gt;= 12 &amp;amp;&amp;amp; hours &amp;lt; 18) {  
                return "Good afternoon, ready for some Python?";  
            } else {  
                return "Good evening , ready for some Python?";  
            }  
        }  

        // Set the salutation based on the time of day  
        var salutation = getTimeOfDay();  
        document.addEventListener('DOMContentLoaded', function () {  
            document.getElementById('salutation').innerText = salutation;  
        }); &amp;lt;/script&amp;gt;  
    &amp;lt;style&amp;gt; body {  
            font-family: 'Arial', sans-serif;  
            background-color: #f7f7f7;  
            margin: 0;  
            padding: 0;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            height: 100vh;  
        }  

        h1, h2, h3 {  
            color: #333;  
            margin-bottom: 10px;  
        }  

        h1{  
            text-decoration: underline;  
            text-decoration-color: #2ecc71;  
        }  

        h2#salutation {  
            font-size: 24px;  
            color: #2ecc71;  
            text-align: center;  
        }  

        #editor {  
            height: 500px;  
            width: 100%;  
            max-width: 600px;  
            margin-bottom: 20px;  
        }  

        button {  
            padding: 10px;  
            font-size: 16px;  
            background-color: #3498db;  
            color: #fff;  
            border: none;  
            cursor: pointer;  
            left:0;  
            padding: 10px;  
            margin-bottom: 10px;  

        }  

        #outputArea {  
            background-color: #ecf0f1;  
            padding: 20px;  
            border-radius: 8px;  
            width: 100%;  
            max-width: 600px;  
        }  

        #output {  
            white-space: pre-wrap;  
        } &amp;lt;/style&amp;gt;  
&amp;lt;/head&amp;gt;  
&amp;lt;body&amp;gt;  
    &amp;lt;h1&amp;gt;Python Code Editor&amp;lt;/h1&amp;gt;  

    &amp;lt;h2 id="salutation"&amp;gt;&amp;lt;/h2&amp;gt;  

    &amp;lt;div id="editor"&amp;gt;&amp;lt;/div&amp;gt;  

    &amp;lt;button onclick="runCode()"&amp;gt;Run&amp;lt;/button&amp;gt;  

    &amp;lt;div id="outputArea"&amp;gt;  
        &amp;lt;h3&amp;gt;Output:&amp;lt;/h3&amp;gt;  
        &amp;lt;pre id="output"&amp;gt;&amp;lt;/pre&amp;gt;  
    &amp;lt;/div&amp;gt;  

    &amp;lt;script&amp;gt; // Initialize Ace code editor  
        var editor = ace.edit("editor");  
        editor.setTheme("ace/theme/monokai");  
        editor.getSession().setMode("ace/mode/python");  



        editor.setFontSize("16px");  
        // Function to run the code in the Ace editor  
        function runCode() {  
            var code = editor.getValue();  

            // Make an AJAX request to the Django server for code execution  
            $.ajax({  
                type: "POST",  
                url: "/run_code/", // URL of your Django view  
                headers: {  
                    'X-CSRFToken': csrftoken  // Include CSRF token in the request header  
                },  
                data: {  
                    code: code,  
                    language: 'python' // Fixed to Python  
                },  
                success: function(data) {  
                    if (data.result) {  
                        document.getElementById("output").innerText = data.result;  
                    } else {  
                        document.getElementById("output").innerText = data.error;  
                    }  
                },  
                error: function() {  
                    document.getElementById("output").innerText = "Error communicating with the server.";  
                }  
            });  
        } &amp;lt;/script&amp;gt;  
&amp;lt;/body&amp;gt;  
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above code starts off with a JavaScript function that handles user salutations , based on the time of the day they are using the editor. Next, there is both CSS and HTML code that handles the Ace code editor structure and styling. We then incorporate a simple JavaScript script which retrieves the Python code from the editor, sends an AJAX (Asynchronous JavaScript and XML) request to the Django server (&lt;code&gt;/run_code/&lt;/code&gt;), and handles the server's response. The server response is then displayed in the designated output area (&lt;code&gt;#output&lt;/code&gt;) , if the request was successful, or an error is otherwise.&lt;/p&gt;

&lt;p&gt;Execute the command below to show what your front-end looks like&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;python3 manage.py runserver
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your server should display an editor similar to the one below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6nawm7bz7caghbtoupsb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6nawm7bz7caghbtoupsb.png" width="617" height="617"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Code editor server-side (Django back-end)
&lt;/h1&gt;

&lt;p&gt;To make the above code editor functional, follow the steps below to build its back-end.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1:&lt;/strong&gt; Inside the apps’  &lt;code&gt;views.py&lt;/code&gt;, add the code below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from django.shortcuts import render  
from django.http import JsonResponse  
from django.views.decorators.csrf import csrf_exempt  
import subprocess  


# Create your views here.  
def home(request):  
    return render(request, 'main.html')  


@csrf_exempt   
def run_code(request):  
    if request.method == 'POST':  
        try:  
            code = request.POST.get('code', '')  
            language = request.POST.get('language', '')  

            if language == 'python':  
                result = run_python_code(code)  
                       else:  
                result = "Language not supported for execution."  

            return JsonResponse({'result': result})  

        except Exception as e:  
            return JsonResponse({'error': str(e)})  

    return JsonResponse({'error': 'Invalid request method'})  

# Functions for python code execution  
def run_python_code(code):  
    try:  
        result = subprocess.check_output(['python3', '-c', code], text=True, timeout=5)  
        return result  
    except subprocess.CalledProcessError as e:  
        return f"Error: {e}"  

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above view handles the back-end functionalities by checking whether the code you entered follows Python syntax, then provides the appropriate JsonResponse based on the condition. If the code follows the correct Python syntax, it is then executed and the ouput is displayed in the editor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2:&lt;/strong&gt; Next, in the apps’  &lt;code&gt;urls.py&lt;/code&gt;, register the url path for the newly created view, as shown below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from django.urls import path  
from . import views  
from django.conf import settings  
from django.conf.urls.static import static  

urlpatterns = [  
    path('', views.home, name='home'),   
    path("run_code/", views.run_code, name='run_code')   

]  

if settings.DEBUG:  
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Note: The same&lt;/em&gt; &lt;code&gt;_url_&lt;/code&gt;&lt;em&gt;path, (&lt;/em&gt;&lt;code&gt;_/run_code/_&lt;/code&gt;&lt;em&gt;) , was used in the html template.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Having done all this, your code editor should now be able to properly execute python code.&lt;/p&gt;

</description>
      <category>django</category>
      <category>python</category>
      <category>codeeditor</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
