FilmUp's software enabled film studios and film production companies to staff, manage, and pay crew across all their productions

FilmUp

filmup

The Child of the Ages

HackerNoon Reporter: Please tell us briefly about your background. 10-years experience in media industry, 8+ years startup experience, worked with big brands like Google, Facebook, and Huawei. What's your startup called? And in a sentence or two, what does it do? Filmplace. We’re a marketplace that connects brands with unique locations. Just like AirBnB but for the film and media industry. What is the origin story? Filmplace was founded in 2019 to solve a global problem within the industry. Looking for a location for your videos or photos takes 4-7 days, and it cost tons. With Filmplace, you can secure locations within a matter of minutes and cut costs by over 80%! What do you love about your team, and why are you the ones to solve this problem? We are a global team that consists of me (CEO), my CTO (technology), CSO (strategy), CFO (Finance). On top of that, we have the head of partnership, business development, tech, community team. We are young and passionate about what we do and always hungry to strive for more. With this mindset, we can achieve higher and reach for the stars. If you weren’t building your startup, what would you be doing? That’s a good question. I believe many people will answer they will work for some company but for myself, I just couldn’t imagine not building my startup. I always have 101 ideas that may potentially change the world. (Many people who know me will agree) At the moment, how do you measure success? What are your core metrics? Success isn’t measured by numbers and metrics. Everyone has a different idea for success. As for myself, it would be building something that can excite everyone and at the same time, solving big problems globally. What’s most exciting about your traction to date? $0 cost per acquisition, but managed to get big brands that are already using Filmplace such as Tik Tok, Shopee, AirBnB, Microsoft, Dell, Warner Music, etc. What technologies are you currently most excited about, and most worried about? And why? Cybernetics. Can humans really live forever? Or will fully conscious AI take over humans one day? What drew you to get published on HackerNoon? What do you like most about our platform? Curiosity. Makes me feel like I’m in a global blackhat hacking community. (just kidding) What advice would you give to the 21-year-old version of yourself? Please continue to do what I do and never give up. And continue to defer military until you build something first. lol (every Singaporean male needs to serve 2 years) Filmplace was in Startups of the Year hosted by HackerNoon nominated as one of the best startups in Singapore

Lincoln Lin, Filmplace's Founder/CEO, on building the Airbnbs of filming locations

How to Build a Chatbot with Langchain, Next.js, OpenAI, and Supabase

Virtual Meetings have become an essential part of corporate collaboration, serving as the de facto way that ideas are exchanged, decisions are made, and strategies are devised. However, the true value of meetings is often diluted by their length and the complexity of the discussions. This is why note-taking and effective summaries and action points are so important. Converting long and often pointless discussions into short (actionable) summaries, meeting attendees can quickly catch up on meetings they missed, review decisions that were made, and understand discussions without having to sift through hours and hours of recordings. We thought it would be cool to create our summarizer. If you don't have one already, keep reading. This technical tutorial will guide you through creating a simple web application that summarizes daily meeting Transcripts using ApyHub’s AI Summarize Document API using NodeJS. Pre-requisites: Access to Google Meet and permission to access meeting transcripts.
A preferred programming language environment (e.g., Python).
ApyHub Account.
GitHub CLI is installed on your computer. Step 1: Clone the GitHub repository Open your terminal and run this command: git clone https://github.com/iamspathan/AI-Transcript-Summarizer.git This command will clone the project in your local environment. Once the project is cloned, you can open the repository in the code editor. Step 2. Install Required Packages: Here, in Node Package Manager (npm), we will install all the dependencies that our application needs to summarize the meeting transcribe. npm install Step 3: Add your API Key to the index.js file. Here, we will add our Secret API key from ApyHub. To generate an API key, you can visit the documentation page of AI Summarize Document API. Your secret looks like this ➡️
apy-token: APY****************************************** Copy this token and paste it in as shown in the code comment below. const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors');
const axios = require('axios');
const FormData = require('form-data');
const open = require('open');
const app = express();
const port = 3000;

app.use(cors());
app.use(fileUpload());

// Serve static files from the 'public' directory
app.use(express.static('public'));

app.post('/summarize', (req, res) => {
    console.log("summarixe called", req.files.file);
    if (!req.files || Object.keys(req.files).length === 0) {
        return res.status(400).send('No files were uploaded.');
    }

    // Assuming the file is attached to the request under the key 'file'
    const file = req.files.file;

    // Prepare the file to be sent using form-data
    const formData = new FormData();
    formData.append('file', file.data, file.name);

    // Set up the request headers, including the dynamic headers from form-data and the secret-apy token.
    const requestHeaders = {
        ...formData.getHeaders(),
        'apy-token': 'ADD YOUR OWN APY-TOKEN HERE'
    };

    // Call the AI Summarize API
    axios.post('https://api.apyhub.com/ai/summarize-documents/file', formData, { headers: requestHeaders })
        .then(apiResponse => {
            // Assuming the API returns JSON with a summary field
            console.log(apiResponse.data.data.summary);
            res.send({ summary: apiResponse.data.data.summary });
        })
        .catch(error => {
            console.error('Error calling the AI Summarize API:', error);
            res.status(500).send('Failed to summarize the document.');
        });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
    // Open the index.html file in the default browser
    open(`http://localhost:${port}`);
}); Once you’ve added the API key. Save the changes using the Ctrl+S Key. Step 4: Running Your Application Once you’ve added the API key. Save the changes using Ctrl+S in your terminal, and run this command.: node index.js That’s it :) As you can see, Now you can generate a meeting transcript anytime you want :) Virtual Meetings have become an essential part of corporate collaboration, serving as the de facto way that ideas are exchanged, decisions are made, and strategies are devised. However, the true value of meetings is often diluted by their length and the complexity of the discussions. This is why note-taking and effective summaries and action points are so important. Converting long and often pointless discussions into short (actionable) summaries, meeting attendees can quickly catch up on meetings they missed, review decisions that were made, and understand discussions without having to sift through hours and hours of recordings. We thought it would be cool to create our summarizer. If you don't have one already, keep reading. This technical tutorial will guide you through creating a simple web application that summarizes daily meeting Transcripts using ApyHub’s AI Summarize Document API using NodeJS. ApyHub’s AI Summarize Document API Pre-requisites: Access to Google Meet and permission to access meeting transcripts. A preferred programming language environment (e.g., Python). ApyHub Account. GitHub CLI is installed on your computer. Access to Google Meet and permission to access meeting transcripts. Google Meet A preferred programming language environment (e.g., Python). ApyHub Account . ApyHub Account GitHub CLI is installed on your computer. Step 1: Clone the GitHub repository Open your terminal and run this command: git clone https://github.com/iamspathan/AI-Transcript-Summarizer.git git clone https://github.com/iamspathan/AI-Transcript-Summarizer.git This command will clone the project in your local environment. Once the project is cloned, you can open the repository in the code editor. Step 2. Install Required Packages: Here, in Node Package Manager (npm), we will install all the dependencies that our application needs to summarize the meeting transcribe. npm install npm install Step 3: Add your API Key to the index.js file. Here, we will add our Secret API key from ApyHub. To generate an API key, you can visit the documentation page of AI Summarize Document API . Your secret looks like this ➡️ apy-token: APY****************************************** AI Summarize Document API apy-token: APY****************************************** Copy this token and paste it in as shown in the code comment below. const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors');
const axios = require('axios');
const FormData = require('form-data');
const open = require('open');
const app = express();
const port = 3000;

app.use(cors());
app.use(fileUpload());

// Serve static files from the 'public' directory
app.use(express.static('public'));

app.post('/summarize', (req, res) => {
    console.log("summarixe called", req.files.file);
    if (!req.files || Object.keys(req.files).length === 0) {
        return res.status(400).send('No files were uploaded.');
    }

    // Assuming the file is attached to the request under the key 'file'
    const file = req.files.file;

    // Prepare the file to be sent using form-data
    const formData = new FormData();
    formData.append('file', file.data, file.name);

    // Set up the request headers, including the dynamic headers from form-data and the secret-apy token.
    const requestHeaders = {
        ...formData.getHeaders(),
        'apy-token': 'ADD YOUR OWN APY-TOKEN HERE'
    };

    // Call the AI Summarize API
    axios.post('https://api.apyhub.com/ai/summarize-documents/file', formData, { headers: requestHeaders })
        .then(apiResponse => {
            // Assuming the API returns JSON with a summary field
            console.log(apiResponse.data.data.summary);
            res.send({ summary: apiResponse.data.data.summary });
        })
        .catch(error => {
            console.error('Error calling the AI Summarize API:', error);
            res.status(500).send('Failed to summarize the document.');
        });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
    // Open the index.html file in the default browser
    open(`http://localhost:${port}`);
}); const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors');
const axios = require('axios');
const FormData = require('form-data');
const open = require('open');
const app = express();
const port = 3000;

app.use(cors());
app.use(fileUpload());

// Serve static files from the 'public' directory
app.use(express.static('public'));

app.post('/summarize', (req, res) => {
    console.log("summarixe called", req.files.file);
    if (!req.files || Object.keys(req.files).length === 0) {
        return res.status(400).send('No files were uploaded.');
    }

    // Assuming the file is attached to the request under the key 'file'
    const file = req.files.file;

    // Prepare the file to be sent using form-data
    const formData = new FormData();
    formData.append('file', file.data, file.name);

    // Set up the request headers, including the dynamic headers from form-data and the secret-apy token.
    const requestHeaders = {
        ...formData.getHeaders(),
        'apy-token': 'ADD YOUR OWN APY-TOKEN HERE'
    };

    // Call the AI Summarize API
    axios.post('https://api.apyhub.com/ai/summarize-documents/file', formData, { headers: requestHeaders })
        .then(apiResponse => {
            // Assuming the API returns JSON with a summary field
            console.log(apiResponse.data.data.summary);
            res.send({ summary: apiResponse.data.data.summary });
        })
        .catch(error => {
            console.error('Error calling the AI Summarize API:', error);
            res.status(500).send('Failed to summarize the document.');
        });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
    // Open the index.html file in the default browser
    open(`http://localhost:${port}`);
}); Once you’ve added the API key. Save the changes using the Ctrl+S Key. Ctrl+S Step 4: Running Your Application Once you’ve added the API key. Save the changes using Ctrl+S in your terminal, and run this command.: node index.js node index.js That’s it :) As you can see, Now you can generate a meeting transcript anytime you want :)

Building an AI-Powered Summarizer using NodeJS and ApyHub API To Make Meetings Easy

240 Stories To Learn About Startups Of The Year

Creating Production Grade Microservices with Go and gRPC

Limited resources, lack of experience in recruiting, and competition with tech giants — hiring talents for an early-stage startup is challenging. The cost of a mistake is sky-high, too: Mishiring might cost of the employee’s first-year salary, which means that a wrong hire for a tech position that pays $60,000 per year, for example, could cost the startup $18,000. That's a great deal of money for a small startup. up to 30% Working as head of recruitment at a VC firm, I know these challenges and help startups avoid financial, time, and reputational losses. Here are five valuable tips for founders to hire well. Focus on attitude — not skills Let's be honest: The startup culture isn't suitable for everybody. Founders should look for individuals with an entrepreneurial mindset and a readiness to work in a hectic environment. Seek out employees who have prior experience running a startup or working for one. If you come across a strong candidate with a corporate background, carefully assess their motivation. Why did they choose to leave a stable job and join a startup? If a candidate who previously worked at a large company is seeking more responsibilities and aiming to advance professionally at a faster pace, then it could be a suitable match. However, when hiring, founders should conduct a thorough job interview. Qualities to look for and interview questions to reveal them Problem-solving. Interview question: Can you describe a specific workplace challenge you've encountered, and how did you go about resolving it? Interview questions: How has your professional life evolved in the last three years? Have you actively sought opportunities to step out of your comfort zone during this time? If so, could you provide an example? What changes /unexpected events affected your work? Could you share a case where you had to adjust to a change you had no control over? Flexibility . Growth mindset. Interview questions: When confronted with an unfamiliar task, how do you approach it? Additionally, how do you stay updated on the latest industry trends and developments? Accountability/Proactiveness. Interview questions: Could you provide a case in which you prevented a problem before it happened? What have you done when you didn’t agree with the solution to the project? Could you provide a case you suggested a solution/idea to your manager and it was successfully implemented? Sense of ownership. Interview questions: Could you share a project or task you've taken a leadership role in? What steps did you take to ensure its success, and how did you demonstrate ownership throughout the process? Goal-oriented mindset. Interview questions: What specific goals did you set for yourself in your previous role? In cases where you couldn't achieve your goals, what actions did you take to address the situation and learn from it? Hiring a senior-level specialist might not be an option given startups' limited resources. Don't chase the "market stars"; focus on promising young talents who will grow with the company. Statistics show that in 2023, almost of early-stage startups are planning to employ juniors, and 27% intend to focus on hiring mid-level specialists. For example, our portfolio startup, All Right, chose this strategy from its very beginning: The founders recruited juniors at an early stage, and now these employees hold leadership positions. 38% Yes, juniors won't bring expertise right away, but they can more easily embrace and adapt to the specific requirements of the startup and take on various roles as the company grows. Juniors require well-organized onboarding, mentorship, and guidance, but they can grow into invaluable assets for a startup later on, assuming more responsibilities and advancing professionally in step with the company's growth. Offer more than just salaries Early-stage startups may not always be able to match the salaries of big brands. What startups can offer is equity or stock options. This can attract candidates who believe in your idea and are motivated by long-term financial gains. (and should) When creating your compensation plan, determine the size of the equity pool. Generally, early-stage startups set aside approximately of their total shares for an equity pool for employees. The number of options granted may be based on the employee’s role, their contribution to the company, and their experience level. 5-15% I know that Filmustage, a seed-stage AI startup, offers 0.5-3% of its total shares to its employees, which can be vested after a year of employment with the company. This way, the company can attract top talent while also aligning employees toward the startup’s success. Avoid overhiring After establishing your startup's immediate objectives, outline the roles and responsibilities required to achieve them. In an early-stage tech startup, key responsibilities might be distributed among three employees: CEO: Guides the company's focus, handles sales, manages early recruiting, and addresses legal issues. CTO: Assumes responsibility for product development, product architecture, and team management. CMO: Focuses on customer acquisition and marketing strategy. In an early-stage startup, this responsibility is often divided among founders. In the very beginning, you can hire a UX designer and a product manager on a part-time basis. As the startup grows, the team may expand to include more tech specialists such as developers and QA engineers. However, there's no need to rush this expansion and attempt to operate like a large corporation — it might not be financially feasible. A common mistake that early-stage startups often make is hiring salespeople as part of their initial 10 hires. At this stage, sales should be led by the CEO. Only after having a product-market fit and understanding sales strategy, you may consider bringing in a dedicated sales manager. Outsource recruiting Founders typically hire the company's first employees using their network. However, once the startup begins to grow, it is often advisable to delegate this responsibility to an outsourced recruiter or seek assistance from your VC . (if you're VC-backed) By outsourcing the recruitment process, founders can concentrate on product development, sales, or marketing, rather than constantly searching for candidates. Additionally, outsourcing recruitment is usually more cost-effective than hiring an in-house recruiter, especially in early hiring. Anastasiia Kuzmenko, Head of Talent Acquisition at . Flyer One Ventures

4 Quick Hiring Tips for Early-stage Startup Founders

Storybook v2 Comic Book Builder: Part 1, Gathering Content

For a very long time, I was a big fan and advocate of GraphQL's and directives.
Actually, I've implemented them in my own GraphQL server implementation in Go . @defer @stream almost 3 years ago At that time, I was using a stream of JSON-Patch operations to continuously update the client. Recently, I've added support for TypeScript Operations to WunderGraph, including support for Subscriptions through Async Generators. After implementing this feature and playing around with it, I've realized that and are complete overkill, and the whole idea of incrementally loading data can be done in a much simpler way. @defer @stream Before we can compare the two approaches, we need to understand how and work. @defer @stream How the @defer and @stream Directives Work I'm using the Example from the . DeferStream RFC query {
  person(id: "cGVvcGxlOjE=") {
    ...HomeWorldFragment @defer(label: "homeWorldDefer")
    name
    films @stream(initialCount: 2, label: "filmsStream") {
      title
    }
  }
}
fragment HomeWorldFragment on Person {
  homeworld {
    name
  }
} We're loading the person with the ID . cGVvcGxlOjE= For this person, we're loading only the name and the first two films synchronously. The is loaded asynchronously, and all films beyond the first two are loaded asynchronously. HomeWorldFragment From the example RFC, we get back the following responses: {
  "data": {
    "person": {
      "name": "Luke Skywalker",
      "films": [
        { "title": "A New Hope" },
        { "title": "The Empire Strikes Back" }
      ]
    }
  },
  "hasNext": true
} The first response is as expected; the only notable thing is the field which indicates that there are more responses to come. hasNext {
  "label": "homeWorldDefer",
  "path": ["person"],
  "data": {
    "homeworld": {
      "name": "Tatooine"
    }
  },
  "hasNext": true
} The second response is the which is loaded asynchronously. HomeWorldFragment The field is used to identify the response. The field is used to identify the location in the response where the data should be inserted. label path The field indicates that there are still more responses to come. hasNext {
  "label": "filmsStream",
  "path": ["person", "films", 2],
  "data": {
    "title": "Return of the Jedi"
  },
  "hasNext": false
} The third response is the first film beyond the first two films. The field is used to identify the location in the response where the data should be inserted. The field indicates that there are no more responses to come. path hasNext According to the RFC, this approach has the following : benefits Make GraphQL a great choice for applications that demand responsiveness. Enable interoperability between different GraphQL clients and servers without restricting implementation. Enable a strong tooling ecosystem (including GraphiQL). Provide concrete guidance to implementers. Provide guidance to developers evaluating whether to adopt incremental delivery. At the same time, the RFC also lists the following : “Type Generation Supporting - @defer can add complexity to type-generating clients. Separate types will need to be generated for the different deferred fragments. Caveats These clients will need to use the label field to determine which fragments have been fulfilled to ensure the application is using the correct types. Object Consistency - The GraphQL spec does not currently support object identification or consistency. It is currently possible for the same object to be returned in multiple places in a query. If that object changes while the resolvers are running, the query could return inconsistent results. @defer/@stream does not increase the likelihood of this, as the server still attempts to resolve everything as fast as it can. The only difference is some results can be returned to the client sooner. This proposal does not attempt to address this issue. Can @defer/@stream increase risk of a denial of service attack? This is currently a risk in GraphQL servers that do not implement any kind of query limiting as arbitrarily complex queries can be sent. Adding @defer may add some overhead as the server will now send parts of the query earlier than it would have without @defer, but it does not allow for any additional resolving that was not previously possible.” Why the @defer and @stream Directives Are Overkill First of all, I want to say that I love the idea of incrementally loading data, and I have a lot of respect for the people who came up with this idea and participated in this or any other RFC that has something to do with this topic. So please, don't take this as a personal attack on anyone. I don't criticize your work; I just want to point out that there is a much simpler way to achieve the same goal. So what follows now is my personal opinion, which is based on years of experience working with and implementing GraphQL as well as building WunderGraph. First of all, this RFC has been in the making for many years without getting merged into the GraphQL spec. As many library and framework authors were quite excited about this feature, they implemented it in their own way. So there are now many implementations of and out there. @defer @stream This is a nightmare because how should clients know which implementation the server is using? Additionally, the RFC is quite complex and requires a lot of work to implement. All client and server implementations have to implement handling of and directives. @defer @stream It's a lot of work to implement this feature in a reasonable way. Let me give you an example from GraphQL Yoga. Again, not criticizing the work of the GraphQL Yoga team, just trying to point out the complexity of this feature. import { createYoga, createSchema, Repeater } from 'graphql-yoga'
import { createServer } from 'node:http'
import { useDeferStream } from '@graphql-yoga/plugin-defer-stream'
 
const yoga = createYoga({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        alphabet: [String!]!
      }
    `,
    resolvers: {
      Query: {
        alphabet: () =>
          new Repeater<string>(async (push, stop) => {
            const values = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
            const publish = () => {
              const value = values.shift()
              console.log('publish', value)
 
              if (value) {
                push(value)
              }
 
              if (values.length === 0) {
                stop()
              }
            }
 
            let interval = setInterval(publish, 1000)
            publish()
 
            await stop.then(() => {
              console.log('cancel')
              clearInterval(interval)
            })
          })
      }
    }
  }),
  plugins: [useDeferStream()]
})
 
const server = createServer(yoga)
 
server.listen(4000, () => {
  console.info('Server is running on http://localhost:4000/graphql')
}) This server allows us to stream the alphabet. We set up a repeater that publishes a letter every second. Let's assume we actually have a data source that provides us with one letter every second. If we go back to the RFC example, it allowed us to use the argument to specify how many items we want to receive in the first response. initialCount First, this argument is missing in the Yoga implementation, but they could probably add it. But even if they added it, we'd still have the same problem. How does the user of the API know how many items to request in the first response? If we don't have fine-grained control over the data flow, how can we implement this feature efficiently? Imagine you're building a public GraphQL API, and someone asks for ridiculous values. initialCount You now have to add extra logic to validate the argument and protect your server. initialCount What if a user applies the directive to fields that are not supposed to be deferred? @defer E.g., if you're loading a user profile from the database, we will always load the user id, name, and email address using a single database query. If we now apply the directive to the email address, what is supposed to happen? @defer Should we load the email address in a separate database query? Should we load the email address in the same database query but defer it? Or should we just ignore the directive and return the email address in the first response? @defer What happens if an attacker intentionally sends queries with endless numbers of directives? @defer Should we now rate limit the use of directives? @defer Technically possible, but it just adds more complexity to the implementation. Keep in mind that every single implementation of and has to implement all of this logic. Last but not least, and that's what I'm afraid of the most, we could just hide all of this complexity from the user and swallow the performance penalty in the framework. @defer @stream This would mean that resolvers would not be aware of the and directives. @defer @stream However, this would lead to very inefficient implementations. Load all the data from the database, then apply the and directives and then return the data to the client; what's the point? @defer @stream Let's put an end to this rant and talk about a much simpler solution. What problem are we trying to solve here? What Problem Are We Solving With the and Directives in GraphQL? @defer @stream We need a blob of data in the user interface, but loading it all at once would be too slow. This can have multiple reasons: The data is too big to load all at once (e.g., a list of 1000 items) We need to load the data from multiple sources, one of which is slow How Does WunderGraph Solve This Problem? WunderGraph compiles GraphQL Operations into JSON-RPC requests. E.g., a GraphQL Subscription is turned into a stream of newline delimited JSON objects. Up until recently, you've had to implement Subscriptions in your GraphQL server and plug this server as a data source into WunderGraph, allowing you to expose the Subscription as a JSON-RPC stream. As I've said above, we've recently added support to implement JSON-RPC Operations directly in WunderGraph using TypeScript, supporting Queries, Mutations, and Subscriptions. Let's take a look at how we could implement the example from the RFC using a WunderGraph Subscription / JSON-RPC stream. // src/operations/user.ts
import { createOperation, z } from '../../generated/wundergraph.factory';

export default createOperation.subscription({
	input: z.object({
		id: z.string(),
	}),
    response: z.object({
        name: z.string(),
        films: z.array(z.object({
            title: z.string(),
        })),
        homePlanet: z.object({
            name: z.string(),
        }).nullable(),
    }),
	handler: async function* (ctx) {
		try {
		    const userPromise = db.user.findUnique({
                where: {
                    id: ctx.input.id,
                },
            });
            const filmsPromise = db.film.findMany({
                where: {
                    id: {
                        in: user.filmIds,
                    },
                },
                limit: 2,
            });
            const homePlanetPromise = db.planet.findUnique({
              where: {
                id: user.homePlanetId,
              },
            });
            // we've defined three promises, but we don't want to wait for all of them
            const [user, films] = await Promise.all([userPromise, filmsPromise]);
            // we only wait for the user and the first two films to be loaded
            // Once these two promises are resolved, we yield the first chunk of data to the client
            yield {
                data: {
                    person: {
                        name: user.name,
                        homePlanet: null, // we don't have the home planet yet, so we set it to null
                        films,
                    },
                },
            };
            // Now we wait for the home planet to be loaded
            const homePlanet = await homePlanetPromise;
            // Once the home planet is loaded, we combine the data from the first two promises with the home planet
            // and yield the second chunk of data to the client
            yield {
                data: {
                    person: {
                        name: user.name,
                        homePlanet,
                        films,
                    },
                },
            };
            let skip = 2;
            const allFilms = Array.from(films);
            while (true) {
                // We now load the remaining films in chunks of 1
                const films = await db.film.findMany({
                    where: {
                        id: {
                            in: user.filmIds,
                        },
                    },
                    skip,
                    limit: 1,
                });
                if (films.length === 0) {
                    break;
                }
                allFilms.push(...films);
                // We append the additional films to the list of films we've already loaded
                // and yield the updated response to the client
                yield {
                      data: {
                          person: {
                              name: user.name,
                              homePlanet,
                              films: allFilms,
                          },
                      },
                  };
                  skip += 1;
            }
		} finally {
			console.log('Client disconnected');
		}
	},
}); The function allows us to implement a JSON-RPC Stream using an async generator function. Compared to an async function, an async generator function can yield multiple values. createOperation.subscription So, instead of returning a single value, like an async function, we can yield multiple values. Most importantly, we have exact control over the data flow. We're not limited to implementing a resolver that returns a stream of values. As we can yield multiple times, we can easily achieve the same result as the and directives. @defer @stream On the client side, you can use the generated type-safe client to subscribe to the stream. When there are no more yield statements in the generator function (when it returns), the stream will be closed. Here's what the client code would look like: import {useSubscription, withWunderGraph} from '../../components/generated/nextjs';

const Functions = () => {
    const {data} = useSubscription({
        operationName: 'user',
        input: {
            id: '1',
        },
    });
    return (
        <div>
            <h1>User</h1>
            <div>
                <div>name: {data.person.name}</div>
                {data.person.homePlanet && <div>homePlanet: {data.person.homePlanet}</div>}
                <div>films: {data.person.films.map((film) => film.title).join(', ')}</div>
            </div>
        </div>
    );
};

export default withWunderGraph(Functions); The client code is quite simple, and it's type-safe. This is because WunderGraph infers the response type from the operation definition. We can define the shape in the operation definition by creating a schema. response zod The generated client will use this schema to infer the response type. However, defining the response shape is optional. If we don't define it, the client will infer the response type from the operation handler, so it's up to the developer to either define the shape themselves or infer it from the operation handler. How Wundergraph Reduces the Amount of Data That Needs to Be Transferred As you can see in the example above, we've successfully implemented the and directives with a simple TypeScript function. @defer @stream So, from a developers' perspective, the problem seems to be solved. However, there's still one problem left. It seems like with every statement, we're sending the entire response object to the client. This means that we're sending the same data over and over again, only to add a single field or append it to an array. yield GraphQL Subscriptions suffer from the same problem. If you're using Subscriptions in your GraphQL server, and only a single field changes between two updates, you're still sending the entire response object to the client. WunderGraph solves this problem elegantly by using a technique called . Instead of reinventing the wheel and building our own implementation of incrementally loading data, we're using the JSON Patch standard to describe the changes between two updates. JSON Patch JSON Patch (RFC 6902) is a standard for describing changes to a JSON document. It's a format for expressing a sequence of operations to apply to a JSON document. Here's an example: [
  { "op": "replace", "path": "/homePlanet", "value": { "name": "Tatooine" } },
  { "op": "add", "path": "/films/-", "value": { "title": "A New Hope" } },
  { "op": "add", "path": "/films/-", "value": { "title": "The Empire Strikes Back" } },
  { "op": "add", "path": "/films/-", "value": { "title": "Return of the Jedi" } }
] The JSON Patch above describes the following changes: Replace the field with a new object homePlanet Add three new films to the array films The WunderGraph Server calculates the list of JSON Patch operations for each update. If the JSON Patch is smaller than sending the entire response object, the WunderGraph Server will send the JSON Patch to the client. In some cases, especially when the initial response is small, the JSON Patch will be larger than the entire response object. In this case, the WunderGraph Server will send the entire response object to the client instead of the JSON Patch. All WunderGraph clients support handling JSON Patch operations out of the box,
but it's opt-in, so a client can choose if they want to use JSON Patch or not. Here's a curl command that shows how to subscribe to a Subscription Operation without using JSON Patch: curl http://localhost:9991/operations/user If you want to use JSON Patch, use the following command: curl http://localhost:9991/operations/user?wg_json_patch Additionally, you can also combine this with SSE (Server-Sent Events) by using the following command: curl http://localhost:9991/operations/user?wg_json_patch&wg_sse Conclusion I think that in 90% of the cases, you don't need and at all. For those rare cases where you want to micro-optimize a page, WunderGraph gives you all the tools you need to efficiently load data incrementally. @defer @stream More importantly, we're building on top of existing standards. As I said earlier, I was a big fan of the and directives. @defer @stream However, I think that there's a much simpler solution to the problem without having to introduce new directives to the GraphQL spec and without having to implement a new protocol. Streaming JSON Patch is a simple solution that works beyond just GraphQL. That said, WunderGraph also applies the same technique to GraphQL Subscriptions and Live Queries. So, if you're using GraphQL Subscriptions in your application already, you can easily switch to WunderGraph and the generated client & server will transparently use JSON Patch to reduce the amount of data that needs to be transferred. The and directives put control over the data flow in the hands of the API consumer, who not necessarily has the required knowledge to apply them in the most efficient way. @defer @stream Micro-optimizations should be avoided in most cases, but if you really need them, control over the data flow should be in the hands of the API provider. Try It Out for Yourself If you'd like to try out this feature for yourself, check out the on GitHub and try out one of the examples. WunderGraph Mono Repo Also published here

These GraphQL Directives Are Overkill

It’s been about 6 years since I started working with Django, and through all these years I’ve made some personal customizations in Django’s structure, and coding style. I decided to wrap up all these to-dos and not-to-dos as an instructor so I could use them in the future and also might be helpful to others. Table of the content Modular Settings Third Party apps that could save you a lot of time: Always Have a TODO file Always Have a core web-app Using Django’s web-app to stay Cohesive Django’s custom management commands Store your service messages in a separated file Bypassing the meanings Managing a web-apps files Stick To Generic Views and Mixins Use Serializers! Fixtures Modular Settings: https://github.com/mrShahsafi/Edu/tree/master/djnagoForFun/djnagoForFun/settings When you are developing your Django project, and after each new web-app you’ll notice you have a lot in your settings.py and finding and managing your configs is harder than yesterday. As you might notice, when you are calling the very famous manage.py Django’s entry-point command, it will try to create and set to it. DJANGO_SETTINGS_MODULE PROJECT_NAME.settings What I do, I convert the settings.py to a python module with the . .py init Every project as least has 2 separated running environments: Development Environment Production Environment And some of your setting’s configs are similar in different environments. Until now we can include three files in our settings module 1- base.py 2- development.py 3- production.py As I said the base.py is for configs that are similar in different environments base.py: from pathlib import Path
import os  # Do not delete this

# Your everywhere service name

SITE_NAME = ""
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent.parent


# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = os.getenv(
    "DJANGO_KEY",
    default=“”,
)


# Application definition
DEFAULT_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
]

THIRD_PARTY_APPS = []

CREATED_APPS = []


INSTALLED_APPS = DEFAULT_APPS + CREATED_APPS + THIRD_PARTY_APPS 

MIDDLEWARE = []

ROOT_URLCONF = 
TEMPLATES = 
WSGI_APPLICATION = 
AUTH_PASSWORD_VALIDATORS = 
# Internationalization
…
# Static files (CSS, JavaScript, Images)
…
if not os.path.exists("logs"):
    os.makedirs(os.path.join(BASE_DIR, "logs")) Pretty cool right? Let’s go to other files. In the development.py you must include only development configs. development.py from .base import *

# import socket  # only if you haven't already imported this

DEBUG = True

ALLOWED_HOSTS = [
    "localhost",
    "127.0.0.1",
]

try:
    from .local import *
except Exception:
    pass

DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.sqlite3",
         "NAME": BASE_DIR / "db.sqlite3",
     }
 }


INSTALLED_APPS += [
    "debug_toolbar",
    #    'django_extensions'
]

MIDDLEWARE += [
    "debug_toolbar.middleware.DebugToolbarMiddleware",
]

"""
    These commented config  will use \
        when you are running the project on Docker. 
"""
# hostname, _, ips = socket.gethostbyname_ex(socket.gethostname())
# INTERNAL_IPS = [ip[:-1] + "1" for ip in ips] + ["127.0.0.1", "10.0.2.2"]

INTERNAL_IPS = ["127.0.0.1", "10.0.2.2"] You might notice the file that I include here , we’ll get into it later. local.py Now let’s take a look at our production configs. production.py from .base import *

DEBUG = False

ALLOWED_HOSTS = [#YOUR_PRODUCTION_HOSTS_ADDRESSESS]

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.postgresql_psycopg2",
        "NAME": os.getenv("DB_NAME", default="db"),
        "USER": os.getenv("DB_USER", default="root"),
        "PASSWORD": os.getenv("DB_PASS", default="root-password"),
        "HOST": "postgres",
        "PORT": "5432",
    }
} When we have our three files, we must somehow manage them at the entry point of the settings module and I mean the .py: your module initializer file: init .py: init from os import getenv

env = getenv("DJANGO_ENV", default="development")

if env == "production":
    print("You Are in the Production Mode.")
    from .porduction import *
elif env == "development":
    print("Warning! You Are in the Development Mode.\nDo Not use in any server.")
    from .development import * Well, now it is time to explain that mysterious local.py file! Everything that only belongs to your local machine configs is going to lie there. For example, your email SMTP configs, your local database and etc. and remember, the local.py will always be in the .gitignore. Of course, Django usually contains more third-party modules like DRF, Celery, Allauth, cache services, CORS headers, channels, Sentry. It is simple now, you’ll make a separate file for each of these modules and call it at the end of your base.py file. Here I only explain the DRF and you will get the pattern. base.py # At the end of your base.py

try:
 from .drf_settings import *
except Exception:
 pass drf_settings.py: from datetime import timedelta
from .base import SITE_NAME

REST_FRAMEWORK = {
    "DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
    "DEFAULT_PARSER_CLASSES": (
        "rest_framework.parsers.JSONParser",
        "rest_framework.parsers.MultiPartParser",
        "rest_framework.parsers.FileUploadParser",
    ),
    "DEFAULT_AUTHENTICATION_CLASSES": (
        "rest_framework_simplejwt.authentication.JWTAuthentication",
    ),
    "DEFAULT_PERMISSION_CLASSES": (
        "rest_framework.permissions.IsAuthenticatedOrReadOnly",
    ),
    "DEFAULT_FILTER_BACKENDS": ("django_filters.rest_framework.DjangoFilterBackend",),
    "DEFAULT_PAGINATION_CLASS": "core.pagination.CustomPagination",
    "PAGE_SIZE": 9,
    # "DEFAULT_VERSIONING_CLASS": "rest_framework.versioning.AcceptHeaderVersioning", # when we active versioning the swagger ui brakes!= ""
    "TEST_REQUEST_DEFAULT_FORMAT": "json",
    "EXCEPTION_HANDLER": "core.errors.custom_exception_handler",
} Third Party apps that could save you a lot of time: Sentry : It will manage your project transactions, errors, etc. and report to you weekly Django debug toolbar : For the development, it offers very good tools like the SQL query time, available signals and etc. Django Chacheops : A slick app that supports automatic or manual queryset caching and automatic granular event-driven invalidation. Django Admin Honeypot : Django application that provides utilities for preventing automated form spam. uses the library to generate test data for your Django models. This has been “hard-forked” from in order to support newer versions of Python and Django Django Seed : Django-seed faker django_faker Django Filter : Django-filter is a reusable Django application allowing users to declaratively add dynamic QuerySet filtering from URL parameters. Django Allauth : Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication. And most of the time, it will satisfy your requirements DRF Spectacular : Sane and flexible OpenAPI 3.0 schema generation for If your are using Django REST framework and writing APIs. Django Cities : Place models and worldwide place data for Django. Always Have a TODO : https://github.com/mrShahsafi/Edu/blob/master/djnagoForFun/TODO.md When you have a lot of tasks that need to be done very fast and right, you can not mention all your to-dos in your task management service. Most of the developers write their to-dos in the codebase and in most of the time, they forget to do them! Make sure you have a todo.md or everything else is suitable for you to store all your tod-os list in it! # The project Todo List items

---
- [ ] un-done Task
- [x] done Task
---
## Models

## APIs
- [ ] django channels middleware for JwtAuth
## Others

## Bugs

## Emails
- [x] Forgot Password link

## Tests
- [ ] model tests for Advertisement

## NOTES Another benefit of the tod-os file is you can review all your tod-os in just one file later and archive them as a project document. Always have a core web-app: https://github.com/mrShahsafi/Edu/tree/master/djnagoForFun/core You will always have some models, validations, normalizers, permissions, etc. that you could use in all your future web apps. I call this the common web-app ‘core’. Feel free to call it anything you want. Using Django’s web-app to stay Cohesive https://github.com/mrShahsafi/socialmedia As much as your web-apps perform an atomic action, you will have more space to maintain them in the future. For example, the authentication/authorization process must not be in the user’s app; they are 2 different steps and by separating their web-apps you will easily copy/paste their module to your new project with a very small amount of changes. Django custom management commands: https://github.com/mrShahsafi/Winance/tree/main/wallet/management/commands Django comes with a very useful topic: By following these instructions, your custom command will be like this . Custom Management cmd python manage.py my_custom_command For example, maybe you want to create command or test your machine dependencies before you perform a special action. In this way, all your commands have one structure both for writing and execution. And believe me, it is very important when your project becomes a little complex. fake_user Store your service messages in a separated file: https://github.com/mrShahsafi/Edu/blob/master/djnagoForFun/core/responses/api_messages.py When you raise an error or return a permission denied , you’ll have a message to show. Stay away from hardcoding them into your logic. All you need just a file that contains all these messages as variables. Bypassing the meanings https://github.com/mrShahsafi/Winance/blob/main/wallet/models/base.py Sometimes some actions do not really need to done. For example, you need to delete big amount of data from your database daily. It will be a expensive transaction for your database. Use abstract model that contains attribute with the default value and try to inherit all your other models from this common model. is_deleted False All you need to do for bulk delete is turn the flag of your instances to and make sure you filter your querysets with: is_deleted True qs = Model.objects.filter(is_deleted=Flase) What I have just done here is an example, but you get the idea. Managing a web-apps files Don’t always write all your code in just one file. If you see your .py is become bigger than what could be red in a one or two scrolls, you need to break it to separate files, especially when it comes to views.py. A view’s task is just to deliver the logics to a specific controller. What I do is add a new layer to my views called logics. Lets say we have a registration view called , you can write the registrations logics in and use it in your view. RegistrationApi auth.logics.registration_api_logic Stick to Generic Views and Mixins: Django developers think the Generic views and mixins are for the beginners as they grow as backend developers in the industry. Well I must say, that is not true at all. This is the power of the Django. Then why you are using Django at all if you need to write everything from the scratch? Also when you are using something like the DRF spectacular for Documenting the views , it is very easy for these type of modules to sync your schema and view when you have been use the generic views . Use Serializers! This concept may be a little strange to you but how many time do you use the request.data instead of using a serializer for it? I’m sure it happens sometimes. Remember that the serializers are the best practice to yourAPI view (from validating to creating ) And again, when you are using something like the DRF spectacular for Documenting, it is very easy for these type of modules to sync your schema. And also remember, when you breaking your tasks apart as atomic process, they will be very easy to maintain in the future. So if you wanna hear from me: Separate your serializers by their identities These three serializers: MyModelListSerializer MyModelDetailSerializer MyModelInputSerializer are better than just having MyModelSerializer. Fixtures: introduced concept to provide initial data for models. Django fixtures Always have the fixtures directory; it helps you to store all your fixed files and data in specific place. Conclusion: Hope you’ll enjoy using Django with these discussed concepts and structures. Also, I’ve prepared a service that could generate better projects and web-apps for you. You can check it out . Django here Thanks.

12 Essential Django Programming Tips for Developers

The Essential Guide to Building an NFT Auction Site with React, Solidity, and CometChat

If you are building a social app where users can upload images, then content moderation should be the most important task for your developers. If a user uploads any disturbing image on your platform, it may hurt others' sentiments or in the extreme case, it can become a legal issue. Therefore your best bet should be to remove or blur the NSFW content that violates your content policy. In this tutorial, we are going to look at how to detect NSFW images using machine learning algorithms and then automatically blur the image. The Problem Statement If you have thousands or millions of users, then it is not possible to review every image manually and blur them by hand. It needs a lot of manpower and a lot more money. Even watching hundreds of disturbing images for a human every day can lead to mental illness after some time. Our Approach In the era of artificial intelligence and machine learning, we can use AI technologies for our benefit. By using artificial intelligence, we can automatically detect NSFW images and give them an NSFW score. Then we can programmatically blur them as per their NSFW score. It means developers have full control over the NSFW content. Now the natural question that comes to your mind is, How can we make an AI model ourselves? The obvious answer is you don't need to. We can utilize APIs from any SaaS (software as a service) provided that provides artificial intelligence-based solutions. In this article, we are using to automate NSFW detection and blur the image when it goes above a certain NSFW limit. Pixlab APIs Agenda of The Article In this article, we are going to make a web project. With the help of this project, I demonstrate to you, How to detect the NSFW score of an online image. How to detect the NSFW score of a local image. How to blur an image depending on its NSFW score. This is a long-form article and I am trying to give you as much hands-on practice as I can through this article. I believe that you can make your own NSFW detection system after reading this article. So please grab a cup of coffee and let's start our tutorial. As I am using in this tutorial, make sure to get an API key for the same. Pixlab API endpoints Need For a Proxy Server The Pixlab API is not CORS (Cross-origin resource sharing) enabled. To avoid security issues, our browser doesn't allow us to connect with cross-origin websites. Therefore we need a proxy server to bypass the CORS restriction. Servers don't have CORS restrictions. So make a Nodejs and Expressjs server and do the basic setup. we write all our server code in file. server.js var express = require("express");
var cors = require("cors");
var fileUpload = require("express-fileupload");

var app = express();

// To parse application/json
app.use(express.json());

// Enable cors on all request
app.use(cors());

// File upload middleware
app.use(fileUpload());

app.listen(5000, () => {
  console.log("Server is running in port 5000 and cors enable");
}); Get NSFW Score of Online Images To get the NSFW score of an online image, we add an express route to . We use from pexels website for this comparison. GET /nsfw this NSFW image Inside the route, we call Pixlab's . This endpoint requires 2 parameters. The image link and the API key. When the API responds back, we send the response directly to the client. /nsfw NSFW API endpoint app.get("/nsfw", (req, res) => {
  axios
    .get("https://api.pixlab.io/nsfw", {
      params: {
        img: "https://images.pexels.com/photos/2495905/pexels-photo-2495905.jpeg",
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.log(err));
}); For the front-end, create a new web project by making a file along with a javascript file called . Link the javascript file inside the HTML file. The content inside the HTML file looks like this. index.html index.js <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pixlab NSFW</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html> Now we need to add a button to invoke our NSFW API call. <button id="getscore">Get NSFW Score</button> Now inside the file, we make a function . This function lets us make calls to endpoint of our proxy server. index.js getnsfwscore() /nsfw const getScore= document.getElementById("getscore");

async function getnsfwscore() {
  try {
    let response =await fetch("http://localhost:5000/nsfw");
    console.log(await response.json());
  } catch (error) {
    throw error;
  }
} In response, the Pixlab NSFW API returns a NSFW score. The NSFW score ranges from 0 to 1. The typical response from the API looks like this. {
  "score": 0.7187498807907104,
  "status": 200
} Now you can use this score to filter the uploaded images. NSFW Score of Local Image You can also upload your local images to determine the NSFW score of that image. This is a 2 step process. At first, we upload this image to Pixlab's online storage and get the online link of that image. Then we can follow the previous step with that online image URL provided by Pixlab. To upload our local image, we use Pixlab's store API. We made a route in our express proxy server. To support image uploads, we use the plugin. /upload express-fileupload To upload an image to the store API, we make a request with the image and the API key. We are using FormData object to construct our query. POST app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;

    const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);

    form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
}); The above code block makes the request and forwards the response to the front end. In the front-end, we use a file input to get the user's local image. <input type="file" id="localImage"> Inside our file, we made function to upload the image to our proxy server. index.js uploadToStore async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
} Now we listen for any change in the file input. If the user picks any image, we call this function. uploadToStore const localImage=document.getElementById("localImage");

localImage.addEventListener("change",async(e)=>{
const  files=e.target.files;
  if (files.length >0){
    const file=files[0];
    let response= await uploadToStore(file);
    console.log(response);
  }
}) In response, we get the online image URL of our local image. You can check the image in your browser by using these URLs. { ssl_link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f73c9583ec6.jpeg", 
  link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f73c9583ec6.jpeg", 
  id: "24p62f73c9583ec6.jpeg", 
  status: 200 
} Now to calculate the NSFW score of this image, you can follow the previous section on getting the NSFW score for an online image. Blur Images Programmaticaly After filtering the images as per their NSFW scores, we blur the inappropriate images. To blur an image, we use the of Pixlab. blur API endpoint We create a GET route in our proxy server to call Pixlab's blur API. The API endpoint requires the image URL, radius of the blur, sigma parameter, and your pixlab API key. /blur app.get("/blur", (req, res) => {
  axios
    .get("https://api.pixlab.io/blur", {
      params: {
        img: "https://images.pexels.com/photos/2495905/pexels-photo-2495905.jpeg",
        radius: 50,
        sigma: 30,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.log(err));
}); You can modify the blurring process by varying the radius and sigma parameters. In the front-end, we make a function. This function makes a GET request to the endpoint of our proxy server. blurImage /blur async function blurImage(){
  try {
    let response =await fetch("http://localhost:5000/blur");
    console.log(await response.json());
  } catch (error) {
    throw error;
  }
} In response, the Pixlab server returns a blurred version of your uploaded image. You can use the blur image URL to display in your front end. { ssl_link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f74006c5fa1.jpeg", 
  link: "https://s3.amazonaws.com/media.pixlab.xyz/24p62f74006c5fa1.jpeg", 
  id: "24p62f74006c5fa1.jpeg", 
  status: 200 
} Conclusion You can find the code samples for this tutorial in my GitHub gist. If you like this tutorial, you can read more interesting . If you have any feedback, you can find me on Twitter as . tutorials on my blog @hrishikeshpathak Frequently Asked Question Can we blur our image without using these APIs? Yes, You can use CSS blur filter to blur any image on your website. Select your HTML image element by using a unique class, id, or using javascript, and then apply the blur filter. filter: blur(4px); Learn more about CSS blur filters on the . MDN website Is using a proxy server mandatory? No, I am using this proxy server just for demonstration. You can use your own production server for this purpose. I am using a proxy server just to bypass the browser CORS restriction.

How to Filter NSFW Images and Programmatically Blur Them

Cómo filtrar imágenes NSFW y desenfocarlas programáticamente

Comment filtrer les images NSFW et les flouter par programmation

NSFW छवियों को कैसे फ़िल्टर करें और उन्हें प्रोग्रामेटिक रूप से धुंधला करें

NSFW 画像をフィルタリングし、プログラムでぼかしを入れる方法

Como filtrar imagens NSFW e desfocá-las programaticamente

Cách lọc hình ảnh NSFW và làm mờ hình ảnh theo chương trình

如何过滤 NSFW 图像并以编程方式模糊它们

Most developers use PHP nowadays to specifically create a file uploader for their web or mobile applications. PHP file uploader, for instance, is one of the most effective methods of uploading files. Developers should know how to make a file uploader with PHP to have a better file upload feature. We have this knowledge, and as a result, it lands you miles ahead of your colleagues. So we need to know some basics before learning how to create a PHP file uploader. What Is PHP PHP, otherwise known as Hypertext Preprocessor, is an open-source framework. Most developers use PHP because of its accessible server scripting language. PHP is a programming language that even newbies can learn because of its superb support and available documentation. Also, WordPress users can use PHP to customize their site. What Are The Uses Of PHP Similarly, PHP, like any other framework, is essential to developers. For example, PHP is flexible and straightforward, allowing beginners to use it easily. Other uses of PHP include: It can do system functions Creating, opening, writing, reading, and opening files It can control forms Gathering and saving data from files PHP can help add, remove, and change elements in your database PHP allows you to expressly limit users to gaining entry to some pages on your website Finally, because of its security, it can encrypt the stored data Since we know the uses of PHP, we can now proceed with how to create a file uploader PHP. How To Make A File Uploader With PHP Developers can use Filestack to create a better file uploader using PHP. To start with, we will be considering three steps for example. Creating An HTML Form Firstly, you will need to create an HTML form for users to view if they want to upload their files. Similarly, create a folder for the project and an index.html with the codes, for instance: <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PHP File Upload</title>
</head>
<body>
 <form action="fileUploadScript.php" method="post" enctype="multipart/form-data">
     Upload a File:
     <input type="file" name="the_file" id="fileToUpload">
     <input type="submit" name="submit" value="Start Upload">
 </form>
</body>
</html> The result of the code will indeed create the HTML form. Before going to the next step, we need to note a few things about the code functions in particular, and they are: action=“fileUploadScript.php” This code tag acknowledges the PHP script responsible for handling file upload on the backend. method=“post” This function lets the browser know which form to use while sending the file to the server. enctype=“multipart/form-data” Finally, this function decides the type of content the form can submit. After knowing those code functions, we can go further to the next step for the file uploader. Ensure you open your terminal and start your server from the directory. Write the following codes, for example: PHP-file-upload Furthermore, go to your web browser and open to localhost: 1234. If it shows the above code, you have successfully started the server. Give The Form A Better Look Secondly, style the form to make it more suited for user interaction. Unfortunately, most developers often neglect this path because they feel it is not worth the stress. Doing this styling for your file uploader with PHP and CSS will make your user interface more appealing to users. You can write the following codes, for example: div.upload-wrapper {
  color: white;
  font-weight: bold;
  display: flex;
}

input[type="file"] {
  position: absolute;
  left: -9999px;
}

input[type="submit"] {
  border: 3px solid #555;
  color: white;
  background: #666;
  margin: 10px 0;
  border-radius: 5px;
  font-weight: bold;
  padding: 5px 20px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background: #555;
}

label[for="file-upload"] {
  padding: 0.7rem;
  display: inline-block;
  background: #fa5200;
  cursor: pointer;
  border: 3px solid #ca3103;
  border-radius: 0 5px 5px 0;
  border-left: 0;
}

label[for="file-upload"]:hover {
  background: #ca3103;
}

span.file-name {
  padding: 0.7rem 3rem 0.7rem 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  background: #ffb543;
  color: black;
  border: 3px solid #f0980f;
  border-radius: 5px 0 0 5px;
  border-right: 0;
} The result of these codes will surely give your form a better look. File Uploader PHP This step is for you to handle the file upload backend. Firstly, create a directory with the name uploads so you can save files. Secondly, create another file with the name fileUploadScript.php in the directory index.html. After doing that, write the following codes; for instance: <?php
 $currentDirectory = getcwd();
 $uploadDirectory = "/uploads/";
 $errors = []; // Store errors here
 $fileExtensionsAllowed = ['jpeg','jpg','png']; // These will be the only file extensions allowed
 $fileName = $_FILES['the_file']['name'];
 $fileSize = $_FILES['the_file']['size'];
 $fileTmpName  = $_FILES['the_file']['tmp_name'];
 $fileType = $_FILES['the_file']['type'];
 $fileExtension = strtolower(end(explode('.',$fileName)));
 $uploadPath = $currentDirectory . $uploadDirectory . basename($fileName);
 
if (isset($_POST['submit'])) {
  if (! in_array($fileExtension,$fileExtensionsAllowed)) {
     $errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
   }
  if ($fileSize > 4000000) {
     $errors[] = "File exceeds maximum size (4MB)";
   }
  if (empty($errors)) {
     $didUpload = move_uploaded_file($fileTmpName, $uploadPath);
    if ($didUpload) {
       echo "The file " . basename($fileName) . " has been uploaded";
     } else {
       echo "An error occurred. Please contact the administrator.";
     }
   } else {
     foreach ($errors as $error) {
       echo $error . "These are the errors" . "\n";
     }
   }
 }
?> Consequently, before you start uploading files, write the following code to ensure your uploads directory is writable: chmod 0755 uploads/ Then thoroughly check your php.ini to see if the file is suitable for handling files by running this command: PHP -ini In conclusion, begin the PHP server and open it to localhost:1234 to upload the file. Once the uploads folder shows the saved file, you have successfully created a file uploader PHP. How To Make A Multiple File Uploader With PHP You should know that you can create multiple file uploaders with PHP using a single element. Developers can specifically design your single code and allow the file element to select multiple times. You can take the following steps to create multiple files uploader. file uploader PHP Ensure You Create An HTML Form Firstly, allow multiple files uploads in <form> and write the following codes, for example: <form method='post' action='' enctype='multipart/form-data'>
 <input type="file" name="file[]" id="file" multiple>
 <input type='submit' name='submit' value='Upload'>
</form> As a result of the codes, you can create the HTML form successfully. Select Files On The Basis Next, count all picked files and twist them over the whole files to select files on an index basis. Write the following codes, for example, to carry that out: <?php 
if(isset($_POST['submit'])){
 // Count total files
 $countfiles = count($_FILES['file']['name']);
 // Looping all files
 for($i=0;$i<$countfiles;$i++){
   $filename = $_FILES['file']['name'][$i];
 // Upload file
move_uploaded_file($_FILES['file']['tmp_name'][$i],'upload/'.$filename);
 }
} 
?> Thus, the result of the codes will show that you have successfully created a multiple files uploader for your PHP. Also published . here

How to Create a Multiple Files Uploader for Your PHP Application

Are you a beginner developer? Are you trying to get the hang of file upload? Are you confused about how file upload works? Do you want to have more understanding of java points? No more worry because this article will be introducing you to something new, something to help elevate you from a beginner to a pro. Something as simple as a . Laravel file upload File upload is a day-to-day activity that anybody on any social media can carry out on Twitter, Facebook, or Instagram. Now, tell me – have you ever gone through the anger and panic attack that follows when you cannot successfully upload a file? The files get stuck or have a hindrance from going through. What do you do when you find yourself in this situation? Join me and read this article as you learn some essential tips on how a PHP web framework called Laravel file upload can help you escape this situation. What is Laravel file upload? Let’s break this down by explaining what Laravel is. Laravel is a free, open-source PHP web framework used to develop web applications. It has the model–view controller as an architectural pattern that allows you to build web applications more efficiently and straightforwardly. It is a creation of Taylor Otwell. Now we know what Laravel is, let’s move to the subject matter; Laravel file upload. Laravel file upload is . These files can be photos and documents. how files are uploaded from a user system to the server When a file is uploaded to the server, Laravel sends the file to the storage app by default. Why? It is to protect it from illegal access or scraping. A typical scenario is where you are asked to upload a photo on Facebook. Then, you choose a picture from your device (user system), and once you have done that, you press the submit button, which sends the image you chose to another system (Facebook server). So, it deals with sending documents (photos, videos, audios, etc.) from one system to a server system. How does Laravel file upload work? Laravel file upload is relatively easy. You need to create a view file (user interface) where a user can select a file to be uploaded and a controller where uploaded files will be processed. These uploaded files are stored in the storage/app folder by default. Form::file('file_name'); In Form::open(), you need to add ‘files’ =>’ true’ as shown below. This will enable the form to be uploaded in multiple parts. Form::open(array('url' => '/uploadfile','files'=>'true') The code has a table called forms that contains the id, path, created_at, and updated_at. How do you add a media library in a Laravel file upload? 1. The first step is to create a project first. First, open the command-line tool from the start menu and execute the following command to create a from scratch. Laravel project composer create-project laravel/laravel --prefer-dist laravel-file-upload 2. Create a database configuration, e.g. name, password, etc., use MAMP or XAMPP as a local web server, define a database name in MySQL, and add the correct formatting in the .env file. 3. Install the Laravel package. cd laravel-file-upload 4. Create a model and migration. Store the uploaded file information, and open a migration file to define the table values in the database. php artisan make:model File -m Then, go to database/migrations/timestamp_create_files_table file and define the table values. <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateFilesTable extends Migration { public function up() { Schema::create('files', function (Blueprint $table) { $table->id(); $table->string('name')->nullable(); $table->string('file_path')->nullable(); $table->timestamps(); }); } public function down() { Schema::dropIfExists('files'); } 5. Create two routes. Go to routes (web.php) and create two routes. The first route handles the form creation, whereas the second route stores the file in the MySQL database. <?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\FileUpload; /* Web Routes Here is where you can register web routes for your application. The RouteServiceProvider loads these routes within a group that contains the “web” middleware group. Now create something great! */ Route::get('/upload-file', [FileUpload::class, 'createForm']); Route::post('/upload-file', [FileUpload::class, 'fileUpload'])->name('fileUpload') 6. Generate a controller. Follow these steps to create a file upload controller that defines the business logic for file uploads and storage in Laravel. Execute this command to create the controller: PHP artisan make:controller FileUpload Open the app/Http/Controllers/FileUpload.php file. Here you define the two methods that handle the file upload. The first method renders the view via the FileUpload controller, and the second, the fileUpload() method, checks the validation, mime type, or file size limitation. This method also stores the file in your storage/public/uploads folder and saves your database’s file name and path. <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\File; class FileUpload extends Controller { public function createForm(){ return view('file-upload'); } public function fileUpload(Request $req){ $req->validate([ 'file' => 'required|mimes:csv,txt,xlx,xls,pdf|max:2048' ]); $fileModel = new File; if($req->file()) { $fileName = time().'_'.$req->file->getClientOriginalName(); $filePath = $req->file('file')->storeAs('uploads', $fileName, 'public'); $fileModel->name = time().'_'.$req->file->getClientOriginalName(); $fileModel->file_path = '/storage/' . $filePath; $fileModel->save(); return back() ->with('success','File has been uploaded.') ->with('file', $fileName); } } } Finally, generate a two-blade view. To create a blade file, start creating a view and the file upload form. Create a resources\views\file-upload.blade.php file, then place the following code inside it: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <title>Laravel File Upload</title> <style> .container { max-width: 500px; } dl, ol, ul { margin: 0; padding: 0; list-style: none; } </style> </head> <body> <div class="container mt-5"> <form action="{{route('fileUpload')}}" method="post" enctype="multipart/form-data"> <h3 class="text-center mb-5">Upload File in Laravel</h3> @csrf @if ($message = Session::get('success')) <div class="alert alert-success"> <strong>{{ $message }}</strong> </div> @endif @if (count($errors) > 0) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <div class="custom-file"> <input type="file" name="file" class="custom-file-input" id="chooseFile"> <label class="custom-file-label" for="chooseFile">Select file</label> </div> <button type="submit" name="submit" class="btn btn-primary btn-block mt-4"> Upload Files </button> </form> </div> </body> </html> What are the pros and cons of Laravel file upload? Pros If you’re a PHP language lover, this is for you. There are lots of PHP tools available. Straightforward to learn No architectural form of PHP and HTML is written in the same form The routing process is easy to manage and abstract It has a faster way of executing web applications Accepts the uploading of small and medium files It has essential requirements needed by other web applications Cons It is not as old as other frameworks It does not have a broader community support Not easy for some systems to transfer to Laravel, e.g., Legacy system It’s a bit slow for programmers It has lower support compared to the other frameworks Laravel considers strict security while handling file uploads, unlike vanilla PHP. It is flexible. Ready to get started with Laravel File Upload? Visit today to get registered for free. Filestack

The Pros And Cons Of Server-side File Uploads in Laravel

There has been a significant rise in the use of Decentralized storage over the past few years. One of the largest decentralized storage networks, Filecoin and Arweave, have brought about significant innovation of robust frameworks that use decentralized infrastructure to store and manage data. One of these frameworks is the 4EVERLAND bucket which allows uploads and pinning of Files to IPFS and Arweave. How does 4EVERLAND Bucket work? 4EVERLAND bucket is a decentralized object storage infrastructure that allows users to upload images, videos, and other supported files to decentralized storage networks like IPFS. By uploading a file to 4EVERLAND bucket, you get an IPFS hash which can be used to verify the data is stored in a decentralized manner. You also have an option to upload files through Arweave which offers permanent storage. 4EVERLAND Bucket can be leveraged in two ways: The dashboard is an interactive user interface accessible via a browser. The interface is simplified enough to allow a non-technical person to upload files to the bucket. A dashboard is also a great option if you find limitations in using the Buckets API. 1.  Dashboard 4EVERLAND Buckets API is compatible with Amazon S3 which is an Object storage service provided by Amazon. The set-up process for 4EVERLAND Buckets API is quite similar to that of Amazon S3 but the endpoints will be pointing to 4EVERLAND’s API. 2.  API Integration Once you upload a file, it can then be visible on 4EVERLAND’s dashboard. Some of the things you can do with 4EVERLANDs S3 API are: Fetching buckets File Upload Listing Files in the bucket Getting IPFS hash How to use 4EVERLAND’s Bucket API? 4EVERLAND's bucket API is simple to use and it can be used on Frameworks like React to deploy a single page Application or to upload images or files on the front-end. To get started. you will need to install the dependencies. For this, you need to have npm on your Dev environment. Below are the commands to install the AWS SDK: npm install @aws-sdk/client-s3 After installation, we will proceed to identify the Endpoint for our API.  4EVERLAND uses as the endpoint. We will also need to have our Auth tokens which can be obtained from your 4EVERLAND dashboard as seen in the image below. https://endpoint.4everland.co Once you have your Token, we will proceed to do an initial config of your s3 storage system. const AWS= require('aws-sdk');
const As3 = new AWS.s3({
    apiVersion: '2022-04-25',
    accessKeyID: 'SpecifyAPIKeyhere',
    secretAccessKey: 'specifySecretHere',
    endpoint: 'https://endpoint.4everland.co',
    region: 'us-north-1',
    s3ForcePathStyle: true
 }); After configuration, you can then proceed to call commands like to play with the S3 Client. ListObjects If you wish to upload a File to your bucket, you can use the putObject command and the configuration will look like this: Uploading a file to the 4EVERLAND bucket const FileUpload = {
    Bucket: 'testing',
    key: 'Home/hackathon',
    ContentType: 'image',
    Body: hackathonFile,
    ACL: 'Public',
    };
const request = s3.putObject(FileUpload);
request.on('header'), (statusCode, headers) => {
const ipfsHash = headers['4everland-hash'];
}).send(); In the code snippet above, we created a request to upload a file to my 4EVERLAND bucket which is . We also used the command putObject to upload the file to the Bucket from my local environment. testing The snipped also includes a request to get the IPFS hash of the Object. When you upload a file to 4EVERLAND bucket, 4EVERLAND inserts the IPFS hash in to the http header of the file. Once the files are uploaded, you have the option to sync the content to Arweave (AR) through 4EVERLNAD bucket. This option is not available via CLI but it can be done through the dashboard.  All you need to do is go to Buckets > Click on the bucket you wish to sync files to AR > Syc the content to AR. Once the content is synced, you will get access to the AR hash to verify the info is stored on Arweave. Fetching files from 4EVERLAND bucket Through the S3 SDK, you can also fetch buckets in which the files are stored. const listFiles = {
    Bucket: "testing",
};
s3.listObjectsV2(testing, function (err, list) {
    if (err) {
	    consolte.log("Error, check again!", err);
	 } else {
		console.log("Objects displayed correctly", list);
	}
	}); Aside from fetching files, you can also list out the Buckets in which your files are stored. Below is a simple example on how you can do it by using the command: listBuckets s3.listBuckets(function (err, list) {
    if (err) {
	    console.log("error when listing buckets", err);
	} else {
		console.log("data listed correctly", list);
	}
	}); Another alternative for listing Objects is through the . In your CLI, run to define your Access Keys and secret Key. From there you can list the objects by running: AWS CLI aws configure aws --endpoint-url https://endpoint.4everland.co s3 ls s3://testing Limitations There are a few limitations on the use of S3 which have been highlighted on the .  Some of the limitations like the length for bucket names can be mitigated by using the Buckets Dashboard which offers better flexibility. 4EVERLAND documentation There are many other use cases for 4EVERLAND buckets based on the s3 commands which are listed in the . Documentation Conclusion 4EVERLAND buckets API is a great alternative for users used to the Amazon AS3 bucket. By using the API, your Objects get stored on decentralized storage that is censorship-resistant and highly reliable.  4EVERLAND also allows you to sync your Files to Arweave which offers permanent storage of the files.

4EVERLAND's Bucket API for Decentralized Object Storage

React is one of the most popular libraries in the frontend world. Being a backend developer for over 10 years, I agree. I started with React 4 years ago and found it awesome 😅. And there is no reason for me to switch. Developers, you can buy some paid courses online by Stephen Grider( ), and Andrei Neagoie( ). react zeroToMastery.io BUT... why can't you learn by doing? For starters, on the react homepage, , there are four example code snippets guiding you to the basics. This lone documentation is enough for you to bootstrap your react app from just printing something on a browser/console to building a full-stack application. ReactJS Start writing something, it won't come up... read documentation , it's the best site that gives insights on each and every line of code you write. reactjs I would say you don't mimic already existing applications. Here are some of my ideas which if it helps, try it and if it not, please don't hesitate to ask questions. Advice For starters, learn the basics, that's enough, don't go deep... First bootstrap a react application with CRA or any boilerplate code. npx create-react-app my-application I would recommend using functional components with hooks, , for form data, for queries, etc. MaterialUI React Hook Form React Query Material UI React Hook Form React Query Now think of an idea or application you want to build. I recommend you build an app that represents your resume (more like a portfolio website). You can showcase this to recruiters once it's deployment-ready 🤩. Don't build re-usable components right away. Start simple, go check StackOverflow and get some ideas in building , , , or check for ideas to do them. Appbar Sidebar Navbar Now, write some code and bring up the app. Hardcode data, for now, there is no rush in getting data from API, and don't mess the code right away with APIs, databases, etc. When you think your app is ready with hardcoded data, I would recommend as your database, everything JSON and you'll love it 😍. Firebase Connect the Firebase with your app. Get some data and refactor the hardcoded data with API payloads. Now wherever you feel you duplicated code, make them a reusable component. Like , , , , , , , ,c , , , and much more, etc. Card ChipInput Modal Button TextField Notification Select Image FileUpload ToolTip AutocompleteTextField Now once this is up and working... install redux and inflate the state. Connect the store and get it ready. By this time your hands are dirty and you know what's happening within the app. Now you are an intermediate React developer-------------- Do you want to become an expert? Have an API wrapper that takes the request and serves you data. This will be a pattern all your requests follow. API XHR Each Component should serve a single purpose, if you think the feature you're adding should be separated, don't hesitate... Just separate, and later you can clean and make sure the code is readable. Check for code quality, your code should not flood the state. Now, check how many times each of your individual components are rendered. You should use or to reduce the number of re-renders, this will lower the burden on DOM. useCallback useMemo Deploy the app using Netlify This is quite easy, follow the steps along to make your react app live. We will use Github + Netlify to do the continuous deployment. So, whenever there is a new change in the repository, Netlify watches the changes and deploys the latest onto the server. artifacts You need to build the app first, by running the command . This will minify the app into the build folder under the root project directory. npm run build Log in to your account, or signup if you don't have one. GitHub Create a repository(either public/private repo) and push all of your react app code to this new repository. Go to and signup. Netlify After signup, you are redirected to the sites screen, click and connect choose your account. New Site from Git, Github Don't choose , choose to choose the latest repo you created and click install. All Repositories Only select repositories Don't change the defaults on Netlify, click on . This will start deploying your site and it will take some time to run the builds. Deploy Site When the deployment is successful, you see on Netlify . Site is Live Deploy Log You can set up your own domain or Netlify gives you a URL so you can share. Consider using NextJS to take your app to next level. Note: Don't buy all the paid courses. There are plenty of online free resources available and they would definitely help you. Spend a week determined and if you still feel there are bits and pieces missing, you can always buy a paid course. I love React ❤️ frontend, it gives me some sort of aesthetic vibes!!! First published here: https://dev.to/ggorantala/advice-to-react-developers-how-to-master-react-development-1l1h

Get Better at Using React Library And Continuous Deployment

Part 1: Intro In this article, I’ll try to give a brief but complete overview of what generative art is, how it is connected to NFTs, and how one can start making generative things on a blockchain. I’ll try to answer all these questions based on my personal experience of making and releasing an NFT collection of generative mushrooms written in javascript. Background I love to code unusual things just for fun. During the New Year holidays, I was spammed so hard by news about NFTs that I finally decided to try to make something creative in this paradigm. I was never excited by the idea of uploading JPEGs onto a blockchain, but the possibility of onchain generative art grabbed my attention. Briefly, the idea behind it is to make some token generator that gives you a unique art object each time you “mint” it (in actuality, call a method in the blockchain which spends some of your money on its execution and also gives some money to the artist). Definitely, there is some magic in the feeling that your transaction generates a unique object which will be stored into the blockchain forever, isn’t it? There are some art platforms that exploit this idea, the most famous of them is . But as it is has a lot of bureaucracy to enter and also it is built on the Ethereum blockchain, which still uses proof-of-work and has a very high gas price, I decided to try myself on a more democratic, cheap, and eco-friendly platform - artblocks.io fxhash.xyz What is a generative NFT artwork? All the generative NFTs are basically webpages that draw something on the canvas using either vanilla javascript or some third-party libraries. Taking a stab at classification, from my perspective I’d broadly divide all generative NFTs into 3 categories: artworks, artworks, and artworks. abstract math concrete procedural variative hand-drawn The first class, abstract math, utilizes some to generate an abstract image: there may be some fractals, attractors, cellular automatons, etc. Procedural arts are trying to describe some . And the third class, variative hand-drawn, is usually simple randomization of some . mathematical concepts concrete things using parametrizations pre-drawn parts of the image Also, there are some experimental and interactive works, even and , but these are much rarer. modular synthesizers games So what we will do during this article is to describe a procedural model of a mushroom and randomize it using the transaction hash. Combined with an artistic vision, composition, and stylization this gives us what’s called a generative NFT artwork. Part 2: Drawing a mushroom 🍄 Ok, let’s end up with all that philosophy and move on to the technical part. This project was made entirely using library, which has a reasonably . Three.js simple and well-documented API Stipe Basically, a stipe can be parametrized as a closed contour extrusion along some spline (let’s call it base spline). To create the base spline I used class from Three js. Then, I created the geometry vertex-by-vertex by moving another closed shape along the base spline and finally connected those vertices with faces. I used for that purpose. CatmullRomCurve3 BufferGeometry stipe_vSegments = 30; // vertical resolution
stipe_rSegments = 20; // angular resolution
stipe_points = []; // vertices
stipe_indices = []; // face indices

stipe_shape = new THREE.CatmullRomCurve3( ... , closed=false );

function stipe_radius(a, t) { ... }

for (var t = 0; t < 1; t += 1 / stipe_vSegments) {
  // stipe profile curve
  var curve = new THREE.CatmullRomCurve3( [
    new THREE.Vector3( 0, 0, stipe_radius(0, t)),
    new THREE.Vector3( stipe_radius(Math.PI / 2, t), 0, 0 ),
    new THREE.Vector3( 0, 0, -stipe_radius(Math.PI, t)),
    new THREE.Vector3( -stipe_radius(Math.PI * 1.5, t), 0, 0 ),
  ], closed=true, curveType='catmullrom', tension=0.75);

  var profile_points = curve.getPoints( stipe_rSegments );

  for (var i = 0; i < profile_points.length; i++) {
  	stipe_points.push(profile_points[i].x, profile_points[i].y, profile_points[i].z);
  }
}

// <- here you need to compute indices of faces
// and then create a BufferGeometry
var stipe = new THREE.BufferGeometry();
stipe.setAttribute('position', new THREE.BufferAttribute(new Float32Array(stipe_points), 3));
stipe.setIndex(stipe_indices);
stipe.computeVertexNormals(); Stipe noise To be more natural, the stipe surface may somehow vary along with its height. I defined stipe radius as a function of the and of the point on the base spline. Then, a slight amount of noise is added to the radius value depending on these parameters. angle relative height base_radius = 1; // mean radius
noise_c = 2; // higher this - higher the deformations

// stipe radius as a function of angle and relative position
function stipe_radius(a, t) {
	return base_radius + (1 - t)*(1 + Math.random())*noise_c;
} Cap Cap can also be parameterized as a spline (let’s also call it a base spline) rotating around the top of the stipe. Let’s name the surface spawned by this rotation a base surface. Then base surface will be defined as a function of the position of a point on the base spline and the rotation around the stipe top. This parametrization will allow us to gracefully apply some noises to the surface later. cap_rSegments = 30; // radial resolution
cap_cSegments = 20; // angular resolution

cap_points = [];
cap_indices = [];

// cap surface as a function of polar coordinates
function cap_surface(a0, t0) {
  // 1. compute (a,t) from (a0,t0), e.g apply noise
  // 2. compute spline value in t
  // 3. rotate it by angle a around stipe end
  // 4. apply some other noises/transformations
  ...
  return surface_point;
}

// spawn surface vertices with resolution
// cap_rSegments * cap_cSegments
for (var i = 1; i <= cap_rSegments; i++) {
  var t0 = i / cap_rSegments;
  for (var j = 0; j < cap_cSegments; j++) {
    var a0 = Math.PI * 2 / cap_cSegments * j;
    var surface_point = cap_surface(a0, t0);
    cap_points.push(surface_point.x, surface_point.y, surface_point.z);
  }
}

// <- here you need to compute indices of faces
// and then create a BufferGeometry
var cap = new THREE.BufferGeometry();
cap.setAttribute('position', new THREE.BufferAttribute(new Float32Array(cap_points), 3));
cap.setIndex(cap_indices);
cap.computeVertexNormals(); Cap noise To be more realistic, the cap also needs some noise. I divided cap noise into 3 components: , and noises. Radial noise affects the relative position of the vertex on the base spline. Angular noise changes the angle of base spline rotation around the top of the stipe. radial angular normal And finally, normal noise changes the position of the vertex along the base surface normally at that point. While defining the cap surface in a polar coordinate system it’s useful to apply 2d for these distortions. I used library for that. Perlin noise noisejs function radnoise(a, t) {
  return -Math.abs(NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.5);
}

function angnoise(a, t) {
  return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.2;
}

function normnoise(a, t) {
  return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * t;
}

function cap_surface(a0, t0) {
  // t0 -> t by adding radial noise
  var t = t0 * (1 + radnoise(a, t0));

  // compute normal vector in t
  var shape_point = cap_shape.getPointAt(t);
  var tangent = cap_shape.getTangentAt(t);
  var norm = new THREE.Vector3(0,0,0);
  const z1 = new THREE.Vector3(0,0,1);
  norm.crossVectors(z1, tangent);

  // a0 -> a by adding angular noise
  var a = angnoise(a0, t);
  var surface_point = new THREE.Vector3(
    Math.cos(a) * shape_point.x,
    shape_point.y,
    Math.sin(a) * shape_point.x
  );

  // normal noise coefficient
  var surfnoise_val = normnoise(a, t);

  // finally surface point
  surface_point.x += norm.x * Math.cos(a) * surfnoise_val;
  surface_point.y += norm.y * surfnoise_val;
  surface_point.z += norm.x * Math.sin(a) * surfnoise_val;

  return surface_point;
} The rest of the shroom: scales, gills, ring The geometries of the gills and ring are very similar to the geometry of the cap. An easy way to create scales is to spawn noisy vertices around some random anchor points on the cap surface and then create based on them. ConvexGeometry bufgeoms = [];
scales_num = 20;
n_vertices = 10;
scale_radius = 2;

for (var i = 0; i < scales_num; i++) {
  var scale_points = [];

  // choose a random center of the scale on the cap
  var a = Math.random() * Math.PI * 2;
  var t = Math.random();
  var scale_center = cap_surface(a, t);

  // spawn a random point cloud around the scale_center
  for (var j = 0; j < n_vertices; j++) {
    scale_points.push(new THREE.Vector3(
      scale_center.x + (1 - Math.random() * 2) * scale_radius, 
      scale_center.y + (1 - Math.random() * 2) * scale_radius,
      scale_center.z + (1 - Math.random() * 2) * scale_radius
	);
  }

  // create convex geometry using these points
  var scale_geometry = new THREE.ConvexGeometry( scale_points );
  bufgeoms.push(scale_geometry);
}

// join all these geometries into one BufferGeometry
var scales = THREE.BufferGeometryUtils.mergeBufferGeometries(bufgeoms); Collisions check To prevent unreal intersections when spawning multiple mushrooms in the scene one needs to check collisions between them. that checks collisions using raycasting from each mesh point. Here I found a code snippet To reduce computation time I generate a low-poly twin of the mushroom along with the mushroom itself. This low-poly model then is used to check collisions with other shrooms. for (var vertexIndex = 0; vertexIndex < Player.geometry.attributes.position.array.length; vertexIndex++)
{       
    var localVertex = new THREE.Vector3().fromBufferAttribute(Player.geometry.attributes.position, vertexIndex).clone();
    var globalVertex = localVertex.applyMatrix4(Player.matrix);
    var directionVector = globalVertex.sub( Player.position );

    var ray = new THREE.Raycaster( Player.position, directionVector.clone().normalize() );
    var collisionResults = ray.intersectObjects( collidableMeshList );
    if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
    {
        // a collision occurred... do something...
    }
} Rendering and stylization Initially, I wanted to achieve an effect of 2d-drawing despite all the generation being made in 3d. The first thing that comes to mind in the context of stylization is the outline effect. I’m not a pro in shaders so I just took the . Using it I got a nice pencil style of the shroom contour. outline effect from this example The next thing on the way back to 2d is proper colorization. The texture should be a bit noisy and have some soft shadows. There is a lazy hack for those who, like me, don't want to deal with UV-maps. Instead of generating a real texture and wrapping it using UV one can define vertex colors of an object using API. More than that, using this approach the color of a vertex can be also parameterized as a function of angle and position, so the generation of a noisy procedural texture becomes slightly easier. BufferGeometry Finally, I added some global noise and film-like grain using . EffectComposer var renderer = new THREE.WebGLRenderer({antialias: true});
outline = new THREE.OutlineEffect( renderer , {thickness: 0.01, alpha: 1, defaultColor: [0.1, 0.1, 0.1]});
var composer = new THREE.EffectComposer(outline);

// <- create scene and camera

var renderPass = new THREE.RenderPass( scene, camera );
composer.addPass( renderPass );

var filmPass = new THREE.FilmPass(
  0.20,   // noise intensity
  0.025,  // scanline intensity
  648,    // scanline count
  false,  // grayscale
);

composer.addPass(filmPass);
composer.render(); Name generation For name generation, I used a simple which was trained on 1k mushroom names . To preprocess and tokenize those names I used the python library . With it, I split all names into 200 unique tokens and wrote their transition probabilities to a javascript dictionary. The JS side of the code only reads those probabilities and stacks tokens until it generates a couple of words. Markov chain from here YouTokenToMe Here are some samples of mushroom names generated using this approach: Stricosphaete cinus Fusarium sium confsisomyc Etiformansum poonic Hellatatum bataticola Armillanata gossypina mortic Chosporium anniiffact Fla po sporthrina Part 3: Finalizing Preparing for the drop To prepare a project for a release on fxhash one simply needs to change all random calls in the code to the method as . The main idea is that your code must generate unique outputs for each hash but exactly the same output for the same hash. Then test the token in the sandbox and finally mint it when the minting will be opened. That’s it! fxrand() described here This brings us to the Mushroom Atlas (what I named this collection). You can check it out and see its variations . Although it was not sold out like some of my previous works, I think that this is the most advanced and challenging thing that I’ve made in generative art yet. Hope that those who minted this token also enjoyed their fungi in the non-fungible world! here Links Three.js documentation Check it out on fxhash! My Twitter

How to Draw Generative NFT Mushrooms with Three.js 🍄

Note that under open source projects we assume the following: Node.js frameworks;Tools which can be used in Node.js;Node.js server applications;Fullstack applications (Vue, React, Angular etc. on the front-end and Node.js on backend) which use Node.js on the server side What is Node.js? Node.js is a cross-platform, open source runtime environment for executing JavaScript code outside of the browser. It is event-driven and works on a non-blocking I/O model, making it lightweight and efficient for building web applications. Node.js is just another way to run code on your computer, being just the environment for running JavaScript. With Node.js, you can run your code simultaneously on both the client and the server side, speeding up the whole process of development. Node.js’ rising popularity has also produced a wave of open source projects and tools to help developers work with the environment. A part of our admin templates has an integrated Node.js backend (you can start getting to know our products with an angular dashboard ). Pros and Cons of Node.js Pros Uses JavaScript, which is easy to learn; Shares the same codebase with both server and client side; It has seamless JSON support; Node.js has active community, with lots of code examples. Cons It is very to hard to deal with relational databases when you use Node.js; Callback hell; Performance bottlenecks with heavy computation tasks. Reasons to use Node.js in projects You can build very fast useful tools like chats, fileuploads etc;Non-blocking code. This approach helps the application not to pause or sleep, but to become available for other requests;Fast processing. Node uses V8 JavaScript Runtime engine, the one which Google Chrome uses, and – believe us – it is very fast;One environment; A great number of tools that can help in everyday development – CMS, chats, spreadsheets, form validation and other libraries;Larger community that can provide support for free or on a commercial basis. How to choose an open-source project to contribute to Number of github stars and npm downloads This is the most valuable criteria (joking!). Obviously, just because the repo is popular/widely used, it doesn’t necessarily mean it will be useful to contribute. Still a good sign, though. Documentation Documentation is probably one of the most important things to look for when you’re assessing a project. Docs are like entry points to the project. Good documentation will usually include: A README.md file in the root of the project. This should have the public API/functions listed, as well as what they do and how to use;Examples in the documentation or a separate folder containing multiple examples;Contribution guide;FAQ. Recent development and open issues You should look at the recent issues and bugs, how they’re organized. By checking these items you can know if the project is still maintained. If it’s not, you may run into the issue of some things not working that may affect your understanding of how the project works. On the other side, if a project has a lot of open issues, don’t disqualify it: these might be questions from users, ideas or non-critical bugs. Tests Having a test would be a great addition to good docs and good code structure. Structure/Code organization How well the code is organized shows the quality of the project. See the name of the folders, comments and index.js file. Other criterias Project size; The project needs to be something you use; Something you’re interested in learning; Something that your team does use. Best node.js open source projects We tried to select the projects along several lines: more than 5,000 github stars; solving one specific problem very well; being super useful in developing web and mobile applications. SheetJS Web-site: https://sheetjs.com/ Github page: https://github.com/SheetJS/sheetjs Demo: https://sheetjs.com/demo Apache License 2.0 License: 21.7k Github stars: Yes Contribution guideline: SheetJS is a node.js library that lets you manipulate spreadsheets in Excel format. It lets you do lots of things with Excel, such as creating exporting workbooks from scratch and converting HTML tables, arrays or JSON into downloadable xlsx files. There are two versions of this tool – Community and Pro, which has extended features. The library has a large community, extensive documentation and well documented contributing guide. Overall it is a dream library: being good for just one thing, it works really amazing. Please consider it for contributing. Cytoscape.js Web-site: https://js.cytoscape.org/ Github page: https://github.com/cytoscape/cytoscape.js Demo: https://js.cytoscape.org/#demos Private license License: 6.8k Github stars: Yes Contribution guideline: Cytoscape.js is an open-source graph theory library written in JS. You can use Cytoscape.js for graph analysis and visualization. It allows you to easily display and manipulate rich, interactive graphs. Cytoscape.js includes all the gestures out-of-the-box, including pinch-to-zoom, box selection, panning, and more. Cytoscape.js also has a graph analysis. The library contains many useful functions in graph theory. You can use Cytoscape.js headlessly on Node.js to do graph analysis in the terminal or on a web server. The project is good for the people who are interested in science and data. It has great docs, contribution guide and a roadmap. PDFkit Web-site: http://pdfkit.org/ Github page: https://github.com/foliojs/pdfkit Demo: http://pdfkit.org/demo/browser.html MIT License: 6.3k Github stars: No Contribution guideline: PDFkit is a super useful PDF generation library for nodes that help to create and download complex PDFs. The library supports font embedding, text, vector graphics, annotations and other features. However, the project does not have the contribution guideline and extensive documentation, making you guess how to contribute to it. ESlint Web-site: https://eslint.org/ Github page: https://github.com/eslint/eslint Demo: https://eslint.org/demo MIT License: 16.7k Github stars: Yes Contribution guideline: ESLint is a linting tool for coding, which means it performs a static analysis of the code and finds errors, patterns and lines not fitting conventional style guidelines. This adds an extra level of checking that the code works before executing it. ESLint comes with a default set of rules, but you can change them however and whenever you want. Such big names as Facebook, Netflix, Atlassian, Zendesk, Box, and PayPal – all use ESLint. This tool is essential for web developers: it helps to fix issues even before they happen. The project has extensive documentation, contributing guide, as well as huge community and even sponsors interested in the development of this useful tool. Axios – Web-site: Github page: https://github.com/axios/axios – Demo: MIT License: 74.9k Github stars: MIT Contribution guideline: Axios is one of the most popular projects on Github that uses node.js. It is a Promise-based HTTP client for the browser and node.js. It can help you do all of these things: Make XMLHttpRequests from the browserMake http requests from node.jsSupports the Promise APIIntercept request and responseTransform request and response dataCancel requests Express.js Web-site: https://expressjs.com/ Github page: https://github.com/expressjs/express – Demo: MIT License: 49.2k Github stars: Yes Contribution guideline: This is one of the trending modular open source projects on Node.js. Express offers tremendous value since it makes HTTP requests efficient even when you are working with JavaScript, an out-of-browser and server-side language. Also, Express is a non-opinionated framework. Express is helpful with fulfilling the tasks related to app security and speed. It is very often associated with the MEAN (MongoDB, Express, Angular, Node.js) stack used to build web applications.As a part of the MEAN.io framework stack, Express.js is also the optimal choice for building enterprise-size applications. Notable features: URL-based routing mechanism using the HTTP methods; Various plugins and extensions support; Easy database integration. The tool has a very robust website with a lot of examples. Documentation is translated into several languages. Additionally, the community is strong and ready to help. A good choice to contribute to, if you’re an experienced developer. Socket.io Web-site: https://socket.io/ Github page: https://github.com/socketio/socket.io – Demo: MIT License: 50.1k Github stars: No Contribution guideline: Socket.IO enables real-time, bi-directional and event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed. A popular way to demonstrate the two-way communication Socket.IO provides is a basic chat app. With sockets, when the server receives a new message, it will send it to the client and notify them, bypassing the need to send requests between client and server. Notable features: Real-time analytics; Binary streaming; Instant messaging and chat; Document collaboration (like in G Docs). Date-fns Web-site: https://date-fns.org/ Github page: https://github.com/date-fns/date-fns – Demo: MIT License: 22.8k Github stars: Yes Contribution guideline: Date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. It works well with modern module bundlers such as webpack, Browserify, or Rollup. Date-fns is built using pure functions and always returns a new date instance instead of changing the passed one. With the support of an amazing community, date-fns has dozens of locales. Every function has a detailed description with examples. The documentation is accessible both online (at the website) and offline thanks to JSDoc annotations. Also the community is really, really strong and supportive. It is totally worth investing your time in development of this tiny but helpful library. Strapi Web-site: https://strapi.io/ Github page: https://github.com/strapi/strapi Demo: https://strapi.io/demo MIT License: 27k Github stars: Yes Contribution guideline: Strapi is an open-source headless content management system (CMS). It is a backend-only system that functions using RESTful APIs. Strapi’s goal is to fetch and deliver your content in a structured manner across any device. It provides a lot of features, including file upload, a built-in email system, JSON Web Token (JWT) authentication and auto-generated documentation. In addition, the content structure built through Strapi is extremely flexible: you can create and reuse groups of content and customizable APIs. Nest Web-site: https://nestjs.com/ Github page: https://github.com/nestjs/nest – Demo: MIT License: 28.4k Github stars: Yes Contribution guideline: Nest is a progressive Node.js framework for building efficient, reliable and scalable server-side applications. It uses TypeScript, combining elements of Object Oriented Programming and Functional Programming. Under the hood, Nest uses Express, but also provides compatibility with a wide range of other libraries. Nest gives you true flexibility by allowing use of any other libraries thanks to modular architecture. The tool is very mature and useful, with a good documentation and contribution guide. Cube.js Web-site: https://cube.dev/ Github page: https://github.com/cube-js/cube.js – Demo: MIT License: 8.2k Github stars: Yes Contribution guideline: Cube.js is an open source modular framework to build analytical web applications. It is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application. Cube.js was designed to work with Serverless Query Engines like AWS Athena and Google BigQuery. Multi-stage querying approach makes it suitable for handling trillions of data points. Most modern RDBMS work with Cube.js as well and can be tuned for adequate performance. It is essentially not a monolith application, but a set of modules, each doing one thing really well. Cube.js provides modules to run transformations and modeling in data warehouse, querying and caching, managing API gateway and building UI on top of that. We at Flatlogic even built a demo and wrote an article on how to build an application using Cube.js: you can . check it out Meteor Web-site: https://www.meteor.com/ Github page: https://github.com/meteor/meteor – Demo: MIT License: 48.1k Github stars: Yes Contribution guideline: Meteor is designed as a full-stack JavaScript platform for developing apps and solutions for web and mobile. Meteor supports all three major JS frameworks: React, Vue and Angular. The main advantages of the Meteor framework are: The same code supported across different devices; A number of ready-made modules in the default package accelerating the development; Large community offering dozens of reusable packages and modules. Giants like IKEA and Mazda use meteor for their needs. The project has an excellent web-site and documentation, feeling very mature. It is totally a good choice to contribute for professional developers. Electron Web-site: https://www.electronjs.org/ Github page: https://github.com/electron/electron – Demo: MIT License: 84.2k Github stars: Yes Contribution guideline: If you are making client-side or web-based apps, Electron will simplify the development process in a great way. It uses the same codebase for web apps and desktop apps. If a graphical user interface (GUI) is imperative for your app or product, Electron will be perfect for you. Since it deploys web technologies, it works very well even with complex UI/UX modules. Electron uses JavaScript and Node.js, as well as HTML and CSS. Electron provides great assistance when there is a need for building cool cross-platform Node JS projects for Linux, Windows or MacOS. Notable benefits: Compatibility with most platforms including Mac, Linux and Windows; Using Chromium engine enables all the best features of Chrome and the ability to use developer tools, storage access, etc.; It can be used without utilizing much of the computational power. There also are a great website, comprehensive docs and a large active community. Hackathon starter – Web-site: Github page: https://github.com/sahat/hackathon-starter Demo: https://hackathon-starter.walcony.com/ MIT License: 30.3k Github stars: No Contribution guideline: This is a boilerplate for Node.js web applications. The project is as generic and reusable as possible to cover most use cases of node.js web apps, without being too specific. You can even use this as a learning guide for your projects, if, let’s say, you’re only interested in Sign in with Google authentication and nothing else. It was built using a simple bootstrap theme and has dozens of API examples, including Instagram, Facebook etc. Features: Local Authentication using Email and Password; OAuth 2.0 Authentication via Facebook, Google, GitHub, LinkedIn, Instagram; Flash notifications; MVC Project Structure; Bootstrap 4 + Extra Themes; Contact Form; Account Management; Password Management. The authors welcome others to fix issues and contribute to the project with the new use cases. Conclusion We’ve mentioned some of the most popular and useful open source products developed on node.js. We also tried to be helpful with choosing open source projects for contribution. We hope you’ve found some interesting Node.js open source projects to try, or actively contribute to. If you found this article interesting, please share it and give us feedback! Previously published at https://flatlogic.com/blog/14-best-node-js-open-source-projects/

Stories, News & Mentions about FILMUP

Filmup’s Stories on HackerNoon