teleren/devto huggingface dataset:
How to make an infinite scrolling image loop in css & javascript!
Tags: css, javascript, beginners, webdev
Published: 2023-09-14 01:06:46

In this tutorial, I am going to teach you how to create an infinite horizontal scrolling image in css & javascript!

**Step #1: HTML**
You are going to need to create a `<div>` with the ID and class of "landscape," although you can name it whatever you would like.

_Code:_

```
<div class="landscape" id="landscape"></div>
```

**Step #2: Finding the right image**
You are going to need to find an image that loops when it is next to itself horizontally. This might be hard to find. If you can't find one you like, you can always just make your own in something such as Photoshop.

For mine I used a cartoon cloud image ([See Here](https://landscape.analyze185.repl.co/clouds.png)).

**Step #3: CSS**
For this you are going to fix the div to the page and make sure it fills the whole page. You also need to do things, like set the z-index to -1 so that it is positioned behind any other elements.

_Code:_

```
.landscape{
  position:fixed;
  top:0px;
  left:0px;
  background:url('..path/to/image.png');
  width:100vw;
  height:100vh;
  background-size:1200px 650px;
  background-position:0px;
  z-index:-1;
}
```

**Step #4: JavaScript**
Last but not least, to make the movement of the background, you will need to use JavaScript. Essentially all it is, is a repeating loop that changes the background-image's background-position by one using a variable. This variable increases by one integer each time the function is called, creating the movement effect.

__Code:__

```
var x = 1;
var bgImage = document.getElementById('landscape');

function move(){
  x++;
  bgImage.style.backgroundPositionX = x + "px";
}

setInterval(move, 50);
```

If you want, you can change the interval time to change the speed of the background image.

Thanks for reading, I hope it helped!
   - Quinn
🚀 Reflecting on Streamlined Development: My Journey towards Efficiency! 🚀
Tags: efficientdevelopment, simplicityintech, streamlinedsolutions, developmentbestpractices
Published: 2023-09-14 00:41:07

As a developer, I've always been driven by the quest for impactful solutions. However, in this pursuit, I've come to realize the importance of finding the right balance between complexity and efficiency.

Recently, I decided to reevaluate my approach. 
Embracing simplicity and speed, I made a conscious shift towards a more streamlined tech stack. 

The results have been nothing short of astounding. 
What once took me three months to accomplish now translates into a matter of mere hours. 
It's a testament to the power of elegant, straightforward solutions in swiftly transforming concepts into reality.

This experience has underscored a valuable lesson: innovation should not be about adding layers of complexity, but rather about creating tangible, meaningful change. By simplifying my development process, I've unlocked a new level of productivity and effectiveness.

Let's continue to push the boundaries of what's possible in the realm of technology, always with an eye towards making a real-world impact! 💡👩‍💻👨‍💻 #DevelopmentEfficiency #SimplicityInTech #InnovationMattersEmbracing 

**Efficiency in Development: A Closer Look**

While innovation drives us forward, it's crucial to discern between complexity for necessity and simplicity for efficiency. We often find ourselves tempted to build intricate systems, complete with APIs and multiple layers of frontend-backend interaction.

However, let's consider this: do we always need such elaborate setups? I've come to find that, more often than not, leveraging vanilla stacks can be incredibly effective. 
They allow us to accomplish tasks in a fraction of the time compared to the more convoluted alternatives.

Furthermore, it's worth noting that not every project demands the creation of a standalone API. 
There are instances where we can utilize API routes directly within the frontend, avoiding the need for a separate layer. This practice, while seemingly convenient, can lead to the creation of "custom" routes. It's important to remember that APIs should adhere to established conventions, offering clear and standardized communication.

In essence, let's strive for efficiency in our development processes. 
By discerning when to employ simpler tools and practices, we can not only save time but also build systems that are robust, maintainable, and purposeful. 
Here's to crafting solutions that truly make an impact! 🚀👨‍💻👩‍💻 #EfficientDevelopment #StreamlinedSolutions #SimplicityInTech
I didn't make through my coding bootcamp
Tags: beginners, codingbootcamp, bootcamp, programming
Published: 2023-09-14 00:40:28



Introduction:
Bootcamps are intensive training programs designed to prepare individuals for specific careers in a condensed time frame. Many people enter these programs with the goal of obtaining a certification that will open doors to new job opportunities. However, the journey through a bootcamp doesn't always end with that coveted certification. In this blog, we will explore the experience of completing a bootcamp without certification and provide guidance on how to turn this setback into a valuable learning experience.

Embracing the Learning Journey
Completing a bootcamp without certification can be disheartening, but it's essential to remember that the learning journey is just as important as the certification itself. Focus on absorbing as much knowledge and skill as possible during the program. The skills you acquire can still be valuable in your career.

Identifying the Roadblocks
Understanding why you didn't obtain certification is crucial. Was it a specific exam or project that held you back? Identify your weaknesses and areas that need improvement. This insight will help you chart your path forward.

Seeking Feedback and Guidance
Reach out to your bootcamp instructors and mentors for feedback. They can provide valuable insights into your performance and areas where you can improve. Constructive criticism is a stepping stone to growth.

Exploring Alternative Paths
Not obtaining certification doesn't mean the end of your career aspirations. Explore alternative paths and opportunities within your chosen field. Some employers value skills and experience more than certifications.

Building a Portfolio
Consider creating a portfolio that showcases the projects and skills you gained during the bootcamp. A strong portfolio can demonstrate your abilities to potential employers and clients.

Continuous Learning
Learning doesn't stop when the bootcamp ends. Continue to hone your skills through self-study, online courses, or additional training programs. Lifelong learning is essential in many industries.

Networking
Connect with fellow bootcamp participants and professionals in your field. Networking can open doors to job opportunities and mentorship.

Resilience and Perseverance
Facing setbacks is a part of any journey. Stay resilient and persevere in your career goals. Remember that success often comes after overcoming challenges.

Conclusion:
Completing a bootcamp without certification may not be the outcome you initially hoped for, but it doesn't define your worth or potential in your chosen field. Embrace the journey, identify areas for improvement, seek feedback, and explore alternative paths. Your dedication to continuous learning, networking, and resilience will ultimately contribute to your success, even if it takes a slightly different route. Certifications are valuable, but they are just one aspect of a fulfilling and rewarding career.
Comprehensive Amazon Marketing Solutions by Amazonetic
Published: 2023-09-14 00:22:40

Amazonetic, your dedicated Amazon [fba agency](https://amazonetic.com/amazon-fba-automation-agency/), is your gateway to unrivaled success on the world's largest e-commerce platform, offering a wide array of services such as Amazon Marketing, PPC, Display Ads, SEO, FBA Automation, Listing Optimization, Store Setup, EBC/A+ Content, Virtual Assistants, and Brand Registry. Their data-driven approach boosts brand visibility and profitability. Efficiently manage your ad spending with Amazonetic, ensuring maximum ROI and improved product rankings through SEO. Streamline FBA operations and captivate customers with compelling EBC/A+ Content. Amazonetic's Virtual Assistants guarantee seamless management, while Brand Registry safeguards your brand identity. Choose Amazonetic for a dedicated partner on your path to e-commerce excellence.
A Netlify build plugin to pull data from Seatable
Tags: netlify, automation, database
Published: 2023-09-14 00:12:37

It is a common scenario for us to build a data visualization site with small datasets in the form of CSV/JSON files. But then the client wants to have a database interface to update the data from time to time. In this case, we think that using a backend with an API... is a waste of resources when all you need is just a CSV/JSON.

So the solution we found is to use [SeaTable](http://seatable.io/): as a headless CMS. SeaTable is a kind of Airtable but European, GDPR compliant, and with many interesting features.

But it is not really a database intended to be used as a backend: We don’t want to connect each visitor's browser directly with the database.
So we just needed a way to download the data from the database and save it as a JSON file. Then we can use this JSON file in the build process to generate a static site with NUXT or NEXT for instance.

Since we use Netlify as our primary hosting solution, we created a Netlify build plugin that downloads the data from SeaTable before each build.

This plugin is available here:

https://github.com/thegraphicmethod/netlify-plugin-seatable

It is not officially supported by SeaTable. It is a plugin we created for our own needs and we are sharing it in case it can be useful for someone else. But please, do some testing before moving to production, we need more users to be sure that it works in all cases.

**How to use it**

1. install the plugin with npm:
`npm install -D netlify-plugin-seatable`

2. Go to your SeaTable admin panel and get the API key for the base you want to use. You can get the API Key for a Base in the advanced section of the base settings.
![Where to find the token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f825z3ls3sxug0pdtkjp.png)

3. In your application, add a netlify.toml file with the following content:
```
[[plugins]]
package = "netlify-plugin-seatable"
# Plugin configuration
[plugins.inputs]
SEATABLE_TABLE_NAME = "Table1,Table2"
DATA_FOLDER = "assets/data"
```

**SEATABLE_TABLE_NAME** could be a single table name or multiple table names separated by a comma (no spaces between names)
For each table, a JSON file will be created in the DATA_FOLDER folder.

- Since the API token is a secret, it is not recommended to have it in your repository. So, in the Netlify app add the following environment variable:

> SEATABLE_APP_TOKEN (which is the token of the Seatable app)

- That’s it. Now each time you build your site the plugin will download the data from SeaTable BEFORE BUILDING and will save it in the specified folder.

Please note that the DATA_FOLDER must exist in the repository. The plugin will not create it.
Also, note that the plugin will overwrite the JSON file if it already exists but it won't commit to the repository. It is only available during the build process.


![Logs from the plugin building stage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zcmt9ulqnsjcbo2scg2.png)


**Feedback**
This is our first Netlify plugin so any feedback is welcome. Let us know if you find it useful or if you have any suggestions to improve it.
JavaScript - Object methods
Tags: webdev, javascript, beginners, programming
Published: 2023-09-14 00:07:15

We already said that a "`function`" is just a **value**, so we can add function to object as a value 

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

We should avoid passing something manually if we already have it.
In this example we already have the birth year in our object
So to access the birth year property from the object we use `**this**` keyword.
Which is equal to the object that we calling it from.

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

---

The power of `this` keyword
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiruifdnanxza9ogk63g.png)

Let's say that we need to access the **age** in our object **multiple times** throughout our **program**.
So that would be calling the **`zouhair.calcAge()`** multiple times.

In this computation here: 
`return new Date().getFullYear() - this.birthYear;`

it's not big deal, but what if it was a bit heavier, that’s a problem.

**Instead** when calculate the age once, then store it in the object.

---

## Finally:

Having the exact same code in both of these objects we fall into **DRY**

**Solution:**

there's a better way which can avoid this  called: **Object-Oriented-Programming**
Looking to change the search button to middle of website
Published: 2023-09-13 23:51:54

Hello I am currently looking to change the website logo in the header to the left and the search button to the right. Here is an image of what I am talking about.



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

The link to this website is [ahomeselection.com](ahomeselection.com)
Debugging Apache AGE
Tags: postgres, apacheage
Published: 2023-09-13 23:27:38

##Introduction
This blog-post is aimed at introducing the user with using `gdb` to debug AGE. To know how to install PostgreSQL or Apache AGE for debugging, the reader is advised to check the previous blogposts.

##Steps to debug
- First, load the AGE extension in your database.
- Once done with that, open a new terminal window and run the following command to get the `process ID` of PostgreSQL database server.
`ps -ef | grep postgres`
- This will give you a lot of ids, however, check for the one that says
`postgres: username postgres [local] idle`
- Next start `gdb` using
`sudo gdb`
- Attach the `process ID` that you found earlier using
`attach [ID here]`
- Next step is to tell `gdb` where the files are located. Do it using the `dir` command
`dir /home/capnspek/Downloads/age/`

GDB commands:
b is for breakpoint
c is for continue - continues to the next breakpoint
n is for next line
s is for step into
p is for print
bt is for backtrace (call stack)
d is for delete all breakpoints
list is for context
q is for quit

- You can set a break point at any function or line that you like (that you're debugging), for example
`b parse_cypher`
The above command will set a break point on parse_cypher function.

If you run any query in AGE now, it will go into a paused state once the execution hits the function. Then you can continue the execution, or step it line by line using gdb terminal.
ROScribe
Tags: gpt3, robotics, ai, opensource
Published: 2023-09-13 23:27:30

**Create ROS packages using LLMs**

Learning ROS (Robot Operating System) may prove to be challenging for robotic enthusiasts, college students, or professional engineers who are using it for the first time. Sometimes this skill barrier forces them to give up on ROS altogether and opt out for non-standard options. [ROScribe](https://github.com/RoboCoachTechnologies/ROScribe) eliminates the skill barrier for beginners, and saves time and hassle for skilled engineers. 

[ROScribe](https://github.com/RoboCoachTechnologies/ROScribe) combines the power and flexibility of large language models (LLMs) with prompt tuning techniques to capture the details of your robotic design and to automatically create an entire ROS package for your project.

Inspired by [GPT Synthesizer](https://github.com/RoboCoachTechnologies/GPT-Synthesizer), ROScribe builds an entire ROS package through a series of specification steps that identify the package elements in a top-down approach. In particular, ROScribe helps you with the following steps:

1. Creating a list of ROS nodes and topics, based on your application and deployment (e.g. simulation vs. real-world)
2. Visualizing your project in an RQT-style graph
3. Generating code for each ROS node
4. Writing launch file and installation scripts

If you are new to ROS, ROScribe will be your robot(ics) mentor 🤖️

If you are a seasoned ROS user, ROScribe can help with creating a blueprint for your ROS package 📦️

For further detail of how to install and use ROScribe, please refer to our Github and watch our demo:

[ROScribe open source repository](https://github.com/RoboCoachTechnologies/ROScribe)
[TurtleSim demo](https://www.youtube.com/watch?v=H2QaeelkReU)

**Roadmap**

ROScribe v0.0.2 only supports ROS1 with Python code generation. We plan to add the following features in the upcoming releases:

1. ROS2 & ROS-Industrial support
2. C++ code generation
3. ROS1 to ROS2 automated codebase migration
4. Verification of an already existing codebase
5. Graphic User Interface  
6. Enabling and integrating other robotic tools

**Call for contributor**

ROScribe is a free and open source software. We encourage all of you to try it out and let us know what you think. We have a lot of plans for this project and we intend to support and maintain it regularly. we welcome all robotics enthusiasts to contribute to ROScribe. During each release, we will announce the list of new contributors.
Adipati138 Situs Judi Online
Published: 2023-09-13 23:11:32

**Adipati138 Situs Online Terbesar Dan Tergacor**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ahn5a6swrsslht5og26.jpg)

[](https://heylink.me/adipati138/)
[](https://wa.me/6285942928236?text=Halo%ada%bisa%di%bantu%?
)[](https://www.facebook.com/bianca.putri1888/)
Binary numbers and Conversion
Published: 2023-09-13 23:06:30

In our days, modern computers use electricity to work and inside of the microchip electricity is turned either on or off. And so the on-s are represented by 1 and the off-s are respectively illustrated as the 0-s. These 1 and 0-s are the binaries which are also called base 2. Thus, let's understand from where those bases came from. So basically for us to understand what are the bases, we'll just start from base 10. Why? Because we can simply count from 1 up to 10 on our 10 fingers. This means the number of numbers/symbols are equal to the base number. Thus, we can come to the binary numbers, here we have 0 and 1 so this means that it's base 2. In base 10 numbers we count from 1 to 10 but in binary numbers we have a slightly different picture here. So lets start the count 0, 1, and... we don't have the two so in this case the 2 from base 10 can be displayed in base 2 form as 10(one zero). And after the 10 it's 11(one one). Why 11? Because here we have 10+1 which is equal to 11 where 10 is 2 and 1 is 1. After those examples you may ask, so how do I understand that 11 is three? Let's see. So here we need to count and assign the number of numbers, in this example we have only 2 numbers. When assigning the numbers we are starting from the right side to the left side and when counting them we always start from 0. so 1 from 11 is the 0th  and the other 1 is 1st. Here we have a function 2^n x m - 
where n is the  assigned number, the m is the value of number and the 2 is written there because binary numbers are base 2. So here we have 1 on the right side which is the 0th member so if we put this info into the function we'll get 2^0 x 1 = 1 and then we put the 1 on the left side and we'll get 2^1 x 1 = 2 so we basically converted  these numbers to base 10 and we can easily add 1 to 2 which is 3 (1+2=3) thus we know that 11 = 3. Let's take a look at a more complicated example. So there's 10101, so at first we  assign the numbers from right to left and then we do the addition. That is 2^4 x 1 + 2^3 x 0 + 2^2 x 1 + 2^1 x 0 + 2^0 x 1 = 16 + 4 + 2 = 22 we could actually  ignore the multiplications with 0 (because their multiplications with any number is always 0). So it turns out to be the vice versa version of the conversion so we can convert from the base 10(decimal) numbers into binary numbers. So we have a 55 which we need to divide by 2 every time till we get to the point that the remainder is less then 2. So the division will look like this 55/2=27+(1) 27/2=13+(1) 13/2=6+(1) 6/2=3+(0) 3/2=1+(1) and (1)-because its the remainder that is smaller than 2 we simply leave this remainder so lets combine all the remainders from the last remainder up to the first. It'll be 110111 so by those remainders we got the decimal number 55 as a binary number, thus 55(base 10)=110111(base 2).
Mathematical Operations With Binary And Other Number Representations
Published: 2023-09-13 23:01:27

Before reading this post make sure that you watched my youtube video about numbers and their bases.

So, as we say we have different ways to express numbers, every number represents digits, that it includes.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrvptv2gbvggc3twudi6.png)

But what about hexadecimal numbers? what comes after 9? In Base 16 system, beside digits we have also 6 Letters, to represent numbers higher than 9

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

In order to convert from binary to hexadecimal, we need to divide our binary number to 4 digit parts. Why 4? 
Cause 16 it 4th power of 2.
If we have lack of digits to form accurate parts, we add 0s in their place


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

then, we deal with each of those parts.
It is the same principe as in video, we count starting from zero from the end, then counting 2s with the powers of those numbers. Main thing to do here is to multiply our binary ones and zeroes with the powers we get. 
We do the same with another set of 4 digits


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6866u7nqyohgftmam8dn.jpg)

this is how we convert binary to hexadecimal, and same logic applies everywhere where we can express our base numbers with some power of 2.

Let's talk about addition in binary system.
Do you remember how to do simple additions with columns?
It is very close to what we are going to do now.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6jv525havefobjenejh.jpg)
adding digits one by one, we carry them to the next column until the end.

Multiplication is also close to what we do in elementary school, and for the second step rules of addition are the same.


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

The last one manipulation to do, is to subtract one binary from another.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50c3o2xlhgvnf7o18622.jpg)

every time we have 0-1, we can't allow it to result negative number, so we need to take one from the next column, and every time we do this, we replace 0 with 2.
We can check it if we did it correctly or not with converting numbers back to decimal.

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

So that post was the very basic explanation of everything related to number representations, hope you enjoyed it, Thanks for reading)