DEV Community: -

Basics of Styled-Components

Tue, 24 Oct 2023 21:33:29 +0000

Styled-Components is a JavaScript library for styling React components by allowing you to write CSS code as JavaScript. It's main goal is to simplify and enhance styling in React apps. In this blog, I want to dive into the basics of styled-components and give you the confidence to use it in your own project.

Instead of defining styles in separate CSS files or using complex class names, styled-components encourages you to write your styles as tagged template literals in JavaScript. This means you can create components with their styles encapsulated, making your code more modular and maintainable.

Getting Started:

Begin by installing styled-components in your React project using npm or yarn:

npm install styled-components
# or
yarn add styled-components

After installation you can import it into your components like this:

import styled from 'styled-components';

Now, you're ready to start styling your components.

How It Works:

Styled-components uses tagged template literals, a feature of ES6 JavaScript. You can define a styled component by calling the styled function and passing in a template string. Here's a simple example using a button:

const Button = styled.button`
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
`;

const MyComponent = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
};

In the code above, we've created a component named Button with styles defined directly within the backticks. The resulting Button component can be used like any other React component, and the styles will be automatically applied. Now that we know how to get started, let's take a look at some more syntax that you can use.

Additional Styled-Components Syntax:

Dynamic Styles with Props:

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
`;

const MyComponent = () => {
  return (
    <>
      <Button primary>Click me!</Button>
      <Button>Click me also</Button>
    </>
  );
};

The above allows you to use a primary prop in your button component to determine the background color. This is useful if you need dynamic styling that depends on different state. The button that has a primary prop will be blue. The button without will be gray.

Extending Styles:

const PrimaryButton = styled(Button)`
  background-color: blue;
`;

Using the styled(element) syntax allows you to extend styles from already defined components. You can even do this with styled-components you've already made so that you don't have to double up on styles.

Global Styles:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Source Sans Pro', sans-serif;
}
`;

GlobalStyle returns a StyledComponent that does not accept children. Place it at the top of your React tree and will inject the styles when the component is rendered.

Media Queries:

const Container = styled.div`
  width: 100%;
  padding: 20px;

  @media (min-width: 768px) {
    width: 50%;
  }
`;

Keyframe Animations:

import styled, { keyframes } from 'styled-components';

const spin = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const Spinner = styled.div`
  width: 50px;
  height: 50px;
  border: 4px solid #3498db;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: ${spin} 2s linear infinite;
`;

Theming with ThemeProvider:

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'green',
};

Use ThemeProvider to pass themes

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

You will now be able to access the theme passed into ThemeProvider inside of all the nested styled-components no matter how many levels deep are there. Access the theme inside of your styled-component by using the dynamic styling syntax above.

Above I've shown you the basics of styled-components and how to get started. Styled-components provides a flexible and robust way to manage styling in React applications, making it a valuable tool for modern web development. I've really enjoyed using it in my projects and I hope that you will too!

Dynamic Page Titles in Ruby on Rails

Tue, 29 Nov 2022 01:38:37 +0000

Adding dynamic page titles to your Rails web application can be a great way to give your page a more professional look. It is actually very easy to change the page title and I'm going to show you how. In this tutorial, I am going to assume that you know how to create a new rails app as well as the basics of using the terminal.

In this tutorial I am using Rails version 7.0.4 and Ruby version 2.7.4.

I've also added this to a Github repository in case you wanted to clone the code and follow along.

https://github.com/jfinley6/rails-dynamic-page-title-tutorial

Scaffolding/Routes/Seeds

After making a new app and navigating into the folder there are several things we need do to do to before we show off our functionality. First we're going to create a scaffold which will generate our controller, model, and views. I've decided to name it Book and give our model a title, author, and pages attributes.

➜  books git:(main) ✗ rails g scaffold Book title author genre pages:integer

If you've done this correctly, you should see the following output in your terminal.

invoke  active_record
      create    db/migrate/20221128223152_create_books.rb
      create    app/models/book.rb
      invoke    test_unit
      create      test/models/book_test.rb
      create      test/fixtures/books.yml
      invoke  resource_route
       route    resources :books
      invoke  scaffold_controller
      create    app/controllers/books_controller.rb
      invoke    erb
      create      app/views/books
      create      app/views/books/index.html.erb
      create      app/views/books/edit.html.erb
      create      app/views/books/show.html.erb
      create      app/views/books/new.html.erb
      create      app/views/books/_form.html.erb
      create      app/views/books/_book.html.erb
      invoke    resource_route
      invoke    test_unit
      create      test/controllers/books_controller_test.rb
      create      test/system/books_test.rb
      invoke    helper
      create      app/helpers/books_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/books/index.json.jbuilder
      create      app/views/books/show.json.jbuilder
      create      app/views/books/_book.json.jbuilder

Next you're going to want to run your pending migration to create the Books table.

➜  books git:(main) ✗ rails db:migrate
== 20221128223152 CreateBooks: migrating ======================================
-- create_table(:books)
   -> 0.0026s
== 20221128223152 CreateBooks: migrated (0.0026s) =============================

Once this is done, we're going to want to create some books for our views as well as change the index page for our website.
First go to your config > routes.rb file and make sure it looks like the routes.rb file below. This is going to tell Rails which route we should take when the URL ends in "/". In this case, our home page will render the app > views > books > index.html.erb file.
Secondly we can edit our db > seeds.rb file with a couple books to populate our page.

#routes.rb
Rails.application.routes.draw do
  root "books#index"

  resources :books
end

#seeds.rb
Book.create(title: "Fellowship of the Ring", author: "J.R.R. Tolkien", genre: "Fantasy/Adventure", pages: 423)
Book.create(title: "Heir to the Empire", author: "Timothy Zahn", genre: "Science Fiction", pages: 528)
Book.create(title: "Mistborn: The Final Empire", author: "Brandon Sanderson", genre: "Fantasy", pages: 672)

Views

Now that we've got our routes setup, we can take a look at our views. We'll be looking at two files, app > views > books > index.html.erb and show.html.erb. I've modified the styling slightly and removed the delete, edit and new book links for simplicity. The code below is exactly what I have in each respective view.

<%# index.html.erb %>
<p style="color: green"><%= notice %></p>

<h2 style="text-align: center">All Books</h2>

<div id="books" style="display: flex; flex-direction: column; align-items: center">
  <% @books.each do |book| %>
    <div style="border-style: solid; width: 300px; text-align: center; margin-bottom: 5px">
      <%= render book %>
    <p>
      <%= link_to "Show this book", book %>
    </p>
    </div>
  <% end %>
</div>

 <%#= show.html.erb %>
<p style="color: green"><%= notice %></p>

<div style="display: flex; flex-direction: column; align-items: center">
  <%= render @book %>
  <%= link_to "Back to books", books_path, style: "text-align: left" %>
</div>

We also want to go to app > views > layouts > application.html.erb and replace the contents of our title tag with the following code. The yield keyword identifies a section where content from the view should be inserted. We can give it a symbol name and now the page title will display to whatever value :title is assigned.

<%= yield :title %>

Now we can go into our show.html.erb and add the following at the top of the file. content_for is how you specify which content is going to be rendered into which content area. In this case, we are assigning a value to :title.

<% content_for :title do %>
  <%= @book.title %>
<% end %>

Now, depending on which "Show this book" you click, it will display the name of the book in the browser tab. You can also add this to index.html.erb or any other view where you want the page title to reflect the content on the page.

Adding a Helper Method

We can also simplify this by adding a helper method. I've added the following to app > helpers > books_helper.rb

module BooksHelper

    def title(title)
        content_for :title, title
    end

end

Now we can replace our previous content_for code in show.html.erb.

<%= title @book.title  %>

This will call the title helper method and achieve the same thing we had before. This allows us to reuse the same code over and over and reduce the amount of code that we need.

Conclusion

Using yield and content_for is a great way to have dynamic page titles. Depending on which view we are rendering, we can change what content is being rendered which is great for our page title. Now we can give unique page titles for all our views and give our website an added professional feel. If you have any questions about I'd be happy to try my and answer!

Interesting JavaScript Tips

Thu, 06 Oct 2022 16:03:48 +0000

At the start, JavaScript seemed overwhelming to me with everything that it had to offer. I've come to learn over time that this isn't something to worried about but rather thankful for. There are a lot of cool tricks that you can do with JavaScript and it is exciting knowing just how much more is out there to learn. I'm going to go over some cool things you can do in JavaScript and hopefully teach you something new!

Filter Unique Values from Arrays

With the introduction of ES6, we can use the new Set object and "spread operator" to create a new array with unique values.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Ternary Operator

The ternary operator is a quick write to write quick conditional statements.

function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

console.log(getFee(true));
// expected output: "$2.00"

console.log(getFee(false));
// expected output: "$10.00"

console.log(getFee(null));
// expected output: "$10.00"

In this example isMember is the condition. If the condition is true, whatever expression is after the "?" will be returned. If the condition is false, the expression after the ":" will be returned. This syntax is relatively simple and is great for conditional rendering in programs like React.

Convert to String

To convert a number to a string quickly, we can add an empty string to the number.

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

Convert to Number

The opposite can also be quickly achieved using the addition operator.

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Random Item from Array

Although some programs make this easier with much less code, it is still cool that JavaScript can manage this.

let items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2145, 119];

let randomItem = items[Math.floor(Math.random() * items.length)];

Empty out an Array

Calling the length function on an array and setting it equal to 0 will make the array empty. Similarly using a number other than 0 will truncate the array to that specific length.

let myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].

let newArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
newArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

Sort Array Alphabetically

//sort alphabetically
function alphabetSort(arr)
{
  return arr.sort((a, b) => a.localeCompare(b));
}
let array = ["d", "c", "b", "a"]
console.log(alphabetSort(array)) // ["a", "b", "c", "d"]

Fun CSS Tricks

Thu, 06 Oct 2022 16:03:33 +0000

One of my favorite parts about Flatiron School has been messing with CSS and seeing what cool stuff I can both find and come up with. By reading this blog I'm going to show you some CSS demos that you might be able to spruce up your website with.

Fonts

A good font can make any website look more stylized. There are a handful of fonts built into CSS but one of the best font features is the ability to import new ones from outside sources. All you need to do is specify which url you are grabbing from and which CSS font you are inheriting from.

Cursors

Several times in my projects, I have used different cursors both for amusement and for practical effects. I learned that it's easy as adding a cursor property to your selector and then adding a keyword. When you hover over the element, the cursor should appropriately change.

Fade In/Out

Animations can be very powerful in CSS. If you ever have a need to make text or other elements fade in or out from your page, you can easily add a fade property to CSS file. All you need to do is specify the starting and ending opacity, and how long you want the animation to take.

Transform

Another cool and useful animation is Transform, which allows you to move an element around on the page. Below I've added a rotate property to the image, and specify 4 full rotations to happen in 4s. You can do all types of animations with the transform property, such as scale, skew, translate(moves element horizontal/vertical), and even add 3d perspective.'

Image Filters

Now you, yes you, can build Instagram! Well, there might be some additional programming knowledge involved, but Filters are a HUGE part of instagram. Luckily, the CSS filter property gives you a ton of control on how your images look. Below are some of the filters you can added to spice up your images.

Conclusion

Now these are just a couple CSS tricks you can use to add some styling to your website. In reality CSS is a seemingly endless amount of content that can really bring out the creativity in people. What are some cool things you've managed to find or come up with in CSS?

Rails Command Line Tips and Tricks

Thu, 06 Oct 2022 15:58:50 +0000

Working in Rails for me has been satisfying as I've learned the ins and outs. Going from not even knowing what an API to being able to build my own API with custom routes and relational tables has made it all feel worth it to me. Often I like to test my methods in the console but the data isn't always formatted very well. I'm going to share a couple ways to make the data more readable so that you can better understand your data.

For all of the following you are going to want to add the gem I've specified to your Gemfile and then run "bundle install". At the time of this writing I am using ruby "2.7.4" and rails "7.0.3".

Awesome Print

Add gem 'awesome_print' to Gemfile and bundle. After running "rails c" you can put "ap" before the object you want to call and it will print with full color and proper indentation.

> ap Movie.first
  Movie Load (0.2ms)  SELECT  "movies".* FROM "movies" ORDER BY "movies"."id" ASC LIMIT ?  [["LIMIT", 1]]
#<Movie:0x00000003fcf7f8> {
             :id => 1,
          :title => "Batman",
           :year => 1989,
          :genre => "Action, Adventure",
       :director => "Tim Burton",
     :production => "USA, Great Britain",
      :boxoffice => "$411 348 924",
    :description => "The Dark Knight of Gotham City begins his war on c...",
          :score => 7.6,
     :created_at => Sat, 23 Jul 2016 09:47:15 UTC +00:00,
     :updated_at => Sat, 23 Jul 2016 09:47:15 UTC +00:00
}

Hirb

Add gem 'hirb' to Gemfile and bundle. After running "rails c" you need to enter "hirb.enable". Once you do that, your data will be presented in a nicely formatted table.

2.7.4 :002 > Hirb.enable
 => true 
2.7.4 :003 > Comment.all
  Comment Load (0.5ms)  SELECT "comments".* FROM "comments" ORDER BY "comments"."created_at" DESC                                               
+----+--------------------+---------+---------+--------------------+---------------------+
| id | body               | user_id | post_id | created_at         | updated_at          |
+----+--------------------+---------+---------+--------------------+---------------------+
| 2  | Great topic!       | 3       | 1       | 2022-09-16 02:3... | 2022-09-16 02:36... |
| 1  | You also do not... | 2       | 1       | 2022-09-16 02:3... | 2022-09-16 02:36... |
+----+--------------------+---------+---------+--------------------+---------------------+
2 rows in set

Conclusion

These are just a couple of ways that you can make your Rails table look a little more organized and easy to read. Give them a try in your next project. Are there any cool tips and tricks for the Ruby command line that you know of?

Basics of Local Storage

Thu, 04 Aug 2022 16:28:00 +0000

Early on in my Software Engineering career, one of the first questions I had was how to store data on the client's computer for future use. This data will only be available in the browser you are currently working in and can be readily accessed when the page is reloaded. At this stage in my learning, I hadn't yet had any access to backend programming and didn't know how to accomplish this. This is where Local Storage comes in.

What is Local Storage?

Local storage is a key/value database that is available on a user's browser. This database can be persisted for an indefinite amount of time or until it is manually deleted. Local storage currently only accepts strings so if you are storing an array or object you are going to need to use JSON.stringify() on it first to convert it into a string.

When Not To Use Local Storage?

Although Local Storage has many uses, it is important to not save any sensitive information. This includes passwords, API keys, authentication tokens, etc. Malicious third-parties can easily access this information and use it to their own gain.

When To Use Local Storage?

As mentioned earlier, Local Storage gives you persistence on your website. It is used to store information that the site should still be able to have even if it is refreshed. This is commonly done to save user preferences like UI themes. Local storage can also be used to save game statistics. A recent example is the popular game Wordle. Every day you play the game it saves items like the amount of guesses, your current win streak, and the win percentage. If you were to try and open the game in another browser or computer, you would find that all of your statistics would be gone.

Another Example

Let's take a look at an example with Dev.to. Visitors of the website who have a profile are able to change appearance settings like site theme and font. If we were to open up the browser developer tools we can take a look at what is currently saved in developer tools.

Above we can see that the browser currently has several keys saved inside of Local Storage. Inside of the config_body_class key, there is a value of dark-theme and sans-serif. If one were to change the theme and the font in the settings, this change would be reflected in the config_body_class key and would be persisted upon page reload.

Local Storage Methods

localStorage.key(index)

This method can be used to retrieve a value at a specific index. Passing in an index number will return all of the values at that specific index.

let key = localStorage.key(0)
//This will get the value of the first item in localStorage

localStorage.setItem(key, value)

This allows you to save a key/value pair to your browser.

localStorage.setItem("key", "value")
//This will add a key called "key" 
//with a value of "value" to localStorage

To add something other than a string, you can use the following syntax

const movies = [
  "Star Wars",
  "Lord of the Rings",
  "Harry Potter"]

localStorage.setItem("key", JSON.stringify((movies)))

localStorage.getItem(key)

This will read the data from local storage for the specified key. If the key doesn't exist, it will return null.

localStorage.getItem("key")
//To retrieve a specific key from
//local storage, you can pass in the key 
//as a variable into getItem

To retrieve a key with a value other than a string, you will need to parse it first with the following syntax.

JSON.parse(localStorage.getItem("key"))

localStorage.removeItem(key)

This method will remove the specified key from localStorage. If the specified key does not exist then the method will return undefined.

localStorage.clear()

This method takes in no parameters and will simply remove all keys from localStorage. These keys will need to be added again if they are to be accessed again.

Conclusion

Local storage is a database of key/value pairs that is accessible inside of the browser. It is very important to not store any sensitive data inside of LocalStorage. When storing objects inside of LocalStorage you need to remember to convert it to a string using JSON.stringify(). You can retrieve this object using JSON.parse(). The possibilities are endless with LocalStorage.

What are some ways that you might use LocalStorage in a future project?