teleren/devto huggingface dataset:
Blockchain developer Do This & Save Time
Tags: webdev, programming, javascript, blockchain
Published: 2023-11-24 17:33:51

Blockchain developers need in-demand skills. Tips shared on prioritizing learning and industry demand. Self-assessment important. To save time, decide on web3 or web2, then tailor learning accordingly for a successful career.

It is of the most significance to concentrate on JavaScript if beginners want to make a swift and efficient entry into the blockchain development industry. This is due to the high demand for blockchain developers and the necessity to prioritize JavaScript. Learning JavaScript will not only aid in comprehending solidity but also a variety of JavaScript frameworks for backend development. It is recommended that one spends at least two months thoroughly understanding JavaScript, including data structures, to hasten the learning process.

Furthermore, it is crucial to analyze information and make decisions based on personal strengths and industry knowledge. Blindly following others in the industry is cautioned against. It is essential to comprehend one's capabilities and strengths. Consistency in effort and self-assessment is encouraged.

#javascript #react #typescript #webdev #angular #flutter #programming #begginer #webdev #programming #javascript #blockchain #web3 #web2
Building a Pick-Me Game with Next.js and Google Sheets Integration API
Tags: productivity, softwaredevelopment, googlesheetapi, games
Published: 2023-11-25 14:43:19

---
title: Building a Pick-Me Game with Next.js and Google Sheets Integration API
published: true
date: 2023-11-24 17:32:16 UTC
tags: productivity,softwaredevelopment,googlesheetapi,games
canonical_url: https://medium.com/@emma.ngo1110/building-a-pick-me-game-with-next-js-and-google-sheets-integration-api-0418b27a49b9
---

![Google Sheet API](https://cdn-images-1.medium.com/max/1024/1*dL06fcZOEkjfn35xYyOLHw.png)
_Google Sheets Integration API_

In this article, we will delve into the exciting world of web development by creating a pick-me game using Next.js. Not only will we build an engaging user interface, but we’ll also explore the integration of Google Sheets to store user data effortlessly.

### Prerequisites

- Next.js
- Google Sheets API

![pickme](https://cdn-images-1.medium.com/max/1024/1*IiyJCLuzEXBS0DAZS1YtYA.png)
_pickme demo_

## [Read More](https://medium.com/@emma.ngo1110/building-a-pick-me-game-with-next-js-and-google-sheets-integration-api-0418b27a49b9)

Author: [bunhere.com](https://bunhere.com)

_I am always looking for feedback on my writing, so please let me know what you think._ ❤️
Day 95: Skeleton
Tags: webdev, frontend, 100daysofcode
Published: 2023-11-24 17:24:23

## Question
Create React or Angular code snippet that implements an skeleton container as below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akzdqymrtznk4q0y8jhc.gif)



Hint: Use a container with a background gradient animation to simulate a loading effect.


Check the comment below to see answer.
SDL2 on macOS Sonoma installation with VSCode.
Tags: cpp, programming, sdl2, vscode
Published: 2023-11-24 17:18:07

How to install SDL2 on macOS sonoma with visual studio code is here. No Xcode installation is required. only a programing IDE is required. Here we gonna use Visual Studio code community version from Microsoft. It is a popular IDE choice among developers.

**Install Homebrew.**

Homebrew is a great package manager for unix operating systems. It is reliable. (don't worry, it's safe until used properly.) [click here](https://brew.sh) to go directly to home-brew's official download site. or simply open terminal and copy-paste this command - `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`.
now follow the on-screen commands for a successful installation.

**Install SDL2**
It's the time for our package. type `cls` int terminal and hit return. Now type `brew install sdl2` and relax after hitting return. After successful installation, type `cls` again. Now type `sdl2-config --version` and check what version it's showing for the latest.

**Time to code**
make a new folder and a new file named `main.cpp`. g++ compiler will be used to compile the code now.
 
lets open a blank window now. copy paste the code in that main.cpp file from following code -
 
```
#include <iostream>
#include <SDL2/SDL.h>

const int WIDTH = 1000, HEIGHT = 800;

int main( int argc, char *argv[] )
{
    SDL_Init( SDL_INIT_EVERYTHING );

    SDL_Window *window = SDL_CreateWindow( "this is my", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, WIDTH, HEIGHT, SDL_WINDOW_ALLOW_HIGHDPI );

    if ( NULL == window ){
        std::cout << "Could not create window: " << SDL_GetError( ) << std::endl;
        return 1;
    }
    SDL_Event windowEvent;
    bool running = true;
    while (running)
    {
        if ( SDL_PollEvent( &windowEvent ) )
        {
            if ( SDL_QUIT == windowEvent.type ){
               running = false;
               break; 
            }
        }
    }

    SDL_DestroyWindow( window );
    SDL_Quit( );

    return EXIT_SUCCESS;
}
```

**Compile and let the magic happen**
open up terminal and type the following code - `sdl2-config` —a program that prints out the right flags. This should happen as part of the build process. the command prints an argument for linking the sdl2 library. copy that line.

now type this command for compilation - 
`g++ main.cpp -o main {paste the copied argument here}`

for my case it was like this. - 
` g++  main.cpp -o main -L/usr/local/lib -lSDL2 `
this should make the work done.👽

now type ./main and see the blackness of black window🪟.
is it possible to return the same component in same function?
Tags: react, webdev, javascript, programming
Published: 2023-11-24 17:09:57

hey everyone..
im studying react dev docs and i read choosing the state structure
and i didn't understand this code below:
-as you can see in line (3) the function name is PlaceTree and inside this function we returned this component in line (11) i never see something like this before? is this valid code?
check linke:[https://react.dev/learn/choosing-the-state-structure#avoid-deeply-nested-state](url)

```
1.import { useState } from 'react';
2.import { initialTravelPlan } from './places.js';

3.function PlaceTree({ place }) {
 4. const childPlaces = place.childPlaces;
 5. return (
   6. <li>
     7. {place.title}
     8. {childPlaces.length > 0 && (
        9.<ol>
          10.{childPlaces.map(place => (
           11. <PlaceTree key={place.id} place={place} />
          
          ))}
        </ol>
      )}
    </li>
  );
}

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);
  const planets = plan.childPlaces;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planets.map(place => (
          <PlaceTree key={place.id} place={place} />
        ))}
      </ol>
    </>
  );
}

```
From Stilettos to Flats: The Evolution of Shoe Heel Design
Published: 2023-11-24 16:56:38

## Introduction

Understanding how shoe heel designs have evolved over the years can provide us with fascinating insights into fashion, cultural shifts, and even technological advancements. From the iconic stiletto heels to the comfortable flats we see today, the history of shoe heel design is a testament to human creativity and innovation.

[![shoe heel](https://7or9.com/cdn/shop/products/5_f5846502-7833-470a-aeaf-9b8fb24b3e5b_400x.jpg?v=1693220518)](https://7or9.com/?utm_source=dev_to&utm_medium=rankking)

## The Rise of Stilettos: The Ultimate Fashion Statement

Stilettos, with their slender and towering heels, first gained popularity in the mid-20th century. These ultra-high heels instantly became a symbol of femininity, power, and glamour. The stiletto's sleek and elegant design exuded confidence and sophistication, making them a favored choice for formal events and glamorous occasions.

## The Advent of Chunky Heels: Embracing Comfort and Style

As comfort started to gain importance in footwear design, the advent of chunky heels came as a refreshing change. In the 1970s, shoes with thicker and wider heels became a popular choice among women. Chunky heels offered more stability, making them suitable for everyday wear while still providing an element of style.

## Flats: The Revolution in Shoe Heel Design

The evolution of shoe heel design eventually led to the rise of flats. Flats are the epitome of comfort, simplicity, and versatility. They have become a staple in every woman's shoe collection, offering a trendy alternative for those who prefer a more relaxed and casual look. From ballet flats to loafers, these designs have revolutionized the way we think about footwear.

## The Future: Innovative Heels Beyond Our Imagination

As technology continues to advance, we can only imagine the innovative heel designs that lie ahead. From 3D-printed heels to heels with embedded sensors for personalized comfort, the future of shoe heel design holds endless possibilities. These designs will not only redefine fashion but also provide practical solutions for foot health and comfort.

## Conclusion

The evolution of [shoe heel](https://7or9.com/?utm_source=dev_to&utm_medium=rankking) design is a reflection of our ever-changing society, influenced by fashion, comfort, and technological advancements. From the stylish stilettos that define glamour to the comfort-driven flats that offer practicality, each era brings its own unique contributions to the world of footwear. As we embrace the future, we can eagerly look forward to the exciting innovations that lie ahead in shoe heel design.

## References

  * [shoe heel](https://oregonwineinns.com/?jlp_id=280&jlp_out=https://7or9.com/ "shoe heel")



## Related Links:

  * [Vogue - Shoes](https://www.vogue.com/fashion/shoes)
  * [Business of Fashion - Shoes](https://www.businessoffashion.com/articles/tags/shoes)
  * [Footwear News](https://www.footwearnews.com/)
MFA on OCI (you don't need to read this if you don't understand the title)
Published: 2023-11-24 16:50:32

I connecting to Oracle Cloud Infrastructure consoles asks you for MFA authentication each time you connect, here is how to have a grace period of 15 days. I've followed the instructions from Freek D'Hooge (this should deserve tons of ACE points in my opinion 😉)

https://x.com/dhoogfr/status/1727745140242944163?s=20

{% embed https://x.com/dhoogfr/status/1727746661806457163?s=20 %}

Let's go, with screenshots:

## "Identity & Security" -->

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsxpy1vt2u3hxltrm66m.png)

## "Domains" --> "Default"

(or other domain in case you have multiple have been converted from IDCS)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gah31yi2voja06lg2skn.png)

 ##  -> "Security" 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn4trp4csmsk5jcjctnc.png)

## --> "Sign-on Policies" 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja28pkksy7any6gk8bkp.png)

## --> select a policy 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9ap5r8svujucd2zrz8b.png)

## --> click on the more  menu next to the rule 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bm3cs7mko1e5jd8vutm.png)


## --> set the interval in the actions

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/siksyeedgo052471f61g.png)

Do this for every policy and rule
You will have 2 policies by default (1 standard, 1 added by Oracle when they made MFA mandatory

That policy will have 2 rules, 1 for all users and 1 for admins

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v40pspulqky7rccdlun3.png)
Belay Board Simple Part 4: Calendar Filtering
Published: 2023-11-24 16:47:21

Originally the index page showed all the availabilities. A user may want to only view availabilities that they are interested in. The calendar can be filtered by a combination of particular hosts and guests. Futhermore, the calendar can be searched by event title names.

## Calendar Filtering for Hosts Users and search by event name
```rb
class AvailabilitiesController < ApplicationController
  before_action :set_availability, only: %i[ show edit update destroy ]

  # GET /availabilities or /availabilities.json
  def index
    @selected_host_id = params[:host_id]
    @selected_guest_id = params[:guest_id]
    @event_name_query = params[:event_name]

    @availabilities = Availability.all

    if @selected_host_id.present?
      @availabilities = @availabilities.where(user_id: @selected_host_id)
    end

    if @selected_guest_id.present?
      guest_availabilities = EventRequest.where(user_id: @selected_guest_id, status: 'accepted').pluck(:availability_id)
      @availabilities = @availabilities.where(id: guest_availabilities)
    end

    if @event_name_query.present?
      @availabilities = @availabilities.where('event_name ILIKE ?', "%#{@event_name_query}%")
    end
  end
```

## Collapsible search form.

```html
<div style="text-align: center;">

    <h1>Climb Times</h1>

    <%= link_to '#', class: 'btn btn-primary', data: { bs_toggle: 'collapse', bs_target: '#filterForm' } do %>
      <i class="fas fa-search"></i>
    <% end %>

    <div id="filterForm" class="collapse">
      <%= form_with(url: availabilities_path, method: :get, local: true) do |form| %>
  <div class="form-group">
    <%= form.label :host_id, "Host" %>
    <%= form.collection_select :host_id, [['All Hosts', nil]] + User.all.map { |u| [u.username, u.id] }, :last, :first, 
        selected: @selected_host_id, include_blank: false, class: 'form-control' %>
  </div>

  <div class="form-group">
    <%= form.label :guest_id, "Guest" %>
    <%= form.collection_select :guest_id, [['All Guests', nil]] + User.all.map { |u| [u.username, u.id] }, :last, :first, 
        selected: @selected_guest_id, include_blank: false, class: 'form-control' %>
  </div>

        <div class="row justify-content-center">
          <div class="col-md-2">
            <div class="form-group">

              <%= form.text_field :event_name, value: @event_name_query, 
            class: 'form-control', placeholder: ' Search Event Names' %>
            </div>
          </div>
        </div>
        <%= form.submit "Filter", class: 'btn btn-success' %>
      <% end %>
    </div>
  </div>
```
NFC Board
Tags: programming, nextjs, coding, tutorial
Published: 2023-11-23 23:00:23

> Starters 🏁

Welcome back to new series, where I will be going through the development process of a software project conducted by me and my friend. I will post weekly updates on progress, milestones, road blocks, and code review. 

> What is NFC Board? 🎯

The inspiration behind NFC board revolves around the innovative use of Near Field Communication (NFC) tags for automating and streamlining data collection and processing tasks. 

Our goal is to develop a dashboard system where NFC tags can be easily initialized and managed for modular design. All the users have to do is set up the dashboard for stat tracking through simply user interface. This approach aims to enhance the user experience by simplifying interactions with the NFC tags.

> Our Tech Stack 💻

- Frontend:
    - React, Redux, Next.js (Vercel Later)
    - TypeScript
    - Routing handled by Next.js
    - Tailwind
- Backend:
    - Express, Node, Mongo
    - Modularly working for now — can add further features later on such as saving user for future access and stat tracking etc.
- Things to consider (for further iterations)
    - JEST (React Testing Library)

> Conclusion ⛳️

Thank you for taking the time to read and I would appreciate any suggestions to improve the quality of my blog. Stay tuned for upcoming progress posts on the NFC Board Series. 🤠
Tracking Down Lost Bitcoins and Other Cryptos: Hire iBolt Cyber Hacker Mastermind Behind Recovery
Tags: webdev, javascript, programming, beginners
Published: 2023-11-24 15:49:45

Choosing iBolt Cyber Hacker for Bitcoin recovery means choosing expertise, reliability, and a commitment to helping individuals regain access to their valuable assets. With their proven track record, tailored solutions, ethical practices, and efficiency, iBolt Cyber Hacker stands as the optimal choice for anyone seeking assistance in Bitcoin recovery."
Vue Modal Router
Tags: vue, modal, webdev
Published: 2023-11-24 15:41:45

The full article can be read [here](https://habr.com/ru/articles/775224/).

One of the popular questions on the official Discrod channel of the Vue community is the integration of modal windows and `vue-router`. In our team, we often use modal windows.
At the time of writing this article, we have 27 modal components. And a couple of years ago we faced the problem of displaying a modal window at a certain level.

Everything I wrote was programmed and put into a separate library [`jenesius-vue-modal`] (https://github.com/Jenesius/vue-modal ).

Now let's figure out what we're doing. The main task: when the `user` switches to `/user/5`, display the modal window of the user card.

First of all, let's update the `routes` configuration file:

```js
import {useModalRouter} from "jenesius-vue-modal";
const routes = [
    {
        path: "/users",
        component: WidgetUserList,
        children: [
            {
                path: ":id",
                component: useModalRouter(ModalUserCard)
            }
        ] 
    }
]
```


And initialize our application:
```js
const routes = [...];
const router = createRouter({
	history: createWebHistory(), // Or any other
	routes,
});

useModalRouter.init(router);
```

Now it remains in the App file.vue insert a container that will display our modal windows.
```js
<template>
    // Your HTML
    <widget-container-modal />
</template>
<script>
    import {container} from "jenesius-vue-modal";

    export default {
        components: {WidgetContainerModal: container},
        name: "App"
    }
</script>
```
Everything works. Also, all this can be viewed on [Sandbox](https://codesandbox.io/p/sandbox/vue-modal-router-n9rn94 ).
Maximizing Efficiency: How to Choose the Perfect Breast Pump
Published: 2023-11-24 15:39:08

Are you a new mom looking for the perfect breast pump? Maximizing efficiency is key when it comes to choosing the right breast pump. In this article, we will guide you through the process of selecting the most efficient breast pump for your needs. Let's dive in!

## Understanding the Importance of Breast Pump Efficiency

Before we begin discussing how to choose the perfect breast pump, let's first understand why efficiency is crucial. Efficient breast pumps not only save time and energy for busy moms, but they also ensure proper milk expression and maintain milk supply. Therefore, it's essential to make informed decisions to maximize your breastfeeding journey.

## Factors to Consider

### 1\. Pumping Speed

One of the primary factors affecting efficiency is the pumping speed. Look for breast pumps that offer adjustable suction levels and various speed settings. This will allow you to find the right speed that mimics your baby's natural nursing rhythm, maximizing milk flow.

### 2\. Comfort

Efficient breast pumps should also prioritize comfort. A breast pump with soft silicone cushions and adjustable flange sizes will help prevent discomfort and nipple pain. Remember, comfort plays a crucial role in allowing effective milk expression, so choose a pump that suits your body well.

### 3\. Portability

An [efficient breast pump](https://momcozy.com/collections/electric-breast-pump?utm_source=dev_to&utm_medium=rankking) should be portable and easy to use on-the-go. Consider pumps with compact designs, lightweight materials, and battery-operated options. This will enable you to maintain your pumping routine wherever you are, without sacrificing efficiency.

### 4\. Easy Maintenance

Efficiency extends beyond pumping speed and comfort. Consider the ease of cleaning and assembling the breast pump. Opt for models with fewer parts and dishwasher-safe components. This will save you precious time and ensure the longevity of your breast pump.

## Keep on Pumping!

Now that you understand the importance of efficiency and the key factors to consider when choosing a breast pump, you are well-equipped to make an informed decision. Remember, every mom’s needs are unique, so take your time and find the perfect breast pump that suits you best.

## References

  * [efficient breast pump](https://www.motocal.com/?URL=https://momcozy.com/collections/electric-breast-pump "efficient breast pump")



## For further information and resources, check out these websites:

  * [La Leche League International](https://www.llli.org/)
  * [Medela - Breastfeeding](https://www.medela.us/breastfeeding)
  * [KellyMom](https://kellymom.com/)
12 Signs you might be burning out 🔥🚒
Tags: career, productivity, management, beginners
Published: 2023-11-24 15:29:07

## I - You aren't excited about work anymore

If you aren't happy about working, either your job sucks or you're burning out. In both cases you need to act on it.

## II - Your social life is dipping
You haven't seen your friends in a while.

##III - You're making more mistakes at work
Would you have introduced this bug if you were at the top of your game?

##IV - You feel "Lazy" about shipping high-quality code
It's working. It does the job. Who cares if it's not perfect? (the [technical debt](https://dev.to/samuelfaure/the-technical-debt-explained-with-a-kitchen-analogy-518h), that's who).

##V - You think the situation will be better when X will be gone
"I just need to finish this project then it will all be better" - you probably need some rest, then it will _actually_ be all better.

##VI - You feel like crap in the evenings
Work isn't supposed to make your life worse, it's supposed to make your life better.

##VII - You have "very good reasons" to not take any time off
That's also a red flag. If for any reason you can't afford to take some time off, you probably overworked yourself already. And you almost always _can_ actually take some time off, and definitely should.

##VIII - Your life hygiene has been deteriorating
Been skipping leg day at the gym recently? Started smoking again? Been drinking a bit more than usual? Have your sleep been worse lately? Are your back pains back? Think deeply about what you're doing to yourself.

##IX - You can't immediately tell when you took your last vacations
If it's so far behind you that you don't remember the last time you took them, then it's time for new vacations.

##X - You think about work when you're not working
Not just a little bit, and not in an excited, positive way.

##XI - You feel bad on Sunday evenings
Good old Sunday evening blues. Anybody with a crappy job, or who's burning out, will know about them.

##XII - If you're honest with yourself, you just know it
We Humans are terrifyingly good at lying to ourselves, but deep down we often know the truth and how we should act on it.

If this list rings a bell or several, please take some time to reflect on it.

Ask your significant other(s), your friends and family for their opinions. They aren't driving the car, which means they're in a better position to see the landscape.

Take care of yourself first. What's better for you is also better for your job.
About HTTP : request, response and methods
Tags: webdev, frontend, http, restapi
Published: 2023-11-24 15:24:43

## I am studying the RESTful API development and it begins with some recap about HTTP. Let's talk about it. 😊 


5 **HTTP common methods** (also called HTTP verbs):

- GET -> retrieves a ressource;
- POST -> sends data to the server and creates a record;
- PUT -> updates the whole ressource;
- PATCH -> partially updates a ressource;
- DELETE -> deletes a ressource.

A **HTTP request** includes:

- version type;
- URL;
- HTTP method;
- request headers (ex. cookies, user-agents, referrers);
- body (optional).

The **HTTP response** contains the resource that was requested. It also contains information like the length of the content, the content type, and headers like cookies. It also contains ETags, the time when the content was last modified, and finally, the response also contains some special numerical codes called HTTP status codes.