teleren/devto huggingface dataset:
Flex Your Web Design Skills to the Max with These CSS Flexbox Methods
Tags: css, flexbox, tip, webdev
Published: 2023-01-07 07:29:24

Are you ready to flex your web design muscles with the power of CSS Flexbox? With this ultimate guide, you'll learn all the different methods available to create stunning, flexible layouts for your website.

First, let's start with the basics. What is CSS Flexbox? It's a layout module in CSS that makes it easy to create flexible, responsive designs. It's perfect for building modern, flexible websites that look great on any device.

So, how do you use CSS Flexbox? It's easy! Just add the "display: flex" property to the parent element, and then use the various flexbox properties to customize the layout of your child elements.

Here are some of the most popular methods available with CSS Flexbox:

- flex-direction: This property sets the direction of your flex items. You can choose between "row", "row-reverse", "column", and "column-reverse".

- justify-content: This property aligns your flex items along the main axis (horizontally for "row", and vertically for "column"). You can choose between "flex-start", "flex-end", "center", "space-between", and "space-around".

- align-items: This property aligns your flex items along the cross axis (vertically for "row", and horizontally for "column"). You can choose between "flex-start", "flex-end", "center", "baseline", and "stretch".

- flex-wrap: This property controls whether your flex items should wrap onto multiple lines or not. You can choose between "nowrap", "wrap", and "wrap-reverse".

- flex-flow: This is a shorthand property for setting both the "flex-direction" and "flex-wrap" properties at the same time.

- align-content: This property aligns your flex lines along the cross axis (when you have multiple lines of flex items). You can choose between "flex-start", "flex-end", "center", "space-between", "space-around", and "stretch".

Here's an example of how you can use CSS Flexbox to create a simple, flexible layout:

```
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

```
And that's just the tip of the iceberg! There are many more methods available with CSS Flexbox, such as "flex-grow", "flex-shrink", and "flex-basis", which allow you to control the size and growth of your flex items.

With CSS Flexbox, the possibilities are endless. So why wait? Start flexing your web design skills today and create amazing, flexible layouts for your website!
How To Find A Job With Soft Skills When Coding Skills Are Weak III
Tags: motivation, career
Published: 2023-01-07 08:00:00

On Tuesday December 20th, 2022, I held a talk about **How to get a job as a developer with soft skills when tech skills are weak**.

It was for the last episode this year on [The  Monthly Dev](https://www.meetup.com/the-monthly-dev-world-class-talks-by-expert-developers/) event hosted by [daily.dev](https://daily.dev/). 

## Be Smart Using GitHub

The best way to demonstrate your soft skills, in my opinion, is to use [GitHub](https://github.com/) to its fullest extent.

GitHub already offers many of the **hard skills** I mentioned in previous articles, like **Scrum** and **project management**, **Git version control**.

At the same time it offers a pretty easy way to combine these skills with **soft skills** like **time management**, **problem solving** or **communication skills**.

### List of all skills combined

- Project Management
- Agile Methodologies
- Git Version Control
- Time Management
- Problem-Solving 
- Critical Thinking
- Communication
- Interpersonal Skills

All of these terms will catch the recruiter's eye just by reading through your resume.

My advice to anyone who is aware of their lack of programming skills:

> Focus on other technical skills that are much easier to learn!

Of course, you don't need to focus on GitHub if you are already using GitLab or some other software. I'm sure all my tips can be implemented with other software as well.

In the next article we are going to talk about a **good combination of soft skills and technical skills** and how you can use them to be convincing in an interview.

The good thing is that no matter what project you present, whether it's a simple project or one with more complex code, the soft skills remain the same: how you handle time management, problem solving and critical thinking, communication skills, interpersonal skills, and more.

This gives you the opportunity to talk a lot about soft skills during the interview to show how you approach certain things, how you handle different situations, and more.

---

_Stay tuned for the next part._
How to handle multiple queries with React-Query
Tags: javascript, 100daysofcode, react
Published: 2023-01-07 07:56:19

There are two ways to handle multiple queries with React Query.

### Method 1: Call useQuery Twice

The simplest method is just to call useQuery twice but re-assign the data variable that we're destructuring. They can't both be called data.

```javascript
const { data: userData } = useQuery("users", fetchUsers);
const { data: postData } = useQuery("posts", fetchPosts);
```

### Method 2: useQueries

There is also `useQueries` which is perfect for this situation. It returns an array of queries. We can get access to each one using array destructuring.

```javascript
const [posts, users] = useQueries([
    { queryKey: ["posts"], queryFn: fetchPosts },
    { queryKey: ["users"], queryFn: fetchUsers }
  ]);
```

The queries that are returned from `useQueries` also contains the usual suspects like `isLoading` `isError` etc.

```javascript
const [posts, users] = useQueries([
    { queryKey: ["posts"], queryFn: fetchPosts },
    { queryKey: ["users"], queryFn: fetchUsers }
  ]);

const { data, isLoading } = posts;
```

There are also situations where you may want to wait for everything to finish before rendering any data. In that case, we can check if any / some of the queries are still in their loading state (`isLoading` comes from the `useQuery` hook).

```javascript
  const results = useQueries([
    { queryKey: ["posts"], queryFn: fetchPosts },
    { queryKey: ["users"], queryFn: fetchUsers }
  ]);

  const isLoading = results.some((query) => query.isLoading);

  return { isLoading, results };
```

Within our component, we only need to pull in 1 `isLoading` value and handle that case until ALL of the results are ready.
Get Your Grid On: A Beginner's Guide to CSS Grid
Tags: css, grid, webdev, html
Published: 2023-01-07 07:55:07

Are you ready to take your web design skills to the next level with the power of CSS Grid? With this ultimate guide, you'll learn all the different methods available to create stunning, grid-based layouts for your website.

First, let's start with the basics. What is CSS Grid? It's a layout system in CSS that makes it easy to create grid-based designs. It's perfect for building modern, responsive websites that look great on any device.

So, how do you use CSS Grid? It's simple! Just add the "display: grid" property to the parent element, and then use the various grid properties to customize the layout of your child elements.

Here are some of the most popular methods available with CSS Grid:

- grid-template-columns: This property sets the number and size of the columns in your grid. You can specify the size in pixels, percentages, or any other valid CSS unit.

- grid-template-rows: This property sets the number and size of the rows in your grid. You can specify the size in pixels, percentages, or any other valid CSS unit.

- grid-template-areas: This property allows you to specify the layout of your grid using named grid areas. It's a great way to create complex, responsive layouts with ease.

- grid-column-gap: This property sets the size of the gap between your grid columns. You can specify the size in pixels, percentages, or any other valid CSS unit.

- grid-row-gap: This property sets the size of the gap between your grid rows. You can specify the size in pixels, percentages, or any other valid CSS unit.

- grid-gap: This is a shorthand property for setting both the "grid-column-gap" and "grid-row-gap" properties at the same time.

Here's an example of how you can use CSS Grid to create a simple, grid-based layout:

```
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

.grid-item {
  background-color: lightblue;
  border: 1px solid black;
}

```
And that's just the beginning! There are many more methods available with CSS Grid, such as "grid-template", "grid-auto-columns", and "grid-auto-rows", which allow you to further customize your grid layout.

With CSS Grid, the possibilities are endless. So why wait? Start gridding up your web design skills today and create amazing, responsive layouts for your website!
Double pendulums, how do they work? | Physics | Simulation | TypeScript
Tags: tutorial, javascript, typescript, webdev
Published: 2023-01-07 07:49:38

Are you guys interested in a little sprinkle of physics and simulations on your web dev journey? Here is a perfect (okay, maybe just good (or not...)) tutorial just for you!

{% embed https://youtu.be/vjVAibzNO2U %}
How to ask Technical Questions ?
Tags: beginners, career, webdev, codenewbie
Published: 2023-01-07 06:57:38

It can be hard to ask technical questions, especially if you don't know where to start. To help you ask technical questions more effectively, here are some suggestions:

1. Start by clearly explaining the problem you're trying to solve or the question you have. This will help the person you're asking for help understand the context of your question.

2. Provide as much detail as possible. This includes any error messages you may have received, the steps you took leading up to the problem, and any other relevant information.

3. Be specific. Vague questions are difficult to answer, so try to be as specific as possible when asking your question.

4. Use correct spelling and grammar. This will show that you are taking the time to ask a thoughtful question and will make your question easier to understand.

5. Be polite and respectful. Remember that the person you're asking for help is taking time out of their day to try and assist you, so be sure to thank them for their help and considerate of their time.

I hope you find these hints useful!
This week’s newsletter is out! (07-01-2023) - Locked Out Again
Tags: javascript, tech, webdev, discuss
Published: 2023-01-07 06:05:43

---
title: This week’s newsletter is out! (07-01-2023) - Locked Out Again
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Locked Out Again

https://markjgsmith.substack.com/p/mark-smiths-newsletter-07-01-2023

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Architect/Explain your Project with NextSketch 2
Tags: news, productivity, showdev, architecture
Published: 2023-01-07 05:56:40

It's a new year! 

NextSketch 2 is officially available for download on the [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20805-nextsketch2!). It's been 4 months of hard work and learning lots about the IntelliJ Plugin SDK, and we managed to hit release!

> What is NextSketch 2?

NextSketch 2 is an IntelliJ-Platform Plugin that lets you design the architecture of your project with diagrams as well as use those diagrams to explain how your project works to others.

> How is it different from NextSketch (1)? 

NextSketch (1) was our first attempt and building such a tool, and while it did work, it left some things to be desired like zooming in/out, high-quality rendering, sub-diagrams and more inspections than just text or color. NextSketch 2 is a from-scratch rewrite that fixes these problems.

> I've made diagrams with NextSketch (1) and want to transition?

If you currently use NextSketch (1) and would like to transition over, please follow our [Transition Guide](https://mohammed-baig.gitbook.io/nextsketch-2-docs/transition-guide).

All documentation is set up and you can access it from inside NextSketch 2 using the "View Docs" link or the ? button inside the Sketch Designer.

Since we started building NextSketch 2, we've been updating DEV on our progress by posting every time we implement something new and it's been a fun journey watching NextSketch 2 grow from nothing more than an empty Tool Window to a released product.

Thanks DEV, for letting us share NextSketch (1 & 2) with you and we hope you like it. :)
Responsive Websites Made Simple
Tags: webdev, beginners, tutorial, css
Published: 2023-01-07 05:39:14

## Introduction
Responsive design is the practice of designing and building a website in a way that ensures the site is easy to read and navigate on any device. This includes devices with small screens, such as smartphones, as well as larger screens, such as desktop computers.
#### [MDN Web docs Definition](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
>Responsive web design (RWD) is a web design approach to make web pages that render well on all screen sizes and resolutions while ensuring good usability. It is the way to design for a multi-device web.

---

## Why is responsive website important?
The importance of responsive design stems from the fact that the number of people accessing the internet from mobile devices has continued to grow in recent years. If a website is not designed to be responsive, it may be difficult or impossible for users to access the site's content on their mobile devices. This can lead to a poor user experience, which can hurt the website's reputation and lead to fewer people visiting the site.

## How you can achieve it?

**There are several ways to achieve responsive design:**

1.    **Use a responsive framework:** There are many responsive frameworks available, such as Bootstrap and Foundation, that provide a set of predefined styles and layout components that can be used to build a responsive website.
2.     **Use media queries:** Media queries allow you to specify different styles for different screen sizes. You can use media queries to change the layout and styling of your website based on the width of the screen.
3.     **Use flexible grids:** By using flexible grids, you can create a layout that adjusts to the size of the screen. This can be achieved using CSS grid or flexbox.
4.     **Use responsive images:** By using the `srcset` attribute, you can specify different versions of an image for different screen sizes. This allows you to serve smaller, more optimized images to users on mobile devices, improving the loading times of your site.

## Conclusion
In conclusion, responsive design is the practice of designing and building a website in a way that ensures it is easy to read and navigate on any device. The importance of responsive design stems from the fact that more and more people are accessing the internet from mobile devices, and a website that is not designed to be responsive can lead to a poor user experience and fewer visitors. There are several ways to achieve responsive design, including using a responsive framework, media queries, flexible grids, and responsive images. By using a combination of these techniques, you can create a website that provides a good user experience on any device.
134. Leetcode Solution in CPP
Tags: cpp, beginners
Published: 2023-01-07 05:16:13

```cpp
class Solution {
 public:
  int canCompleteCircuit(vector<int>& gas, vector<int>& cost) {
    const int gasses = accumulate(begin(gas), end(gas), 0);
    const int costs = accumulate(begin(cost), end(cost), 0);
    if (gasses - costs < 0)
      return -1;

    int ans = 0;
    int sum = 0;

    // try to start from each index
    for (int i = 0; i < gas.size(); ++i) {
      sum += gas[i] - cost[i];
      if (sum < 0) {
        sum = 0;
        ans = i + 1;  // start from next index
      }
    }

    return ans;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/gas-station/
Helper Methods: Part 2
Published: 2023-01-07 05:12:59

form_with(url: movies_path)

- 3 variations of finding an active record item:
@the_movie = Movie.where(id: params.fetch(:id)).first

@the_movie = Movie.find_by(id: params.fetch(:id))
    
@the_movie = Movie.find(params.fetch(:id))

- nested hashes

<form>
  <label>Red</label>
  <input name="zebra[giraffe]" value="red">

  <label>Blue</label>
  <input name="zebra[elephant]" value="blue">
  
  <button>Submit</button>
</form

- top level key is zebra, information/attributes is stored in sub-hashes

- ex: { :movie => { :title => "Some title", :description => "Some desc" }}

- Using this format, we can complete mass assignment in the controller. ex:

movie_attributes = params.fetch(:movie)

@movie = Movie.new(movie_attributes)

- in order to do this however, we need to whitelist the :title and :description columns as strong parameters:

movie_attributes = params.require(:movie).permit(:title, :description)

@movie = Movie.new(movie_attributes)

- finally, in the routes page, we can represent all standard routes using a single line of code:

resources :movies
Create `setup_alias.sh` for localized alias available in the working directory only
Tags: bash, zsh
Published: 2023-01-07 05:00:00

If you find yourself constantly typing out long commands or navigating to specific directories in your terminal, setting up aliases can be a huge time-saver. However, sometimes you only want these aliases to be available within a particular working directory. In this case, you can create a script called `setup_alias.sh` that will allow you to set up localized aliases that can only be used within that working directory.

To create the script, open up a terminal and navigate to the working directory where you want the localized aliases to be available. Then, create a new file called `setup_alias.sh` using the touch command:

```bash
touch setup_alias.sh
```

Next, open the file in a text editor (such as Nano, Vim, or VS Code). Inside the file, you can define your localized aliases using the alias command. For example:

```bash
alias ls='ls -la'
alias cd..='cd ..'
alias dcbe='docker-compose run --rm api bundle exec $*'
alias rubocop='dcbe rubocop -A'
... 
```

You can add as many aliases as you like to the script, each on its line. Once you have finished defining your aliases, save the file and exit the text editor.

You will need to run the script to make the aliases available in your terminal. You can do this by typing the following command into your terminal:

```bash
source setup_alias.sh
```

This will run the script and make the aliases available in your terminal. You will only be able to use these aliases within the working directory where the hand is located. If you navigate to a different directory, the aliases will no longer be available but other aliases in another directory will be available. 

To make the aliases available every time you open a new terminal window in that working directory, you can add the source command to your `.bashrc` or `.zshrc` file. This file is run every time you open a new terminal window, so the aliases will be available whenever you need them. Open the `.bashrc` or `.zshrc` file in a text editor and add the following line at the end:

```bash
if [ -f "$PWD/setup_alias.sh" ]; then
  source "$PWD/setup_alias.sh"
fi
```

By creating a `setup_alias.sh` script, you can easily set up localized aliases that are only available within a specific working directory. This can be a great time-saver if you frequently work with a specific set of commands or directories in one specific location.

---- 
Happy Coding!
Python - Numpy
Tags: python, programming, challenge, beginners
Published: 2023-01-07 04:10:53

Dear, everyone.
This is the final step of "HackInScience Python Exercises" series.
I've finished all the numpy exercises and share them on my [Github](https://github.com/levintech/HackInScience).

1. Abelian sandpiles
2. Make your own 2048 in Python!
3. Dirichlet solver

Hope my work would be little bit helpful for python beginners.
To encourage me to continue, please follow me on [Github](https://github.com/levintech)

Best Regards.
Compilation Process in C
Published: 2023-01-07 03:45:21

We call compilation process for the converting the human-readable code (high level language) into the low level language (Binary code).

Compilation process in C language has 4 steps such as `pre-processing`, `compiling`, `assembling`, and `linking`.

Pre-processing:
This is the first step of compilation process.
Pre-processor does comments removal, file inclusion, macros expansion, and conditional compilation.

Compilation:
This is the second step.
hello.i will be translated into hello.s with assembly level instructions. Also, C program will be checked for the syntax errors.

Assembly:
This is the third step.
Assembly level code instructions will be converted into binary/hexadecimal form by the assembler. This is machine-readable.

Linking:
This is the last step.
The library file and the object file will be linked by Linker.
Don’t Get Lost in the Code
Tags: career, devrel, software
Published: 2023-01-07 03:31:42

---
title: Don’t Get Lost in the Code
published: true
date: 2023-01-07 03:15:48 UTC
tags: Career,DevRel,Software
canonical_url: https://ryanpeden.com/dont-get-lost-in-the-code-career-advice-for-developers/
---

As a software developer, I know firsthand the allure of diving deep into the technicalities of creating complex applications. But it’s important not to get lost in the code. Some of the best career advice I can give other developers is that they should learn to look beyond the code they’re writing.

### Getting Lost in Code

I still remember my early days of programming, when I was so excited to learn about all the latest tools and techniques. I spent hours studying code and trying out new frameworks. That was an incredibly valuable learning experience for me.

However, as I gained more experience and my projects became more complex, like creating big .NET backends and sophisticated React front-ends, I found that getting caught up in the technical details wasn’t always helpful.

It wasn’t that technical details weren’t interesting. They were! Maybe _too_ interesting.

But getting getting caught up in technical details meant I didn’t always keep the end goal in sight. I would get lost in the code and lose track of what I was trying to accomplish.

### Remember Your Users

This same dynamic can play out in development teams, whether at startups or larger companies. Developers often get caught up in debates about the minute differences between frameworks or the latest and greatest tools, rather than focusing on the needs of their users.

It’s important we ensure our work is technically sound, but it’s also crucial to remember we’re creating products and services for real people.

Coding for its own sake can get boring after a while. The real joy comes from making things that other people use and love. That’s why it’s so important for developers to keep their eye on the prize and think about the bigger picture.

Solving problems in a performant, scalable, and maintainable way is still important, but it’s also crucial to consider the needs of our users and how our work fits into the overall goals of our team, our company, and our users.

### Why I Like DevRel

Focusing on awesome user outcomes and not just code is why I’ve gravitated toward DevRel and DevEx engineering over the past few years. In these roles, I still get to write as much code as I want to, and I still get to work on product features.

But I also spend a lot of time connecting with the developers who use the product. It’s incredibly rewarding to see how my work helps to create tools that developers love, and then helps the developer community discover and learn how to use those tools.

The post [Don’t Get Lost in the Code](https://ryanpeden.com/dont-get-lost-in-the-code-career-advice-for-developers/) appeared first on [Ryan Peden](https://ryanpeden.com).