1630307999
Oracle Apex - Get Item Value Using JavaScript
https://orclqa.com/oracle-apex-get-item-value-using-javascript/
What is GEEK
Buddha Community
1647743100
Comparando Los Mejores Generadores De Grid CSS
Rejillas, rejillas, rejillas. Tantas cosas que podemos hacer con ellos. Pero, tantas propiedades que tenemos que recordar. 😅
Si eres como yo y siempre tienes que recurrir a Google cuando usas grillas, los trucos que veremos en esta guía te harán la vida mucho más fácil como desarrollador.
¿Qué son los generadores de grid CSS?
Un generador de cuadrículas es un sitio web que puede usar para generar una cuadrícula con unos pocos clics. Pero, ¿por qué deberías preocuparte por ellos? En mi caso, los uso con bastante frecuencia cuando quiero diseñar el diseño de mis sitios web o una estructura receptiva compleja dentro de una interfaz. Las cuadrículas son geniales porque te ayudan a lograr mucho con solo unas pocas líneas CSS, lo que ahorra mucho tiempo.
En este artículo, compararemos los siguientes generadores de grillas CSS y enumeraremos sus ventajas y desventajas para que pueda marcar su favorito:
- Generador de cuadrícula CSS
- Generador de diseño CSS
- Diseño de cuadrícula
- rejilla
- cssgr.id
- Cuadrícula CSS de Angry Tools
Además, para ahorrarle tiempo, hice una hoja de trucos con las propiedades esenciales de la cuadrícula CSS que debe recordar. 🥳 Esta hoja de trucos está disponible al final de este artículo.
1. Generador de cuadrícula CSS
Puse CSS Grid Generator primero en mi lista porque lo uso más. Es un proyecto de código abierto diseñado por Sarah Drasner (el código del proyecto está disponible aquí si quieres contribuir).
Para darte un ejemplo, hace poco necesitaba generar una cuadrícula simple con dos filas y tres columnas. No recordaba cómo establecer un tamaño específico para el espacio entre filas y entre columnas. Con CSS Grid Generator, pude crear fácilmente la estructura que deseaba y pasar a tareas más complejas.
.parent { pantalla: cuadrícula; cuadrícula-plantilla-columnas: repetir (3, 1fr); cuadrícula-plantilla-filas: repetir (2, 1fr); cuadrícula-columna-brecha: 60px; cuadrícula-fila-brecha: 30px; }
La cuadrícula final se veía así:
Ventajas:
- La interfaz es fácil de usar y los colores están bien elegidos, lo que convierte a CSS Grid Generator en una excelente herramienta para los principiantes que desean familiarizarse más con las cuadrículas CSS.
- CSS Grid Generator puede ayudarlo a obtener el resultado que desea para la mayoría de los casos de uso porque puede especificar la cantidad de columnas, filas y espacios en sus cuadrículas
- Simplemente presione un botón para obtener una vista previa del código y copiarlo en su portapapeles
Contras:
- No hay una plantilla que pueda elegir para ahorrarle tiempo
- No podrás generar diseños complicados
2. Generador de diseño CSS
Podría haber puesto el Generador de diseño CSS primero en la lista. Si está buscando generar cuadrículas complicadas todo el tiempo, esta es probablemente la que debería marcar. Desarrollado por Braid Design System , CSS Layout Generator ofrece una amplia gama de opciones que resolverán la mayoría de los dolores de cabeza.
En mi trabajo diario, uso mucho las plantillas CSS Layout Generator porque te permiten elegir convenientemente entre una estructura con una barra lateral/contenedor o un encabezado/principal/pie de página.
<section class="layout">
<!-- The left sidebar where you can put your navigation items etc. -->
<div class="sidebar">1</div>
<!-- The main content of your website -->
<div class="body">2</div>
</section>
<style>
.layout {
width: 1366px;
height: 768px;
display: grid;
/* This is the most important part where we define the size of our sidebar and body */
grid:
"sidebar body" 1fr
/ auto 1fr;
gap: 8px;
}
.sidebar {
grid-area: sidebar;
}
.body {
grid-area: body;
}
</style>La opción de la barra lateral se ve así:
Ventajas:
- CSS Layout Generator le permite elegir entre seis plantillas estándar para comenzar más rápido
- Hay muchas opciones para resolver casi todos los casos de uso
- Puede cambiar entre cuadrículas y Flexbox, lo cual es útil para comparar ambas opciones
- La interfaz es excelente y fácil de usar.
Contras:
- Debido a que ofrece tantas opciones, CSS Layout Generator puede resultar confuso para un principiante.
3. Diseño de cuadrícula
Grid Layout fue desarrollado por Leniolabs y es otro generador de grillas que viene con muchas opciones. El código está disponible públicamente en GitHub si está interesado en contribuir .
La semana pasada, un cliente me pidió que diseñara una interfaz para mostrar métricas importantes sobre su producto (algo similar a Geckoboard ). El diseño que quería era muy preciso pero, gracias a LayoutIt, generé el código en unos segundos.
<div class="container">
<div class="metric-1"></div>
<div class="metric-2"></div>
<div class="metrics-3"></div>
<div class="metric-4"></div>
<div class="metric-5"></div>
<div class="metric-6"></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"metric-1 metric-1 metric-2"
"metrics-3 metric-4 metric-2"
"metric-5 metric-5 metric-6";
}
.metric-1 {
grid-area: metric-1;
}
.metric-2 {
grid-area: metric-2;
}
.metrics-3 {
grid-area: metrics-3;
}
.metric-4 {
grid-area: metric-4;
}
.metric-5 {
grid-area: metric-5;
}
.metric-6 {
grid-area: metric-6;
}
</style>El diseño resultante se veía así:
Ventajas:
- Grid Layout Es intuitivo de usar y ofrece muchas opciones
- Puede configurar sus columnas y sus filas usando píxeles (px), fraccionarios (fr) y porcentajes (%)
- Sus diseños se pueden exportar a CodePen, CodeSandbox o StackBlitz con un solo clic
- La interfaz está bien diseñada, con un contraste adecuado entre las opciones y la vista previa de la cuadrícula.
- Diseño de cuadrícula Admite opciones de ubicación de cuadrícula
Contras:
- Este generador no proporciona plantillas para ahorrarle tiempo, que es la razón principal por la que lo puse tercero en la lista.
4. cuadrícula
En mi experiencia pasada, pasé mucho tiempo usando Griddy . Es un poco menos fácil de usar que la cuadrícula CSS creada por Sarah Drasner, pero ofrece más opciones.
Por ejemplo, le permite generar fácilmente una cuadrícula de cuatro columnas con tres filas:
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr 1fr;
grid-template-rows: 2fr 100px 1fr;
grid-column-gap: 10px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}El diseño resultante se ve así:
Ventajas:
- Puede configurar sus columnas y sus filas usando píxeles (px), fraccionarios (fr) y porcentajes (%)
- Las opciones proporcionadas son suficientes para resolver la mayoría de los casos de uso y probar diferentes alineaciones. En pocas palabras, hace el trabajo
Contras:
- Puede que sea una cuestión de gustos, pero la barra lateral con las opciones no es la mejor interfaz para mí. Tienes que desplazarte un rato para conseguir lo que buscas
- No hay plantillas para elegir
- no hay
minmax()funcion
5. Cssgr.id
Cssgr.id es otra excelente opción si está buscando un generador de cuadrícula que no tenga demasiadas opciones pero sí las suficientes para resolver la mayoría de los casos de uso.
Usé Cssgr.id el año pasado para crear una galería porque recordé que tenía una plantilla de galería. Con unos pocos clics, pude obtener algo bastante parecido a lo que necesitaba.
<div class="grid">
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 1</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 2</div>
<div class="span-row-2">Item 3</div>
<div class="span-row-3">Item 4</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 5</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 6</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 7</div>
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 8</div>
<!-- This item will take 2 columns and 3 rows -->
<div class="span-col-2 span-row-2">Item 9</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 10</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 11</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 12</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 13</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 14</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
/* Items with this class will take 3 columns */
.span-col-3 {
grid-column: span 3 / auto;
}
/* Items with this class will take 2 columns */
.span-col-2 {
grid-column: span 2 / auto;
}
/* Items with this class will take 2 rows */
.span-row-2 {
grid-row: span 2 / auto;
}
/* Items with this class will take 3 rows */
.span-row-3 {
grid-row: span 3 / auto;
}
</style>La galería quedó así:
Ventajas:
- Cssgr.id viene con cinco diseños de inicio prácticos para elegir (3 × 3, formación de fútbol, encabezado/pie de página, galería y sitio web genérico)
- Puede agregar texto de marcador de posición para ver cómo se representa con algún contenido escrito
- Tiene una interfaz bien diseñada que se puede configurar fácilmente.
Contras:
- No es el generador de grillas con más opciones
6. Cuadrícula CSS de Angry Tools
Angry Tools CSS Grid es el último generador de cuadrículas CSS de nuestra lista. Puede ser útil, aunque probablemente menos fácil de usar que las otras herramientas destacadas en esta guía.
Angry Tools CSS Grid también es útil para generar galerías. Al hacer clic en los cuadrados, puede definir sus tamaños y sus direcciones (horizontal o verticalmente).
<div class="angry-grid">
<div id="item-0">Item 0</div>
<div id="item-1">Item 1</div>
<div id="item-2">Item 2</div>
<div id="item-3">Item 3</div>
<div id="item-4">Item 4</div>
<div id="item-5">Item 5</div>
<div id="item-6">Item 6</div>
<div id="item-7">Item 7</div>
<div id="item-8">Item 8</div>
<div id="item-9">Item 9</div>
</div>
<style>
.angry-grid {
display: grid;
/* Our grid will be displayed using 3 rows */
grid-template-rows: 1fr 1fr 1fr;
/* Our grid will be displayed using 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* You can define a gap between your columns and your rows if you need to */
gap: 0px;
height: 100%;
}
/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
background-color: #8bf7ba;
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 2;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
background-color: #bf9aa7;
grid-row-start: 2;
grid-column-start: 3;
grid-row-end: 3;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
background-color: #c7656e;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 3;
}
/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
background-color: #b659df;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
background-color: #be6b5e;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
background-color: #5bb9d7;
grid-row-start: 3;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
background-color: #56adba;
grid-row-start: 1;
grid-column-start: 5;
grid-row-end: 3;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
background-color: #9cab58;
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
}
/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
background-color: #8558ad;
grid-row-start: 3;
grid-column-start: 3;
grid-row-end: 4;
grid-column-end: 4;
}
/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
background-color: #96b576;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
</style>La galería resultante se ve así:
Ventajas:
- Angry Tools CSS Grid viene con algunas plantillas entre las que puede elegir
Contras:
- No tiene el mejor diseño en general. Para ser honesto, es bastante feo y puede ser difícil de usar.
- No recomendaría esta herramienta para principiantes. Los desarrolladores avanzados probablemente también deberían elegir CSS Layout Generator o Grid LayoutIt en su lugar
- Tienes que desplazarte para obtener los resultados de CSS
BONIFICACIÓN: hoja de trucos de cuadrícula CSS
Los generadores de cuadrículas CSS son excelentes cuando no está familiarizado con las propiedades CSS. Pero, a medida que se convierte en un desarrollador más avanzado, es posible que una hoja de trucos rápidos sea probablemente más útil.
😇 Si te puede ayudar, aquí está el que he hecho para mí:
gap | Establece el tamaño del espacio entre las filas y las columnas. Es una forma abreviada de las siguientes propiedades: row-gapycolumn-gap |
row-gap | Especifica el espacio entre las filas de la cuadrícula. |
column-gap | Especifica el espacio entre las columnas. |
grid | Una propiedad abreviada para: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns,grid-auto-flow |
grid-area | Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-start, grid-column-start, grid-row-end,grid-column-end |
grid-auto-columns | Establece el tamaño de las columnas en un contenedor de cuadrícula. |
grid-auto-flow | Controla cómo se insertan en la cuadrícula los elementos colocados automáticamente |
grid-auto-rows | Establece el tamaño de las filas en un contenedor de cuadrícula |
grid-column | Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-column-start,grid-column-end |
grid-column-end | Define cuántas columnas abarcará un elemento o en qué línea de columna terminará el elemento |
grid-column-gap | Define el tamaño del espacio entre las columnas en un diseño de cuadrícula |
grid-column-start | Define en qué línea de columna comenzará el elemento |
grid-gap | Define el tamaño del espacio entre filas y columnas en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-gap,grid-column-gap |
grid-row | Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-start,grid-row-end |
grid-row-end | Define cuántas filas abarcará un elemento o en qué línea de fila terminará el elemento |
grid-row-gap | Define el tamaño del espacio entre las filas en un diseño de cuadrícula |
grid-row-start | Define en qué línea de fila comenzará el artículo |
grid-template | Una propiedad abreviada para las siguientes propiedades: grid-template-rows, grid-template-columns,grid-template-areas |
grid-template-areas | Especifica áreas dentro del diseño de cuadrícula. |
grid-template-columns | Especifica el número (y el ancho) de las columnas en un diseño de cuadrícula |
grid-template-rows | Especifica el número (y las alturas) de las filas en un diseño de cuadrícula |
Espero que esta comparación rápida de los mejores generadores de grillas CSS te haya ayudado a marcar tu favorito.
Además, si puedo darte un consejo crítico cuando trabajes con grillas CSS: tómate tu tiempo. Estos generadores son una excelente opción porque pueden ayudarlo a obtener los diseños que necesita paso a paso y evitar depender de una solución complicada.
¡Gracias por leer!
Fuente: https://blog.logrocket.com/comparing-best-css-grid-generators/
1647702841
Comparing the best CSS grid generators
Grids, grids, grids. So many things we can do with them. But, so many properties we have to remember. 😅
If you are like me and you always have to resort to Google when using grids, the tricks we’ll cover in this guide will make your life as a developer much easier.
What are CSS grid generators?
A grid generator is a website you can use to generate a grid in a few clicks. But why should you care about them? In my case, I use them quite often when I want to design the layout of my websites or a complex responsive structure inside an interface. Grids are great because they help you achieve a lot with just a few CSS lines, which saves a lot of time.
In this article, we will compare the following CSS grid generators and list their pros and cons so that you can bookmark your favorite one:
- CSS Grid Generator
- CSS Layout Generator
- Grid LayoutIt
- Griddy
- Cssgr.id
- Angry Tools CSS Grid
Also, to save you time, I made a cheat sheet with the essential CSS grid properties you should remember. 🥳 This cheat sheet is available at the bottom of this article.
1. CSS Grid Generator
I put CSS Grid Generator first on my list because I use it the most. It is an open source project designed by Sarah Drasner (the code of the project is available here if you want to contribute).
To give you an example, I recently needed to generate a simple grid with two rows and three columns. I didn’t remember how to set a specific size for the row gap and the column gap. With CSS Grid Generator, I was able to easily create the structure I desired and move on to more complex tasks.
.parent { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 60px; grid-row-gap: 30px; }
The final grid looked like this:
Pros:
- The interface is user-friendly and the colors are well-chosen, making CSS Grid Generator an excellent tool for beginners who want to become more familiar with CSS grids
- CSS Grid Generator can help you get the result you want for most use cases because you can specify the number of columns, rows, and gaps across your grids
- Just hit one button to preview the code and copy it to your clipboard
Cons:
- There is no template you can choose to save you time
- You will not be able to generate complicated layouts
2. CSS Layout Generator
I could have put CSS Layout Generator first on the list. If you are looking to generate complicated grids all the time, this is probably the one you should bookmark. Developed by Braid Design System, CSS Layout Generator offers a wide range of options that will solve most headaches.
In my daily work, I use CSS Layout Generator templates a lot because they conveniently allow you to choose between a structure with a sidebar/container or a header/main/footer.
<section class="layout">
<!-- The left sidebar where you can put your navigation items etc. -->
<div class="sidebar">1</div>
<!-- The main content of your website -->
<div class="body">2</div>
</section>
<style>
.layout {
width: 1366px;
height: 768px;
display: grid;
/* This is the most important part where we define the size of our sidebar and body */
grid:
"sidebar body" 1fr
/ auto 1fr;
gap: 8px;
}
.sidebar {
grid-area: sidebar;
}
.body {
grid-area: body;
}
</style>The Sidebar option looks like this:
Pros:
- CSS Layout Generator allows you to choose between six standard templates to get started faster
- There are many options to solve nearly all use cases
- You can switch between grids and Flexbox, which is helpful to compare both options
- The interface is excellent and user-friendly
Cons:
- Because it offers so many options, CSS Layout Generator can be confusing for a beginner
3. Grid LayoutIt
Grid LayoutIt was developed by Leniolabs and is another grid generator that comes with many options. The code is available publicly on GitHub if you are interested in contributing.
Last week, a customer asked me to design an interface to display important metrics about his product (somewhat similar to Geckoboard). The layout he wanted was very precise but, thanks to LayoutIt, I generated the code in a few seconds.
<div class="container">
<div class="metric-1"></div>
<div class="metric-2"></div>
<div class="metrics-3"></div>
<div class="metric-4"></div>
<div class="metric-5"></div>
<div class="metric-6"></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"metric-1 metric-1 metric-2"
"metrics-3 metric-4 metric-2"
"metric-5 metric-5 metric-6";
}
.metric-1 {
grid-area: metric-1;
}
.metric-2 {
grid-area: metric-2;
}
.metrics-3 {
grid-area: metrics-3;
}
.metric-4 {
grid-area: metric-4;
}
.metric-5 {
grid-area: metric-5;
}
.metric-6 {
grid-area: metric-6;
}
</style>The resulting layout looked like this:
Pros:
- Grid LayoutIt is intuitive to use and it provides many options
- You can set your columns and your rows using pixels (px), fractionals (fr), and percentages (%)
- Your layouts can be exported to CodePen, CodeSandbox, or StackBlitz in one click
- The interface is well-designed, with a proper contrast between the options and the grid preview
- Grid LayoutIt supports grid placement options
Cons:
- This generator does not provide templates to save you time, which is the main reason why I put it third on the list
4. Griddy
In my past experience, I spent a lot of time using Griddy. It is a little less easy to use than the CSS grid made by Sarah Drasner, but it offers more options.
For example, it allows you to easily generate a four column grid with three rows:
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr 1fr;
grid-template-rows: 2fr 100px 1fr;
grid-column-gap: 10px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}The resulting layout looks like this:
Pros:
- You can set your columns and your rows using pixels (px), fractionals (fr), and percentages (%)
- The provided options are enough to solve most use cases and test different alignments. In a nutshell, it gets the job done
Cons:
- It may be a question of taste, but the sidebar with the options is not the best interface for me. You have to scroll for a while to get what you are looking for
- There are no templates to choose from
- There is no
minmax()function
5. Cssgr.id
Cssgr.id is another great choice if you are looking for a grid generator that does not have too many options but enough to solve most use cases.
I used Cssgr.id last year to create a gallery because I remembered that it had a gallery template. In a few clicks, I was able to get something quite close to what I needed.
<div class="grid">
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 1</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 2</div>
<div class="span-row-2">Item 3</div>
<div class="span-row-3">Item 4</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 5</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 6</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 7</div>
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 8</div>
<!-- This item will take 2 columns and 3 rows -->
<div class="span-col-2 span-row-2">Item 9</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 10</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 11</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 12</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 13</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 14</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
/* Items with this class will take 3 columns */
.span-col-3 {
grid-column: span 3 / auto;
}
/* Items with this class will take 2 columns */
.span-col-2 {
grid-column: span 2 / auto;
}
/* Items with this class will take 2 rows */
.span-row-2 {
grid-row: span 2 / auto;
}
/* Items with this class will take 3 rows */
.span-row-3 {
grid-row: span 3 / auto;
}
</style>The gallery looked like this:
Pros:
- Cssgr.id comes with five practical starter layouts to choose from (3×3, football formation, header/footer, gallery, and generic website)
- You can add placeholder text to see how it renders with some written content
- It has a well-designed interface that can be easily configured
Cons:
- It is not the grid generator with the most options
6. Angry Tools CSS Grid
Angry Tools CSS Grid is the last CSS grid generator on our list. It can be handy, though probably less user-friendly than the other tools highlighted in this guide.
Angry Tools CSS Grid is also useful when generating galleries. By clicking on the squares, you can define their sizes and their directions (horizontally or vertically).
<div class="angry-grid">
<div id="item-0">Item 0</div>
<div id="item-1">Item 1</div>
<div id="item-2">Item 2</div>
<div id="item-3">Item 3</div>
<div id="item-4">Item 4</div>
<div id="item-5">Item 5</div>
<div id="item-6">Item 6</div>
<div id="item-7">Item 7</div>
<div id="item-8">Item 8</div>
<div id="item-9">Item 9</div>
</div>
<style>
.angry-grid {
display: grid;
/* Our grid will be displayed using 3 rows */
grid-template-rows: 1fr 1fr 1fr;
/* Our grid will be displayed using 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* You can define a gap between your columns and your rows if you need to */
gap: 0px;
height: 100%;
}
/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
background-color: #8bf7ba;
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 2;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
background-color: #bf9aa7;
grid-row-start: 2;
grid-column-start: 3;
grid-row-end: 3;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
background-color: #c7656e;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 3;
}
/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
background-color: #b659df;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
background-color: #be6b5e;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
background-color: #5bb9d7;
grid-row-start: 3;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
background-color: #56adba;
grid-row-start: 1;
grid-column-start: 5;
grid-row-end: 3;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
background-color: #9cab58;
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
}
/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
background-color: #8558ad;
grid-row-start: 3;
grid-column-start: 3;
grid-row-end: 4;
grid-column-end: 4;
}
/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
background-color: #96b576;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
</style>The resulting gallery looks like this:
Pros:
- Angry Tools CSS Grid comes with some templates you can choose from
Cons:
- It does not have the best design overall. To be honest, it is quite ugly and can be hard to use
- I would not recommend this tool for beginners. Advanced developers should also probably choose either CSS Layout Generator or Grid LayoutIt instead
- You have to scroll to get the CSS outputs
BONUS: CSS grid cheat sheet
CSS grid generators are great when you are not familiar with CSS properties. But, as you become a more advanced developer, you may find that a quick cheat sheet is probably handier.
😇 If it can help you, here is the one I have made for myself:
gap | Sets the gap size between the rows and columns. It is a shorthand for the following properties: row-gap and column-gap |
row-gap | Specifies the gap between the grid rows |
column-gap | Specifies the gap between the columns |
grid | A shorthand property for: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow |
grid-area | Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-row-start, grid-column-start, grid-row-end, grid-column-end |
grid-auto-columns | Sets the size for the columns in a grid container |
grid-auto-flow | Controls how auto-placed items get inserted in the grid |
grid-auto-rows | Sets the size for the rows in a grid container |
grid-column | Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-column-start, grid-column-end |
grid-column-end | Defines how many columns an item will span or on which column-line the item will end |
grid-column-gap | Defines the size of the gap between the columns in a grid layout |
grid-column-start | Defines on which column-line the item will start |
grid-gap | Defines the size of the gap between the rows and columns in a grid layout and is a shorthand property for the following properties: grid-row-gap, grid-column-gap |
grid-row | Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-row-start, grid-row-end |
grid-row-end | Defines how many rows an item will span or on which row-line the item will end |
grid-row-gap | Defines the size of the gap between the rows in a grid layout |
grid-row-start | Defines on which row-line the item will start |
grid-template | A shorthand property for the following properties: grid-template-rows, grid-template-columns, grid-template-areas |
grid-template-areas | Specifies areas within the grid layout |
grid-template-columns | Specifies the number (and the widths) of columns in a grid layout |
grid-template-rows | Specifies the number (and the heights) of the rows in a grid layout |
I hope this quick comparison of the best CSS grid generators helped you bookmark your favorite one.
Also, if I can give you a critical piece of advice when dealing with CSS grids: take your time. These generators are a great option because they can help you get the layouts you need step by step and avoid relying on a complicated solution.
Thank you for reading!
Source: https://blog.logrocket.com/comparing-best-css-grid-generators/
1647732000
最高のCSSグリッドジェネレーターの比較
グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅
あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。
CSSグリッドジェネレーターとは何ですか？
グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか？私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。
この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。
- CSSグリッドジェネレーター
- CSSレイアウトジェネレーター
- グリッドLayoutIt
- グリディ
- Cssgr.id
- AngryToolsCSSグリッド
また、時間を節約するために、覚えておく必要のある重要なCSSグリッドプロパティを使用してチートシートを作成しました。🥳このチートシートは、この記事の下部にあります。
1.CSSグリッドジェネレーター
CSSグリッドジェネレーターを最もよく使用するので、リストの最初に置きます。これはSarahDrasnerによって設計されたオープンソースプロジェクトです（プロジェクトのコードは、貢献したい場合はここから入手できます）。
例を挙げると、最近、2行3列の単純なグリッドを生成する必要がありました。行ギャップと列ギャップに特定のサイズを設定する方法を覚えていませんでした。CSS Grid Generatorを使用すると、必要な構造を簡単に作成して、より複雑なタスクに進むことができました。
.parent {表示：グリッド; grid-template-columns：repeat（3、1fr）; grid-template-rows：repeat（2、1fr）; grid-column-gap：60px; grid-row-gap：30px; }
最終的なグリッドは次のようになりました。
長所：
- インターフェイスはユーザーフレンドリーで、色も適切に選択されているため、CSSグリッドジェネレーターはCSSグリッドに慣れたい初心者にとって優れたツールです。
- CSSグリッドジェネレーターは、グリッド全体の列、行、およびギャップの数を指定できるため、ほとんどのユースケースで必要な結果を得るのに役立ちます。
- ボタンを1つ押すだけで、コードをプレビューしてクリップボードにコピーできます
短所：
- 時間を節約するために選択できるテンプレートはありません
- 複雑なレイアウトを生成することはできません
2.CSSレイアウトジェネレーター
CSSレイアウトジェネレーターをリストの最初に置くこともできます。常に複雑なグリッドを生成する場合は、これをブックマークする必要があります。ブレードデザインシステムによって開発されたCSSレイアウトジェネレーターは、ほとんどの頭痛の種を解決する幅広いオプションを提供します。
私の日常業務では、CSSレイアウトジェネレーターテンプレートを頻繁に使用します。これは、サイドバー/コンテナーまたはヘッダー/メイン/フッターのある構造を便利に選択できるためです。
<section class="layout">
<!-- The left sidebar where you can put your navigation items etc. -->
<div class="sidebar">1</div>
<!-- The main content of your website -->
<div class="body">2</div>
</section>
<style>
.layout {
width: 1366px;
height: 768px;
display: grid;
/* This is the most important part where we define the size of our sidebar and body */
grid:
"sidebar body" 1fr
/ auto 1fr;
gap: 8px;
}
.sidebar {
grid-area: sidebar;
}
.body {
grid-area: body;
}
</style>サイドバーオプションは次のようになります。
長所：
- CSS Layout Generatorを使用すると、6つの標準テンプレートから選択してより早く開始できます
- ほぼすべてのユースケースを解決するための多くのオプションがあります
- グリッドとFlexboxを切り替えることができます。これは、両方のオプションを比較するのに役立ちます
- インターフェースは素晴らしく、ユーザーフレンドリーです
短所：
- それは非常に多くのオプションを提供するので、CSSレイアウトジェネレータは初心者にとって混乱する可能性があります
3.グリッドLayoutIt
グリッドレイアウトこれはLeniolabsによって開発されたもので、多くのオプションを備えたもう1つのグリッドジェネレーターです。貢献に興味がある場合は、コードをGitHubで公開しています。
先週、顧客から、製品に関する重要なメトリックを表示するためのインターフェイスを設計するように依頼されました（Geckoboardに多少似ています）。彼が望んでいたレイアウトは非常に正確でしたが、LayoutItのおかげで、数秒でコードを生成できました。
<div class="container">
<div class="metric-1"></div>
<div class="metric-2"></div>
<div class="metrics-3"></div>
<div class="metric-4"></div>
<div class="metric-5"></div>
<div class="metric-6"></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"metric-1 metric-1 metric-2"
"metrics-3 metric-4 metric-2"
"metric-5 metric-5 metric-6";
}
.metric-1 {
grid-area: metric-1;
}
.metric-2 {
grid-area: metric-2;
}
.metrics-3 {
grid-area: metrics-3;
}
.metric-4 {
grid-area: metric-4;
}
.metric-5 {
grid-area: metric-5;
}
.metric-6 {
grid-area: metric-6;
}
</style>結果のレイアウトは次のようになります。
長所：
- グリッドレイアウト直感的に使用でき、多くのオプションを提供します
- ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
- レイアウトは、ワンクリックでCodePen、CodeSandbox、またはStackBlitzにエクスポートできます
- インターフェースは適切に設計されており、オプションとグリッドプレビューの間に適切なコントラストがあります。
- グリッドレイアウトグリッド配置オプションをサポート
短所：
- このジェネレーターは、時間を節約するためのテンプレートを提供していません。これが、リストの3番目に配置した主な理由です。
4.グリディ
私の過去の経験では、Griddyを使用して多くの時間を費やしました。Sarah Drasnerによって作成されたCSSグリッドよりも使いやすさは少し劣りますが、より多くのオプションが提供されます。
たとえば、次の3行の4列グリッドを簡単に生成できます。
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr 1fr;
grid-template-rows: 2fr 100px 1fr;
grid-column-gap: 10px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}結果のレイアウトは次のようになります。
長所：
- ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
- 提供されているオプションは、ほとんどのユースケースを解決し、さまざまな配置をテストするのに十分です。一言で言えば、それは仕事を成し遂げます
短所：
- 好みの問題かもしれませんが、オプション付きのサイドバーは私にとって最適なインターフェイスではありません。探しているものを取得するには、しばらくスクロールする必要があります
- 選択できるテンプレートはありません
minmax()機能はありません
5. Cssgr.id
Cssgr.idは、オプションが多すぎないが、ほとんどのユースケースを解決するのに十分なグリッドジェネレーターを探している場合のもう1つの優れた選択肢です。
ギャラリーテンプレートがあることを思い出したので、昨年Cssgr.idを使用してギャラリーを作成しました。数回クリックするだけで、必要なものに非常に近いものを得ることができました。
<div class="grid">
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 1</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 2</div>
<div class="span-row-2">Item 3</div>
<div class="span-row-3">Item 4</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 5</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 6</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 7</div>
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 8</div>
<!-- This item will take 2 columns and 3 rows -->
<div class="span-col-2 span-row-2">Item 9</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 10</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 11</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 12</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 13</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 14</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
/* Items with this class will take 3 columns */
.span-col-3 {
grid-column: span 3 / auto;
}
/* Items with this class will take 2 columns */
.span-col-2 {
grid-column: span 2 / auto;
}
/* Items with this class will take 2 rows */
.span-row-2 {
grid-row: span 2 / auto;
}
/* Items with this class will take 3 rows */
.span-row-3 {
grid-row: span 3 / auto;
}
</style>ギャラリーは次のようになりました。
長所：
- Cssgr.idには、5つの実用的なスターターレイアウト（3×3、サッカーフォーメーション、ヘッダー/フッター、ギャラリー、および一般的なWebサイト）から選択できます。
- プレースホルダーテキストを追加して、書かれたコンテンツでどのようにレンダリングされるかを確認できます
- 簡単に設定できる適切に設計されたインターフェイスを備えています
短所：
- ほとんどのオプションを備えたグリッドジェネレータではありません
6. AngryToolsCSSグリッド
Angry Tools CSSグリッドは、リストの最後のCSSグリッドジェネレーターです。このガイドで強調表示されている他のツールよりもユーザーフレンドリーではないかもしれませんが、便利な場合があります。
Angry Tools CSSグリッドは、ギャラリーを生成するときにも役立ちます。正方形をクリックすると、サイズと方向（水平または垂直）を定義できます。
<div class="angry-grid">
<div id="item-0">Item 0</div>
<div id="item-1">Item 1</div>
<div id="item-2">Item 2</div>
<div id="item-3">Item 3</div>
<div id="item-4">Item 4</div>
<div id="item-5">Item 5</div>
<div id="item-6">Item 6</div>
<div id="item-7">Item 7</div>
<div id="item-8">Item 8</div>
<div id="item-9">Item 9</div>
</div>
<style>
.angry-grid {
display: grid;
/* Our grid will be displayed using 3 rows */
grid-template-rows: 1fr 1fr 1fr;
/* Our grid will be displayed using 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* You can define a gap between your columns and your rows if you need to */
gap: 0px;
height: 100%;
}
/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
background-color: #8bf7ba;
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 2;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
background-color: #bf9aa7;
grid-row-start: 2;
grid-column-start: 3;
grid-row-end: 3;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
background-color: #c7656e;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 3;
}
/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
background-color: #b659df;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
background-color: #be6b5e;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
background-color: #5bb9d7;
grid-row-start: 3;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
background-color: #56adba;
grid-row-start: 1;
grid-column-start: 5;
grid-row-end: 3;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
background-color: #9cab58;
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
}
/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
background-color: #8558ad;
grid-row-start: 3;
grid-column-start: 3;
grid-row-end: 4;
grid-column-end: 4;
}
/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
background-color: #96b576;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
</style>結果のギャラリーは次のようになります。
長所：
- Angry Tools CSS Gridには、選択可能ないくつかのテンプレートが付属しています
短所：
- 全体的に最高のデザインではありません。正直なところ、それはかなり醜く、使いにくいことがあります
- 初心者にはお勧めしません。上級開発者は、おそらく代わりにCSSLayoutGeneratorまたはGridLayoutItのいずれかを選択する必要があります
- CSS出力を取得するにはスクロールする必要があります
ボーナス：CSSグリッドチートシート
CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。
😇それがあなたを助けることができるなら、これが私が自分のために作ったものです：
gap | 行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gap。column-gap |
row-gap | グリッド行間のギャップを指定します |
column-gap | 列間のギャップを指定します |
grid | grid-template-rowsの省略grid-template-columns形プロパティ：grid-template-areas、、、、、、grid-auto-rowsgrid-auto-columnsgrid-auto-flow |
grid-area | グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです：grid-row-start、、、grid-column-startgrid-row-endgrid-column-end |
grid-auto-columns | グリッドコンテナの列のサイズを設定します |
grid-auto-flow | 自動配置されたアイテムをグリッドに挿入する方法を制御します |
grid-auto-rows | グリッドコンテナの行のサイズを設定します |
grid-column | グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-column-start、grid-column-end |
grid-column-end | アイテムがまたがる列の数、またはアイテムが終了する列行を定義します |
grid-column-gap | グリッドレイアウトの列間のギャップのサイズを定義します |
grid-column-start | アイテムが開始する列行を定義します |
grid-gap | グリッドレイアウトの行と列の間のギャップのサイズを定義し、次のプロパティの省略形のプロパティです。grid-row-gap、grid-column-gap |
grid-row | グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-row-start、grid-row-end |
grid-row-end | アイテムがまたがる行数、またはアイテムが終了する行行を定義します |
grid-row-gap | グリッドレイアウトの行間のギャップのサイズを定義します |
grid-row-start | アイテムが開始する行行を定義します |
grid-template | 次のプロパティの省略形プロパティ：grid-template-rows、、grid-template-columnsgrid-template-areas |
grid-template-areas | グリッドレイアウト内の領域を指定します |
grid-template-columns | グリッドレイアウトの列の数（および幅）を指定します |
grid-template-rows | グリッドレイアウトの行の数（および高さ）を指定します |
最高のCSSグリッドジェネレーターのこの簡単な比較が、お気に入りのジェネレーターをブックマークするのに役立つことを願っています。
また、CSSグリッドを扱うときに重要なアドバイスを提供できる場合は、時間をかけてください。これらのジェネレーターは、必要なレイアウトを段階的に取得し、複雑なソリューションに依存することを回避するのに役立つため、優れたオプションです。
読んでくれてありがとう！
ソース：https ：//blog.logrocket.com/comparing-best-css-grid-generators/
1586415180
Everything You Need to Know About Instagram Bot with Python
How to build an Instagram bot using Python
Instagram is the fastest-growing social network, with 1 billion monthly users. It also has the highest engagement rate. To gain followers on Instagram, you’d have to upload engaging content, follow users, like posts, comment on user posts and a whole lot. This can be time-consuming and daunting. But there is hope, you can automate all of these tasks. In this course, we’re going to build an Instagram bot using Python to automate tasks on Instagram.
What you’ll learn:
- Instagram Automation
- Build a Bot with Python
Increase your Instagram followers with a simple Python bot
I got around 500 real followers in 4 days!
Growing an audience is an expensive and painful task. And if you’d like to build an audience that’s relevant to you, and shares common interests, that’s even more difficult. I always saw Instagram has a great way to promote my photos, but I never had more than 380 followers… Every once in a while, I decide to start posting my photos on Instagram again, and I manage to keep posting regularly for a while, but it never lasts more than a couple of months, and I don’t have many followers to keep me motivated and engaged.
The objective of this project is to build a bigger audience and as a plus, maybe drive some traffic to my website where I sell my photos!
A year ago, on my last Instagram run, I got one of those apps that lets you track who unfollowed you. I was curious because in a few occasions my number of followers dropped for no apparent reason. After some research, I realized how some users basically crawl for followers. They comment, like and follow people — looking for a follow back. Only to unfollow them again in the next days.
I can’t say this was a surprise to me, that there were bots in Instagram… It just made me want to build one myself!
And that is why we’re here, so let’s get to it! I came up with a simple bot in Python, while I was messing around with Selenium and trying to figure out some project to use it. Simply put, Selenium is like a browser you can interact with very easily in Python.
Ideally, increasing my Instagram audience will keep me motivated to post regularly. As an extra, I included my website in my profile bio, where people can buy some photos. I think it is a bit of a stretch, but who knows?! My sales are basically zero so far, so it should be easy to track that conversion!
Just what the world needed! Another Instagram bot…
After giving this project some thought, my objective was to increase my audience with relevant people. I want to get followers that actually want to follow me and see more of my work. It’s very easy to come across weird content in the most used hashtags, so I’ve planed this bot to lookup specific hashtags and interact with the photos there. This way, I can be very specific about what kind of interests I want my audience to have. For instance, I really like long exposures, so I can target people who use that hashtag and build an audience around this kind of content. Simple and efficient!
My gallery is a mix of different subjects and styles, from street photography to aerial photography, and some travel photos too. Since it’s my hometown, I also have lots of Lisbon images there. These will be the main topics I’ll use in the hashtags I want to target.
This is not a “get 1000 followers in 24 hours” kind of bot!
So what kind of numbers are we talking about?
I ran the bot a few times in a few different hashtags like “travelblogger”, “travelgram”, “lisbon”, “dronephotography”. In the course of three days I went from 380 to 800 followers. Lots of likes, comments and even some organic growth (people that followed me but were not followed by the bot).
To be clear, I’m not using this bot intensively, as Instagram will stop responding if you run it too fast. It needs to have some sleep commands in between the actions, because after some comments and follows in a short period of time, Instagram stops responding and the bot crashes.
You will be logged into your account, so I’m almost sure that Instagram can know you’re doing something weird if you speed up the process. And most importantly, after doing this for a dozen hashtags, it just gets harder to find new users in the same hashtags. You will need to give it a few days to refresh the user base there.
But I don’t want to follow so many people in the process…
The most efficient way to get followers in Instagram (apart from posting great photos!) is to follow people. And this bot worked really well for me because I don’t care if I follow 2000 people to get 400 followers.
The bot saves a list with all the users that were followed while it was running, so someday I may actually do something with this list. For instance, I can visit each user profile, evaluate how many followers or posts they have, and decide if I want to keep following them. Or I can get the first picture in their gallery and check its date to see if they are active users.
If we remove the follow action from the bot, I can assure you the growth rate will suffer, as people are less inclined to follow based on a single like or comment.
Why will you share your code?!
That’s the debate I had with myself. Even though I truly believe in giving back to the community (I still learn a lot from it too!), there are several paid platforms that do more or less the same as this project. Some are shady, some are used by celebrities. The possibility of starting a similar platform myself, is not off the table yet, so why make the code available?
With that in mind, I decided to add an extra level of difficulty to the process, so I was going to post the code below as an image. I wrote “was”, because meanwhile, I’ve realized the image I’m getting is low quality. Which in turn made me reconsider and post the gist. I’m that nice! The idea behind the image was that if you really wanted to use it, you would have to type the code yourself. And that was my way of limiting the use of this tool to people that actually go through the whole process to create it and maybe even improve it.
I learn a lot more when I type the code myself, instead of copy/pasting scripts. I hope you feel the same way!
The script isn’t as sophisticated as it could be, and I know there’s lots of room to improve it. But hey… it works! I have other projects I want to add to my portfolio, so my time to develop it further is rather limited. Nevertheless, I will try to update this article if I dig deeper.
This is the last subtitle!
You’ll need Python (I’m using Python 3.7), Selenium, a browser (in my case I’ll be using Chrome) and… obviously, an Instagram account! Quick overview regarding what the bot will do:
- Open a browser and login with your credentials
- For every hashtag in the hashtag list, it will open the page and click the first picture to open it
- It will then like, follow, comment and move to the next picture, in a 200 iterations loop (number can be adjusted)
- Saves a list with all the users you followed using the bot
If you reached this paragraph, thank you! You totally deserve to collect your reward! If you find this useful for your profile/brand in any way, do share your experience below :)
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from time import sleep, strftime
from random import randint
import pandas as pd
chromedriver_path = 'C:/Users/User/Downloads/chromedriver_win32/chromedriver.exe' # Change this to your own chromedriver path!
webdriver = webdriver.Chrome(executable_path=chromedriver_path)
sleep(2)
webdriver.get('https://www.instagram.com/accounts/login/?source=auth_switcher')
sleep(3)
username = webdriver.find_element_by_name('username')
username.send_keys('your_username')
password = webdriver.find_element_by_name('password')
password.send_keys('your_password')
button_login = webdriver.find_element_by_css_selector('#react-root > section > main > div > article > div > div:nth-child(1) > div > form > div:nth-child(3) > button')
button_login.click()
sleep(3)
notnow = webdriver.find_element_by_css_selector('body > div:nth-child(13) > div > div > div > div.mt3GC > button.aOOlW.HoLwm')
notnow.click() #comment these last 2 lines out, if you don't get a pop up asking about notifications
In order to use chrome with Selenium, you need to install chromedriver. It’s a fairly simple process and I had no issues with it. Simply install and replace the path above. Once you do that, our variable webdriver will be our Chrome tab.
In cell number 3 you should replace the strings with your own username and the respective password. This is for the bot to type it in the fields displayed. You might have already noticed that when running cell number 2, Chrome opened a new tab. After the password, I’ll define the login button as an object, and in the following line, I click it.
Once you get in inspect mode find the bit of html code that corresponds to what you want to map. Right click it and hover over Copy. You will see that you have some options regarding how you want it to be copied. I used a mix of XPath and css selectors throughout the code (it’s visible in the find_element_ method). It took me a while to get all the references to run smoothly. At points, the css or the xpath directions would fail, but as I adjusted the sleep times, everything started running smoothly.
In this case, I selected “copy selector” and pasted it inside a find_element_ method (cell number 3). It will get you the first result it finds. If it was find_elements_, all elements would be retrieved and you could specify which to get.
Once you get that done, time for the loop. You can add more hashtags in the hashtag_list. If you run it for the first time, you still don’t have a file with the users you followed, so you can simply create prev_user_list as an empty list.
Once you run it once, it will save a csv file with a timestamp with the users it followed. That file will serve as the prev_user_list on your second run. Simple and easy to keep track of what the bot does.
Update with the latest timestamp on the following runs and you get yourself a series of csv backlogs for every run of the bot.
The code is really simple. If you have some basic notions of Python you can probably pick it up quickly. I’m no Python ninja and I was able to build it, so I guess that if you read this far, you are good to go!
hashtag_list = ['travelblog', 'travelblogger', 'traveler']
# prev_user_list = [] - if it's the first time you run it, use this line and comment the two below
prev_user_list = pd.read_csv('20181203-224633_users_followed_list.csv', delimiter=',').iloc[:,1:2] # useful to build a user log
prev_user_list = list(prev_user_list['0'])
new_followed = []
tag = -1
followed = 0
likes = 0
comments = 0
for hashtag in hashtag_list:
tag += 1
webdriver.get('https://www.instagram.com/explore/tags/'+ hashtag_list[tag] + '/')
sleep(5)
first_thumbnail = webdriver.find_element_by_xpath('//*[@id="react-root"]/section/main/article/div[1]/div/div/div[1]/div[1]/a/div')
first_thumbnail.click()
sleep(randint(1,2))
try:
for x in range(1,200):
username = webdriver.find_element_by_xpath('/html/body/div[3]/div/div[2]/div/article/header/div[2]/div[1]/div[1]/h2/a').text
if username not in prev_user_list:
# If we already follow, do not unfollow
if webdriver.find_element_by_xpath('/html/body/div[3]/div/div[2]/div/article/header/div[2]/div[1]/div[2]/button').text == 'Follow':
webdriver.find_element_by_xpath('/html/body/div[3]/div/div[2]/div/article/header/div[2]/div[1]/div[2]/button').click()
new_followed.append(username)
followed += 1
# Liking the picture
button_like = webdriver.find_element_by_xpath('/html/body/div[3]/div/div[2]/div/article/div[2]/section[1]/span[1]/button/span')
button_like.click()
likes += 1
sleep(randint(18,25))
# Comments and tracker
comm_prob = randint(1,10)
print('{}_{}: {}'.format(hashtag, x,comm_prob))
if comm_prob > 7:
comments += 1
webdriver.find_element_by_xpath('/html/body/div[3]/div/div[2]/div/article/div[2]/section[1]/span[2]/button/span').click()
comment_box = webdriver.find_element_by_xpath('/html/body/div[3]/div/div[2]/div/article/div[2]/section[3]/div/form/textarea')
if (comm_prob < 7):
comment_box.send_keys('Really cool!')
sleep(1)
elif (comm_prob > 6) and (comm_prob < 9):
comment_box.send_keys('Nice work :)')
sleep(1)
elif comm_prob == 9:
comment_box.send_keys('Nice gallery!!')
sleep(1)
elif comm_prob == 10:
comment_box.send_keys('So cool! :)')
sleep(1)
# Enter to post comment
comment_box.send_keys(Keys.ENTER)
sleep(randint(22,28))
# Next picture
webdriver.find_element_by_link_text('Next').click()
sleep(randint(25,29))
else:
webdriver.find_element_by_link_text('Next').click()
sleep(randint(20,26))
# some hashtag stops refreshing photos (it may happen sometimes), it continues to the next
except:
continue
for n in range(0,len(new_followed)):
prev_user_list.append(new_followed[n])
updated_user_df = pd.DataFrame(prev_user_list)
updated_user_df.to_csv('{}_users_followed_list.csv'.format(strftime("%Y%m%d-%H%M%S")))
print('Liked {} photos.'.format(likes))
print('Commented {} photos.'.format(comments))
print('Followed {} new people.'.format(followed))
The print statement inside the loop is the way I found to be able to have a tracker that lets me know at what iteration the bot is all the time. It will print the hashtag it’s in, the number of the iteration, and the random number generated for the comment action. I decided not to post comments in every page, so I added three different comments and a random number between 1 and 10 that would define if there was any comment at all, or one of the three. The loop ends, we append the new_followed users to the previous users “database” and saves the new file with the timestamp. You should also get a small report.
And that’s it!
After a few hours without checking the phone, these were the numbers I was getting. I definitely did not expect it to do so well! In about 4 days since I’ve started testing it, I had around 500 new followers, which means I have doubled my audience in a matter of days. I’m curious to see how many of these new followers I will lose in the next days, to see if the growth can be sustainable. I also had a lot more “likes” in my latest photos, but I guess that’s even more expected than the follow backs.
It would be nice to get this bot running in a server, but I have other projects I want to explore, and configuring a server is not one of them! Feel free to leave a comment below, and I’ll do my best to answer your questions.
I’m actually curious to see how long will I keep posting regularly! If you feel like this article was helpful for you, consider thanking me by buying one of my photos.
How to Make an Instagram Bot With Python and InstaPy
What do SocialCaptain, Kicksta, Instavast, and many other companies have in common? They all help you reach a greater audience, gain more followers, and get more likes on Instagram while you hardly lift a finger. They do it all through automation, and people pay them a good deal of money for it. But you can do the same thing—for free—using InstaPy!
In this tutorial, you’ll learn how to build a bot with Python and InstaPy, which automates your Instagram activities so that you gain more followers and likes with minimal manual input. Along the way, you’ll learn about browser automation with Selenium and the Page Object Pattern, which together serve as the basis for InstaPy.
In this tutorial, you’ll learn:
- How Instagram bots work
- How to automate a browser with Selenium
- How to use the Page Object Pattern for better readability and testability
- How to build an Instagram bot with InstaPy
You’ll begin by learning how Instagram bots work before you build one.
Table of Contents
- How Instagram Bots Work
- How to Automate a Browser
- How to Use the Page Object Pattern
- How to Build an Instagram Bot With InstaPy
- Essential Features
- Additional Features in InstaPy
- Conclusion
Important: Make sure you check Instagram’s Terms of Use before implementing any kind of automation or scraping techniques.
How Instagram Bots Work
How can an automation script gain you more followers and likes? Before answering this question, think about how an actual person gains more followers and likes.
They do it by being consistently active on the platform. They post often, follow other people, and like and leave comments on other people’s posts. Bots work exactly the same way: They follow, like, and comment on a consistent basis according to the criteria you set.
The better the criteria you set, the better your results will be. You want to make sure you’re targeting the right groups because the people your bot interacts with on Instagram will be more likely to interact with your content.
For example, if you’re selling women’s clothing on Instagram, then you can instruct your bot to like, comment on, and follow mostly women or profiles whose posts include hashtags such as #beauty, #fashion, or #clothes. This makes it more likely that your target audience will notice your profile, follow you back, and start interacting with your posts.
How does it work on the technical side, though? You can’t use the Instagram Developer API since it is fairly limited for this purpose. Enter browser automation. It works in the following way:
- You serve it your credentials.
- You set the criteria for who to follow, what comments to leave, and which type of posts to like.
- Your bot opens a browser, types in
https://instagram.comon the address bar, logs in with your credentials, and starts doing the things you instructed it to do.
Next, you’ll build the initial version of your Instagram bot, which will automatically log in to your profile. Note that you won’t use InstaPy just yet.
How to Automate a Browser
For this version of your Instagram bot, you’ll be using Selenium, which is the tool that InstaPy uses under the hood.
First, install Selenium. During installation, make sure you also install the Firefox WebDriver since the latest version of InstaPy dropped support for Chrome. This also means that you need the Firefox browser installed on your computer.
Now, create a Python file and write the following code in it:
from time import sleep
from selenium import webdriver
browser = webdriver.Firefox()
browser.get('https://www.instagram.com/')
sleep(5)
browser.close()
Run the code and you’ll see that a Firefox browser opens and directs you to the Instagram login page. Here’s a line-by-line breakdown of the code:
- Lines 1 and 2 import
sleepandwebdriver. - Line 4 initializes the Firefox driver and sets it to
browser. - Line 6 types
https://www.instagram.com/on the address bar and hits Enter. - Line 8 waits for five seconds so you can see the result. Otherwise, it would close the browser instantly.
- Line 10 closes the browser.
This is the Selenium version of Hello, World. Now you’re ready to add the code that logs in to your Instagram profile. But first, think about how you would log in to your profile manually. You would do the following:
- Go to
https://www.instagram.com/. - Click the login link.
- Enter your credentials.
- Hit the login button.
The first step is already done by the code above. Now change it so that it clicks on the login link on the Instagram home page:
from time import sleep
from selenium import webdriver
browser = webdriver.Firefox()
browser.implicitly_wait(5)
browser.get('https://www.instagram.com/')
login_link = browser.find_element_by_xpath("//a[text()='Log in']")
login_link.click()
sleep(5)
browser.close()
Note the highlighted lines:
- Line 5 sets five seconds of waiting time. If Selenium can’t find an element, then it waits for five seconds to allow everything to load and tries again.
- Line 9 finds the element
<a>whose text is equal toLog in. It does this using XPath, but there are a few other methods you could use. - Line 10 clicks on the found element
<a>for the login link.
Run the script and you’ll see your script in action. It will open the browser, go to Instagram, and click on the login link to go to the login page.
On the login page, there are three important elements:
- The username input
- The password input
- The login button
Next, change the script so that it finds those elements, enters your credentials, and clicks on the login button:
from time import sleep
from selenium import webdriver
browser = webdriver.Firefox()
browser.implicitly_wait(5)
browser.get('https://www.instagram.com/')
login_link = browser.find_element_by_xpath("//a[text()='Log in']")
login_link.click()
sleep(2)
username_input = browser.find_element_by_css_selector("input[name='username']")
password_input = browser.find_element_by_css_selector("input[name='password']")
username_input.send_keys("<your username>")
password_input.send_keys("<your password>")
login_button = browser.find_element_by_xpath("//button[@type='submit']")
login_button.click()
sleep(5)
browser.close()
Here’s a breakdown of the changes:
- Line 12 sleeps for two seconds to allow the page to load.
- Lines 14 and 15 find username and password inputs by CSS. You could use any other method that you prefer.
- Lines 17 and 18 type your username and password in their respective inputs. Don’t forget to fill in
<your username>and<your password>! - Line 20 finds the login button by XPath.
- Line 21 clicks on the login button.
Run the script and you’ll be automatically logged in to to your Instagram profile.
You’re off to a good start with your Instagram bot. If you were to continue writing this script, then the rest would look very similar. You would find the posts that you like by scrolling down your feed, find the like button by CSS, click on it, find the comments section, leave a comment, and continue.
The good news is that all of those steps can be handled by InstaPy. But before you jump into using Instapy, there is one other thing that you should know about to better understand how InstaPy works: the Page Object Pattern.
How to Use the Page Object Pattern
Now that you’ve written the login code, how would you write a test for it? It would look something like the following:
def test_login_page(browser):
browser.get('https://www.instagram.com/accounts/login/')
username_input = browser.find_element_by_css_selector("input[name='username']")
password_input = browser.find_element_by_css_selector("input[name='password']")
username_input.send_keys("<your username>")
password_input.send_keys("<your password>")
login_button = browser.find_element_by_xpath("//button[@type='submit']")
login_button.click()
errors = browser.find_elements_by_css_selector('#error_message')
assert len(errors) == 0
Can you see what’s wrong with this code? It doesn’t follow the DRY principle. That is, the code is duplicated in both the application and the test code.
Duplicating code is especially bad in this context because Selenium code is dependent on UI elements, and UI elements tend to change. When they do change, you want to update your code in one place. That’s where the Page Object Pattern comes in.
With this pattern, you create page object classes for the most important pages or fragments that provide interfaces that are straightforward to program to and that hide the underlying widgetry in the window. With this in mind, you can rewrite the code above and create a HomePage class and a LoginPage class:
from time import sleep
class LoginPage:
def __init__(self, browser):
self.browser = browser
def login(self, username, password):
username_input = self.browser.find_element_by_css_selector("input[name='username']")
password_input = self.browser.find_element_by_css_selector("input[name='password']")
username_input.send_keys(username)
password_input.send_keys(password)
login_button = browser.find_element_by_xpath("//button[@type='submit']")
login_button.click()
sleep(5)
class HomePage:
def __init__(self, browser):
self.browser = browser
self.browser.get('https://www.instagram.com/')
def go_to_login_page(self):
self.browser.find_element_by_xpath("//a[text()='Log in']").click()
sleep(2)
return LoginPage(self.browser)
The code is the same except that the home page and the login page are represented as classes. The classes encapsulate the mechanics required to find and manipulate the data in the UI. That is, there are methods and accessors that allow the software to do anything a human can.
One other thing to note is that when you navigate to another page using a page object, it returns a page object for the new page. Note the returned value of go_to_log_in_page(). If you had another class called FeedPage, then login() of the LoginPage class would return an instance of that: return FeedPage().
Here’s how you can put the Page Object Pattern to use:
from selenium import webdriver
browser = webdriver.Firefox()
browser.implicitly_wait(5)
home_page = HomePage(browser)
login_page = home_page.go_to_login_page()
login_page.login("<your username>", "<your password>")
browser.close()
It looks much better, and the test above can now be rewritten to look like this:
def test_login_page(browser):
home_page = HomePage(browser)
login_page = home_page.go_to_login_page()
login_page.login("<your username>", "<your password>")
errors = browser.find_elements_by_css_selector('#error_message')
assert len(errors) == 0
With these changes, you won’t have to touch your tests if something changes in the UI.
For more information on the Page Object Pattern, refer to the official documentation and to Martin Fowler’s article.
Now that you’re familiar with both Selenium and the Page Object Pattern, you’ll feel right at home with InstaPy. You’ll build a basic bot with it next.
Note: Both Selenium and the Page Object Pattern are widely used for other websites, not just for Instagram.
How to Build an Instagram Bot With InstaPy
In this section, you’ll use InstaPy to build an Instagram bot that will automatically like, follow, and comment on different posts. First, you’ll need to install InstaPy:
$ python3 -m pip install instapy
This will install instapy in your system.
Essential Features
Now you can rewrite the code above with InstaPy so that you can compare the two options. First, create another Python file and put the following code in it:
from instapy import InstaPy
InstaPy(username="<your_username>", password="<your_password>").login()
Replace the username and password with yours, run the script, and voilà! With just one line of code, you achieved the same result.
Even though your results are the same, you can see that the behavior isn’t exactly the same. In addition to simply logging in to your profile, InstaPy does some other things, such as checking your internet connection and the status of the Instagram servers. This can be observed directly on the browser or in the logs:
INFO [2019-12-17 22:03:19] [username] -- Connection Checklist [1/3] (Internet Connection Status)
INFO [2019-12-17 22:03:20] [username] - Internet Connection Status: ok
INFO [2019-12-17 22:03:20] [username] - Current IP is "17.283.46.379" and it's from "Germany/DE"
INFO [2019-12-17 22:03:20] [username] -- Connection Checklist [2/3] (Instagram Server Status)
INFO [2019-12-17 22:03:26] [username] - Instagram WebSite Status: Currently Up
Pretty good for one line of code, isn’t it? Now it’s time to make the script do more interesting things than just logging in.
For the purpose of this example, assume that your profile is all about cars, and that your bot is intended to interact with the profiles of people who are also interested in cars.
First, you can like some posts that are tagged #bmw or #mercedes using like_by_tags():
from instapy import InstaPy
session = InstaPy(username="<your_username>", password="<your_password>")
session.login()
session.like_by_tags(["bmw", "mercedes"], amount=5)
Here, you gave the method a list of tags to like and the number of posts to like for each given tag. In this case, you instructed it to like ten posts, five for each of the two tags. But take a look at what happens after you run the script:
INFO [2019-12-17 22:15:58] [username] Tag [1/2]
INFO [2019-12-17 22:15:58] [username] --> b'bmw'
INFO [2019-12-17 22:16:07] [username] desired amount: 14 | top posts [disabled]: 9 | possible posts: 43726739
INFO [2019-12-17 22:16:13] [username] Like# [1/14]
INFO [2019-12-17 22:16:13] [username] https://www.instagram.com/p/B6MCcGcC3tU/
INFO [2019-12-17 22:16:15] [username] Image from: b'mattyproduction'
INFO [2019-12-17 22:16:15] [username] Link: b'https://www.instagram.com/p/B6MCcGcC3tU/'
INFO [2019-12-17 22:16:15] [username] Description: b'Mal etwas anderes \xf0\x9f\x91\x80\xe2\x98\xba\xef\xb8\x8f Bald ist das komplette Video auf YouTube zu finden (n\xc3\xa4here Infos werden folgen). Vielen Dank an @patrick_jwki @thehuthlife und @christic_ f\xc3\xbcr das bereitstellen der Autos \xf0\x9f\x94\xa5\xf0\x9f\x98\x8d#carporn#cars#tuning#bagged#bmw#m2#m2competition#focusrs#ford#mk3#e92#m3#panasonic#cinematic#gh5s#dji#roninm#adobe#videography#music#bimmer#fordperformance#night#shooting#'
INFO [2019-12-17 22:16:15] [username] Location: b'K\xc3\xb6ln, Germany'
INFO [2019-12-17 22:16:51] [username] --> Image Liked!
INFO [2019-12-17 22:16:56] [username] --> Not commented
INFO [2019-12-17 22:16:57] [username] --> Not following
INFO [2019-12-17 22:16:58] [username] Like# [2/14]
INFO [2019-12-17 22:16:58] [username] https://www.instagram.com/p/B6MDK1wJ-Kb/
INFO [2019-12-17 22:17:01] [username] Image from: b'davs0'
INFO [2019-12-17 22:17:01] [username] Link: b'https://www.instagram.com/p/B6MDK1wJ-Kb/'
INFO [2019-12-17 22:17:01] [username] Description: b'Someone said cloud? \xf0\x9f\xa4\x94\xf0\x9f\xa4\xad\xf0\x9f\x98\x88 \xe2\x80\xa2\n\xe2\x80\xa2\n\xe2\x80\xa2\n\xe2\x80\xa2\n#bmw #bmwrepost #bmwm4 #bmwm4gts #f82 #bmwmrepost #bmwmsport #bmwmperformance #bmwmpower #bmwm4cs #austinyellow #davs0 #mpower_official #bmw_world_ua #bimmerworld #bmwfans #bmwfamily #bimmers #bmwpost #ultimatedrivingmachine #bmwgang #m3f80 #m5f90 #m4f82 #bmwmafia #bmwcrew #bmwlifestyle'
INFO [2019-12-17 22:17:34] [username] --> Image Liked!
INFO [2019-12-17 22:17:37] [username] --> Not commented
INFO [2019-12-17 22:17:38] [username] --> Not following
By default, InstaPy will like the first nine top posts in addition to your amount value. In this case, that brings the total number of likes per tag to fourteen (nine top posts plus the five you specified in amount).
Also note that InstaPy logs every action it takes. As you can see above, it mentions which post it liked as well as its link, description, location, and whether the bot commented on the post or followed the author.
You may have noticed that there are delays after almost every action. That’s by design. It prevents your profile from getting banned on Instagram.
Now, you probably don’t want your bot liking inappropriate posts. To prevent that from happening, you can use set_dont_like():
from instapy import InstaPy
session = InstaPy(username="<your_username>", password="<your_password>")
session.login()
session.like_by_tags(["bmw", "mercedes"], amount=5)
session.set_dont_like(["naked", "nsfw"])
With this change, posts that have the words naked or nsfw in their descriptions won’t be liked. You can flag any other words that you want your bot to avoid.
Next, you can tell the bot to not only like the posts but also to follow some of the authors of those posts. You can do that with set_do_follow():
from instapy import InstaPy
session = InstaPy(username="<your_username>", password="<your_password>")
session.login()
session.like_by_tags(["bmw", "mercedes"], amount=5)
session.set_dont_like(["naked", "nsfw"])
session.set_do_follow(True, percentage=50)
If you run the script now, then the bot will follow fifty percent of the users whose posts it liked. As usual, every action will be logged.
You can also leave some comments on the posts. There are two things that you need to do. First, enable commenting with set_do_comment():
from instapy import InstaPy
session = InstaPy(username="<your_username>", password="<your_password>")
session.login()
session.like_by_tags(["bmw", "mercedes"], amount=5)
session.set_dont_like(["naked", "nsfw"])
session.set_do_follow(True, percentage=50)
session.set_do_comment(True, percentage=50)
Next, tell the bot what comments to leave with set_comments():
from instapy import InstaPy
session = InstaPy(username="<your_username>", password="<your_password>")
session.login()
session.like_by_tags(["bmw", "mercedes"], amount=5)
session.set_dont_like(["naked", "nsfw"])
session.set_do_follow(True, percentage=50)
session.set_do_comment(True, percentage=50)
session.set_comments(["Nice!", "Sweet!", "Beautiful :heart_eyes:"])
Run the script and the bot will leave one of those three comments on half the posts that it interacts with.
Now that you’re done with the basic settings, it’s a good idea to end the session with end():
from instapy import InstaPy
session = InstaPy(username="<your_username>", password="<your_password>")
session.login()
session.like_by_tags(["bmw", "mercedes"], amount=5)
session.set_dont_like(["naked", "nsfw"])
session.set_do_follow(True, percentage=50)
session.set_do_comment(True, percentage=50)
session.set_comments(["Nice!", "Sweet!", "Beautiful :heart_eyes:"])
session.end()
This will close the browser, save the logs, and prepare a report that you can see in the console output.
Additional Features in InstaPy
InstaPy is a sizable project that has a lot of thoroughly documented features. The good news is that if you’re feeling comfortable with the features you used above, then the rest should feel pretty similar. This section will outline some of the more useful features of InstaPy.
Quota Supervisor
You can’t scrape Instagram all day, every day. The service will quickly notice that you’re running a bot and will ban some of its actions. That’s why it’s a good idea to set quotas on some of your bot’s actions. Take the following for example:
session.set_quota_supervisor(enabled=True, peak_comments_daily=240, peak_comments_hourly=21)
The bot will keep commenting until it reaches its hourly and daily limits. It will resume commenting after the quota period has passed.
Headless Browser
This feature allows you to run your bot without the GUI of the browser. This is super useful if you want to deploy your bot to a server where you may not have or need the graphical interface. It’s also less CPU intensive, so it improves performance. You can use it like so:
session = InstaPy(username='test', password='test', headless_browser=True)
Note that you set this flag when you initialize the InstaPy object.
Using AI to Analyze Posts
Earlier you saw how to ignore posts that contain inappropriate words in their descriptions. What if the description is good but the image itself is inappropriate? You can integrate your InstaPy bot with ClarifAI, which offers image and video recognition services:
session.set_use_clarifai(enabled=True, api_key='<your_api_key>')
session.clarifai_check_img_for(['nsfw'])
Now your bot won’t like or comment on any image that ClarifAI considers NSFW. You get 5,000 free API-calls per month.
Relationship Bounds
It’s often a waste of time to interact with posts by people who have a lot of followers. In such cases, it’s a good idea to set some relationship bounds so that your bot doesn’t waste your precious computing resources:
session.set_relationship_bounds(enabled=True, max_followers=8500)
With this, your bot won’t interact with posts by users who have more than 8,500 followers.
For many more features and configurations in InstaPy, check out the documentation.
Conclusion
InstaPy allows you to automate your Instagram activities with minimal fuss and effort. It’s a very flexible tool with a lot of useful features.
In this tutorial, you learned:
- How Instagram bots work
- How to automate a browser with Selenium
- How to use the Page Object Pattern to make your code more maintainable and testable
- How to use InstaPy to build a basic Instagram bot
Read the InstaPy documentation and experiment with your bot a little bit. Soon you’ll start getting new followers and likes with a minimal amount of effort. I gained a few new followers myself while writing this tutorial.
Automating Instagram API with Python
Gain active followers - Algorithm
Maybe some of you do not agree it is a good way to grow your IG page by using follow for follow method but after a lot of researching I found the proper way to use this method.
I have done and used this strategy for a while and my page visits also followers started growing.
The majority of people failing because they randomly targeting the followers and as a result, they are not coming back to your page. So, the key is to find people those have same interests with you.
If you have a programming page go and search for IG pages which have big programming community and once you find one, don’t send follow requests to followers of this page. Because some of them are not active even maybe fake accounts. So, in order to gain active followers, go the last post of this page and find people who liked the post.
Unofficial Instagram API
In order to query data from Instagram I am going to use the very cool, yet unofficial, Instagram API written by Pasha Lev.
**Note:**Before you test it make sure you verified your phone number in your IG account.
The program works pretty well so far but in case of any problems I have to put disclaimer statement here:
Disclaimer: This post published educational purposes only as well as to give general information about Instagram API. I am not responsible for any actions and you are taking your own risk.
Let’s start by installing and then logging in with API.
pip install InstagramApi
from InstagramAPI import InstagramAPI
api = InstagramAPI("username", "password")
api.login()
Once you run the program you will see “Login success!” in your console.
Get users from liked list
We are going to search for some username (your target page) then get most recent post from this user. Then, get users who liked this post. Unfortunately, I can’t find solution how to paginate users so right now it gets about last 500 user.
users_list = []
def get_likes_list(username):
api.login()
api.searchUsername(username)
result = api.LastJson
username_id = result['user']['pk'] # Get user ID
user_posts = api.getUserFeed(username_id) # Get user feed
result = api.LastJson
media_id = result['items'][0]['id'] # Get most recent post
api.getMediaLikers(media_id) # Get users who liked
users = api.LastJson['users']
for user in users: # Push users to list
users_list.append({'pk':user['pk'], 'username':user['username']})
Follow Users
Once we get the users list, it is time to follow these users.
IMPORTANT NOTE: set time limit as much as you can to avoid automation detection.
from time import sleep
following_users = []
def follow_users(users_list):
api.login()
api.getSelfUsersFollowing() # Get users which you are following
result = api.LastJson
for user in result['users']:
following_users.append(user['pk'])
for user in users_list:
if not user['pk'] in following_users: # if new user is not in your following users
print('Following @' + user['username'])
api.follow(user['pk'])
# after first test set this really long to avoid from suspension
sleep(20)
else:
print('Already following @' + user['username'])
sleep(10)
Unfollow Users
This function will look users which you are following then it will check if this user follows you as well. If user not following you then you are unfollowing as well.
follower_users = []
def unfollow_users():
api.login()
api.getSelfUserFollowers() # Get your followers
result = api.LastJson
for user in result['users']:
follower_users.append({'pk':user['pk'], 'username':user['username']})
api.getSelfUsersFollowing() # Get users which you are following
result = api.LastJson
for user in result['users']:
following_users.append({'pk':user['pk'],'username':user['username']})
for user in following_users:
if not user['pk'] in follower_users: # if the user not follows you
print('Unfollowing @' + user['username'])
api.unfollow(user['pk'])
# set this really long to avoid from suspension
sleep(20)
Full Code with extra functions
Here is the full code of this automation
import pprint
from time import sleep
from InstagramAPI import InstagramAPI
import pandas as pd
users_list = []
following_users = []
follower_users = []
class InstaBot:
def __init__(self):
self.api = InstagramAPI("your_username", "your_password")
def get_likes_list(self,username):
api = self.api
api.login()
api.searchUsername(username) #Gets most recent post from user
result = api.LastJson
username_id = result['user']['pk']
user_posts = api.getUserFeed(username_id)
result = api.LastJson
media_id = result['items'][0]['id']
api.getMediaLikers(media_id)
users = api.LastJson['users']
for user in users:
users_list.append({'pk':user['pk'], 'username':user['username']})
bot.follow_users(users_list)
def follow_users(self,users_list):
api = self.api
api.login()
api.getSelfUsersFollowing()
result = api.LastJson
for user in result['users']:
following_users.append(user['pk'])
for user in users_list:
if not user['pk'] in following_users:
print('Following @' + user['username'])
api.follow(user['pk'])
# set this really long to avoid from suspension
sleep(20)
else:
print('Already following @' + user['username'])
sleep(10)
def unfollow_users(self):
api = self.api
api.login()
api.getSelfUserFollowers()
result = api.LastJson
for user in result['users']:
follower_users.append({'pk':user['pk'], 'username':user['username']})
api.getSelfUsersFollowing()
result = api.LastJson
for user in result['users']:
following_users.append({'pk':user['pk'],'username':user['username']})
for user in following_users:
if not user['pk'] in [user['pk'] for user in follower_users]:
print('Unfollowing @' + user['username'])
api.unfollow(user['pk'])
# set this really long to avoid from suspension
sleep(20)
bot = InstaBot()
# To follow users run the function below
# change the username ('instagram') to your target username
bot.get_likes_list('instagram')
# To unfollow users uncomment and run the function below
# bot.unfollow_users()
it will look like this:
some extra functions to play with API:
def get_my_profile_details():
api.login()
api.getSelfUsernameInfo()
result = api.LastJson
username = result['user']['username']
full_name = result['user']['full_name']
profile_pic_url = result['user']['profile_pic_url']
followers = result['user']['follower_count']
following = result['user']['following_count']
media_count = result['user']['media_count']
df_profile = pd.DataFrame(
{'username':username,
'full name': full_name,
'profile picture URL':profile_pic_url,
'followers':followers,
'following':following,
'media count': media_count,
}, index=[0])
df_profile.to_csv('profile.csv', sep='\t', encoding='utf-8')
def get_my_feed():
image_urls = []
api.login()
api.getSelfUserFeed()
result = api.LastJson
# formatted_json_str = pprint.pformat(result)
# print(formatted_json_str)
if 'items' in result.keys():
for item in result['items'][0:5]:
if 'image_versions2' in item.keys():
image_url = item['image_versions2']['candidates'][1]['url']
image_urls.append(image_url)
df_feed = pd.DataFrame({
'image URL':image_urls
})
df_feed.to_csv('feed.csv', sep='\t', encoding='utf-8')
Building an Instagram Bot with Python and Selenium to Gain More Followers
Let’s build an Instagram bot to gain more followers! — I know, I know. That doesn’t sound very ethical, does it? But it’s all justified for educational purposes.
Coding is a super power — we can all agree. That’s why I’ll leave it up to you to not abuse this power. And I trust you’re here to learn how it works. Otherwise, you’d be on GitHub cloning one of the countless Instagram bots there, right?
You’re convinced? — Alright, now let’s go back to unethical practices.
The Plan
So here’s the deal, we want to build a bot in Python and Selenium that goes on the hashtags we specify, likes random posts, then follows the posters. It does that enough — we get follow backs. Simple as that.
Here’s a pretty twisted detail though: we want to keep track of the users we follow so the bot can unfollow them after the number of days we specify.
Setup
So first things first, I want to use a database to keep track of the username and the date added. You might as well save/load from/to a file, but we want this to be ready for more features in case we felt inspired in the future.
So make sure you create a database (I named mine instabot — but you can name it anything you like) and create a table called followed_users within the database with two fields (username, date_added)
Remember the installation path. You’ll need it.
You’ll also need the following python packages:
- selenium
- mysql-connector
Getting down to it
Alright, so first thing we’ll be doing is creating settings.json. Simply a .json file that will hold all of our settings so we don’t have to dive into the code every time we want to change something.
Settings
settings.json:
{
"db": {
"host": "localhost",
"user": "root",
"pass": "",
"database": "instabot"
},
"instagram": {
"user": "",
"pass": ""
},
"config": {
"days_to_unfollow": 1,
"likes_over": 150,
"check_followers_every": 3600,
"hashtags": []
}
}
As you can see, under “db”, we specify the database information. As I mentioned, I used “instabot”, but feel free to use whatever name you want.
You’ll also need to fill Instagram info under “instagram” so the bot can login into your account.
“config” is for our bot’s settings. Here’s what the fields mean:
days_to_unfollow: number of days before unfollowing users
likes_over: ignore posts if the number of likes is above this number
check_followers_every: number of seconds before checking if it’s time to unfollow any of the users
hashtags: a list of strings with the hashtag names the bot should be active on
Constants
Now, we want to take these settings and have them inside our code as constants.
Create Constants.py:
import json
INST_USER= INST_PASS= USER= PASS= HOST= DATABASE= POST_COMMENTS= ''
LIKES_LIMIT= DAYS_TO_UNFOLLOW= CHECK_FOLLOWERS_EVERY= 0
HASHTAGS= []
def init():
global INST_USER, INST_PASS, USER, PASS, HOST, DATABASE, LIKES_LIMIT, DAYS_TO_UNFOLLOW, CHECK_FOLLOWERS_EVERY, HASHTAGS
# read file
data = None
with open('settings.json', 'r') as myfile:
data = myfile.read()
obj = json.loads(data)
INST_USER = obj['instagram']['user']
INST_PASS = obj['instagram']['pass']
USER = obj['db']['user']
HOST = obj['db']['host']
PASS = obj['db']['pass']
DATABASE = obj['db']['database']
LIKES_LIMIT = obj['config']['likes_over']
CHECK_FOLLOWERS_EVERY = obj['config']['check_followers_every']
HASHTAGS = obj['config']['hashtags']
DAYS_TO_UNFOLLOW = obj['config']['days_to_unfollow']
the init() function we created reads the data from settings.json and feeds them into the constants we declared.
Engine
Alright, time for some architecture. Our bot will mainly operate from a python script with an init and update methods. Create BotEngine.py:
import Constants
def init(webdriver):
return
def update(webdriver):
return
We’ll be back later to put the logic here, but for now, we need an entry point.
Entry Point
Create our entry point, InstaBot.py:
from selenium import webdriver
import BotEngine
chromedriver_path = 'YOUR CHROMEDRIVER PATH'
webdriver = webdriver.Chrome(executable_path=chromedriver_path)
BotEngine.init(webdriver)
BotEngine.update(webdriver)
webdriver.close()
chromedriver_path = ‘YOUR CHROMEDRIVER PATH’ webdriver = webdriver.Chrome(executable_path=chromedriver_path)
BotEngine.init(webdriver)
BotEngine.update(webdriver)
webdriver.close()
Of course, you’ll need to swap “YOUR CHROMEDRIVER PATH” with your actual ChromeDriver path.
Time Helper
We need to create a helper script that will help us calculate elapsed days since a certain date (so we know if we should unfollow user)
Create TimeHelper.py:
import datetime
def days_since_date(n):
diff = datetime.datetime.now().date() - n
return diff.days
Database
Create DBHandler.py. It’ll contain a class that handles connecting to the Database for us.
import mysql.connector
import Constants
class DBHandler:
def __init__(self):
DBHandler.HOST = Constants.HOST
DBHandler.USER = Constants.USER
DBHandler.DBNAME = Constants.DATABASE
DBHandler.PASSWORD = Constants.PASS
HOST = Constants.HOST
USER = Constants.USER
DBNAME = Constants.DATABASE
PASSWORD = Constants.PASS
@staticmethod
def get_mydb():
if DBHandler.DBNAME == '':
Constants.init()
db = DBHandler()
mydb = db.connect()
return mydb
def connect(self):
mydb = mysql.connector.connect(
host=DBHandler.HOST,
user=DBHandler.USER,
passwd=DBHandler.PASSWORD,
database = DBHandler.DBNAME
)
return mydb
As you can see, we’re using the constants we defined.
The class contains a static method get_mydb() that returns a database connection we can use.
Now, let’s define a DB user script that contains the DB operations we need to perform on the user.
Create DBUsers.py:
import datetime, TimeHelper
from DBHandler import *
import Constants
#delete user by username
def delete_user(username):
mydb = DBHandler.get_mydb()
cursor = mydb.cursor()
sql = "DELETE FROM followed_users WHERE username = '{0}'".format(username)
cursor.execute(sql)
mydb.commit()
#add new username
def add_user(username):
mydb = DBHandler.get_mydb()
cursor = mydb.cursor()
now = datetime.datetime.now().date()
cursor.execute("INSERT INTO followed_users(username, date_added) VALUES(%s,%s)",(username, now))
mydb.commit()
#check if any user qualifies to be unfollowed
def check_unfollow_list():
mydb = DBHandler.get_mydb()
cursor = mydb.cursor()
cursor.execute("SELECT * FROM followed_users")
results = cursor.fetchall()
users_to_unfollow = []
for r in results:
d = TimeHelper.days_since_date(r[1])
if d > Constants.DAYS_TO_UNFOLLOW:
users_to_unfollow.append(r[0])
return users_to_unfollow
#get all followed users
def get_followed_users():
users = []
mydb = DBHandler.get_mydb()
cursor = mydb.cursor()
cursor.execute("SELECT * FROM followed_users")
results = cursor.fetchall()
for r in results:
users.append(r[0])
return users
Account Agent
Alright, we’re about to start our bot. We’re creating a script called AccountAgent.py that will contain the agent behavior.
Import some modules, some of which we need for later and write a login function that will make use of our webdriver.
Notice that we have to keep calling the sleep function between actions. If we send too many requests quickly, the Instagram servers will be alarmed and will deny any requests you send.
from time import sleep
import datetime
import DBUsers, Constants
import traceback
import random
def login(webdriver):
#Open the instagram login page
webdriver.get('https://www.instagram.com/accounts/login/?source=auth_switcher')
#sleep for 3 seconds to prevent issues with the server
sleep(3)
#Find username and password fields and set their input using our constants
username = webdriver.find_element_by_name('username')
username.send_keys(Constants.INST_USER)
password = webdriver.find_element_by_name('password')
password.send_keys(Constants.INST_PASS)
#Get the login button
try:
button_login = webdriver.find_element_by_xpath(
'//*[@id="react-root"]/section/main/div/article/div/div[1]/div/form/div[4]/button')
except:
button_login = webdriver.find_element_by_xpath(
'//*[@id="react-root"]/section/main/div/article/div/div[1]/div/form/div[6]/button/div')
#sleep again
sleep(2)
#click login
button_login.click()
sleep(3)
#In case you get a popup after logging in, press not now.
#If not, then just return
try:
notnow = webdriver.find_element_by_css_selector(
'body > div.RnEpo.Yx5HN > div > div > div.mt3GC > button.aOOlW.HoLwm')
notnow.click()
except:
return
Also note how we’re getting elements with their xpath. To do so, right click on the element, click “Inspect”, then right click on the element again inside the inspector, and choose Copy->Copy XPath.
Another important thing to be aware of is that element hierarchy change with the page’s layout when you resize or stretch the window. That’s why we’re checking for two different xpaths for the login button.
Now go back to BotEngine.py, we’re ready to login.
Add more imports that we’ll need later and fill in the init function
import AccountAgent, DBUsers
import Constants
import datetime
def init(webdriver):
Constants.init()
AccountAgent.login(webdriver)
def update(webdriver):
return
If you run our entry script now (InstaBot.py) you’ll see the bot logging in.
Perfect, now let’s add a method that will allow us to follow people to AccountAgent.py:
def follow_people(webdriver):
#all the followed user
prev_user_list = DBUsers.get_followed_users()
#a list to store newly followed users
new_followed = []
#counters
followed = 0
likes = 0
#Iterate theough all the hashtags from the constants
for hashtag in Constants.HASHTAGS:
#Visit the hashtag
webdriver.get('https://www.instagram.com/explore/tags/' + hashtag+ '/')
sleep(5)
#Get the first post thumbnail and click on it
first_thumbnail = webdriver.find_element_by_xpath(
'//*[@id="react-root"]/section/main/article/div[1]/div/div/div[1]/div[1]/a/div')
first_thumbnail.click()
sleep(random.randint(1,3))
try:
#iterate over the first 200 posts in the hashtag
for x in range(1,200):
t_start = datetime.datetime.now()
#Get the poster's username
username = webdriver.find_element_by_xpath('/html/body/div[3]/div[2]/div/article/header/div[2]/div[1]/div[1]/h2/a').text
likes_over_limit = False
try:
#get number of likes and compare it to the maximum number of likes to ignore post
likes = int(webdriver.find_element_by_xpath(
'/html/body/div[3]/div[2]/div/article/div[2]/section[2]/div/div/button/span').text)
if likes > Constants.LIKES_LIMIT:
print("likes over {0}".format(Constants.LIKES_LIMIT))
likes_over_limit = True
print("Detected: {0}".format(username))
#If username isn't stored in the database and the likes are in the acceptable range
if username not in prev_user_list and not likes_over_limit:
#Don't press the button if the text doesn't say follow
if webdriver.find_element_by_xpath('/html/body/div[3]/div[2]/div/article/header/div[2]/div[1]/div[2]/button').text == 'Follow':
#Use DBUsers to add the new user to the database
DBUsers.add_user(username)
#Click follow
webdriver.find_element_by_xpath('/html/body/div[3]/div[2]/div/article/header/div[2]/div[1]/div[2]/button').click()
followed += 1
print("Followed: {0}, #{1}".format(username, followed))
new_followed.append(username)
# Liking the picture
button_like = webdriver.find_element_by_xpath(
'/html/body/div[3]/div[2]/div/article/div[2]/section[1]/span[1]/button')
button_like.click()
likes += 1
print("Liked {0}'s post, #{1}".format(username, likes))
sleep(random.randint(5, 18))
# Next picture
webdriver.find_element_by_link_text('Next').click()
sleep(random.randint(20, 30))
except:
traceback.print_exc()
continue
t_end = datetime.datetime.now()
#calculate elapsed time
t_elapsed = t_end - t_start
print("This post took {0} seconds".format(t_elapsed.total_seconds()))
except:
traceback.print_exc()
continue
#add new list to old list
for n in range(0, len(new_followed)):
prev_user_list.append(new_followed[n])
print('Liked {} photos.'.format(likes))
print('Followed {} new people.'.format(followed))
It’s pretty long, but generally here’s the steps of the algorithm:
For every hashtag in the hashtag constant list:
- Visit the hashtag link
- Open the first thumbnail
- Now, execute the following code 200 times (first 200 posts in the hashtag)
- Get poster’s username, check if not already following, follow, like the post, then click next
- If already following just click next quickly
Now we might as well implement the unfollow method, hopefully the engine will be feeding us the usernames to unfollow in a list:
def unfollow_people(webdriver, people):
#if only one user, append in a list
if not isinstance(people, (list,)):
p = people
people = []
people.append(p)
for user in people:
try:
webdriver.get('https://www.instagram.com/' + user + '/')
sleep(5)
unfollow_xpath = '//*[@id="react-root"]/section/main/div/header/section/div[1]/div[1]/span/span[1]/button'
unfollow_confirm_xpath = '/html/body/div[3]/div/div/div[3]/button[1]'
if webdriver.find_element_by_xpath(unfollow_xpath).text == "Following":
sleep(random.randint(4, 15))
webdriver.find_element_by_xpath(unfollow_xpath).click()
sleep(2)
webdriver.find_element_by_xpath(unfollow_confirm_xpath).click()
sleep(4)
DBUsers.delete_user(user)
except Exception:
traceback.print_exc()
continue
Now we can finally go back and finish the bot by implementing the rest of BotEngine.py:
import AccountAgent, DBUsers
import Constants
import datetime
def init(webdriver):
Constants.init()
AccountAgent.login(webdriver)
def update(webdriver):
#Get start of time to calculate elapsed time later
start = datetime.datetime.now()
#Before the loop, check if should unfollow anyone
_check_follow_list(webdriver)
while True:
#Start following operation
AccountAgent.follow_people(webdriver)
#Get the time at the end
end = datetime.datetime.now()
#How much time has passed?
elapsed = end - start
#If greater than our constant to check on
#followers, check on followers
if elapsed.total_seconds() >= Constants.CHECK_FOLLOWERS_EVERY:
#reset the start variable to now
start = datetime.datetime.now()
#check on followers
_check_follow_list(webdriver)
def _check_follow_list(webdriver):
print("Checking for users to unfollow")
#get the unfollow list
users = DBUsers.check_unfollow_list()
#if there's anyone in the list, start unfollowing operation
if len(users) > 0:
AccountAgent.unfollow_people(webdriver, users)
Conclusion
And that’s it — now you have yourself a fully functional Instagram bot built with Python and Selenium. There are many possibilities for you to explore now, so make sure you’re using this newly gained skill to solve real life problems!
You can get the source code for the whole project from this GitHub repository.
Building a simple Instagram bot with Python tutorial
Here we build a simple bot using some simple Python which beginner to intermediate coders can follow.
Here’s the code on GitHub
https://github.com/aj-4/ig-followers
Build A (Full-Featured) Instagram Bot With Python
Source Code: https://github.com/jg-fisher/instagram-bot
How to Get Instagram Followers/Likes Using Python
In this video I show you how to program your own Instagram Bot using Python and Selenium.
https://www.youtube.com/watch?v=BGU2X5lrz9M
Code Link:
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time
import random
import sys
def print_same_line(text):
sys.stdout.write('\r')
sys.stdout.flush()
sys.stdout.write(text)
sys.stdout.flush()
class InstagramBot:
def __init__(self, username, password):
self.username = username
self.password = password
self.driver = webdriver.Chrome()
def closeBrowser(self):
self.driver.close()
def login(self):
driver = self.driver
driver.get("https://www.instagram.com/")
time.sleep(2)
login_button = driver.find_element_by_xpath("//a[@href='/accounts/login/?source=auth_switcher']")
login_button.click()
time.sleep(2)
user_name_elem = driver.find_element_by_xpath("//input[@name='username']")
user_name_elem.clear()
user_name_elem.send_keys(self.username)
passworword_elem = driver.find_element_by_xpath("//input[@name='password']")
passworword_elem.clear()
passworword_elem.send_keys(self.password)
passworword_elem.send_keys(Keys.RETURN)
time.sleep(2)
def like_photo(self, hashtag):
driver = self.driver
driver.get("https://www.instagram.com/explore/tags/" + hashtag + "/")
time.sleep(2)
# gathering photos
pic_hrefs = []
for i in range(1, 7):
try:
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
time.sleep(2)
# get tags
hrefs_in_view = driver.find_elements_by_tag_name('a')
# finding relevant hrefs
hrefs_in_view = [elem.get_attribute('href') for elem in hrefs_in_view
if '.com/p/' in elem.get_attribute('href')]
# building list of unique photos
[pic_hrefs.append(href) for href in hrefs_in_view if href not in pic_hrefs]
# print("Check: pic href length " + str(len(pic_hrefs)))
except Exception:
continue
# Liking photos
unique_photos = len(pic_hrefs)
for pic_href in pic_hrefs:
driver.get(pic_href)
time.sleep(2)
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
try:
time.sleep(random.randint(2, 4))
like_button = lambda: driver.find_element_by_xpath('//span[@aria-label="Like"]').click()
like_button().click()
for second in reversed(range(0, random.randint(18, 28))):
print_same_line("#" + hashtag + ': unique photos left: ' + str(unique_photos)
+ " | Sleeping " + str(second))
time.sleep(1)
except Exception as e:
time.sleep(2)
unique_photos -= 1
if __name__ == "__main__":
username = "USERNAME"
password = "PASSWORD"
ig = InstagramBot(username, password)
ig.login()
hashtags = ['amazing', 'beautiful', 'adventure', 'photography', 'nofilter',
'newyork', 'artsy', 'alumni', 'lion', 'best', 'fun', 'happy',
'art', 'funny', 'me', 'followme', 'follow', 'cinematography', 'cinema',
'love', 'instagood', 'instagood', 'followme', 'fashion', 'sun', 'scruffy',
'street', 'canon', 'beauty', 'studio', 'pretty', 'vintage', 'fierce']
while True:
try:
# Choose a random tag from the list of tags
tag = random.choice(hashtags)
ig.like_photo(tag)
except Exception:
ig.closeBrowser()
time.sleep(60)
ig = InstagramBot(username, password)
ig.login()
Build An INSTAGRAM Bot With Python That Gets You Followers
Instagram Automation Using Python
How to Create an Instagram Bot | Get More Followers
Building a simple Instagram Influencer Bot with Python tutorial
#python #chatbot #web-development
1667425440
Pdf2gerb: Perl Script Converts PDF Files to Gerber format
pdf2gerb
Perl script converts PDF files to Gerber format
Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.
The general workflow is as follows:
- Design the PCB using your favorite CAD or drawing software.
- Print the top and bottom copper and top silk screen layers to a PDF file.
- Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
- Use a Gerber viewer to double-check the output against the original PCB design.
- Make adjustments as needed.
- Submit the files to a PCB manufacturer.
Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).
See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.
pdf2gerb_cfg.pm
#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;
use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)
##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file
use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call
#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software. \nGerber files MAY CONTAIN ERRORS. Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG
use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC
use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)
#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1);
#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
.010, -.001, #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
.031, -.014, #used for vias
.041, -.020, #smallest non-filled plated hole
.051, -.025,
.056, -.029, #useful for IC pins
.070, -.033,
.075, -.040, #heavier leads
# .090, -.043, #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
.100, -.046,
.115, -.052,
.130, -.061,
.140, -.067,
.150, -.079,
.175, -.088,
.190, -.093,
.200, -.100,
.220, -.110,
.160, -.125, #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
.090, -.040, #want a .090 pad option, but use dummy hole size
.065, -.040, #.065 x .065 rect pad
.035, -.040, #.035 x .065 rect pad
#traces:
.001, #too thin for real traces; use only for board outlines
.006, #minimum real trace width; mainly used for text
.008, #mainly used for mid-sized text, not traces
.010, #minimum recommended trace width for low-current signals
.012,
.015, #moderate low-voltage current
.020, #heavier trace for power, ground (even if a lighter one is adequate)
.025,
.030, #heavy-current traces; be careful with these ones!
.040,
.050,
.060,
.080,
.100,
.120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);
#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size: parsed PDF diameter: error:
# .014 .016 +.002
# .020 .02267 +.00267
# .025 .026 +.001
# .029 .03167 +.00267
# .033 .036 +.003
# .040 .04267 +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};
#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
CIRCLE_ADJUST_MINX => 0,
CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
CIRCLE_ADJUST_MAXY => 0,
SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};
#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches
#line join/cap styles:
use constant
{
CAP_NONE => 0, #butt (none); line is exact length
CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
#number of elements in each shape type:
use constant
{
RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
rect => RECT_SHAPELEN,
line => LINE_SHAPELEN,
curve => CURVE_SHAPELEN,
circle => CIRCLE_SHAPELEN,
);
#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions
# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?
#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes.
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes
#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches
# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)
# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time
# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const
use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool
my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time
print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load
#############################################################################################
#junk/experiment:
#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html
#my $caller = "pdf2gerb::";
#sub cfg
#{
# my $proto = shift;
# my $class = ref($proto) || $proto;
# my $settings =
# {
# $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
# };
# bless($settings, $class);
# return $settings;
#}
#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;
#print STDERR "read cfg file\n";
#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names
#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }Download Details:
Author: swannman
Source Code: https://github.com/swannman/pdf2gerb
License: GPL-3.0 license