
<h4>A crash course on using Leaflet Maps in NextJS</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vVM13L6I1UGekROEMx8gpw.jpeg"></figure><p><em>Originally published on my </em><a href="https://tomisin.dev/blog"><em>blog</em></a><em>.</em></p>
<h3>Installation</h3>
<ol>
<li>First, install the leaflet library and its React wrapper with the following command:<br>npm install leaflet react-leaflet</li>
<li>(For TypeScript projects) Install the types for the leaflet library<br>npm install -D @types/leaflet</li>
<li>Install a library containing the default icons (icons might not display properly if this step is omitted)<br>npm install leaflet-defaulticon-compatibility</li>
</ol>
<h3>Usage</h3>
<h4>1. Define your Component</h4>
<p>In a component outside the page where you wish to display the map, create and export a map component similar to this:</p>
<pre>// src/components/Map.tsx<br>import { MapContainer, Marker, TileLayer, Tooltip } from "react-leaflet"<br>import "leaflet/dist/leaflet.css"<br>import "leaflet-defaulticon-compatibility"<br>import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"<br><br>export default function MyMap(props: any) {<br>  const { position, zoom } = props<br><br>  return &lt;MapContainer center={position} zoom={zoom} scrollWheelZoom={false}&gt;<br>    &lt;TileLayer<br>      attribution='&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'<br>      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"<br>    /&gt;<br>    &lt;Marker position={position}&gt;<br>      &lt;Popup&gt;<br>        A pretty CSS3 popup. &lt;br /&gt; Easily customizable.<br>      &lt;/Popup&gt;<br>    &lt;/Marker&gt;<br>  &lt;/MapContainer&gt;<br>}</pre>
<h4>2. Dynamically import your Component</h4>
<p>Next, you’ll need to import your component into your page dynamically. This would eliminate the need to perform Server-Side Rendering (SSR), thereby walking around the compatibility issues that LeafletJS has with SSR.</p>
<pre>export default function MyPage() {<br>  const Map = useMemo(() =&gt; dynamic(<br>    () =&gt; import('@/components/Map'),<br>    { <br>      loading: () =&gt; &lt;p&gt;A map is loading&lt;/p&gt;,<br>      ssr: false<br>    }<br>  ), [])<br><br>  return &lt;div&gt;<br>    &lt;Map /&gt;<br>  &lt;/div&gt;<br>}</pre>
<p>There we have it!</p>
<p>If you found this article helpful, do clap, share and subscribe!</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=85f86fccc10c" width="1" height="1" alt="">


A crash course on using Leaflet Maps in NextJS

Displaying a Leaflet Map in NextJS


<h4>Learn how this module can help you get richer search results, more easily, than Python’s built-in “filter” method</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bs9ox6xXQXHYFkU8gw4l-A.jpeg"></figure><p><em>Originally published on my </em><a href="http://tomisin.dev/blog"><em>blog</em></a><em>.</em></p>
<p>For the umpteenth time, you are having to implement a search functionality in your Python application. As a no-brainer, you turn to Python’s filter method.</p>
<p>Half the time, the filter method rightly serves you just fine.</p>
<p>But, as you increase the requirements of your “search” function, you realise that you need to put substantial effort into improving the robustness of the filter function’s results.</p>
<p>For instance, you’re looking to return more “interesting” (<a href="https://redis.com/blog/what-is-fuzzy-matching/">fuzzy</a>) results, say your application gives users a list of songs matching their search input, and you want the result to include songs which closely match the input, permitting spelling errors, <a href="https://pypi.org/project/huntela/"><strong>Huntela</strong></a> is made for you.</p>
<h3>What is Huntela</h3>
<p><a href="https://pypi.org/project/huntela/"><strong>Huntela</strong></a> is a module that contains several methods that could help you get robust search results. A simple illustration</p>
<pre>&gt;&gt;&gt; import huntela<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; huntela.fuzzy_search(term='app', items=['app', 'apps', 'phone'])<br>[<br>    {'confidence': 1, 'index': 0, 'value': 'app'},<br>    {'confidence': 0.8, 'index': 1, 'value': 'apps'}<br>]</pre>
<p>Right off the bat, we notice some…</p>
<h3>Advantages of Huntela over Python’s filter Method</h3>
<ol>
<li>
<strong>Fuzzy Matching: </strong>The fuzzy_search function uses a character comparison method that includes close matches in its results, allowing for fuzzy matching and increased flexibility in searching for similar or related terms.</li>
<li>
<strong>Confidence Values: </strong>The fuzzy_search function returns results with a confidence score that indicates the level of similarity between the search term and the matched item, providing a more precise indication of how well the search term matches the desired results.</li>
<li>
<strong>Index Values: </strong>The fuzzy_search function method also returns the index of each matching item in the original list, which can be useful for further processing.</li>
<li>
<strong>Lots of Utility Search Functions: </strong>Now, guess what! The same juiciness of the result of the fuzzy_search function applies to several other search functions the module provides. These include binary_search, search_for_least_frequent_items, search_for_most_frequent_items.</li>
<li>
<strong>Consistent Interfaces: </strong>The fuzzy_search method returns a list of Result objects representing the search results, which provide additional information such as the confidence value and index.</li>
</ol>
<h3>Ready to give Huntela a try?</h3>
<p>Open up your favourite command line, and type in:</p>
<pre>pip install huntela</pre>
<h3>Practical Examples With the Huntela Library</h3>
<h4>Autocorrect &amp; Text Suggestion Feature</h4>
<p>You are tasked with returning words which closely match a user’s input. This would be a great use-case for <a href="https://pypi.org/project/huntela/"><strong>Huntela</strong></a>.</p>
<pre>&gt;&gt;&gt; import huntela<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; user_input = input("Type in a word: ") # hellu<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; vocab = ["hello", "run", "jump", ...]<br>&gt;&gt;&gt; results = huntela.fuzzy_search(user_input, vocab)<br>[<br>    {"confidence": 0.8, "index": 0, "value": "hello"}<br>]<br>&gt;&gt;&gt; print(f"Did you mean: '{results[0]['value']}'?")<br>Did you mean 'hello'?</pre>
<h4><strong>Improving User Search Experience in a Shopping Site</strong></h4>
<p>Suppose you are assigned to fetch products from an e-commerce platform that closely resemble the user’s input in a search query. You can achieve this by using the fuzzy_search function of the <a href="https://pypi.org/project/huntela/"><strong>Huntela</strong></a><strong> </strong>module.</p>
<pre>&gt;&gt;&gt; import huntela<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; user_input = input("What would you like to buy? ") # t-shirt<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; store = [<br>    {"name": "Headphones", "price": 59.99},<br>    {"name": "Shirt", "price": 19.99}<br>]<br>&gt;&gt;&gt; results = huntela.fuzzy_search(user_input, store, key='name')<br>[<br>    {"confidence": 0.8, "index": 1, "value": "Shirt"}<br>]</pre>
<h4>Searching for a specific value in a sorted list</h4>
<p>Suppose you have a sorted list of integers, and you want to find if a specific value exists in the list. You can use binary search to do this efficiently.</p>
<pre>&gt;&gt;&gt; import huntela<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; results = huntela.binary_search(term=5, items=[1, 3, 4, 5, 7, 9, 11])<br>[<br>    {"confidence": 1, "index": 3, "value": 5}<br>]</pre>
<h4>Analytics</h4>
<p>You could also use this function to analyze large datasets and find the most and least frequent values. For example, you could use this function to find the most common search queries on a website or the most popular products purchased by customers.</p>
<pre>&gt;&gt;&gt; import huntela<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; site_visitor_ids = [101, 102, 103, 101, 105, 103, 101, 102, 104]<br>&gt;&gt;&gt; <br>&gt;&gt;&gt; most_frequent = huntela.search_for_most_frequent_items(2, user_ids)<br>[   <br>    {'confidence': 1, 'index': [0, 3, 6], 'value': 101},<br>    {'confidence': 1, 'index': [1, 7], 'value': 102},<br>    {'confidence': 1, 'index': [2, 5], 'value': 103}<br>]</pre>
<h3>Conclusion</h3>
<p>If you’re looking to get more robust and flexible search results than Python’s built-in filter method can provide, <a href="https://pypi.org/project/huntela/"><strong>Huntela</strong></a> is definitely worth a try.</p>
<p>With its fuzzy matching, confidence values, and index values, <a href="https://pypi.org/project/huntela/"><strong>Huntela</strong></a> can help you implement features like autocorrect and text suggestion, improve user search experiences in an e-commerce platform, and efficiently search sorted lists.</p>
<p>Additionally, <a href="https://pypi.org/project/huntela/"><strong>Huntela’s</strong></a> other search functions like searching for most and least frequent items provide valuable utility for analysing large datasets. The module is easy to use and consistent in its interfaces, making it a powerful alternative to the filter method.</p>
<p>So why not give it a try and see how it can enhance your Python search capabilities?</p>
<h4>Ready to give Huntela a try?</h4>
<p>Open up your favourite command line, and type in:</p>
<pre>pip install huntela</pre>
<p>If you found this article helpful, clap, share and subscribe.</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5e95a80f166c" width="1" height="1" alt="">


Learn how this module can help you get richer search results, more easily, than Python’s built-in “filter” method

Maximize Your Python Search Capabilities with Huntela


<h4>Learn how to sign and unsigned content in few lines of Django code</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*PDex7-kDSvyQP-u7"><figcaption>Photo by <a href="https://unsplash.com/@cdr6934?utm_source=medium&amp;utm_medium=referral">Chris Ried</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Initially published on my <a href="http://tomisin.dev/blog">blog</a>.</p>
<p>In today’s digital landscape, data security has become a crucial aspect of any application.</p>
<p>With the increasing need to protect sensitive information, encryption has emerged as a vital tool for ensuring the safety and privacy of data. This data can include a wide range of sensitive information, such as invite codes, email addresses, usernames, and other personal information that should not be shared with users in plain text.</p>
<p>The use of encryption allows us to scramble this data, making it unreadable to anyone without the appropriate <strong>encryption key</strong>. This added layer of security is essential for maintaining the trust and confidence of our users, as well as for complying with various legal and regulatory requirements for data protection. As a result, encryption has become an integral part of modern application development, and its use is only expected to continue growing in the future.</p>
<p>Luckily, Django provides a range of utility functions to enable us encrypt and decrypt data of several types — str, int, list, dictionary.</p>
<h3>How to generate a secret key in Django</h3>
<p>Django provides a utility for generating secret keys. It</p>
<pre>from django.core.management.utils import get_random_secret_key<br>print(get_random_secret_key())</pre>
<h3>How to Encrypt and Decrypt Data in Django</h3>
<h4>A. Signer Class</h4>
<p>A module in Django called signing has a Signer utility class. The class gives us the chance to supply any encryption key we want, and then use it to encrypt supported datatypes.</p>
<pre>from django.core import signing<br><br><br>def encrypt(raw_str: str, encryption_key: str) -&gt; str:<br>    # takes in any encryption key (i.e. salt), and uses it to encrypt some object<br>    signer = signing.Signer(salt=encryption_key)<br>    return signer.sign_object(raw_str)<br><br><br>def decrypt(encoded_str: str, encryption_key: str) -&gt; str:<br>    # takes in any encryption key (i.e. salt), and uses it to decrypt a token<br>    signer = signing.Signer(salt=encryption_key)<br>    try:<br>        return signer.unsign_object(encoded_str)<br>    except signing.BadSignature:<br>        raise ValueError(f"Unable to decode hash {encoded_str}")</pre>
<h4>B. singing.dumps() and signing.loads()</h4>
<p>Django further abstracts encryption by providing two methods dumps and loads, which internally pick the SECRET_KEY supplied in the settings.py file, and then perform encryption operations with the specified encryption key.</p>
<pre>from django.core import signing<br><br><br>def encrypt(raw_str: str):<br>    # Picks the `SECRET_KEY` provided in settings.py<br>    return signing.dumps(raw_str)<br><br><br>def decrypt(raw_str: str):<br>    # Picks the `SECRET_KEY` provided in settings.py<br>    return signing.loads(raw_str)</pre>
<p>There we have it, signing and unsigning in Django simplified.</p>
<p><em>Till next time, my guy!</em></p>
<p><strong>Don’t forget to clap, share and subscribe, if you found this article helpful.</strong></p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=e86fe7026096" width="1" height="1" alt="">


Learn how to sign and unsigned content in few lines of Django code

Simple Signing and Unsigning in Django


<h4>Understand the basics of encryption and learn how to protect your sensitive information with this comprehensive guide written in plain English.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*iviywtlq65ScgY7J"><figcaption>Photo by <a href="https://unsplash.com/@towfiqu999999?utm_source=medium&amp;utm_medium=referral">Towfiqu barbhuiya</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Objectives</h3>
<p>After reading this article, you will be able to:</p>
<ol>
<li>Define what encryption is in computing</li>
<li>Understand why encryption is important</li>
<li>Know how encryption works</li>
<li>Be aware of common different encryption techniques.</li>
</ol>
<h3>Background</h3>
<p>In the realm of cyber security, encryption plays a crucial role by converting data from its original, readable format into a highly secure, encoded format.</p>
<p>This process ensures that the data cannot be accessed or understood by unauthorised individuals, as the encrypted information can only be read and processed after it has undergone the decryption process.</p>
<p><strong>Encryption</strong> acts as a shield that protects sensitive and confidential information from falling into the wrong hands, thereby preventing data breaches and cyber attacks.</p>
<h3>How Does Encryption Work</h3>
<p>Data transmitted over the public internet is vulnerable to interception or theft. Encryption in network security can help to reduce this risk by using specialised software or hardware.</p>
<p>Encryption involves converting human-readable plaintext into incomprehensible text, known as cipher text, to prevent unauthorised access to sensitive information.</p>
<p>The encryption process uses a cryptographic key, a set of mathematical values agreed upon by both the sender and recipient. The recipient uses the key to decrypt the data and turn it back into readable plaintext. The complexity of the cryptographic key directly affects the security of the encryption, as more complex keys are more difficult to decrypt via brute force attacks.</p>
<h3>Encryption Techniques</h3>
<p>The two widely used types of encryption methods are symmetric and asymmetric encryption. These names differentiate based on the usage of a single key for both encrypting and decrypting the data or different keys for encryption and decryption respectively.</p>
<h4>A. Symmetric Encryption Keys</h4>
<p>This method of encryption is commonly referred to as private key encryption. In this technique, the key utilised for encryption is the same one used for decryption, making it an ideal solution for single users and closed systems.</p>
<h4>B. Asymmetric Encryption Keys</h4>
<p>Asymmetric encryption uses two distinct keys, a public key and a private key, that are connected through mathematical means. These keys are large numbers that are associated with each other, but are not identical, hence the term asymmetric. The owner of the encryption keeps the private key confidential, while the public key is either distributed to authorized recipients or made publicly accessible.</p>
<h4>Symmetric Encryption vs Asymmetric Encryption</h4>
<ol>
<li>Symmetric (private key) encryption is faster compared to the asymmetric encryption method.</li>
<li>Symmetric encryption is typically used for bulk data encryption, while asymmetric encryption is used for secure communication, such as digital signatures and secure key exchange.</li>
<li>Symmetric encryption provides strong security for the encryption of data, but the distribution of the key can be a security risk. Asymmetric encryption provides a higher level of security, as the private key remains confidential and is never transmitted over the internet.</li>
</ol>
<p>In summary, symmetric and asymmetric encryption each have their own strengths and weaknesses, and the choice between the two depends on the specific use case and the level of security required.</p>
<h3>Examples of Encryption Algorithms</h3>
<h4>DES Encryption (obsolete)</h4>
<p>The Data Encryption Standard (DES) is a symmetric encryption algorithm that has since become obsolete. It is no longer considered secure enough for modern applications and has been replaced by more advanced encryption algorithms.</p>
<h4>3DES Encryption</h4>
<p>Triple Data Encryption Standard (3DES) is a symmetric encryption algorithm that involves three iterations of the DES encryption process, hence the name “triple.” Although it is gradually being replaced by more advanced algorithms, 3DES remains a reliable encryption solution for financial services and other industries in hardware form.</p>
<h4>AES Encryption</h4>
<p>The Advanced Encryption Standard (AES) was created to replace the outdated Data Encryption Standard (DES). This encryption algorithm is widely used in various applications, such as messaging apps like Signal and WhatsApp, as well as the file compression software WinZip.</p>
<h4>RSA Encryption</h4>
<p>RSA, an acronym for Rivest, Shamir, and Adleman, is an asymmetric encryption algorithm named after the mathematicians who first described it. RSA encryption is widely used for secure data transmission due to its long key length. As an asymmetric algorithm, RSA uses a pair of keys, a public key for encryption and a private key for decryption.</p>
<h4>RC4 Encryption</h4>
<p>The RC4 encryption algorithm is utilised in the WEP and WPA protocols, which are popular encryption methods utilised in wireless routers.</p>
<h3>End-to-End Ecryption</h3>
<p>End-to-end encryption is a common term when discussing data encryption. It refers to systems where only the two communicating parties, who both have keys, can decrypt the conversation. Even the service provider is unable to access end-to-end encrypted data.</p>
<p>Resetting end-to-end encrypted data can be necessary in certain cases. For example, if you forget your password on an iPhone, you may need to reset the device to regain access. However, doing so will make all previously encrypted backup files inaccessible. But you can back up your iOS device again using iTunes and set a new password for the backed up data.</p>
<p>End-to-end encryption is a crucial security feature for users who prioritize privacy. By only allowing the users to access the encrypted data, it ensures that even the service provider cannot access it. This makes it ideal for secure communication and the protection of sensitive information.</p>
<p>It provides an added layer of security to user data. While resetting end-to-end encrypted data may be necessary in certain cases, it is important to keep in mind that previously encrypted backup files will be lost. However, this can be mitigated by backing up the device again and setting a new password for the backed up data.</p>
<h3>Signing vs Encryption vs Hashing</h3>
<h4>Signing</h4>
<ol>
<li>Involves attaching a digital signature to an electronic document to verify its authenticity and integrity</li>
<li>Utilizes public key cryptography to sign and verify signatures</li>
<li>Can prove that the sender of a message is who they claim to be and that the message hasn’t been tampered with</li>
<li>Typically used for contracts, legal documents, and sensitive business communications</li>
</ol>
<p>PS: To learn how to sign data in Django, read this <a href="https://tomisin.dev/blog/simple-signing-and-unsigning-in-django">article</a> which simplifies it.</p>
<h4>Encryption</h4>
<ol>
<li>The process of converting plain text into unreadable (encrypted) text to protect its confidentiality</li>
<li>Utilizes both a public and private key for encryption and decryption</li>
<li>The encrypted message can only be read by the person with the private key that corresponds to the public key used for encryption</li>
<li>Commonly used to protect sensitive information like credit card numbers, passwords, and personal data</li>
</ol>
<h4>Hashing</h4>
<ol>
<li>The process of generating a fixed-size string of characters (hash) from a message or data</li>
<li>The hash is unique to the original message and will change if even a single character in the message changes</li>
<li>Used to verify the integrity of data and to detect any changes made to it</li>
<li>Commonly used in data structures like hash tables and in digital signatures to verify that a message has not been altered in transit.</li>
</ol>
<p>Now that we know about encryption, let’s learn why it is important and why we should use it.</p>
<h3>Importance of Encryption</h3>
<ol>
<li>
<strong>Protects confidentiality</strong>: Encryption helps to ensure that sensitive information, such as financial data, personal information, and confidential business information, is protected from unauthorized access.</li>
<li>
<strong>Prevents unauthorized access</strong>: Encrypted data can only be read by individuals with the proper decryption key, preventing unauthorized access to the information.</li>
<li>
<strong>Increases security in transit</strong>: Encrypting data when it is being transmitted over networks, such as the internet, helps to ensure that the information is secure while in transit and cannot be intercepted by unauthorized third parties.</li>
<li>
<strong>Comply with regulations</strong>: Encryption is often required by law and industry regulations, such as the EU’s General Data Protection Regulation (GDPR) and the Payment Card Industry Data Security Standard (PCI DSS), to help protect sensitive information.</li>
<li>
<strong>Protects against hacking and cyberattacks</strong>: Encryption helps to protect data against hacking and cyberattacks by making it more difficult for cybercriminals to access and use sensitive information.</li>
<li>
<strong>Supports privacy</strong>: Encryption helps to support privacy by giving individuals and organisations control over their personal information and who has access to it.</li>
</ol>
<p><em>That’s all for this article, my guy! Till next time.</em> ??</p>
<p>Don’t forget to clap, share and subscribe.</p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d33deea5f28a" width="1" height="1" alt="">


Understand the basics of encryption and learn how to protect your sensitive information with this comprehensive guide written in plain English.

Encryption in Plain English


<h4>Learn how Django models could implement soft delete, without modifying the interfaces and contracts of models and querysets.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*0jvWLbXENhbH5Q2b"><figcaption>Photo by <a href="https://unsplash.com/fr/@markuswinkler?utm_source=medium&amp;utm_medium=referral">Markus Winkler</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p><em>Originally published on my </em><a href="https://tomisin.dev/blog"><em>blog</em></a><em>.</em></p>
<p>In contemporary architecture, or by design requirements, we often have the need to keep certain records even after they’ve been “deleted” by the user — that’s where soft deletion comes in.</p>
<p>In this article, we would learn how to implement soft delete, while our application maintains its Django-ness (for lack of a better word), and we can still maintain the same interface with our model objects in the same way as we would, if we had hard deletion in place.</p>
<h3>What is Soft Delete</h3>
<p>Soft delete is the process of deleting records in such a way that it is still present in the database while made unavailable to the user. It involves using a flag to mark the record as unavailable, rather than deleting the record from the database.</p>
<h3>Benefits of Soft Delete</h3>
<ol>
<li>Records are easier to restore.</li>
<li>Soft delete operations are faster because we run an UPDATE command in the database. For hard delete, we will run a DELETE command which is generally slower, especially when there are related records across tables.</li>
<li>It keeps are related records in-place.</li>
<li>It is the safer option, in cases where users may need to retrieve deleted information.</li>
</ol>
<h3>Cons of Soft Delete</h3>
<ol>
<li>Added complexity of filtering out records that have been flagged as deleted.</li>
<li>Unique constraints need to be refactored to include the column representing the delete flag, so records which have been soft deleted could be recreated.</li>
<li>In some cases, records might need some unique implementations when soft deleted. For example, when soft deleting card information or payment methods, we might need to clear some sensitive fields like PAN or CVV.</li>
</ol>
<p>Some of these fetch queries will start to look like</p>
<pre>SELECT * FROM users WHERE is_deleted=false;</pre>
<p>Unique constraints would also start to look this, with soft deletion in place:</p>
<pre>CREATE UNIQUE INDEX "users_unique" ON users(is_deleted, email) WHERE is_deleted=false;</pre>
<h3>Implementing Soft Delete in Django</h3>
<p>When implementing soft delete in Django, the first thing that’s required is a base model. This would reduce the complexity and help eliminate the aforementioned cons, as we wouldn’t need to duplicate the soft delete logic in all our models. All we would need to do, is to extend from this BaseModel.</p>
<pre>class BaseModel(models.Model):<br>    class Meta:<br>        abstract = True<br><br>    # common fields go here</pre>
<p>The first thing we want to add to our base model, is the delete flag. The is_deleted field will inform us about the availability of the record.</p>
<pre>class BaseModel(models.Model):<br>    # ...omitted for brevity...<br><br>    is_deleted = models.BooleanField(default=False)</pre>
<p>Next, we override the delete method of the model. So, we can change the default behaviour of our model’s delete from hard deletion to soft deletion.</p>
<pre>class BaseModel(models.Model):<br>    # ...omitted for brevity...    <br><br>    def delete(self):<br>        """Mark the record as deleted instead of deleting it""" <br><br>        self.is_deleted = True<br>        self.save()</pre>
<p>With this piece of code in place, we could soft delete records as we would normally hard delete records, and maintain a Django-ic codebase.</p>
<pre>class User(BaseModel):<br>    class Meta:<br>        unique_together = ['email', 'is_deleted']<br><br>    name = models.CharField(max_length=24)<br>    email = models.EmailField()<br><br>new_user = User(name="Bolaji", email="user.test@example.com")<br>new_user.save()<br><br>new_user.delete()<br><br>print(new_user.is_deleted)<br># True</pre>
<p>Now that we can soft delete easily, we have to make sure that our query results never actually include any deleted record. We do so by creating a custom manager which filters out the deleted.</p>
<pre>from django.db.models import Manager, QuerySet<br><br><br>class AppManager(Manager):<br>    def get_queryset(self):<br>        return QuerySet(self.model, using=self._db).exclude(is_deleted=True)<br><br><br>class BaseModel(model.Model):<br>    # ...omitted for brevity...<br><br>    objects = AppManager()</pre>
<p>With this in place, we can replace the default objects field of our Model with our AppManager. This would ensure that when we query using the familiar syntax, we are getting expected</p>
<pre>class User(BaseModel):<br>    # ...omitted for brevity...<br><br><br>user.objects.filter(...)<br>user.objects.all()<br># excludes records flagged as deleted.</pre>
<p>Wowza! Now, you can soft delete records while maintaining Django-ic code. Or, maybe there’s one more thing.</p>
<p>It’s possible to invoke delete on a queryset, instead of invoking it on an object. We have already catered for the latter my having a custom delete method in our BaseModel. To cater for the former scenario, we can make a custom queryset class.</p>
<pre>from django.db.models import Manager, QuerySet<br><br><br>class AppQuerySet(QuerySet):<br>    def delete(self):<br>        self.update(is_deleted=True)<br><br><br>class AppManager(Manager):<br>    def get_queryset(self):<br>        return AppQuerySet(self.model, using=self._db).exclude(is_deleted=True)</pre>
<p>Putting this altogether, we have:</p>
<pre>from django.db.models import Manager, QuerySet<br><br><br>class AppQuerySet(QuerySet):<br>    def delete(self):<br>        self.update(is_deleted=True)<br><br><br>class AppManager(Manager):<br>    def get_queryset(self):<br>        return AppQuerySet(self.model, using=self._db).exclude(is_deleted=True)<br><br><br>class BaseModel(models.Model):<br>    class Meta:<br>        abstract = True<br><br>    is_deleted = models.BooleanField(default=False)<br><br>    def delete(self):<br>        self.status = DELETED<br>        self.save()<br><br><br># Sample model<br>class Post(BaseModel):<br>    content = models.CharField(max_length=140)</pre>
<p>Finally, you have soft delete implemented, and you didn’t have to change your contract. Thanks for reading, buddy!</p>
<p>Leave a clap, share this article and do subscribe, if you found this article helpful.</p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5c0f95da7f0d" width="1" height="1" alt="">


Learn how Django models could implement soft delete, without modifying the interfaces and contracts of models and querysets.

Implementing Soft Delete in Django: An Intuitive Guide


<h4>Discover websites, tools and resources which would ease the design process in web development, and make you a self-sufficient designer-developer.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*s9Fvn5oZWwgGrmmZ"><figcaption>Photo by <a href="https://unsplash.com/@danielkorpai?utm_source=medium&amp;utm_medium=referral">Daniel Korpai</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>As frontend developers, we occasionally share the need to introduce some unique design elements into our projects. This could get especially tedious, as we need to keep up with the ever-changing design trends. We get stuck, sometimes, within the constraints of the framework or UI library we’re using in the project.</p>
<p>In this article, we will look at some tools which could make it easier to introduce unique design elements into our design, and be self-sufficient developers, with modern design trends.</p>
<p>We will explore tools ranging from sources for royalty-free photos and videos, to blob and gradient generators.</p>
<h3>Free Photos Sources</h3>
<ol><li>
<a href="https://unsplash.com/">Unsplash</a>: Unsplash has a large collection of freely-usable images that are uploaded by photographers from all over the world. It also has an API should you wish to integrate with it on the frontend, or pull images from it in your backend service. Unsplash is so incredibly vast, that even Medium uses it in its editor.</li></ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eBIkxTmMVEwsQnratHjQxg.png"></figure><p>2. <a href="https://www.pexels.com/">Pexels</a>: This is another great source of royalty-free stock photos, royalty free images &amp; videos shared by creators. It also has an API for searching for images and videos.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FA-zfALaPnmAyDsVyBOm0A.png"></figure><p>3. <a href="https://shotstash.com/">Shotstash</a>: If you run out of choices with the aforementioned sites, you could always explore free HD stock pictures for creative professionals. It has a pretty robust collection, though, not as polished as Unsplash or Pexels.</p>
<h3>Best Blob Generators</h3>
<ol><li>
<a href="https://haikei.app/">Haikei</a>: An all-around generator for making blobs, blurry gradients, low poly, waves and much more. If you’re ever lost on ideas for making that landing page pop, this tool is for you. You could pick from one of the template settings, randomise them, or even customise them to your taste.</li></ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pPAMTm0aFgEiCKsIibG8NQ.png"></figure><p>2. <a href="https://blobmaker.app/">Blobmaker</a>: This is a more simplistic solution for generating blobs. The interface allows for generating random blobs and/or tweaking them to our taste. Users could then copy out the SVG of the resulting blob, or download the file and use them in projects.</p>
<p>3. <a href="https://getwaves.io/">GetWaves</a>: This tool generates random waves you could utilise to spice the bottom of your divs and sections. GetWaves is totally free! You could generate random waves, tune the generator to the precise waviness you wish, change the colour and download the resulting blob as an SVG or PNG.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*paPdw7yGDZirmBUHk96pXQ.png"></figure><h3>Best Gradient Generators</h3>
<ol>
<li>
<a href="https://piggment.co/">Piggment.co</a>: You could browse from a ton of carefully curated gradients, get the colours of the selected gradient, view related gradients, or even customise and tailor the gradients to the look and feel of your application.</li>
<li>
<a href="http://coolors.co/">Coolors.co</a>: This is my personal favourite gradient generator. Though it has a paid offering, its free-tier is still quite generous enough for users to generate smooth gradients. Its user-friendly and intuitive interface allows users alter and experiment with several shades/hues of the colours, and also allows users to save the gradient generated.</li>
<li>
<a href="https://cssgradient.io/">CSS Gradient</a>: You could explore presets and popular gradients on CSS Gradients, as well as guides on how to apply gradients. There is also an interface for you to tweak the gradient to your taste.</li>
<li>
<a href="https://uigradients.com/#AquaMarine">UI Gradients</a>: This is majorly a large collection of gradients you could leverage for your next big project.</li>
</ol>
<p>Gradients have a way of catching the eye. If you want to make that CTA be more attractive and memorable, you might want to consider using a gradient.</p>
<h3>Top Illustrations Generator</h3>
<ol><li>
<a href="https://drawkit.com/">Drawkit</a>: Beautiful vector illustrations. Free and premium vector SVG illustrations for you to use on your next project. Vector illustrations, icons, 3D illustrations, animation, and more. No attribution required!</li></ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ILniju-ImLoI4Am8J_sRPA.png"></figure><p>2. <a href="http://undraw.co/">unDraw</a>: The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products, and applications with your colour, for free.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*MgFtjtT3xfSyhb0X"></figure><p>3. <a href="http://icons8.com/">Icons8</a>: Get free icons, photographs, clipart illustrations, and music design elements for free. All the assets are made by designers. There is a paid tier to get higher resolution icons and assets, but the free tier is generous enough.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*r9vh6hGMceBYakce"></figure><p>4. <a href="http://blush.design/">Blush</a>: A digital playground for you to make your own free illustrations, tailored to the feel of your designs. Play with fully customisable graphics made by artists across the globe.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*DnPEFkRqPOo8GFs5"></figure><p>5. <a href="http://storyset.com/">Storyset</a>: Customise, animate and download illustrations for free. Edit and animate all our customisable illustrations to enhance your projects totally free.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*yewSEyIQtwA-J98a"></figure><h3>Best Colour Scheme Generators</h3>
<ol><li>
<a href="http://coolors.co/">Coolors.co</a>: This is my personal favourite colour scheme generator. Though it has a paid offering, its free-tier is still quite generous enough for users to generate colour schemes. Its user-friendly and intuitive interface allows users alter and experiment with several shades/hues of the. Coolors also allows users to save the schemes generated.</li></ol>
<h3>Miscellaneous</h3>
<ol>
<li>
<a href="http://animista.net/">Animista</a>: Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.</li>
<li>
<a href="https://neumorphism.io/">Neumorphism</a>: Generate CSS code for neumorphic designs. The project has provision for tweaking the look and feel of the neumorphic blob. You will definitely find this handy.</li>
<li>
<a href="https://ui.glass/generator/">Glassmorphism</a>: A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</li>
<li>
<a href="https://getcssscan.com/css-box-shadow-example">CSS Shadows</a>: A collection of box shadows for your next project. It features shadows from Dropbox, and other prominent tech organisations.</li>
</ol>
<p>Pin this, bookmark this, share this, and don’t forget to leave a clap (or many) if you found this article useful.</p>
<p><em>Till next time, amigo!</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=70d5a801a58e" width="1" height="1" alt="">


Discover websites, tools and resources which would ease the design process in web development, and make you a self-sufficient designer-developer.

Top Frontend UX/UI Tools 2022


<h4>A look into the hierarchy of log levels in Software Engineering. What they mean, as well as some practical use cases.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2-zjQaIsF4S8FtZV"><figcaption>Photo by <a href="https://unsplash.com/@cgower?utm_source=medium&amp;utm_medium=referral">Christopher Gower</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Monitoring is an essential part of quality software engineering. It helps us know if and when something goes wrong in our software.</p>
<p>In the case something goes wrong; if we know where to look, we can find out what is wrong; debugging and troubleshooting will become a hundred times easier — this is where logging comes in.</p>
<p>Every good programming language/framework has support for logging. If you’re reading this article, chances are, you wish to find out what log level to use when logging out certain information.</p>
<p>In this article, we’ll take a look at the entire hierarchy, learn what each level means, as well as some appropriate use-cases.</p>
<h3>Log Level Order</h3>
<ol>
<li><strong>Trace</strong></li>
<li><strong>Debug</strong></li>
<li><strong>Information</strong></li>
<li><strong>Warning</strong></li>
<li><strong>Error</strong></li>
<li>
<strong>Critical</strong> (or Fatal)</li>
</ol>
<h3>What Each Log Level Means</h3>
<p>Before delving further, it is important to know that an application will log out anything falling above, or matching the set loglevel.</p>
<h4>Trace</h4>
<p>This log level captures all the details about an application. Trace is mostly used to identify issues with a program. This level is ideal when you need to see what happened in your program or perhaps, identify what happened in a third-party library you used. Trace ideally shows every single step in an algorithmic process.</p>
<h4>Debug</h4>
<p>This level is a bit higher up the hierarchy than Trace. Think of this, as showing the result of some <strong>crucial </strong>computation. When something goes wrong, this is the level most developers will look, so be sure to log out the results of crucial computations and steps here. If something could potentially go wrong, a good practice, is to log out statements before and after the step, at Debug level.</p>
<h4>Information</h4>
<p>This is the standard log level. At this level, we generally give updates about state changes in an application. While it’s difficult to draw a fine line between Debug and Information levels, a good rule of thumb in deeming something fit for the Information level, is if they are not things to be worried about. A good fit for an information-level log, will be logging out a message, when a record is saved in a database, or when a request is received in an API Controller, or a response is returned.</p>
<h4>Warning</h4>
<p>This level is used to show when you have detected something not usual about the application, but at the same time is not an error, neither is it fatal to the program. This could include things like an out-of-date library, or a vulnerability with a package.</p>
<h4>Error</h4>
<p>At this level, developers will be able to view the exception messages their applications and programs encountered. As not all exceptions are fatal for a program, at this level, we want to log the non-fatal exceptions. Examples of this may include “ArgumentException”, “ValueException”, “NullPointerError”, etc.</p>
<h4><strong>Critical (or Fatal)</strong></h4>
<p>This is the highest log level. Here, all the developers would see, are the reasons an application or program exited unexpectedly. This may be when the operating system manually closes a program, or a user manually closes a program abruptly.</p>
<p><em>Till next time, compadre!</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8758bbbd0686" width="1" height="1" alt="">


A look into the hierarchy of log levels in Software Engineering. What they mean, as well as some practical use cases.

Log Level Hierarchy

<h4>A full walkthrough on creating your very first React library and publishing it on npm.</h4>
<figure><img alt="" src="https://images.unsplash.com/photo-1543966888-7c1dc482a810?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1806&q=80"></figure><p><em>Originally published on my </em><a href="https://tomisin.dev/blog"><em>blog</em></a><em>.</em></p>
<p>For the sake of reusability, and to dodge the dangers of repetition, we in the field of Software Engineering, have had to extract some code out to modules and scripts, which we could so easily reference across several projects and implementation. The nature of ReactJS is no different — especially with the advent of Components.</p>
<p>In this article, we will be walking through creating a simple React library, testing it with a sample project, and then publishing it on npm.</p>
<h3>Step 1 — Initial Setup</h3>
<p>You’ll only need to do this step once. If you have already created an npm account, and you are currently logged in to npm on your terminal, feel free to skip this step.</p>
<h4>Create an npm Account</h4>
<p>To create an npm account, you need to head to <a href="https://www.npmjs.com/signup">npm’s Signup Page</a>.</p>
<h4>Login to npm on Your Terminal</h4>
<p>Next, open your favourite terminal, and type in the following command:</p>
<pre>npm login</pre>
<p>Or, you could also use this command if you wish:</p>
<pre>npm adduser</pre>
<p>Thereafter, you will be prompted for your username, password and email address. There’ll also be a one-time password required, if you opted in for two-factor authentication.</p>
<p>If you’re successfully logged in and setup, you should see something like this. Now, you are set to create the library we wish to share with the world, or perhaps reuse within our private projects.</p>
<h3>Step 2 — Create a New React Library</h3>
<p>To create a React library, you can do one of two things. You could either leverage the pre-existing create-react-library spec to initialise your library. Or, you could create a vanilla npm project and then, install all the typical dependencies we’ll need to build a React project.</p>
<p>In this article, we’ll be exploring the first option. Navigate to your working directory, and run the following command:</p>
<pre>npx create-react-library &lt;LIBRARY_NAME&gt;</pre>
<p>Alternatively, you use npm init.</p>
<pre>npm init react-library &lt;LIBRARY_NAME&gt;</pre>
<blockquote>Side note: npx create-&lt;spec-name&gt;is a shorthand which we could substitute for npm init &lt;spec-name&gt; — which is executed under-the-hood as npm exec create-&lt;spec-name&gt; (ex. npx create-react-app is the same as npm init react-app)</blockquote>
<p>You’ll get a number of prompts. Ensure you select the following when prompted, as the rest could be changed easily in package.json</p>
<ol>
<li>
<strong>Package Manager</strong> &gt; yarn</li>
<li>
<strong>Template</strong> &gt; typescript</li>
</ol>
<blockquote>Side note: yarn does make the work easier along the way. For one, it makes versioning easier.</blockquote>
<p>This may take a couple of minutes. After which you should have a project that looks something like this:</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/243/1*1MjrARgpknBx-08wI_RIDQ.png"></figure><h3>Step 3 — Write Your Custom npm Library</h3>
<p>In typical NodeJS fashion, you would be working inside of the src directory. So, open up the src directory, and you’ll find the index.tsx — which will be the API the user of the package will interact with.</p>
<p>In the index.tsx is where you want to export all the components, hooks and so on, which you want your user to implement.</p>
<p>While you make changes, it is important to have the package compiled and optimised — so that it’s possible to test it in a sample React project. In your terminal, run the following command:</p>
<pre>yarn start</pre>
<p>Now, as you make changes, your package will be built and compiled into your project’s dist directory.</p>
<h4>Testing your library</h4>
<p>For the sake of easy testing, there is a full-blown React project in the example directory. You will be using this React project to test the package you are working on.</p>
<p>The React project in the example directory is already linked with your new library in package.json (where your library is added as a dependency).</p>
<pre>cd example<br>yarn start</pre>
<p>If you get an error message with referencing your custom package, you could just add a reference to it in the dependencies object inside package.json by adding the following line:</p>
<pre>"sample": "link:.."</pre>
<h3>Step 4 — Publish Your npm Library</h3>
<p>When you’re happy with the work done so far, you can publish your library to the world (or your personal space).</p>
<h4>Publishing Your npm Library in a Private Feed</h4>
<p>If you are working on an npm library for your company’s internal use, or maybe you’re working on a library solely for your personal use, you can opt to leave it out of npm public directory, by using the command:</p>
<pre>yarn publish</pre>
<blockquote>Note that private libraries are a paid service offering by npm, and you’ll get an error message if you have not subscribed for it.</blockquote>
<h4>Publishing Your npm Library to the Public</h4>
<p>Alternatively, if you wish to share your library with the world, you could simply add an additional --access argument, as shown below.</p>
<pre>yarn publish --access=public</pre>
<p>You can use the same command to update your library, subsequently.</p>
<p>If you successfully publish your package, you’ll get this message.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/283/1*iXexih5PpjLM686LEWwRow.png"></figure><p>If you immediately try to install your library in your React app, and you get a 404 error, just wait a few minutes for your package to be fully available on npm, and try again.</p>
<p><em>There! You have your first React component live on npm. <br>Till next time, compadre!</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b59f13d27f72" width="1" height="1" alt="">

A full walkthrough on creating your very first React library and publishing it on npm.

Publishing Your First React Library on npm


<h4>Understand the difference between two GrainCollectionOptions, and how they are used in the GarbageCollection process.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*t9hh6KKN9oFVsX_g"><figcaption>Photo by <a href="https://unsplash.com/@neonbrand?utm_source=medium&amp;utm_medium=referral">Kenny Eliason</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>You probably landed on this article, after finding the definition of both terms a tad blurry. I did find them blurry initially before pondering on the terms, their definitions and the results I got after I tinkered with them a bit. Here’s what I found.</blockquote>
<h3>What is CollectionAge</h3>
<p><a href="https://docs.microsoft.com/en-us/dotnet/api/orleans.configuration.graincollectionoptions.collectionage?view=orleans-3.0"><strong>CollectionAge</strong></a><strong> </strong>is used to dictate how long a Grain can be inactive for, before it gets collected for deactivation, by Orleans’ GarbageCollection. Think of this as an <strong>idle timeout</strong>.</p>
<h3>What is CollectionQuantum</h3>
<p><a href="https://docs.microsoft.com/en-us/dotnet/api/orleans.configuration.graincollectionoptions.collectionquantum?view=orleans-3.0"><strong>CollectionQuantum</strong></a> is used internally by Orleans to regulate the interval at which it does a collection sweep. Consider this a <strong>pulse</strong>.</p>
<h3>Difference Between CollectionAge and CollectionQuantum</h3>
<ol>
<li>CollectionAge helps us track whether or not a Grain can be considered inactive. CollectionQuantum is the interval which regulates Orleans' collection of inactive Grains.</li>
<li>CollectionQuantum being a pulse interval, always has to be smaller than CollectionAge.</li>
<li>CollectionQuantum is used internally by Orleans hence it cannot be set on a Grain level. CollectionAge can be set specifically for different Grains (<a href="https://docs.microsoft.com/en-us/dotnet/api/orleans.configuration.graincollectionoptions.classspecificcollectionage?view=orleans-3.0">check </a><a href="https://docs.microsoft.com/en-us/dotnet/api/orleans.configuration.graincollectionoptions.classspecificcollectionage?view=orleans-3.0">ClassSpecificCollectionAge</a>)</li>
<li>CollectionQuantum defaults to 1 minute. In contrast, CollectionAge defaults to 30 minutes.</li>
</ol>
<p>The CollectionAge works as an idle timeout for the Grain, while CollectionQuantum works as a pulse for Orleans to collect all Grains that have been idle longer than their CollectionAge</p>
<h3>How Do CollectionAge and CollectionQuantum Work Together</h3>
<p>Imagine you have a Grain class which has a CollectionAge of 10 minutes. This class also only sends/receives a message once every 20 minutes.</p>
<p>If the CollectionQuantum is configured to 1 minute, every minute, Orleans will do a check for all the Grains that have expired (ie. have not sent/received any data for at least 10 minutes). In this case, our grain will get deactivated after the 10th minute.</p>
<p>If this helped get a grasp of the difference between CollectionAge and CollectionQuantum, please clap, share and subscribe.</p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<p><em>Till next time, buddy!</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=e23e4283ec97" width="1" height="1" alt="">


Understand the difference between two GrainCollectionOptions, and how they are used in the GarbageCollection process.

Orleans: CollectionAge vs CollectionQuantum


<h4>A crash-course on the right syntax for applying a style on the first child element nested in the HTML page.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*RJmEq3E-7hd9LmXT"><figcaption>Photo by <a href="https://unsplash.com/es/@markusspiske?utm_source=medium&amp;utm_medium=referral">Markus Spiske</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Problem</h3>
<p>Suppose we have a div containing several child elements of which we only want to select and style the first child, in CSS.</p>
<pre>&lt;!-- page.html --&gt;<br>&lt;div id="root"&gt;<br>    &lt;section&gt;This is the first section&lt;/section&gt;<br>    &lt;p&gt;This is the first paragraph&lt;/p&gt;<br><br>    &lt;section&gt;This is the last section&lt;/section&gt;<br>    &lt;p&gt;This is the last paragraph&lt;/p&gt;<br>&lt;/div&gt;<br><br><br>/* style.css */<br>#root {<br>    background-color: skyblue;<br>}</pre>
<p>Which looks something like this:</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*f7Ta6eVxCL7DeR12JLPhIA.png"></figure><h3>Solution</h3>
<p>To select a child element, we can use the <strong>CSS child selector</strong> <strong>syntax</strong> parent &gt; child { ... }. This is not to be confused with the <strong>descendant selector syntax</strong> parent child { ... } — which would select all the appearances of the child element under the parent, irrespective of how many levels down the hierarchy the child element is nested (to get more clarity on the child vs descendant selector, <a href="https://css-tricks.com/child-and-sibling-selectors/#aa-child-combinator">read this</a>).</p>
<pre>/* style.css */<br>... <br><br>#root &gt; section {<br>    background-color: gold;<br>}</pre>
<p>Our page will now look something like this:</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BTqUuMJGBPHU6Q4Zf-1kRg.png"></figure><p>Finally, we apply a style to the first child element under a parent, by using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child">CSS first child selector</a> :first-child. <strong>This would apply the style to an element, only if it is the first child under its parent</strong> <em>(I used to get confused and thought it would style the first child under the specified element)</em></p>
<pre>/* style.css */<br>...<br><br>#root &gt; section:first-child {<br>    background-color: greenyellow;<br>    padding: 2rem;<br>}</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*huaqAN0ahr_7tKg7v-vldQ.png"></figure><p>If this helped, please clap, share and subscribe.</p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<p><em>Till next time, buddy!</em></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fe8da158514" width="1" height="1" alt="">


A crash-course on the right syntax for applying a style on the first child element nested in the HTML page.

CSS: Styling First Child Elements

<h4>A dive into Reflection in .NET — learning some of it’s popular use-cases.</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*PLjHppYR0SAWhO2d" /><figcaption>Photo by <a href="https://unsplash.com/@arvind_jay_v?utm_source=medium&amp;utm_medium=referral">Aravind V</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Objectives</h3><p>After reading this article, readers should be able to</p><ol><li>Define what Reflection is and know what it can be used for.</li><li>Know the difference between System.Type objects and type(s).</li><li>Comfortably use Reflection to get the Type of an object or a type.</li><li>Understand how to interact withType objects.</li><li>Use Reflection to access custom Attributes.</li></ol><h3>What is Reflection</h3><p>First, let’s get the obvious question out of the way.</p><p>Reflection is the process by which we can get System.Type instances — which can then be used to describe assemblies, types and modules or even invoke methods and access variables of their target objects. Reflection also allows us to access the Attributes of our objects and their data.</p><p>Straight away, we see that where we are using Reflection, we would also need the System.Type, so we need to add the following lines to the top of our .cs file.</p><pre>using System;<br />using System.Reflection;</pre><h3>Difference between System.Type and type</h3><p>Before we move forward, it is important to be clear on what System.Type is, and how it differs from type.</p><p>To paraphrase <a href="https://docs.microsoft.com/en-us/dotnet/csharp/fundamentals/types/">the official documentation on C# types</a>, each variable or constant in C# has a type (string, int, float, etc). Each method also takes in and returns parameters and values of known type. There are several categories of the type; ranging from <a href="https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/built-in-types">builtin types</a> (ex. string, long, bool), to <a href="https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/value-types">value types</a> (ex. struct and enum) and <a href="https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/reference-types">reference types</a> (ex. class, interface, delegate and record).</p><p>System.Type on the other hand, provides us with methods through which we can reflect on objects, variables and constants, regardless of their type.</p><h3>Getting the System.Type</h3><p>There are two ways we can get the System.Type object, depending on whether we are getting that of a type or an object.</p><h4>Getting System.Type from an object</h4><p>In order to get the System.Type instance of an object, we use the GetType() method of the object.</p><pre>namespace MyProject;<br />  <br />  <br />public class Example {<br />    public static void Main(string[] args) {<br />        Example example = new();<br />    <br />        Type exampleType = example.GetType();<br />    <br />        Console.WriteLine(exampleType);<br />        // MyProject.Example<br />    }<br />}</pre><p>We can also use it to retrieve the System.Type instance, when the type is to be inferred at compile time (variables of type var).</p><pre>var a = 10;<br /> <br />Console.WriteLine(a.GetType());<br />// System.Int32</pre><h4>Getting System.Type from a type</h4><p>Alternatively, if we wish to get the System.Type instance of a type, we use typeof.</p><pre>namespace MyProject;<br /> <br /> <br />public class Example {<br />    public static void Main(string[] args) {<br />        Type exampleType = typeof(Example);<br />      <br />        Console.WriteLine(exampleType);<br />        // MyProject.Example<br />    }<br />}</pre><h4>Differences between GetType and typeof</h4><p>We have seen two different ways of obtaining the System.Type instance of objects and types respectively. Let’s take a deeper look at the contrast between the two approaches.</p><ol><li>.GetType() is done at run time, while typeof is done at compile time.</li><li>.GetType() is only used to get the System.Type of an object instance, while typeof retrieves the System.Type of a type.</li></ol><h3>Common Use Cases of Reflection</h3><p>At this stage, we are comfortable using Reflection to retrieve the System.Type instance of objects and types. Now we are going to explore and learn about the ways we can use System.Type and what we can achieve with Reflection.</p><p>Some of the more common use cases of Reflection include</p><h4><strong>Getting Assembly information</strong></h4><p>One of the most common use cases of Reflection in C# is actually getting the assembly of a particular instance.</p><pre>Console.WriteLine(typeof(int).Assembly);<br /> <br />// System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e</pre><h4>Knowing an object’s actual Type</h4><p>Sometimes in development, we use object-typed variables so that we have more generic and dynamic variables to work. However, this often comes at the cost of being able to access the methods, variables and properties.</p><pre>namespace MyProject;<br /> <br />public class Human {<br />    public Human(string name) {<br />        Name = name;<br />    }<br />    <br />    public string Name { get; }<br />    <br />    public void SayHello() {<br />        Console.WriteLine($&quot;Hello, I am {Name}! Nice to meet you.&quot;);<br />    }<br />}<br />  <br />public class Example {<br />    public static void Main(string[] args) {<br />        object alex = new Human(&quot;Alex&quot;);<br />        Console.WriteLine(alex.Name);<br />    }<br />}</pre><p>This would give use the following error at compile time:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1007/1*X-eGFhEkPqlOSOpUUwXVuw.png" /></figure><p>We can take the easy way out of casting the object-typed variable into the type we wish to interact with.</p><p>Alternatively, using Reflection, we can retrieve the System.Type and then interact with that more easily and fluently.</p><pre>public class Example {<br />    public static void Main(string[] args) {<br />        object alex = new Human(&quot;Alex&quot;);<br /> <br />        Type alexType = alex.GetType();<br /> <br />        // Get the property and method info from the Type <br />        PropertyInfo alexNameProp = alexType.GetProperty(&quot;Name&quot;);<br />        MethodInfo methodInfoProp = alexType.GetMethod(&quot;SayHello&quot;);<br />     <br />        // Retrieve the value or invoke the method on an instance  <br />        Console.WriteLine($&quot;From {alexNameProp?.GetValue(alex)}&quot;);<br />        methodInfoProp?.Invoke(alex, new object[] { });<br />    }<br />}</pre><p>Looking at the example above, you would notice that after we retrieved the PropertyInfo alexNameProp and the MethodInfo methodInfoProp, we needed to pass a reference of the instance from which the Type was obtained (ie. alex). This stems from the fact we have walked up the hierarchy, from the instance alex up to its classType, hence the need for an instance on which to act upon.</p><h4>Getting the Type Arguments supplied to an object</h4><p>Consider a simple Dictionary mapping string to int</p><pre>Dictionary&lt;string, int&gt; nameAgeMap = new() { { &quot;Ade&quot;, 10 } };<br /> <br />Type nameAgeMapType = nameAgeMap.GetType();</pre><p>We can use the method GetGenericArguments to get the types arguments supplied to the Dictionary declaration.</p><pre>Type[] typeArgs = nameAgeMapType.GetGenericArguments();<br /> <br />foreach (Type tParam in typeArgs)<br />{<br />    Console.WriteLine($&quot;Type Argument: {tParam}&quot;);<br />}<br />// Type Argument: System.String<br />// Type Argument: System.Int32</pre><h4>Retrieving data from Attributes using Reflection</h4><p>We can obtain the data stored in Attributes by using the Reflection method GetCustomAttribute found in System.Type. Take for example, we have a custom Attribute called Nationality .</p><pre>public class NationalityAttribute : Attribute<br />{<br />    public string country;<br /> <br />    public NationalityAttribute(string country)<br />    {<br />        this.country = country;<br />    }<br />}</pre><p>Which we want to use on our Human class, for the sake of clarity, let’s define it again below.</p><pre>public class Human<br />{<br />    public Human(string name)<br />    {<br />        Name = name;<br />    }<br /> <br />    public string Name { get; }<br />}</pre><p>We could use Reflection to get the data from the Attribute called Nationality just like in the method SayHello below.</p><pre>[Nationality(&quot;Australia&quot;)]<br />public class Human<br />{<br />    ...<br /> <br />    public void SayHello() {<br />        Type thisType = this.GetType();<br /> <br />        Attribute _attr = thisType.GetCustomAttribute(<br />            typeof(NationalityAttribute));<br /> <br />        NationalityAttribute natAttr_ = (NationalityAttribute)_attr;<br /> <br />        Console.WriteLine($&quot;Hello, my name is {Name}! I come from {natAttr_?.country}&quot;);<br />    }  <br />}</pre><p>The first thing we did in the example above, is to get the System.Type value of the Human object. Next, we used Reflection to get the attribute of type NationalityAttribute attached to it. It’s important to note that the GetCustomAttribute method returns a value of type Attribute and not the type passed to it as an argument. Finally, we casted the value of type Attribute into NationalityAttribute and we are able to interact with the attribute.</p><p>We could also access all Attributes of an object by invoking the GetCustomAttributes method of the Attribute class on a Type.</p><pre>Type humanType = typeof(Human);<br /> <br />foreach (Attribute attr in Attribute.GetCustomAttributes(humanType))<br />{<br />    Console.WriteLine($&quot;Attribute {attr}&quot;);<br />}</pre><h3>Summary</h3><p>Reflection is not something talked about a lot in .NET, though it could be really useful and applicable in so many different ways — few of which we explored in this article.</p><p>If you found this article, clap, share and subscribe.</p><p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p><p><em>Till next time!</em></p><img alt="" height="1" src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=56ba1d3d1f22" width="1" />

A dive into Reflection in .NET — learning some of it’s popular use-cases.

Understanding Reflection in .NET within 5 minutes.

<h4>Learn the differences between the update methods in Unity, as well their appropriate use-cases.</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*JYUlKD8xr-5tATnk" /><figcaption>Photo by <a href="https://unsplash.com/@hellolightbulb?utm_source=medium&amp;utm_medium=referral">Hello Lightbulb</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Perhaps, you’ve recently piqued an interest in developing games using Unity and you’re seeking clarity on the various Update methods an object can be scripted with. Or, maybe you are an old-timer looking to refresh your mind on the basics.</p><p>Each of the update methods are specially crafted to optimise performance. In this article, we will learn what these methods are, and how they’re designed to be used.</p><h3>Update</h3><p>This is called once every frame, <strong>regardless of the time difference between frames</strong>. So, if you target 30 FPS (frames per second), the Update method in your script will be called 30 times within a second.</p><blockquote>Typically, you would use the Time.DeltaTime to calculate the time between the last and current frame.</blockquote><h4>Use-Cases of Update</h4><ul><li><strong>Input controls</strong>: Updating an object based on the user’s input</li><li><strong>Transform changes</strong>: Making changes to the transform properties (ex. rotation, scale, position)</li></ul><h3>LateUpdate</h3><p>Think of this as an “OnUpdate” callback (kinda). All LateUpdate methods are invoked after all Update methods in the project have been invoked.</p><blockquote>If you have logic that depends on the latest state of some other object/prefab, you want to have this logic inside LateUpdate.</blockquote><h4>Use-Cases of LateUpdate</h4><ul><li><strong>Camera movement</strong>: In most third-person games, the camera movement tails the player. So, you want to update the camera’s position after the player’s position has been updated.</li><li>Updating an object based on the latest properties of other objects.</li></ul><h3>FixedUpdate</h3><p>This is distinct from the other two methods, because it is framerate-agnostic. It is invoked directly by Unity’s physics engine in its own interval. If you have any physics-intensive logic, FixedUpdate is the appropriate method to place them.</p><h4>Use-Cases of FixedUpdate</h4><ul><li><strong>Invoking Rigidbody methods</strong>: Using Rigidbody is one of the easiest ways of having an object’s motion fully controlled by Unity’s Physics Engine. So, the common interactions with the Rigidbody (ex. AddForce(...), SetDensity(...), etc) should be done from inside FixedUpdate.</li><li><strong>Cloth simulations</strong></li><li><strong>Collision detections</strong></li><li><strong>Ragdoll character physics</strong></li></ul><p>If you liked this article, clap, share and subscribe.</p><p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p><img alt="" height="1" src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d0fb220d289a" width="1" />

Learn the differences between the update methods in Unity, as well their appropriate use-cases.

Unity: Update vs LateUpdate vs FixedUpdate

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7PLF5_fdmmyDnaEU" /><figcaption>Photo by <a href="https://unsplash.com/@efekurnaz?utm_source=medium&amp;utm_medium=referral">Efe Kurnaz</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>It could be confusing to differentiate between the two major delegate types in C# — Func and Action, due to their similar syntax and parent type. While both delegate types could receive arrow functions or method group values, the difference lies in what they are expected (or not expected) to return. Func methods are expected to return a value while Action methods are expected to be void.</p><p>In this article, we would explore the differences between the two delegate types as well as appropriate use-cases.</p><p>To understand the two types, we need to first understand what a delegate is and how it is intended to be used.</p><h3>What are Delegates in C#</h3><p>Delegates (simply put) help us assign methods to variables. As such, a delegate could be used to pass a method as a parameter to other methods.</p><p>For the sake of <a href="https://www.freecodecamp.org/news/orthogonality-in-software-engineering/#:~:text=Orthogonality%20is%20a%20software%20design,a%20term%20borrowed%20from%20mathematics.">orthogonality</a>, we sometimes have the need to pass a method, based on some criteria to an executing method to invoke — and that’s where delegates come in.</p><p>Delegates can be declared at namespace-level. They are also used for callbacks. It is also possible to have either arrow functions or class methods assigned to a delegate. There is also support for chaining delegate callbacks, provided they have the same signatures.</p><p>Declaring a delegate is similar to declaring a class in C#. Take this for example.</p><pre>public class DelegateExample<br />{<br />    public delegate string Greet();<br />  <br />    public DelegateExample()<br />    {<br />        Greet greet = this.SayHelloWorld;<br />        greet();<br />    }<br />  <br />    private string SayHelloWorld()<br />    {<br />        return &quot;Hello world&quot;;<br />    }<br />}</pre><h3>Func in C#</h3><p><strong>The last type parameter in a </strong>Func<strong> declaration is the type of the output value. </strong>As we know, a Func must return a value.<strong> </strong>So,<strong> we must always have at least one type parameter</strong>.</p><p>Let’s see a simple example of a Func in C#.</p><pre>public class FuncExampleOne<br />{<br />    Func&lt;string&gt; Greet;<br />  <br />    public FuncExampleOne()<br />    {<br />        Greet = this.GreetUserInEnglish;<br />        Greet();<br />    }<br />  <br />    public string GreetUserInEnglish()<br />    {<br />        return &quot;Hello! How are do you today&quot;;<br />    }<br />}</pre><p>In the example above, we have a method GreetUserInEnglish which returns a string. We then assign it to a Func&lt;string&gt; variable, which we later invoke right before exiting the constructor.</p><p>Let’s take another example of a Func, taking a number parameter and returning a string output.</p><pre>public class FuncExampleTwo<br />{<br />    Func&lt;int, string&gt; SayTemperature;<br /><br />    public FuncExampleTwo()<br />    {<br />        SayTemperature = this.GiveTemperatureSummary;<br />        Console.WriteLine(SayTemperature(30));<br />    }<br />    <br />    public string GiveTemperatureSummary(int temp)<br />    {<br />        return $&quot;It's {temp} degrees outside.&quot;;<br />    }<br />}</pre><p>A Func variable could also be an arrow function and we could pass a Func variable as a parameter to other methods, as we see the example below.</p><pre>public class FuncExampleThree<br />{   <br />    public FuncExampleThree()<br />    {<br />        Func&lt;int, string&gt; GetFriendlyTemp = (int temp) =&gt;<br />        {<br />            return $&quot;It's {temp} degrees outside.&quot;;<br />        };<br />    <br />        DisplayTempText(GetFriendlyTemp);<br />        // It's 30 degrees outside.<br />    }<br />    <br />    public void DisplayTempText(Func&lt;int, string&gt; getFriendlyTemp)<br />    {<br />        Console.WriteLine(getFriendlyTemp());<br />    }<br />}</pre><h3>Action in C#</h3><p>Most of the convention of Func variables also apply to Action. The major difference being that an Action does not return anything. As such, all the type parameters of any Action declaration are of input parameters. In the case where the Action does not accept any parameter, no type parameter is required.</p><p>For example, this would be a valid Action declaration in C#.</p><pre>public class ActionExampleOne {<br />    Action Greet;<br />  <br />    public DelegateExample() {<br />        Greet = this.SayHelloWorld;<br />        Greet();<br />    }<br />  <br />    public void SayHelloWorld() {<br />        Console.WriteLine(&quot;Hello world!&quot;);<br />    }<br />}</pre><p>From the signature of an Action, we can tell that they’ll be perfect for callbacks.</p><p>Another feature unique to Action variables, is the ability to chain them. <strong>We could chain</strong> Action <strong>variables</strong>, so long as they have the same signatures. In this case, the methods will be invoked in the order they were chained.</p><pre>public class ActionChainExample<br />{   <br />    public ActionChainExample()<br />    {<br />        Action&lt;int&gt; GetFriendlyTemp = (int _) =&gt; { };<br />  <br />        GetFriendlyTemp += (int temp) =&gt;<br />        {<br />            Console.Write($&quot;It's {temp} degrees outside.&quot;);<br />        };<br />  <br />        GetFriendlyTemp += (int temp) =&gt;<br />        {<br />            string _season = temp &lt; 40 ? &quot;winter&quot; : &quot;summer&quot;;<br />            Console.Write($&quot; We are in {_season} season!&quot;);<br />        };<br />        <br />        GetFriendlyTemp(45);<br />        // It's 45 degrees outside. We are in summer season!<br />    }<br />}</pre><h3>Conclusion</h3><p>When having to choose between both delegate types, ask yourself the following questions</p><p><strong>What does this method return?<br /></strong>If it returns nothing, use an Action. If you have an async method or a method that returns anything, use a Func.</p><p><strong>Would I have a need to chain this method?<br /></strong>If you would have a need to chain this method, an Action would work better than a Func.</p><p>Thanks for reading! If you found the article helpful, <strong>clap</strong>,<strong> share </strong>and<strong> subscribe.</strong></p><img alt="" height="1" src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=82e4b1965d13" width="1" />

Learn the difference between two major delegate types in C# — Func and Action.

C# Delegates: Difference between Func and Action

<h4>A look at the semantic flow of decorators in Python.</h4>
<figure>
  <img
    alt=""
    src="https://cdn-images-1.medium.com/max/1024/0*7kUMDvh1qFy4flm2"
  />
  <figcaption>
    Photo by
    <a
      href="https://unsplash.com/@rpnickson?utm_source=medium&amp;utm_medium=referral"
      >Roberto Nickson</a
    >
    on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral"
      >Unsplash</a
    >
  </figcaption>
</figure>
<p>
  Decorators are a very widely known design pattern in software engineering, in
  which the behaviours of single methods and classes are modified by a wrapping
  function.
</p>
<p>
  Semantically put, a decorator is invoked to replace an existing definition of
  a method, with a whole new method.
</p>
<figure>
  <img
    alt=""
    src="https://cdn-images-1.medium.com/max/1024/1*F4eLRzGw6esfOWIlaLDXjg.jpeg"
  />
  <figcaption>The semantic flow of decorators in Python</figcaption>
</figure>
<p>
  As we will see in this article, decorators could be a good tool to use when
  dealing with older codebases which we need to tailor to suit new needs, fresh
  requirements, etc. Even more so, when we are working with the
  <a href="https://en.wikipedia.org/wiki/Single-responsibility_principle"
    >Single Responsibility Principle</a
  >
  and
  <a href="https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle"
    >Open-Closed Principle</a
  >.
</p>
<h3>What Are Decorators in Python?</h3>
<p>
  A decorator in Python is any callable that is used to modify the behaviour of
  any method or class. Take for instance, we have this legacy method in
  our project:
</p>
<pre>def greet_someone(name: str):<br />    return f&quot;Hello and welcome, {name}!&quot;</pre>
<p>
  Now, say we want to add translations to our project, and we want this method
  in particular to render the greeting in a specified language, we could make
  this happen with the simple addition of a decorator.
</p>
<pre>@translate<br />def greet_someone(name: str):<br />    return f&quot;Hello and welcome, {name}!&quot;</pre>
<h3>How to write a Decorator in Python</h3>
<p>Let us code the translate decorator.</p>
<p>By definition, we know that a decorator in Python is a callable which</p>
<ol>
  <li>Takes in the original method as a parameter.</li>
  <li>
    Returns a new method, which would replace the previous (while still bound to
    the name of the original method)
  </li>
</ol>
<p>
  First, let’s define a function which takes in another function as a parameter.
</p>
<pre>def translate(original_func):<br />    ...</pre>
<p>Next, we are going to make the translate decorator return a new method.</p>
<pre>
def translate(original_func):

    # args, kwargs are the parameters of the original_func
    def replacement_function(*args, **kwargs):
        return &quot;This is from the new function&quot;
    
    return replacement_function
</pre>
<p>
  Now, let’s see how our @translate decorated method stacks up against the other
  original method.
</p>
<pre>
def greet_someone(name: str):
    return f&quot;Hello and welcome, {name}!&quot;

    print(greet_someone(&quot;Tom&quot;))
    # &quot;Hello and welcome, Tom!&quot;

@translate
def greet_someone(name: str):
    return f&quot;Hello and welcome, {name}!&quot;

print(greet_someone(&quot;Alex&quot;))
# &quot;This if from the new function&quot;
</pre>
<p>
  Now, that we have seen our decorator at work, let’s modify the decorator to be
  an actual translator
</p>
<p>
  For the sake of this tutorial example, we are using a library called
  googletrans. So, let’s go ahead and install the library:
</p>
<pre>pip install googletrans</pre>
<p></p>
<pre>
# script.py
from googletrans import Translator

translator = Translator()

APP_LANGUAGE = 'fr'

def translate(func):
    def replacement_func(*args, **kwargs):
        result = func(*args, **kwargs)
        return translator.translate(result, dest=APP_LANGUAGE).text

    return replacement_func

@translate
def greet_someone(name: str):
    return f"Hello and welcome, {name}!"

print(greet_someone("Pierre"))
</pre>
<p>
  We see the following output, correctly translated to the app’s language
  of french.
</p>
<pre>Bonjour et bienvenue Pierre !</pre>
<p>
  Now, we have a neat way to transform all the functions returning texts in our
  project, to the app’s own language, by simply adding only one line of coding.
</p>
<p>
  One might wonder, what if I want to pass a parameter to the decorator itself?
  To make it more flexible and translate the text to more than just “french”.
</p>
<h4><strong>Passing Parameters to Decorators</strong></h4>
<p>
  For a decorator to accept parameters in Python, we would have to wrap our
  decorator inside another function which would take these parameter(s).
</p>
<p>
  Let’s go back and modify our @translate decorator to take in a language
  parameter, and then translate our text to the specified language.
</p>
<pre>
# script_2.py
from googletrans import Translator

translator = Translator()

APP_LANGUAGE = 'fr'


def translate(output_language):
    def inner(func):
        def replacement_func(*args, **kwargs):
            result = func(*args, **kwargs)
            return translator.translate(result, dest=output_language).text

        return replacement_func

    return inner


@translate("pt")
def greet_someone(name: str):
    return f"Hello and welcome, {name}!"

print(greet_someone("Pierre"))
</pre>
<p>
  Now, we get the output of our function translated into the language of our
  choosing and specification — in this case Portuguese “pt”.
</p>
<pre>Olá e bem-vindo, Pierre!</pre>
<h4>Nesting Decorators</h4>
<p>
  Decorators could be nested. When decorators are nested, the result could be
  expressed as wrapping the functions in the order out-to-in, from
  top-to-bottom.
</p>
<p>In other words,</p>
<pre>@first_decorator<br />@second_decorator<br />@third_decorator<br />def my_function():<br />    print(&quot;Hello&quot;)</pre>
<p>Could be expressed as</p>
<pre>first_decorator(second_decorator(third_decorator(my_function)))</pre>
<h3>Use-cases for Decorators in Python</h3>
<ol>
  <li>
    <strong>Reusing impossible to use code</strong>: Decorators could serve as
    an adapter, modifying certain parameters to fit certain methods.
  </li>
  <li>
    <strong>Logging, analytics, monitoring</strong>: We could use decorators
    monitor how long a function takes to perform, and log this for analytical
    purposes.
  </li>
  <li>
    <strong>Avoiding repetitions</strong>: The DRY (don’t repeat yourself)
    principle is one which fits into decorators pretty nicely. Once you find
    yourself writing the same piece of code in more than one function, you
    should consider encapsulating this into a decorator.
  </li>
</ol>
<p>
  In conclusion, decorators are to functions, what encapsulation are to classes.
  We can leverage on decorators, to declutter our functions, and make them more
  reusable.
</p>
<p>Thank you!</p>
<img
  alt=""
  height="1"
  src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b6d7adbd1ea1"
  width="1"
/>

A look at the semantic flow of decorators in Python. Photo by Roberto Nickson on Unsplash Decorators are a very widely known design pattern in software engineering, in which the behaviours of single methods and classes are modified by a wrapping function. Semantically put, a decorator is invoked to replace an existing definition of a method, with a whole new method. The semantic flow of decorators in Python As we will see in this article, decorators could be a good tool to use when dealing with older codeba

Understanding Decorators in Python

<h4>
  Python has no native implementation of interfaces — but that’s where abstract
  classes and abstract methods come into play.
</h4>
<figure>
  <img
    alt=""
    src="https://cdn-images-1.medium.com/max/1024/0*39A3ujujxJZGu-VT"
  />
  <figcaption>
    Photo by
    <a
      href="https://unsplash.com/@cdr6934?utm_source=medium&amp;utm_medium=referral"
      >Chris Ried</a
    >
    on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral"
      >Unsplash</a
    >
  </figcaption>
</figure>
<p>
  Interfaces are so vital in software engineering, that one of the
  <a
    href="https://www.freecodecamp.org/news/solid-principles-explained-in-plain-english/"
    >SOLID Principles</a
  >
  (the bedrock of quality software design) is solely dedicated to it — <a
    href="https://en.wikipedia.org/wiki/Interface_segregation_principle#:~:text=In%20the%20field%20of%20software,are%20of%20interest%20to%20them."
    >Interface Segregation Principle</a
  >.
</p>
<h3>Why Are Interfaces so Vital in Software Engineering?</h3>
<p>
  Imagine you have a utility class which has a method which you will use
  seventeen times throughout your application. What happens when you change the
  parameters of a method in the utility class, or the output the method returns?
  You would have to refactor all the seventeen references to fit the new
  signature of the method. But, with an interface, the class itself will become
  invalid once there’s a mismatch with the interface’s contract — the class must
  stick with the interface, and have a different method, if it needs to change
  the signature. This way, all the seventeen references of the class are pretty
  much safe in the way they call the utility method.
</p>
<p>Cool, right?</p>
<p>
  Now, at some point in time, we Python-<em>istas</em> have needed a way to
  enforce implementations of certain methods in our classes, and you are
  probably reading this article because you have discovered that there are no
  native implementations of interfaces in Python. <em>Well, not quite so.</em>
</p>
<h3>How Would Interfaces Be Implemented in Python</h3>
<p>
  An <strong>interface</strong> would be implemented in Python as an
  <strong>abstract class</strong>.
</p>
<h4>What Is an Abstract Class</h4>
<p>
  An abstract class is a class which contains one or more abstract methods. An
  abstract method is a method that is declared but has no concrete
  implementation — the implementation is to be done by a derived class.
</p>
<p>
  <strong>The key characteristic of interfaces,</strong>
  <strong
    >is that they enforce the implementation of certain methods in
    classes,</strong
  >
  and by definition of abstract classes, <em>this,</em> is catered for.
</p>
<h4>Declaring an Abstract Class in Python</h4>
<p>
  Python provides an abstract base class module called abc. This module contains
  a helper class called abc.ABC (on which we base our abstract classes), and an
  abc.abstractmethod decorator (with which we mark the methods and properties,
  we want implemented by concrete classes).
</p>
<p>We could define an abstract class in any one of two ways:</p>
<pre>from abc import ABC, ABCMeta<br></pre>
<pre># using the abc.ABCMeta as a metaclass<br>class HumanInterface(metaclass=ABCMeta):<br>    pass</pre>
<pre># inheriting the abc.ABC class<br>class HumanInterface(ABC):<br>    pass</pre>
<p>
  <em
    >The latter is preferred as a shorthand to declaring an abstract class, as </em
  ><em>ABC<br />is a class which already has </em
  ><em
    >ABCMeta as its metaclass, thus it makes room easier for the developer to
    add another metaclass declaration.</em
  >
</p>
<p>Now, let’s add our first interface methods to our HumanInterface.</p>
<pre>
from abc import ABC, abstractmethod

class HumanInterface(ABC):
    @abstractmethod
    def greet(self):
        pass
</pre>
<p>
  We have our interface set in, it is time for a concrete implementation to test
  that our interface method will be enforced.
</p>
<pre>
from abc import ABC, abstractmethod


class HumanInterface(ABC):
    @abstractmethod
    def greet(self):
        pass

      
class Hispanic(HumanInterface):
    def sing(self):
        pass
    

if __name__ == '__main__':
    Hispanic();
</pre>
<p>
  The Python interpreter throws an error we expect from an interface’s concrete
  implementation.
</p>
<pre>
TypeError: Can’t instantiate abstract class Hispanic with abstract methods greet</pre
>
<p>
  Let us take a look at what happens when we implement the greet method in our
  Hispanic class.
</p>
<pre>
from abc import ABC, abstractmethod


class HumanInterface(ABC):
    @abstractmethod
    def greet(self):
        pass
    
    @abstractmethod
    def exercise(self):
        pass
    
    @abstractmethod
    def introduce_self(self):
        pass
      
      
class Hispanic(HumanInterface):
    def greet(self):
        print("Hola! Como estas?")
        
    def exercise(self):
        print("Comenzando el entrenamiento")
        
    def introduce_self(self):
        print("Me llamo Sam")

        
if __name__ == '__main__':
    Hispanic().greet()
    # Hola! Como estas?
</pre>
<p>
  <strong><em>Pretty neat, right?!</em></strong>
</p>
<p>
  Perhaps, the team behind the Python programming language were well aware of
  the fact that interfaces could be written in Python using abstract classes
  and methods.
</p>
<p>
  In the next <a href="https://tomisin.dev/blog">article</a>, we will be
  comparing and contrasting abstract class and interfaces.
</p>
<p>
  If you found this article useful or learnt something in this article, please
  clap, share and subscribe.
</p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<img
  src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6d3658d248c"
  width="1"
  height="1"
  alt=""
/>

Python has no native implementation of interfaces — but that’s where abstract classes and abstract methods come into play. Photo by Chris Ried on Unsplash Interfaces are so vital in software engineering, that one of the SOLID Principles (the bedrock of quality software design) is solely dedicated to it — Interface Segregation Principle . Why Are Interfaces so Vital in Software Engineering? Imagine you have a utility class which has a method which you will use seventeen times throughout your application. Wha

How to Implement an Interface in Python


<h4>Learn how to write cleaner CSS code, by adopting the most popular naming convention in CSS.</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*YoWqZcsqgmbWGV3Y"><figcaption>Photo by <a href="https://unsplash.com/@balazsketyi?utm_source=medium&amp;utm_medium=referral">Balázs Kétyi</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>In software engineering, one of the most critical characteristics of clean code is its maintainability.</blockquote>
<p>Code maintainability, in itself, is a ripple effect of several factors. When a piece of software is <strong>readable</strong>, <strong>clear</strong>, <strong>concise</strong> and most importantly <strong>ruthlessly consistent</strong>, it automatically becomes more <strong>intuitive</strong> to maintain.</p>
<p>To paraphrase a popular quote…</p>
<blockquote>Bad code is like a joke. If you have to explain it, then it is probably bad.</blockquote>
<p>With that in mind, <strong>how can we make our CSS code more maintainable?<br></strong>A fool-proof approach is to adopt a <a href="https://google.github.io/styleguide/">style-guide</a>, coding framework, pattern or architecture, and apply it with ruthless consistency, throughout a project.</p>
<p>There are several style-guides in CSS. In this article, we will be focusing on the most popular naming convention in CSS — the BEM naming convention.</p>
<h3>What’s the BEM Naming Convention</h3>
<p>The BEM naming convention stands for <strong>Block</strong>, <strong>Element</strong> and <strong>Modifier</strong>.</p>
<p>You might have encountered it without knowing. If you are the type to inspect templates from Envato (or your favourite web template hub), you would have come across CSS classes and ids named like .button--primary , .button__title , #pinnedBlogPost__title, .is--bold. Well, that is the BEM naming convention.</p>
<p>To get warm with the idea of the BEM convention, we can imagine different cities in their respective countries, in several continents in the world. For example, London is in the United Kingdom; the United Kingdom is in Europe. In that respect, we can say Europe__UnitedKingdom--London.</p>
<p>Let’s break this down further.</p>
<h4>Block</h4>
<p>Like we saw in the example above, the first part represents a high-level container. This could be anything ranging from a navigation menu, a blog post container, a login form to something more simple like a button. Good examples include: .card, .blog, .post.<br><em>They are optionally prefixed with namespaces (which we will talk about later in this article)</em></p>
<h4>Element</h4>
<p>Inside a block, lies the next component of the BEM convention. A singular unit in the container, is an element. This could be the title of a blog card, the text of a button, the links of a navigation menu. They are usually prefixed with two underscores. Examples include: .card__title, .nav__link, .nav__item, #userProfile__name.</p>
<h4>Modifier</h4>
<p>The last part represents a state or variation to which an element is likely to transform — bold, big, small, underline, etc. They are usually prefixed with two dashes, and they appear like: .card__title--bold, .is--bold, .is--underlined.</p>
<p>With the aforementioned convention implemented in our CSS codebase, we rip the benefits of:</p>
<ul>
<li>Improved coding standard</li>
<li>Easy readability</li>
<li>Improved maintainability</li>
<li>Better structure</li>
<li>More reusable code</li>
</ul>
<h3>Namespaces</h3>
<p>Finally, we are going to talk about an ad-hoc concept in To give scopes to the classes in our CSS code, we can introduce special prefixes to their names.</p>
<ul>
<li>
<strong>c-: Component </strong>c-card__header,c-card--large</li>
<li>
<strong>has-,</strong><strong>is-: Utility </strong>is-big, has-slideAnimation</li>
<li>
<strong>js-: Actions </strong>js-start, js-exit</li>
<li>
<strong>o-: Object </strong>o-container, o-container--fluid</li>
<li>
<strong>qa-: Testing </strong>qa-error, qa-hide</li>
<li>
<strong>s-: Scope </strong>s-banner, s-jumbotron</li>
<li>
<strong>t-: Theme </strong>t-dark, t-light</li>
<li>
<strong>u-: Utility </strong>u-clearfix,u-align-center</li>
</ul>
<p>Did you find this article helpful? Get weekly articles and coding tricks by subscribing to my newsletter.</p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2ef4f9b2f9a6" width="1" height="1" alt="">


Learn how to write cleaner CSS code, by adopting the most popular naming convention in CSS. Photo by Balázs Kétyi on Unsplash In software engineering, one of the most critical characteristics of clean code is its maintainability. Code maintainability, in itself, is a ripple effect of several factors. When a piece of software is readable , clear , concise and most importantly ruthlessly consistent , it automatically becomes more intuitive to maintain. To paraphrase a popular quote… Bad code is like a joke. I

Naming CSS Classes: BEM Naming Convention

<h4>
  Learn about the methods behind common Python syntaxes and how to make your
  objects work with these syntaxes.
</h4>
<figure>
  <img
    alt=""
    src="https://cdn-images-1.medium.com/max/1024/0*JtpVKGm7V6kD98u1"
  />
  <figcaption>
    Photo by
    <a
      href="https://unsplash.com/@juliusdrost?utm_source=medium&amp;utm_medium=referral"
      >Julius Drost</a
    >
    on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral"
      >Unsplash</a
    >
  </figcaption>
</figure>
<p>
  Perhaps, you have noticed it is possible to use certain built-in methods (ex.
  len(my_list_or_my_string)), and syntaxes (ex. my_list_or_my_string[:3],
  my_fancy_dict['some_key']) on some native types such as list, dict. Maybe you
  have been curious as to why it is not possible (yet) to use these same
  syntaxes on some of the classes you have written.
</p>
<p>
  Variables of native types (list, dict, int, str) have unique behaviours and
  respond to certain syntaxes because they have some special methods defined in
  their respective classes — these methods are called Magic Methods.
</p>
<blockquote>
  Magic methods simply refer to
  <strong>special methods that begin and end with double underscores</strong>.
  They are also called “dunder” methods.
</blockquote>
<p>
  Magic methods are not designed to be invoked directly, they are invoked
  internally from the class on a certain action or when peculiar syntax is
  encountered.
</p>
<p>
  In this article, we would be exploring which magic methods exist for the
  common native types and how we can also make our objects exhibit behaviours
  popular with common native types.
</p>
<p>
  But, before diving into the special methods for each native type, let us get
  familiar with basic methods common across all variables.
</p>
<h3>Understanding Magic Methods in Python</h3>
<h4>Instantiation Functions</h4>
<p>
  __new__(self, *args, **kwargs) is the first step of instance creation. It’s
  called first and is responsible for <strong>returning</strong> a new instance
  of your class. Use this method if you want to control the way new instances
  are created.
</p>
<p>
  __init__(self, *args, **kwargs) this class method is called whenever we want
  to initialise a new instance. Thus,
  <strong
    ><em>it is called right after an instance has been created</em></strong
  >
  by the __new__ method. The __init__ method in Python does not return anything.
</p>
<p>
  __call__(self, *args, **kwargs) it is sometimes possible to invoke an object
  the same way we invoke functions. This is made possible by the
  __call__ method.
</p>
<h4>Presentation Functions</h4>
<p>
  Objects will be pretty anonymous without the help of inbuilt functions which
  help identity them and format them in a way that is not only meaningful but
  also useful during development and testing.
</p>
<p>
  __dir__(self) when a user wants to know the attributes of an object, they
  likely call the dir(...) function on the object. The interpreter then invokes
  the __dir__ method of that object.
</p>
<p>
  __len__(self) is applicable when you have an object which contains a number of
  elements. Herewith we can invoke the method len(my_object) on the object.
</p>
<p>
  __repr__(self) this method gets invoked when the interpreter wants to identify
  an object unambiguously for the sake of debugging and development. The value
  of this is typically wrapped inside angular brackets &lt; . . . &gt;.
</p>
<pre>
class MyObject(object):
    name = 'Tom'

print(MyObject)
# <__main__.MyObject object at 0x10321eb50>


class MyObjectWithRepr(object):
    name = 'Tom'

    def __repr__(self):
        return f'<MyObject: {self.name}'

print(MyObjectWithRepr)
# <MyObjectWithRepr: Tom>
</pre>
<p>
  __str__(self) has the goal of making an object human-readable. If this method
  is used alongside __repr__ in a class, the value of __str__ method takes
  precedence.
</p>
<p>__sizeof__(self) helps identity the size of an object in bytes.</p>
<h4>Equality Signs</h4>
<p>
  These functions are invoked when the interpreter encounters an equality sign
  between two variables. These include:
</p>
<p>
  __eq__(self, x) when we compare if two variables are equal in value, the
  interpreter triggers this method to get a result.
</p>
<p>
  __gt__(self, x) intuitively, this stands for “greater than” and is called when
  the greater than arithmetic symbol &gt; is in between two variables. It is
  typically used between two numeric variables, but can also be used to compare
  variables other types.
</p>
<p>
  __ge__(self, x) this stands for “greater than or equals” and is called when
  the greater than or equals arithmetic symbol &gt;= is in between two
  variables.
</p>
<p>
  __lt__(self, x) intuitively, this stands for “less than” and is called when
  the greater than arithmetic symbol &lt; is in between two variables.
</p>
<p>
  __le__(self, x) this stands for “lesser than or equals” and is called when the
  greater than or equals arithmetic symbol &lt;= is in between two variables.
</p>
<h3>Magic Methods for Native Types</h3>
<h4>Numbers</h4>
<p>
  The most distinct characteristic of numbers are their arithmetic operations.
  We can make our objects exhibit the same behaviours numbers do and respond to
  arithmetic symbols as do numbers, by simply implementing one or two of the
  special methods enlisted below.
</p>
<p>
  __add__(self, x) this method is invoked by the Python interpreter when the “+”
  sign is encountered between two variables.
</p>
<p>
  __mul__(self, x) for the multiplication arithmetic operation, this special is
  invoked implicitly by the interpreter.
</p>
<p>
  __sub__(self, x) to give our object the ability to get subtracted from, we can
  add this method.
</p>
<p>
  <strong>Real World Example #1: A More Pythonic Temperature Class<br /></strong
  >First, let’s define a simple class that holds the temperature for a
  particular room.
</p>
<figure>
  <img
    alt=""
    src="https://cdn-images-1.medium.com/max/1024/0*Ra7o-PI0c3DmcW9C"
  />
  <figcaption>
    Photo by
    <a
      href="https://unsplash.com/@matteofusco?utm_source=medium&amp;utm_medium=referral"
      >Matteo Fusco</a
    >
    on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral"
      >Unsplash</a
    >
  </figcaption>
</figure>
<pre>
from typing import Literal, Union


UNIT_TYPE = Literal['C', 'F']
VALUE_TYPE = Union[int, float]


class BaseTemperature(object):
    def __init__(self, value: VALUE_TYPE, unit: UNIT_TYPE, **kwargs):
        self.value = value
        self.unit = unit
        
    def __repr__(self) -> str:
        return f'<Temperature: {self.value}°{self.unit}>'

    def convert_to_celcius(self):
        self.value = (self.value - 32) * (5 / 9)
        self.unit = 'C'
    
        return self.value

    def convert_to_fahrenheit(self):
        self.value = (self.value * 9/5) + 32
        self.unit = 'F'

        return self.value

    def convert_unit(self, unit: UNIT_TYPE) -> VALUE_TYPE:
        if unit == self.unit:
            return self.value

        (
            self.convert_to_celcius() if self.unit == 'F' else
            self.convert_to_fahrenheit()
        )

        return self.value
</pre>
<p>
  When we try to add a value to an instance of our temperature class, we get
  an error.
</p>
<pre>&gt;&gt;&gt; Temperature(30, 'C') + 1</pre>
<pre>TypeError: unsupported operand type(s) for +: 'Temperature' and 'int'</pre>
<p>
  Now, let’s extend the class and give it the ability to perform arithmetic
  operations by implementing the __add__ method.
</p>
<pre>
class Temperature(BaseTemperature):
    def __add__(self, another_temperature: Union[int, float, 'Temperature']):
        if type(another_temperature) in {int, float}:
            return Temperature(
                value=self.value + another_temperature,
                unit=self.unit
            )

        another_temperature.convert_unit(self.unit)

        return Temperature(
            value=self.value + another_temperature.value,
            unit=self.unit
        )
</pre>
<p>
  Now, let’s see the result after we add a custom __add__ method to our
  temperature class.
</p>
<pre>&gt;&gt;&gt; Temperature(30, 'C') + 6<br>&lt;Temperature: 36°C&gt;</pre>
<pre>&gt;&gt;&gt; Temperature(30, 'C') + Temperature(35.6, 'F')<br>&lt;Temperature: 38°C&gt;</pre>
<pre>&gt;&gt;&gt; Temperature(34, 'C') + Temperature(66, 'C')<br>&lt;Temperature: 100°C&gt;</pre>
<h4><strong>Iterables: Lists, Tuples, Strings, Sets</strong></h4>
<p>
  __contains__(self, x) this is used when the in keyword is used to check if an
  element exists in an iterable (for example: x in ["a", "b"])
</p>
<p>
  __delitem__(self, key) when an item is deleted from an iterable via del
  keyword, this method gets triggered (for example del my_dict[x])
</p>
<p>
  __getitem__(self, key) this method is invoked by the interpreter when the
  accessor syntax is used on a variable (for example: my_variable[x])
</p>
<p>
  __iter__(self) the iter method is used in generator expressions, to yield one
  item of the array at a time.
</p>
<p>
  __next__(self) could be used along with __iter__ for make any object iterable.
  Once the pair of __iter__ and __next__ are present in any class, the object
  will respond to for i in my_object syntax.
</p>
<p>
  __setitem__(self, key, newvalue) this method is used by the interpreter to set
  the element at any given position. You would notice that str and tuples do not
  support item assignment, as they are <strong>immutable</strong>.
</p>
<h4>Real-life Example #2: A More Pythonic Approach to the Scrabble Game</h4>
<p>
  Let us bring to life all we have learnt in this article by conceptualising a
  simplified Scrabble game. Our Scrabble game will utilise a number of magic
  methods to make it interact with the interpreter in a more friendly way.
</p>
<figure>
  <img
    alt=""
    src="https://cdn-images-1.medium.com/max/1024/0*Klyi2BIM4NERfj3B"
  />
  <figcaption>
    Photo by
    <a
      href="https://unsplash.com/@brett_jordan?utm_source=medium&amp;utm_medium=referral"
      >Brett Jordan</a
    >
    on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral"
      >Unsplash</a
    >
  </figcaption>
</figure>
<p>
  <strong>Tiles<br /></strong>There is no game of Scrabble without letter tiles
  to play. A Scrabble tile contains a letter in the alphabet and a number
  denoting the points the player scores by playing it in a turn. In a game of
  Scrabble, players often make the comparison between tiles to play the ones
  which will score them the most points, so let’s support that in our design.
</p>
<pre>
class ScrabbleTile(object):
    letter: str
    points: int

    def __init__(self, letter: str, points: int):
        self.letter = letter
        self.points = points

    def __repr__(self):
        return f"{self.letter} ({self.points})"
      
    def __ge__(self, other: ScrabbleTile):
        return self.points >= other.points

    def __gt__(self, other: ScrabbleTile):
        return self.points > other.points
    
    def __le__(self, other: ScrabbleTile):
        return self.points <= other.points
    
    def __lt__(self, other: ScrabbleTile):
        return self.points < other.points
</pre>
<p>Tiles could then be declared and used in the game like this:</p>
<pre>tile_a = Tile('A', 1)<br>tile_q = Tile('Q', 10)</pre>
<pre>print(tile_a)<br># A (1)</pre>
<pre>print(tile_q)<br># Q (10)</pre>
<pre>print(tile_q &gt; tile_a)<br># True</pre>
<p>
  <strong>Cells<br /></strong>Next, we will be defining the squares on the
  Scrabble board. We know there are 255 squares in a board. Some of these cells
  have award special points to players who play a turn on them. Our cells will
  be keeping the following data: row, column, letter_multiplier,
  word_multiplier. Since we also have one instance of cells during an entire
  game, we should make this a Singleton to prevent multiple creations of a
  single cell on the board.
</p>
<pre>
class ScrabbleCell(object):
    _instance: 'ScrabbleCell' = None

    column: int
    content: Union[None, ScrabbleTile]
    letter_multiplier: int
    row: str
    word_multiplier: int

    def __init__(self, row: int, column: int, letter_multiplier: int, word_multiplier: int):
        self.row = row
        self.column = column
        self.content = None
        self.letter_multiplier = letter_multiplier
        self.word_multiplier = word_multiplier

    def __new__(cls, *args, **kwargs):
        if cls._instance is None:
            cls._instance = super().__new__(cls, *args, **kwargs)

        return cls._instance

    def __repr__(self):
        return f"{self.row} {self.column} -- {self.content}"
</pre>
<p>
  <strong>Board<br /></strong>Finally, we are going to be defining our board.
  The board will have all the moves played since the start of the game. We would
  require one board for an entire game session,
  <strong>we will be making this a </strong
  ><a href="https://en.wikipedia.org/wiki/Singleton_pattern"
    ><strong>Singleton</strong></a
  ><strong> class.</strong>
</p>
<pre>
import string


class Board(object):
    _instance: 'Board' = None
    _board: List[List[ScrabbleCell]]

    def __new__(cls, *args, **kwargs):
        if cls._instance is None:
            cls._instance = super().__new__(cls, *args, **kwargs)

        return cls._instance

    def __init__(self):
        self._board = [
            [ScrabbleCell(row, column) for column in range(15)]
            for row in string.ascii_uppercase[:15]
        ]
        
    def __getitem__(self, key):
        return self._board[key]
</pre>
<p>
  <strong>Move<br /></strong>When a Scrabble player makes a move, they place
  several tiles vertically or horizontally to form a word. To represent this in
  code, we could keep an array of tiles and the cells they are played on.
  Players also constantly weigh up potential moves to determine which would give
  them the highest points.
</p>
<pre>
class Move(object):
    tiles: List[ScrabbleTile]
    cells: List[ScrabbleCell]
    points: int

    def __init__(self, placements: List[Tuple[ScrabbleTile, ScrabbleCell]]):
        self.tiles = []
        self.cells = []
        self.points = 0

        word_multiplier = 1

        for tile, cell in placements:
            self.tiles.append(tile)
            self.cells.append(cell)
            
            if cell.word_multiplier > 1 and cell.content is None:
                word_multiplier = cell.word_multiplier

            self.points += (tile.points * cell.letter_multiplier)

    def __repr__(self):
        return f'{"".join([tile.letter for tile in self.tiles])} = {self.points}'
    
    def __ge__(self, other: Move):
        return self.points >= other.points

    def __gt__(self, other: Move):
        return self.points > other.points
    
    def __le__(self, other: Move):
        return self.points <= other.points
    
    def __lt__(self, other: Move):
        return self.points < other.points
</pre>
<p>
  Now, when a player wants to compare two moves to see which would be more
  advantageous, we can elegantly compare moves like we do with native numbers,
  strings, et al.
</p>
<pre>move_one = Move([<br>    [tile_a, cell_1], [tile_c, cell_2], [tile_e, cell3]<br>])<br>print(move_one)<br># ACE = 5</pre>
<pre>move_two = Move([<br>    [tile_z, cell_1], [tile_o, cell_2], [tile_o, cell3]<br>])<br>print(move_two)<br># ZOO = 12</pre>
<pre>print(move_one &gt; move_two)<br># False</pre>
<pre>print(move_one &lt; move_two)<br># True</pre>
<h3>Conclusion</h3>
<p>
  Large Python projects will certainly be a lot more intuitive to work with, if
  most of their components accept and respond to a lot of the syntax we are
  accustomed to with native types — we see this in the Django ORM, with being
  able to iterate over a QueryDict.
</p>
<pre><strong>Want to Connect?</strong></pre>
<pre><a href="https://tomisin.dev/subscribe">Get weekly articles and coding tricks on only the topics you care about by subscribing to my channel.</a></pre>
<img
  src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c413c9d72927"
  width="1"
  height="1"
  alt=""
/>
<hr />
<p>
  <a
    href="https://betterprogramming.pub/transforming-your-objects-into-real-python-objects-using-magic-methods-c413c9d72927"
    >Supercharging Python Classes with Magic Methods</a
  >
  was originally published in
  <a href="https://betterprogramming.pub/">Better Programming</a> on Medium,
  where people are continuing the conversation by highlighting and responding to
  this story.
</p>

Learn about the methods behind common Python syntaxes and how to make your objects work with these syntaxes. Photo by Julius Drost on Unsplash Perhaps, you have noticed it is possible to use certain built-in methods (ex. len(my_list_or_my_string)), and syntaxes (ex. my_list_or_my_string[:3], my_fancy_dict['some_key']) on some native types such as list, dict. Maybe you have been curious as to why it is not possible (yet) to use these same syntaxes on some of the classes you have written. Variables of native

Supercharging Python Classes with Magic Methods

<h4>Know how to use static type checking and type annotation best practices</h4>
<figure>
  <img
    alt=""
    src="https://cdn-images-1.medium.com/max/1024/0*D2pTs4JZKVeT55C9"
  />
  <figcaption>
    Photo by
    <a
      href="https://unsplash.com/@artturijalli?utm_source=medium&amp;utm_medium=referral"
      >Artturi Jalli</a
    >
    on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral"
      >Unsplash</a
    >
  </figcaption>
</figure>
<p>
  Type-checking is one of the foremost features of any modern-day programming
  language; it’s the reason TypeScript was born. Type-checking not only makes a
  codebase easier to extend and work with in general, but it also detects many
  programming errors quickly, reliably and automatically.
</p>
<p>
  First introduced in Python 3.5, <strong>Type Hints</strong> are the primary
  way Python developers annotate types to variables and functions.
</p>
<blockquote>
  <strong>Type Hints — </strong>like the name suggests, do not enforce any type
  checks at the interpreter level. They are designed to be used by developers,
  IDEs, linters, type checkers, etc.
</blockquote>
<p>
  In technical term, <strong>Python has dynamic type checking</strong>, hence
  the types are known at runtime and not compile time (as is the case in static
  type checked languages like C#). Although, it is worth mentioning that the
  Python community has hacked together a
  <a href="http://mypy-lang.org/">variant</a> of the Python interpreter which
  enforces static type checking.
</p>
<p>
  In this article, we will explore how to incorporate Python’s type checking
  into our codebase in ways which would reduce friction in integrating with
  units of the projects.
</p>
<h3>Type Hints Syntax</h3>
<p>
  Python supports type annotation for the basic variable types supported by the
  language str, int, float, bool<strong> </strong>and None. It also comes with a
  typing library batteries included; this typing libraries provides us with
  means to use more special types.
</p>
<h4>Annotating Variables</h4>
<p>
  To indicate the type of a variable in Python, just add a colon-space followed
  by the type (str, int, List[],etc.), right after the variable name.
</p>
<pre>
# type_hints_tutorial.py

from typing import List

name: str = 'Tommy'
age: int = 24
height_in_meters: float = 1.7
colleagues: List[str] = ['Alicia', 'John']
</pre>
<h4>Annotating Functions</h4>
<p>
  The syntax for variable annotation of variables also works for the function
  parameters. However, to indicate the return type, we add an arrow “-&gt;”
  followed by its type.
</p>
<pre>
# type_hints_tutorial.py

from typing import Dict, List

def convert_celcius_to_fahrenheit(celcius_temp: float) -> float:
    return (celcius_temp * 9/5) + 32
  
def send_email(
    subject: str,
    body: str,
    recipients: List[str],
    cache: Dict[str, str]
) -> bool:
  
    # skipped for brevity

    return True # or False
</pre>
<h3>Using Special Types</h3>
<p>
  Now, that we are all warmed up and familiar with the type annotation syntax,
  let us get familiar with more complex types.
</p>
<h4>Any</h4>
<p>
  A variable of type Any is unconstrained. So, such variables are compatible
  with all other types (int, str, List, etc), and all other types are compatible
  with these.
</p>
<pre>
# type_hints_tutorial.py
from typing import Any

result: Any = "SUCCESS"
  
# also works because variables of type Any are compatible other types
result = 10

state: str = "PENDING"

# works because all other types are compatible with type Any.
state = result
</pre>
<h4>Literal</h4>
<p>
  Literals are used to indicate to type checkers that the value a variable or
  function holds, is equal to one of the values specified.
</p>
<pre>
# type_hints_tutorial.py

from typing import Literal


GENDER = Literal["male", "female", "non-conforming"]

def create_user(
    first_name: str,
    last_name: str,
    gender: GENDER,
) -> Dict[str, str]:
    return {
        "first_name": first_name,
        "last_name": last_name,
        "gender": gender
    }

create_user("John", "Bond", "male")
</pre>
<p>
  In the example above, gender will be one of the values in the GENDER literal
  declaration — “male”, “female” or “non-conforming”.
</p>
<h4>Union</h4>
<p>
  Sometimes, a variable may have properties cutting across two type
  declarations. A variable might also be of two types.
</p>
<pre>
# type_hints_tutorials.py

from typing import Union


def get_room_temperature() -> Union[int, float]:
    return 20.8  # 20 also works
</pre>
<h4>TypedDict</h4>
<p>
  Dictionaries being one of the simplest forms of Data Structure in Python, are
  among the most used variable types in the language.
</p>
<p>
  Using a TypedDict could greatly improve the readability of the code especially
  in a large project where there are lots of declarations in lots of places;
  keeping track of <em>what</em> goes <em>where </em>gets hectic as you scale.
</p>
<pre>
# type_hints_tutorials.py
from typing import TypedDict, Union


class Card(TypedDict):
    rank: Union[str, int]
    suit: str

# The Card class now has behaviours of both TypedDict and dict classes

# Card can be used to annotate a variable
ace_of_spade: Card = {'rank': 'A', 'suit': '♤'}

# or can be instantiated
ace_of_spade = Card(rank='A', suit='♤')
</pre>
<h4>NoReturn</h4>
<p>
  NoReturn type is similar to void in other programming languages. It is used to
  declare that a function does not have any return.
</p>
<pre>
# type_hints_tutorials.py
from typing import NoReturn


def say_greeting() -> NoReturn:
    print("Hello World!")
</pre>
<h4>Final</h4>
<p>
  This is a typing construct used to indicate that a variable is not to be
  re-assigned or overridden in a subclass.
</p>
<pre>
# type_hints_tutorials.py
from typing import Final


MIN_NAME_LENGTH: Final = 2

# error flagged by type-checker
MIN_NAME_LENGTH += 1


class Validator(object):
    MIN_NAME_LENGTH: Final[int] = 4


class UserValidator(Validator):
    # this line will be flagged by the interpreter
    MIN_NAME_LENGTH = 3
</pre>
<h3>Using Static Type Checking in Python</h3>
<p>
  Python’s interpreter my default does not enforce type-checking. However, a
  variation of the Python interpreter — mypy, has been created to enforce
  type-checking on the interpreter level.
</p>
<p>You can use mypy in two ways:</p>
<ol>
  <li>Download the mypy command line and use it to run your Python scripts.</li>
  <li>Install the mypy extensions available on VSCode and PyCharm.</li>
</ol>
<h3>Type Annotation Best Practices</h3>
<h4>1. Use of Any</h4>
<p>
  The Any type should only be used when the exact type of the return variable or
  the function parameter is not known to us; this could be when using a third
  party library which does not have type annotations, or using a module without
  type annotations.
</p>
<h4>2. Enable static type-checking</h4>
<p>
  Type checking’s benefits of preventing errors and guiding the developer will
  not be felt as much if it is dynamic. If you are not a fan of the mypy command
  line, you can also install it as a VSCode or PyCharm extension.
</p>
<h4>3. Use tuples for fixed length arrays</h4>
<p>
  Tuples serve a double use as a record. So, when you have a known number of
  items in the array especially when they are not all of the same type, the
  variable is better suited for a tuple type.
</p>
<h4>4. Function return types</h4>
<p>
  Functions should do one thing and one thing only, thus they should have a
  single deterministic type.
</p>
<pre><strong>Want to Connect?</strong></pre>
<pre>Get weekly articles and coding tricks by <a href="https://tomisin.dev/subscribe">subscribing to my newsletter</a>.</pre>
<img
  src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=63cbdb16d97c"
  width="1"
  height="1"
  alt=""
/>
<hr />
<p>
  <a
    href="https://betterprogramming.pub/improving-your-python-projects-with-type-hints-63cbdb16d97c"
    >Improving Your Python Projects With Type Hints</a
  >
  was originally published in
  <a href="https://betterprogramming.pub/">Better Programming</a> on Medium,
  where people are continuing the conversation by highlighting and responding to
  this story.
</p>

Know how to use static type checking and type annotation best practices Photo by Artturi Jalli on Unsplash Type-checking is one of the foremost features of any modern-day programming language; it’s the reason TypeScript was born. Type-checking not only makes a codebase easier to extend and work with in general, but it also detects many programming errors quickly, reliably and automatically. First introduced in Python 3.5, Type Hints are the primary way Python developers annotate types to variables and funct

Improving Your Python Projects With Type Hints

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dwbqgVWvE9hM2c0_"><figcaption>Photo by <a href="https://unsplash.com/@jefflssantos?utm_source=medium&amp;utm_medium=referral">Jefferson Santos</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>There is nothing more satisfying than having your big project reachable on the domain name of your choice. You have put the long hours into your big project and now you are ready to open it up to the world and go big.</p>
<p>Besides the cosmetic satisfaction, there are lots of benefits to having a good top-level domain.</p>
<ol>
<li>A good top-level domain (.com, .net, .co, and so on…) adds to the credibility of your business.</li>
<li>It entitles your website to some services (Adsense for example, only accepts top-level domain names)</li>
<li>With a top-level domain, your site ranks higher on search engines.</li>
</ol>
<p>Now, let us dive straight to it!</p>
<h3>Purchase a Domain Name</h3>
<ol>
<li>Go to your favourite domain name registrar and purchase the domain name you wish to use for the project.</li>
<li>Navigate to the DNS settings for the newly purchased domain (and have it handy in a separate tab). It is fairly the same across all domain name providers and you should see something that looks roughly like this:</li>
</ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*50Q_VMLRlLG-ScUBxTbe2g.png"></figure><h3>Add the Domain Name to the App Service</h3>
<p>Head back to the Azure Portal and open up your App Service resource.</p>
<ol><li>On the left navigation menu, scroll down to “Settings” and select “Custom Domains”. You should be presented with this view.</li></ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sqv2b_z-_35nN8Q7j1gUyg.png"></figure><p>2. Select “+ Add custom domain” in the <strong>Custom Domains</strong> section. A pane should slide in from the right edge of your screen.</p>
<p>3. Type in your domain name in the custom domain box, and hit “Validate”. You should see more sections appear beneath.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*C4Zc1wZDND-G7sQp901dpw.png"></figure><p>4. Under <strong>Hostname record type</strong>, select “A record” if you wish to have your App Service reachable at the root-level “myprojectsite.com”. Otherwise, select “CNAME …” if you want your App Service running at a sub-domain “www.myprojectsite.com”, “blog.myprojectsite.com” or “order.myprojectsite.com”. For the sake of this article, we are going with “A record”. Take note of the content of the <strong>Custom Domain Verification ID </strong>box, and the content of the <strong>External IP address.</strong></p>
<p>5. Now, go back to the DNS Settings tab we opened in Step #2 of <strong>Purchase a Domain, </strong>to add two new records.</p>
<p>i. TXT record — set the name to “asuid” and set the value to the content of the Custom Domain Verification ID box. A TTL of 1 hour is fine for this record.</p>
<p>ii. A record — set the name to “@” and set the value to the content of the External IP address box. A TTL of 600 seconds is fine for this record.</p>
<p><strong><em>Be sure to delete any pre-existing A record, asides the “@” record you just added — this will prevent any clashes, and let traffic hit your App Service.</em></strong></p>
<p>6. Head back to the Azure portal tab, and wait a few seconds. If you set the records correctly, you should see the “Hostname availability” and “Domain ownership” boxes ticked.</p>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hgGrh4OOqOY9hBsc07zuUA.png"></figure><p>7. Click the “Add custom domain” button. You should see the newly registered custom domain appear in the view.</p>
<h3>Secure Your Domain</h3>
<p>Finally, you make the domain secure. This will make Azure App Service honour requests coming into your custom domain.</p>
<h4>Create an App Service Managed Certificate</h4>
<ol>
<li>Head to “TLS/SSL Settings” in under “Settings”, and navigate to the “Private Key Certificates” tab. &lt;&lt;INSERT PHOTO HERE&gt;&gt;</li>
<li>Click on “Create App Service Managed Certificate”, a pane will slide in from the right edge of the screen. &lt;&lt;INSERT PHOTO HERE&gt;&gt;</li>
<li>Select your newly added custom domain from the dropdown and click “Create”.</li>
</ol>
<h4>Bind App Service Managed Certificate to Your Domain</h4>
<ol>
<li>On the main page, click on the “Bindings” tab.</li>
<li>Click the “+ Add TLS/SSL Binding” button under the TLS/SSL bindings section. A pane should slide in from the right edge of the screen.</li>
<li>Select the domain for your project from the “Custom domain” dropdown.</li>
<li>Under the Private Certificate Thumbprint field, select the Managed Certificate we just created in the section above.</li>
<li>For the TLS/SSL Type, select “SNI SSL”.</li>
</ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nZZlMaqgP4c9sEb7zCvM8g.png"></figure><p>Congratulations! In a few moments, your App Service should be reachable via the custom domain.</p>
<p>Clap, share and subscribe if you found this walkthrough helpful!</p>
<p><a href="https://tomisin.dev/subscribe">Subscribe * Tomisin Abiodun</a></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=91a6f25ebf32" width="1" height="1" alt="">

There is nothing more satisfying than having your big project reachable on the domain name of your choice. You have put the long hours into your big project and now you are ready to open it up to the world and go big. Besides the cosmetic satisfaction, there are lots of benefits to having a good top-level domain. A good top-level domain (.com, .net, .co, and so on…) adds to the credibility of your business. It entitles your website to some services (Adsense for example,

How to Add a Custom Domain to Azure App Service

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*wvcxSM4KHd0hIBLO"><figcaption>Photo by <a href="https://unsplash.com/@6heinz3r?utm_source=medium&amp;utm_medium=referral">Gabriel Heinzer</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Preface</h3>
<p>Cloud Computing has been one of the big buzzwords of the technology industry for the better part of the last decade. As the internet keeps growing, there is the rising demand for more resources to cater for the storage, computing and networking needs of its users.</p>
<p>Some of the juggernaut tech companies “rent” out their vast pool of resources to individuals and companies, so they would not need to bother about having and maintaining servers and storage resources on premises. One of these tech companies is <strong>Microsoft, </strong>giving us <strong>Azure.</strong></p>
<p>Moving around the <a href="http://portal.azure.com/">Azure</a> portal to create, manage and carry-out administrative actions on our resources can be stressful and time-wasting, especially when there are many clicks involved. Truth be told, we are better off typing out single commands on our terminals, and letting our terminals do the heavy lifting for us — that’s where the Azure Command Line Interface (CLI) comes in.</p>
<blockquote>The Azure CLI is the official cross-platform command line tool for performing administrative actions on your Azure resources.</blockquote>
<p>Once you have the Azure CLI installed on your workstation, actions which previously took several scrolls and clicks, will be achieved by a single command. For example:</p>
<pre># To create a Azure Directory Identity<br>az ad sp create-for-rbac -n APP_NAME --skip-assignment</pre>
<pre># To configure a Web Application's <br>az webapp config set --name MY_APP_NAME ...</pre>
<h3>Installing the Azure CLI on Windows</h3>
<p>The Azure CLI on Windows comes as a Microsoft Installer (.MSI) distributable. So, you could do either of the following:</p>
<h4>Install from a .MSI distributable</h4>
<p>Download the <a href="https://aka.ms/installazurecliwindows"><strong>.MSI distributable</strong></a> and run the installer on your PC. It is a pretty straightforward install, follow the prompts.</p>
<h4>Install via PowerShell</h4>
<p>To install the Azure CLI via the PowerShell terminal,</p>
<ol>
<li>Open an elevated PowerShell session (run PowerShell as an administrator).</li>
<li>Run the following command to download and install (or update, if you have an existing installation) the latest version of the Azure CLI tool:</li>
</ol>
<pre>curl -sL <a href="https://aka.ms/InstallAzureCLIDeb">https://aka.ms/InstallAzureCLIDeb</a> | sudo bashProgressPreference = 'SilentlyContinue'; Invoke-WebRequest -Uri <a href="https://aka.ms/installazurecliwindows">https://aka.ms/installazurecliwindows</a> -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet'; rm .\AzureCLI.msi</pre>
<h3>Installing the Azure CLI on macOS</h3>
<p>If you are working on a macOS computer, install the Azure CLI via the macOS package manager <a href="https://brew.sh/"><strong>homebrew</strong></a>.</p>
<h4><strong>Install Homebrew (optional if you do not have homebrew currently installed)</strong></h4>
<p>To install homebrew, open a terminal session on your Mac, and run the following command:</p>
<pre>/bin/bash -c "$(curl -fsSL <a href="https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh">https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh</a>)"</pre>
<h4>Setup Python3 for Homebrew (optional if you do not have Python3 setup correctly)</h4>
<p>Homebrew needs Python3 to work correctly. Run the following command to make absolutely sure.</p>
<pre>brew update &amp;&amp; brew install python3 &amp;&amp; brew upgrade python3<br>brew link --overwrite python3</pre>
<h4><strong>Install Azure CLI</strong></h4>
<p>Run the following command to install the Azure CLI on your PC</p>
<pre>brew update &amp;&amp; brew install azure-cli</pre>
<h3>Installing the Azure CLI on Ubuntu</h3>
<p>For Ubuntu, thankfully, the official team in charge of the Azure CLI created a script that will automate the installation process. Run the following command in a terminal session and you are set!</p>
<pre>curl -sL <a href="https://aka.ms/InstallAzureCLIDeb">https://aka.ms/InstallAzureCLIDeb</a> | sudo bash</pre>
<p>That is it, you are ready to take actions on your Azure resources, at the most productive way you can.</p>
<p>Share, like and <strong>subscribe below</strong>, if you found this article helpful!</p>
<p><a href="https://tomisinabiodun.azurewebsites.net/subscribe">Tomisin Abiodun</a></p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=61f1147c590c" width="1" height="1" alt=""><hr>
<p><a href="https://medium.com/geekculture/how-to-install-azure-cli-on-windows-macos-and-ubuntu-61f1147c590c">How to Install Azure CLI on Windows, macOS and Ubuntu</a> was originally published in <a href="https://medium.com/geekculture">Geek Culture</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>

Cloud Computing has been one of the big buzzwords of the technology industry for the better part of the last decade. As the internet keeps growing, there is the rising demand for more resources to cater for the storage, computing and networking needs of its users. Some of the juggernaut tech companies “rent” out their vast pool of resources to individuals and companies, so they would not need to bother about having and maintaining servers and storage resources on

nextjs

Displaying a Leaflet Map in NextJS

coding

Maximize Your Python Search Capabilities with Huntela

Get one coding trick and an article delivered every week at no extra cost

django

Simple Signing and Unsigning in Django

cryptography

Encryption in Plain English

database

Implementing Soft Delete in Django: An Intuitive Guide

front-end-development

Top Frontend UX/UI Tools 2022

logging

Log Level Hierarchy

javascript

Publishing Your First React Library on npm

distributed-systems

Orleans: CollectionAge vs CollectionQuantum

crash-course

CSS: Styling First Child Elements

c-sharp-programming

Understanding Reflection in .NET within 5 minutes.

game-development