Defining the Django REST Framework (DRF), Django’s MVT design pattern, and how it compares to the more typical MVC architecture

This week to experiment with a new backend framework, I decided to build the usual to-do app powered by a Django on the backend and React on the frontend. In the process, I started learning more about the Django REST Framework, a powerful toolkit for building Web APIs needed on the server side, as well as its Model-View-Template design architecture.

What is Django?

Before diving into some core concepts related to building Web APIs with Django, let’s define what Django is and how…


A collection of the basics for learning Python, including some main concepts spanning from data types to parsing JSON.

Note: This post loosely follows Brad Traversy’s Python crash course

Variables

Containers for values

  • No command for declaring a variable (i.e. var/const/let ), instead a variable is created when it is assigned a value → x = 10
  • Variables are case sensitive
  • Variables must start with a letter or an underscore
  • Variables can contain numbers but cannot start with a number

Data Types

Strings — surrounded by quotation marks

Insert a variable into a string (i.e. concatenate):

state = 'Pennsylvania'print('I live in ' + state)
# returns I live in Pennsylvania

With this method, we can only insert a variable of a string data type(cannot insert a number…


Understanding how the scripting language gets implemented with React by setting up a habit tracking app.

After learning that the 2nd most loved programming language of 2020 was TypeScript, naturally, for many early JavaScript developers discovering TypeScript like myself, the question lends itself to whether and how engineers are using it with the 2nd most loved and most used JavaScript framework/library, aka React.

Many in the community believe the two go well together; one developer offers an explanation as to why:

JSX is syntactic sugar. Every JSX element you open and pass properties through, is nothing but a function call…


Behind Rust, TypeScript came in as the second most loved programming language in Stack Overflow’s 2020 Developer Survey. I decided to join the hype.

Javascript icon within a larger Typescript icon
Javascript icon within a larger Typescript icon

The simple what and why of TypeScript

TypeScript was developed by Microsoft and released in 2012 to address various shortcomings with JavaScript when it comes to building large-scale applications, namely the fact that JavaScript has no way of checking and informing developers when one area of code will break other areas, like a strict language will do. TypeScript, as a static scripting language, adds power to Javascript as it will check your code for errors, similar to a stricter programming language.

Using the…


A case for CSS Modules and how to implement them into your React App

If you are relatively new to CSS, you may or may not have encountered the significant problem that occurs as an application’s style expands— since CSS rules follow global scope, two or more classes of the same name will collide. Handling multiple stylesheets and keeping track of naming conventions in CSS files can get burdensome, and if you aren’t careful enough, you are bound to encounter some conflicts from identical class names.

CSS Modules can solve these errors likely to appear, especially as your application grows…


An introduction to unit testing

Unit testing is the process of isolating and testing a small, specific piece, or unit, of code, to ensure each piece is running as expected. In object-oriented programming, an entire class is considered a unit, while functional programming considers an individual method or function. Unit tests are generally differentiated from integration tests, which verify that the units are working properly as a whole.

As a fundamental part of the Test-Driven Development (TDD) methodology, unit tests are written before the actual code is written (the “test-first” approach). These tests drive the creation and design of the…


A how-to guide for adding this state management library to an existing React app

Yesterday, I made a simple to-do app using React and a Rails backend, which has some functionality of adding and deleting tasks. Though this is small application without large amounts of application state that are needed in many places (in other words, not the best candidate for using a state management library), I thought it would be an easy and clear example of how to add Redux hooks to manage state.

  • Note, this tutorial will not go over the backend setup, but you can take a…


A brief look into the interdisciplinary field & why it matters

Have you ever heard the belief that data drives the best decision-making, and been slightly confused at what this widely held assumption means in practice? How exactly do teams turn complex and sometimes dense data into insights and actionable decisions? The answer: by means of some sort of graphical representation or abstraction of analytics, or data visualization, for patterns to be more easily depicted and concepts (hopefully) universally conveyed.

There’s been a buzz generating around data visualization within the past few years — ‘data is the new oil’ becomes…


Examining the overlap between accessibility and SEO principles

When building a website or app, accessibility principles have in recent years been reaching the forefront of dev best practices as awareness builds around making the user experience as smooth, intuitive, and well, accessible to everyone as possible, regardless of how a user interacts with a page and its content. It is a concept that should not be overlooked, and one that I have been more seriously considering and learning how to implement in my own projects.

Ramp over stairs leading to green door
Ramp over stairs leading to green door

I’ve also begun diving into the depths of SEO, and what I didn’t expect to…


This week as I’ve been building a React site with TailwindCSS, I’ve been learning how to integrate the app with responsive design principles to create a seamless user experience despite screen size or platform.

Overall, I’ve found using Tailwind’s structure for responsive design to be increasingly intuitive and fairly painless, especially due to its utility-first configuration (and never having to leave HTML).

I soon discovered that the key methods to making a site responsive with Tailwind rely on the fact that Tailwind takes a mobile-first approach, meaning that all class styles default to mobile styling. To change any aspect (sizing…

Sara Bastian

full-stack developer exploring how software can solve real-world problems | https://sarabastian.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store